Customize site theme

How to create a cohesive design across your website

Every template comes pre-set with a site theme that creates a cohesive design across your website. You can leave the default in your template or you can customize your site theme.

What is a Site Theme?

The Site Theme section is a part of the website editor lets you make  changes to you website template which apply a set design across your entire website.  Site theme allows you to quickly and efficiently make sweeping visual changes, reducing overall design time and most importantly, keeping your site's style consistent across all pages. It includes text, buttons, images, background, and navigation widgets that you can configure from the design panel.

To navigate to Site Theme:

In the left panel of your website template navigation, click Design to open Site Theme.

We recommend you first decide on a global style, and then make customizations to parts of your site that you want to stand out or look different than the rest.

Please note: Changes that you make to specific widgets or pages will override site theme. For example, if you change the font size by clicking on a text widget, you are overriding the set text size.

Learn more about Site Theme here.

Step 1: Your website colors

Step 2: Text style

This section lets you control Text Style for your site, both for text and titles of all sizes (H1 to H6). Change the font size, style, color, and other edits that will affect the text for all future paragraph and title widgets.

Note

H1, H2, H3, etc. is a short form of representing font size and style in the HTML language. The H refers to 'Heading Tags'.  Next, there is a number that can usually range from 1 to 6. These numbers from lowest to highest directly relate to the relevance that the content has, the higher the number the more importance it will have. On a website, the  title of at the top of the page is typically H1, while titles for page subsections in the body are H2 and so on.

Learn more about Text Style here.

Step 3: Button style

This section lets you control the style of the button widgets on your site. Select one of our button designs and set the background color, border style, and text. Choose other effects like adding rounded corners or shadows to the button.

Note

Enable the toggle to Hide the Back to Top button on mobile.

Image style

This section lets you control the style of the image widgets on your site. Select an image using the image picker and add or edit the border style, rounded corners, or shadow effects.

Row style

This section you to define the global row design in terms of background color, default row spacing and default column spacing.

Note

Edits made on individual rows will override the global row settings.

Site background

This section lets you control Background Style for your site. Choose between using a color or image as your background. Changes also affect the desktop and tablet.

Site layout

Control the site layout navigation on desktop, tablet and mobile. For the desktop version, you can choose from two widths: 960px or 1200px.

Note

Changing your navigation's layout often affects the behavior of your header and sometimes the rest of your site. If your header suddenly looks incorrect after changing the layout, try a different layout.