How to Customise the Website Builder Template

After you've selected a Template for your website, you can easily customise its Theme so it matches your personality or brand, whether you're setting up a blog or business.

Customising your Theme is also the first thing we recommend that you do, before adding content. It saves you time and effort from having to set the same fonts and colours that you want for each element within your Template, over and over again.

Note: Each Feature or Block that you add to your website is still fully customisable by accessing its individual editing options.

Here are the steps you'll need to customise your Website Builder Template, along with complete descriptions of each element:

1. Log In to Website Builder.
2. You will now be routed to the Website Builder Dashboard.
3. Hover your mouse pointer over the project/website that you wish to customise and click EDIT.
4. Click Theme from the left-side menu to customise the following elements of your Website Builder Template.
   

   Colours	Customise the Template Colours using any of the 3 options: Select a preset group of Colour Themes from the drop-down list. Manually set the Colours you prefer to use for the following: Primary The main theme colour. Secondary The second theme colour used for contrast. Text The default text colour. Light Text The alternative text colour used for darker backgrounds. Complementary The colour used as accent for special elements. Click the Colour Wizard to upload your logo, or any photo, whose Colours you'd like to use for your website's Theme. Drag the (5) dots around the image to set the Colours to use from the image and click Take Colours. Drag and drop the Defined Colours to use as Primary, Secondary, Text, Light Text, and Complementary; then click Save when done.
   Fonts	Customise the Font Type and Style to use for your Template's Heading and Body Text using these steps: Font Type - Click on the current Font Type and select a new one from the drop-down list. Font Style - Click Style and select a preferred Font Style from the drop-down list. You can also Use One Font Only for both Heading and Text by enabling this option.
   Headings	Customise your Template's Banner Text, Main Heading, Heading, Small Heading, Subheading, and Text using these options: Font Size & Line Spacing - Drag their corresponding bars to adjust. Text Style - Click on the current style to view and select from the drop-down list. Text Format - This is set to Default. Click on it to view and select from the drop-down list.
   Links	Customise the style for displaying Text Links on your website with the following steps: Select a Link Style from the drop-down list. This is how the Text Link reacts once the mouse pointer is hovered over it. Note: To preview the action for the Style selected, hover your mouse pointer over the sample Text Link in the preview panel on the left-side. Click on the respective icons to further customise the appearance of your Text Links.
   Buttons	Customise your Button's appearance by clicking on the corresponding icons under each style: Primary Solid, Secondary Solid, Primary Outline, and Secondary Outline. Clicking on the Gear Icon under each style will allow you to change the shape of the Button. Note: To use any of these styles, click on a Button on your website, then click the Gear Icon. Or, if the Button is within your Menu Block, hover your mouse pointer over it and click Edit. The Button style options will appear under Type.
   Quotes	Customise the Style to use for displaying Quotes on your website by selecting a preferred option from the drop-down list, then personalising its Design using the respective icons. This applies in customising both your Primary and Secondary Quotes.

Congratulations! You just customised the Website Builder Template to match your brand. Any updates or changes made to your projects are automatically saved as soon as they are made, for as long as you are connected to a stable internet connection.

Note: Click the Reset link at the top of the left-side menu to revert to the Template's Default settings.