Where to find this: Services → Website → Website Editor
Every element on your website can be styled to match your brand. This guide covers both your global theme and styling individual elements.
Global Theme Settings
Your theme sets the colours, fonts and spacing used across your whole website. Open the Theme tab in the left panel of the editor — it's the last of the five tabs, with a palette icon.
The Theme tab is split into three sub-tabs: Colors, Type and More.
Colors
Set your brand colours once and they're used throughout your site:
Above these sits Custom Colors, where you can save any extra colours your brand uses so they're on hand when you're styling elements.
Enter your exact brand colours as hex codes (for example #FF5733) so they match your printed materials.
Type
Set your website's text under the Type sub-tab:
- Font Family – Choose from the available web fonts.
- Base Font Size – The standard size of body text.
- Line Height – How much space sits between lines, from Tight through Normal to Loose.
- Heading Sizes – Fine-tune the size of each heading level.
More
The More sub-tab holds the rest of your global styling:
- Brand Logo – The logo used with your theme.
- Spacing Scale – The default rhythm of padding and margins across your site.
- Border Radius – How rounded corners are, from sharp to pill-shaped.
- Actions – Copy CSS Variables puts your theme values on the clipboard, and Reset to Defaults puts the theme back to how it started.
- CSS Preview – A read-only look at the values your theme is producing.
Styling Individual Elements
Select any element on the canvas and the Properties panel on the right shows the settings for that component. Which sections appear depends on the element, but these are the common ones.
Size & Layout
Width and height, along with minimum and maximum sizes, and how the element lines up inside its parent.
Spacing
Margin is the space outside the element, between it and its neighbours. Padding is the space inside, between its content and its edge. You can set all sides at once or one side at a time.
Colors and Background
Colors covers the element's Background, Text Color and Border Color. Where a component supports a background image, the Background section adds size, position, repeat and a dark overlay.
Border
Border thickness, style and colour — for all four sides together or each side on its own — plus corner rounding, either all round or corner by corner.
Effects
Opacity and shadows, for a little depth.
Typography
For text elements: Font Family, size, weight, line height, letter spacing, Text Color and alignment. Anything you set here overrides your theme for that element only.
Content Layout
On containers, rows and columns: the Direction children flow in, and how they're aligned and spaced.
Animations
Elements can animate gently into view as a visitor scrolls down the page. You'll find Animation in the element's settings in the Properties panel.
Turn on Enable Animation and three controls appear:
Type
Five animations are available:
There's a small preview box with a play button so you can see the effect before you settle on it.
Trigger Point
How much of the element has to be on screen before the animation starts, shown as a percentage.
Delay (ms)
How long to wait before the animation runs — pick from 0, 100, 200, 300 or 500. Staggering the delay across a row of cards makes them appear one after another.
Use animations sparingly. Too many at once feels busy and makes a page seem slow.
Responsive Design
Preview Different Devices
Use the device buttons in the header to preview Desktop, Tablet and Mobile. On a narrow browser window these move into the ⋮ menu at the right of the header.
Responsive Adjustments
The Configurable Grid component lets you set a different number of columns per screen size — for example three across on desktop and one on mobile. Set them under Responsive Columns in the grid's settings, where each size has its own dropdown (leave one on Auto to let the grid decide).
Other settings, including text sizes, use one value across every screen size. Preview on mobile to check your choices read well on a small screen.
Style Presets
Using Theme Colours
When you pick a colour for any element, your theme's palette is offered alongside a free choice. Sticking to theme colours keeps your site consistent — change your primary colour later and everything using it updates at once.
Component Variants
Many components come with ready-made styles. Under Button Style (or Alert Style), the Variant setting offers Primary, Secondary, Success, Danger, Warning, Info, Light and Dark — and buttons add Outline Primary and Outline Secondary for a lighter look. All of them follow your theme colours.
Best Practices
-
Start with your theme – Set your colours and fonts globally before styling individual elements.
-
Use theme colours – Pick from your palette rather than typing one-off colours.
-
Maintain hierarchy – Use size, weight and colour to show what matters most.
-
White space matters – Don't crowd elements; be generous with padding and margin.
-
Test on mobile – Most visitors are on a phone.
-
Keep it simple – Two or three fonts and a handful of colours look more professional than a dozen.
-
Use shadows subtly – Light shadows add depth; heavy ones look dated.
-
Animate purposefully – Animate the things you want noticed, not everything.