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.
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
You will be presented a theme column on the left hand side. To manage your current theme option, click on Change Theme.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
If you are bold enough, you can explore the final option within the Theme area titled Edit HTML/CSS.
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.
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.