Design

---

 

Site Builder Design Basics

The design page in Site Builder enables you to customize the look and feel of your website, in a way that most closely resembles your business brand. To access the design screen, locate the main navigation menu on the left side of your screen and click on the link labelled Design. This will bring you to the design screen in your Site Builder account.  

 

 

From here, you will see three main tabs: Style, Branding & Custom. Let's begin by looking at the style tab.    

 

 

---

Here, you can choose a style for your website. You are able to select a colour scheme for your pages as well as the fonts that are used for the page titles and body text. It's important to realise at this point that the options here may vary slightly from theme to theme. For instance, some themes have four areas for which you can choose your colour palette, whereas other themes offer only three.  

 

 

 

Theme Documentation: Please refer to the Style section in your theme specific documentation for full details on the colour pallette available to you and which aspects of your design they will influence.

 

     

---

 

The branding tab allows you to really make the website your own by uploading a company logo and favicon.  

 

Company Logo

When it comes to the logo, you have two choices. You can either choose to display the site title which you input during the setup process or, you can upload an image file of your actual company logo. If you wish to change the name of your site and use that as the logo, you can do so at Settings > Site Details. You will need to update the Site Name field. If you wish to upload a logo click on Use Image.  

 

 

A new field will open below and you can either drag your logo file onto that field or, click Select an Image to choose the file from your computer.  

 

 

Remove Logo

To remove the logo you have uploaded, hover over it the design pane and you will see a small trash can appear in the lower right corner.  

 

 

Click on that and the logo will be removed. You will now be using the site title again.  

 

Favicon

The favicon is a small icon that appears in the browser address bar, tabs, and bookmarks. Uploading a custom icon will help your website stand out a bit to the customer. Below, you can see an example of the favicon used by Checkfront.  

 

 

Upload your favicon in the same way as the company logo by either dragging it onto the upload area or, clicking Select an Image.  

 

 

The icon you upload should be a maximum of 60px tall and 60px wide.  

 

 

---

 

The custom tab enables you to further customise the look and feel of your website. Depending on the theme you are using, you can choose the way your header and footer looks in terms of the colour scheme, plus various other aspects of your design.  

 

Theme Documentation: Please refer to the Custom Settings section in your theme specific documentation for full details on the settings available to you here and how to configure them.

 

   

---

 

If design isn’t your forte, each theme comes with two presets that adjust the fonts and colours for you. The elements of each preset are designed to be complementary to each other and provide your website with a couple of different looks.  

 

 

Steps to Change Website Preset

1. In Site Builder, click on Design in the left sidebar.

2. Click on the cog in the top right corner of the design window.

3. Select a theme preset from the drop-down menu.

4. Uncheck any of the three preset update options you don't wish to apply the change to. These are Colours, Fonts & Custom Settings.

5. Click Update.  

 

 

---

 

From time to time, theme developers may update the Site Builder themes to improve functionality and security. There are two places in which you can see the availability of an update for the theme you are using.

 

 

First of all, theme updates will be indicated by a small green dot on the Design link in the left sidebar. Secondly, a green dot will be displayed by the Settings icon at the top of the design pane. This is accessed by clicking on the design link in the left sidebar. Clicking on this icon will open the settings pane where you will see a Theme update available message.  

 

 

Click Update Now to begin the update process. You will see a confirmation message. Simply click Update to continue.  

 

 

Once the update has completed, a confirmation message will appear on the screen.  

 

 

Click okay to dismiss this message and continue working on your Site Builder website.  

 

Theme Documentation: Please refer to the Theme Presets section in your theme specific documentation for full details on the presets available to you here and how they will affect the look of your web pages.