How to Work with Weebly Website Templates

I remember when I built my first website in 1996. It was exhilarating to learn HTML and eventually have your site uploaded online. And yes, back then we only had HTML since CSS arrived late to the party.

When I think about my first site, it was, ahem, exciting-looking. The reason why I say this is because all the pages had a different look. You could try to use a technique called SSI (Server Side Includes) to make the pages look a bit more uniform, but that was it.


More...

Back then, all you could do was just to write the HTML code by hand because there weren’t any website editors then.

Now we have all these cool online site builders, and they are a great aid when it comes to building websites. Especially, if you want to have a uniform look on all your pages, site builders are essential tools for this.

In this post, we are going to look at Weebly website templates, and how they can make your website look uniform and professional. I also show you where to find new templates, if you think that the templates that Weebly provides you aren’t enough.

Weebly Website Templates Introduced

You can access Weebly templates by going to themes page:

Weebly website templates page

When you enter the page, you can see that it is divided into multiple categories. So, go ahead and pick your preferred category (in my case, I chose Business) and hover over the theme thumbnail that looks interesting. Once you have done the this, the thumbnail could look like this:

Weebly single theme hover

You can either preview the theme or choose it to be used on your website. For instance, when you click the Preview link, you get this kind of view with this particular theme:

Weebly theme preview

A word of caution is in order here: If the preview doesn’t work or acts otherwise in a funny manner, try clearing your browser’s cache first. The preview mode didn’t work for me until I cleared my cache.

Or perhaps you want to find more information about the theme. In that case, click the thumbnail of the theme directly and you land the theme’s details page:

Theme details

On this page, you see the basic description of the theme, and its features. In a world of mobile devices, make sure that the theme is mobile responsive (see the previous image). This ensures that your site is viewable on any device, not just with desktop browsers.

Installing the Template for Your Site

There are three ways that you can interact with Weebly’s themes:

  • Picking a theme when building a new website.
  • Changing a template for an existing site.
  • Creating the template by yourself.

In this section, I talk about the first two.

The third, creating your own template, is out of the scope of this tutorial. However, I briefly touch this topic later in this post. And hopefully, sometime in the future, I’ll write a detailed post about how to create a template for your Weebly website, from scratch.

Building a New Website

The first time you touch website templates is when you start creating a new website. The creation process is straightforward:

1) Log into your Weebly account, click the down-pointing arrow on the dashboard and then click Add Site:

Add site

2) You’ll be then asked to choose the type of site you want to build. For this demonstration, I wasn’t going to sell anything online, so I chose Not Now:

Add site - choose type

3) Then, you’ll be taken to the theme selection page:

Add site - choose theme

4) Once you have picked your theme by clicking its thumbnail, you’ll land the preview page:

Add site - preview theme

5) When the template has been selected, click the blue Start Editing button at the top right. Your chosen theme will be applied to your site in minutes:

Add site - start editing

6) Finally, your website is loaded in the editor, and you can start customizing it for your needs.

Changing a Template for an Existing Site

The second time you work with templates could be when you change the theme for your existing website. This is different than when compared to Wix, where you have to stick with the template you have selected in the beginning. In other words, there is no way of changing it there afterwards.

To change your template on an existing Weebly website, take the following steps:

1) Log in to your Weebly account.

2) Pick the existing site you have and click the Edit Site button:

3) Weebly loads your existing site into the editor. Click the Theme link at the top navigation bar:

Change template navigation

4) Once you click the Theme link, you’ll see the following options in the left-hand corner:

Weebly left side theme options

Here is a brief explanation what each of these sections mean:

  • Colored Buttons: Changes the theme colors on elements, like on the buttons or the links (see the previous screenshot for color buttons).
  • Change Theme: Changes your current theme. This link opens the Weebly’s Themes page, where you can pick your new theme (see Step 5).
  • Change Fonts: Change the fonts on your site:
Change fonts

For instance, when you hover over any of the links (like Navigation Menu in this case), you’ll see the affected area of your site:

Change fonts - navigation hover

When you click the arrow pointing right, you’ll see the actual font settings you can change:

Change fonts - font settings
  • Theme Options: This setting gives you access to various theme-related options, like banners or navigation:
Theme options

5) Pick the theme you’d like to use. Click the Change Theme button on the left (see the screenshot earlier in this chapter), and then pick the theme you like on the theme page. In this case, I chose Wag & Paws theme:

Choose a new theme

6) After a brief moment, the new theme is chosen for your site:

New theme chosen

Ok, so your next question (or at least, I had this question) could be: Is this a new theme since nothing seems to have changed? And the answer is: Yes.

The outlook change may not be that radical, like when compared to WordPress themes. Still, the style has changed in this case a bit, in the form of new fonts and new colors.

Finding New Templates (Outside Weebly)

One piece of criticism I have heard related to Weebly’s templates is that their designs are so average. So, if don’t find the current templates offered by Weebly enticing, there are other places to find templates:

 *Please note that I haven’t tested these templates myself.

Creating Templates by Yourself

Ok, so you now know how to work with templates. But what if you’d like to build a template of your own? This is indeed possible with Weebly, although you should have solid HTML and CSS skills under your belt.

If you remember, I mentioned that this post is not a tutorial when it comes to building your Weebly templates. Instead, I suggest that you look at the starting point for any Weebly developer when building your own themes, Weebly Developer Center:

Weebly Developer Center

This page gives you all the basic information to get started with Weebly website templates.

If you want to create a theme of your own, make sure to follow How to Create a Theme tutorial. And to modify an existing theme, follow the tutorial called Customize a Weebly Theme.

Conclusion

As you can see, Weebly offers some helpful ways to work with page templates, either by changing them on the fly, customizing the existing one, or creating your own templates.

And if you are not into building your own themes, you can always go to other marketplaces like Webfire Themes or Bamboo Studio, to find new premium templates for your website.

Timo
 

I'm into building websites and writing detailed reviews about site builders. When I'm not at my computer, you can find me spending time with my family or training for marathons or for triathlons.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: