Using Colour theme in Website Builder

With "Colour theme" in Website Builder, you can set a complementary colour scheme for your website and ensure that the same colours are used consistently across all pages.

It will also automatically change the colour of a button component, for example, to match the background colour of the box, strip, or section in which it is placed. You can always turn off colour theming if you prefer to set your colours manually.

• Enable Colour theme
• Edit a Colour theme
• Disable Colour theme

Note: Enabling "Colour theme" in an existing site will change all colours in your site to the palette you select. Disabling it will revert everything back to how it was before.

Enable Colour theme

Colour theme is enabled by default when you create a new website and is based on the template you select to begin with. You only need to activate it if you have an older website or if you deactivated it at some point.

1. Click the Colour theme button in the bottom-right corner.
2. Click on the slider on the top-left side of your workspace to enable it.
3. Click through the onboarding screens and finally click Apply colour theme.

Edit a Colour theme

You can edit each of the four colours from your colour theme individually. We recommend first deciding on the primary colour for elements such as background and buttons. This will help you find colours for accents and texts that complement your main colour.

1. Click the Colour theme button in the bottom-right corner.
2. Click the pencil icon next to the active colour palette.
3. Click on the colour you want to change, for example, the main colour.
4. Select one of the recommended main colours or find a colour you like in the colour picker.
5. Click Save at the bottom of the screen to save your changes.

Disable Colour theme

If you prefer to select colours manually, you can easily turn off colour theming. If you manually activate "Colour theme", deactivating it will revert all colours to their original state.

1. Click the Colour theme button in the bottom-right corner.
2. Click on the slider on the top-left side of your workspace to disable it.
3. Select Yes, switch off in the pop-up window to confirm.
4. Click Save and Publish to make your changes visible online.

Related articles:

• How do I show my Instagram feed on my Website Builder site?
• How do I use Google Fonts in Website Builder?