Your website starts with a theme that provides a coordinated design, but you don't have to keep everything exactly as it is.
Style Settings lets you change the overall look and feel of your website — from colours and typography to spacing, cards, buttons and other common elements. Changes made here are used throughout the website, helping you create a consistent design without styling every page individually.
Tip: You don't need to change every setting. Start with your colours and fonts, then make smaller adjustments only where they help your website better reflect your business.Start with the overall appearance
Choose whether your website uses a light or dark appearance as its starting point.
This sets sensible default colours for elements such as text, links, buttons, borders, dividers and form controls. You can then customise individual colours where you want something different.
Use the live preview while making changes to see how headings, body text, buttons, cards and other elements work together.
Choose your colours
Your colour settings are one of the quickest ways to make the website feel like your own.
You can customise areas including the page background, panels and cards, accent colour, contrast areas and the colours used for their text and elements.
If you already have brand colours, you can enter their colour codes. If you're still deciding, use the colour picker and suggested palette to experiment with combinations.
Design tip: A small, consistent colour palette is usually more effective than using lots of different colours. Choose a main background, readable text colour and one or two colours for emphasis and contrast.Choose your typography
Fonts have a surprisingly large effect on the personality of a website.
Style Settings lets you control your main body text as well as headings, website name, navigation, card and product titles, buttons, prices and other text elements. Individual heading levels can also be adjusted separately.
As well as choosing a typeface, different areas can have controls for properties such as size, weight, style, line height, colour and alignment.
Tip: Try to keep typography simple. One font for headings and another for body text is often enough to give a website a distinctive look while keeping it easy to read.Style your headings
Headings give pages structure as well as personality.
The different heading levels — H1 through H6 — can be styled to create a clear visual hierarchy between page titles, main sections and smaller subsections.
Your H1 is normally the main page heading, with H2, H3 and subsequent levels used to organise the content beneath it.
Try to make the levels visually distinct without making every heading dramatically different.
Adjust spacing and layout
Style isn't only about colours and fonts. The amount of space around content can completely change how a website feels.
You can set default spacing for shortcode containers, including outer margins, padding inside cards, panels and containers, section spacing, and gaps within grids, splits and stacks.
You can also choose default text alignment and how items within layouts are aligned.
A site with more space can feel calm and spacious, while tighter spacing can create a more compact design.
Tip: Consistency matters more than finding the “perfect” amount of space. Setting sensible defaults here means you won't need to specify spacing every time you build a page.Choose how cards and components look
Cards, panels, feature entries, image cards and buttons can share a default surface style.
Depending on the look you want, these elements can use the theme default, an outlined appearance, your accent styling or a contrasting style. You can also adjust how rounded the corners of components and media appear.
This is a useful way to make broad design changes across the website while keeping individual elements consistent.
Style your website header
The website name and navigation can have their own typography.
This lets you create a header that suits your branding without requiring the rest of your website to use exactly the same typography. For example, your website name might use a distinctive display font while the navigation remains simple and easy to read. The header menu styling applies specifically to the public navigation and its dropdowns.
Make products and promotions fit your design
If you use the shop, Style Settings also lets you customise elements used specifically for selling.
Card and product titles can have their own typography, allowing product listings to remain consistent with the rest of your design.
Sale labels can also be customised, including their wording, colours and shape, so promotional information doesn't have to look separate from the rest of your brand.
Prices have their own typography settings too, while previous prices on sale items remain visually distinguished from the current price.
Customise badges and highlights
Badges and highlights are useful for drawing attention to small pieces of information throughout your content.
You can customise their default colours and text size so that they work with the rest of your palette.
Use them selectively for things such as:
Important notices
Short labels
New or featured information
Helpful tips
Small pieces of information you want visitors to notice
Use the preview while you experiment
You don't need to know exactly what you want before you begin.
The Style Settings screen includes previews so you can see how different choices work together while you make changes.
Try a font, adjust a colour or change a component style and look at the overall effect rather than concentrating on one setting in isolation.
If something isn't working, many settings can simply be returned to the theme default.
Start simple
When setting up a new website, a good starting point is:
Choose light or dark appearance.
Set your main colours.
Choose your body font.
Choose the typography for your main headings.
Check your website name and navigation.
Decide whether you prefer square or rounded components.
Review the overall spacing.
Look through several real pages before making smaller adjustments.
You can then customise individual elements later if you need to.
Design tip: Don't judge a style from the settings screen alone. View your homepage, a content page and, where relevant, a product or booking page to see how your choices work across the whole website.Make the theme your own
Think of your website theme as the starting design, rather than something you have to replace.
Style Settings lets you keep the structure and responsive behaviour of the theme while changing the visual details that give your website its own character.
Start with a few broad choices, keep things consistent and refine the details as your content grows.
Go further with custom CSS
Style Settings are designed to handle the most common design changes without requiring you to write code. But if you're comfortable with CSS — or you're working with someone who is — you can take the customisation further.
The website's built-in elements provide the structure and functionality, while custom CSS opens the door to changing how those elements are presented. This can be useful when you want to go beyond the options available in Style Settings and create something more specific to your own design.
You might use CSS to refine spacing, borders, colours, sizing, positioning, responsive behaviour or other visual details of built-in elements.
Tip: Use Style Settings for your main website design first. Custom CSS is most useful for the finishing touches or for changes that aren't already available through the standard controls.Start with the built-in controls
Where possible, it's better to make broad design choices through Style Settings. These settings are designed to work consistently across your website and make future changes easier to manage.
Custom CSS can then sit on top of those choices when you need more control.
This creates a useful progression:
Theme → Style Settings → Custom CSS
Start with the theme's defaults, customise the overall design through Style Settings, then use CSS where you want to go beyond the built-in options.
You don't need to know CSS to create or manage your website. But if you do, the built-in elements give you a useful foundation to customise rather than requiring you to build everything from scratch.
CSS tip: Keep customisations focused and document anything significant you change. CSS can be powerful, but simpler overrides are generally easier to understand and maintain later.
