Themes & styling
Colours and fonts in the builder work at two levels: a theme that sets the look of the whole site, and per-element styling for one specific section or block. Knowing which one you want is most of the answer.
Change the background colour of one section or element
This is what people usually mean by "change my background colour" - one band of the page, not the whole site.
- Open the builder and click the section or element you want to change.
- In the right-hand panel, open the Properties tab.
- Find BG Color and pick your colour.
Alongside it you will also find BG Image, BG Position, BG Repeat and BG Size, for using a picture as the background instead of a flat colour.
This affects only the element you selected. Nothing else on the page moves or changes.
Change the look of the whole site
Open the Design tab in the builder's left panel. It has three things:
| Control | What it does |
|---|---|
| Theme presets | A ready-made combination of colours and fonts. Picking one restyles every page at once - the fastest way to change the whole feel of the site. |
| Site Color Mode | Switches the site between Light and Dark. This is the closest thing to a single "make my site dark" switch. |
| Brand Colors | The palette your components draw from: primary, secondary, success, info, warning, danger, light and dark. |
Brand Colors are not a page-background picker. Each one has a job, shown under its name in the panel: primary is buttons, links and calls to action; secondary is muted text and borders; light is light backgrounds and cards; dark is dark backgrounds and text. Changing primary recolours your buttons - it does not repaint the page behind them. If you want the page itself lighter or darker, use Site Color Mode, or set BG Color on the sections you want changed.
Fonts
Fonts live in the same Design tab as part of the theme. Each preset lists its heading and body font under the preset name, so you can see what you are choosing before you apply it.
Which one should I use?
- "I want this one band to be grey." Select it, Properties, BG Color.
- "I want the whole site darker." Design, Site Color Mode, Dark.
- "I want a different look entirely." Design, pick another theme preset.
- "I want my buttons to match my logo." Design, Brand Colors, primary.
Good to know
- Changes are saved as you work and appear on the canvas immediately, but visitors only see them after you Publish.
- Starting from a template gives you a theme someone has already balanced, which is usually easier than building a palette from scratch.
- Keep to a couple of fonts and a small palette. Sites look unfinished when every section has its own colour.