Which editor is this for? This guide covers the new Site Editor. You are in the right place if your toolbar has a Media button and your assistant is called Ellie. If it does not, you are on the Site Tuner — see the Site Tuner guides instead.
The Style button in the toolbar opens the Style editor. It controls how your website looks, separately from what it says. The top half applies to your whole site; the bottom half applies to the section you currently have selected.
Site wide
Style families
A style family is the overall design direction — how sections are composed, how much white space they use, how images and headings are treated. The options are Local Pro, Clean and Sleek and Skyline, with your current one ticked.
This is the biggest single change available here, so try it early, before you spend time on smaller adjustments.
Look
Choose the visual theme that best fits your brand: Light or Dark. One of them is marked Recommended for your site.
Colours
Four colours are used across your whole website, each with a job:
Colour | Where it is used |
Main | Primary elements and backgrounds |
Accent | Decorative elements and icons |
Highlight | Urgent calls to action and promotions |
Neutral | Borders, shadows and text |
Each shows its hex value and can be edited. Ready-made Palettes are listed below, and Already have a brand? lets you start from colours you already use.
Typography
Pick a font pairing for headings and body text — for example Classic Serif (elegant serif headlines, clean readable body) or Geometric Balance (geometric headlines, approachable body). A sample at the top shows the pairing before you commit.
Per section
The lower half of the panel applies to one section at a time.
Choosing a section
The Section row shows the current section and its position on the page — for example Hero · 2/12, meaning the second of twelve sections. Use the up and down arrows to step through the page.
Changing a section's design
Change <Section> design is a layout picker. A counter such as 26/30 means you are on variant 26 of 30 available layouts for that section; the arrows move between them.
Spacing
Two rows set the space above and below the section, each offering None, L, M and S. Adjust these when a section feels cramped or adrift from the one next to it.
Animation
A switch turns transition animations on or off for that section.
Nothing here goes live on its own
Style changes are saved to your site like any other change, and reach your visitors when you publish. Check a style change on Mobile as well as Desktop before you do.