Style a section — spacing, colours and animations

Adjust one section's breathing room, override its colours, and add entrance animations.

Who can do thisowneradmin

Select a section and open the Style tab in the drawer.

Spacing

Presets for the space above and below a section.

Spacing is what makes a page feel considered. The usual mistake is too little: sections that run into each other read as one dense block, and nothing stands out.

Increase spacing around anything you want noticed. A registration call to action with generous room around it gets seen; the same block wedged between two others does not.

Colours for this section only

Colors (this section only) overrides the theme for this one block.

Use it deliberately and rarely — one dark band between light sections gives you a natural break and draws the eye. A page where every section has its own palette stops looking designed and starts looking accidental.

If you find yourself overriding most sections, change the theme instead.

Layout, background and corners

Per-section controls for the background, corner rounding, and layout options where the section type offers them.

Keep corner rounding consistent across the site. Mixed radii is one of those details nobody consciously notices and everybody feels.

Entrance animations

Sections can fade or rise into view as someone scrolls, set per element group — headings, text, images, buttons, cards.

Restraint is the whole game here:

Use one animation style across the site, not a different one per section.
Animate a section, not every element inside it.
Never animate anything above the fold. A hero that fades in makes your site feel slow.
Never animate the registration button. Nothing between someone and registering.

Some visitors have reduced-motion turned on for accessibility reasons and will see no animation at all. Your page must work completely without them — so animation is decoration, never something that carries meaning.

What happens next

Style changes are in your draft until you publish. Check them on Mobile, where spacing behaves differently.

Common problems

Sections run together. Not enough spacing. Increase it on both.

Text is unreadable on a coloured section. A per-section background with theme text colours. Set the text colour in the same override.

Animations do not play. Reduced motion is enabled on that device, or the section is already in view on load.

The page feels slow and jumpy. Too many animations. Remove most of them.

A section looks fine on desktop and cramped on mobile. Spacing scales down. Check every section on the mobile preview.