Appearance controls the colours visitors see on buttons, links, and backgrounds. Start here before you add custom CSS.
1. Open Customise Website
Log in and open Websites.
Click the website you want to update.
In the left sidebar, open Customise or Customise Website.
2. Open Appearance Editor
Click Appearance Editor.
You will see the colour and style controls for this website.
3. Pick a colour scheme
Choose the scheme that is closest to your brand.
The preview updates as you pick a scheme.
Check a few pages, including the home page and a blog post.
4. Fine-tune if needed
If one colour is still off, stay in Appearance Editor and adjust the values you need.
Use How to Add Custom CSS only for small leftover tweaks.
5. Understand the colour controls
The exact labels depend on the active template, but Appearance Editor normally separates colours by purpose rather than by individual page.
- Primary or accent: the main brand colour used for primary buttons, active links, highlights, and selected states.
- Secondary: supporting buttons, badges, or contrasting interface elements.
- Text and headings: foreground colours used on light surfaces.
- Background or surface: page sections, cards, navigation areas, and other large containers.
- Light and dark variants: softer backgrounds and high-contrast areas used by the template.
A colour scheme changes every component that reads those theme values. That is why one primary-colour change can update buttons, links, pagination, and highlights across many pages at once.
6. Choose a safe scheme
Start with a preset that is already close to the brand, then adjust only the values that need attention. Keep readable contrast between text and its background, and reserve the strongest colour for important actions.
- Check primary and outline buttons in normal and hover states.
- Check links inside paragraphs as well as navigation links.
- Check cards on both white and tinted backgrounds.
- Check headings, muted text, borders, and form fields.
- Review at least one page and one post on desktop and mobile.
7. Know what Appearance does not change
Appearance changes theme-driven colours and presentation. It does not rearrange page sections, replace templates, or rewrite component content. Use Templates for structure, Page Builder for sections, and Custom CSS only when a small visual exception is still needed.
8. Publish
Click the black Publish button in the top right.
Open your live site and check buttons, links, and mobile layout.
Pro-Tip
Keep call-to-action colours the same on every page. Do not switch schemes often on a live site.