Search The Hostwinds Guides Knowledge Base

How To Select And Manage Theme Options With Weebly

Share This Article

Weebly Website Builder is available to Hostwinds clients customers who have a shared or business web hosting service.  In this article we will discuss how to install and manage your theme(s), theme options, changing fonts, turn the guide on and off, as well as editing your HTML/CSS options.  Prior to beginning, you will need to be logged into your cPanel and have already started with a Weebly site.

Weebly Themes

When building your Weebly site you will be able to choose a theme during installation and setup.  Feel free, at any time, to pick any theme as you will have the option to change and edit your theme once logged in and editing your site.

Once logged into your site, locate the Theme icon at the top of the page

Weebly Theme Location Image

You will be presented a theme column on the left hand side.  To manage your current theme option, click on Change Theme.

Change Theme Button Location Image

The theme gallery will open with the available and current options for you to select from.  The choices are vast and hovering over any theme will allow you to preview a larger image or idea about your selection prior to choosing.  Select Choose in the bottom right of the theme you want to select to change your current theme to your new one.

Weebly Theme Gallery Image

Changing your theme will not impact your current images and texts (blogs for example), however, the fonts may be changed depending on the theme you chose.  Your layout will change likely as well, like your menu options and positioning. 

Can I Import My Own Theme?

By selecting the same Change Theme button from your Theme column, you will be presented an Import Theme option in the top right corner of the Theme Gallery.

Import Theme Location Image

You will be prompted with a screen outlining the requirements and steps to import your own theme as the example shown below demonstrates.  Click on Select a Theme to upload the theme you wish to use.

Weebly Import Domain Requirements Image
Your directory and file locations can be found from your cPanel >> File Manager >> public_html location

Theme Options

Custom theme options allow you to quickly change specific styling aspects of your Weebly site without touching any code.  Each theme will offer different options to customize the current theme loaded.  To see your available options, select the Themes tab as described above and proceed to clicking on Theme Options.

Weebly Theme Options Location Image

As an example, the below image shows the Theme Options available according to the theme selected.  In the example, the Header Color is turned off, taking away the red tint overlay on the image that the below navigation bar has.  Header Fade on Scroll is left on, allowing the entire header to appear as if it disappears and appears as a user scrolls away or towards the top of the page.

Weebly Theme Options Image

Changing Fonts

Changing fonts within your website builder can be accessed and modified under the Themes column as described above.  Once you have selected themes, select Change Fonts.

Change Fonts Location Image

After selecting Change Fonts, the column will change to Design Options.  Each available selection will change your websites entire settings concerning that specific area.  For example (see image below), if you select Headline, it will highlight the Headline area of the current page you are working on to show what you might be editing.  However, it’s worth noting, editing Headline will change any and all Headlines among your entire site.

Font Header Highlight Selection

After selecting Headline (continuing our example), you will be presented multiple options to edit your Headline areas.  As shown below, among the available options provided, we changed the color to purple.  This immediately changed the Headline “Hostwinds” to the chosen color, along with any and all other Headline areas among your website.

Change Fonts Headlines Example Image

The outcome of selecting Headline from the available options will be similar to selecting any of the other options.  However, each selected area may have slightly different available options depend on the theme you have chosen and the area you are trying to edit.

I Don’t Want To Change All The Fonts Of A Category Among My Entire Website

You can change the individual font of areas by selecting the item you wish to change (typically double clicking on the intended area).  This will only change the font of the item you select, and will override any changes made previously or later from your Design Options.

Weebly Individual Font Change Image
Example of selecting the Hostwinds Headline for individual customization. Selecting the A drop-down will change the color of this individual Hostwinds Headline.

Grid Guide On And Off Feature

What do the Guides do? They’re draggable vertical and horizontal bars that help you align things evenly on your pages while working in the editor.  The Grid Guide by default is set to off, and can be turned on (and off) by selecting the toggle next to Guides (see below image #1).  You can use your mouse to adjust the lines left, right, up and down (see below image #2) to get perspective of dimensions and size of your webpage.

Weebly Guide On and Off

Edit HTML/CSS

If you are bold enough, you can explore the final option within the Theme area titled Edit HTML/CSS.

Weebly Html/CSS Image

Editing your HTML / CSS will bring up all of your Style Spreadsheets (CSS), among other important directories and folders concerning the HTML / CSS code you may want to try and manually edit.  Selecting Save in the top right corner will save your current changes.

Weebly HTML / CSS Image

Unless you are familiar with HTML and CSS, as well as web management of directories, we strongly discourage the use of this feature.  At a minimum, we recommend taking a back-up prior to any of these manual changes.