Style presets and site CSS

Style presets

A style preset is a named look, such as "Primary button" or "Feature card", defined once for the whole website and applied to as many elements as you like.

• Create a preset from a styled element: select it and save its style as a preset.
• A preset stores desktop, tablet, mobile and hover styles together.
• Apply it from the inspector's preset control. The element keeps a link to the preset.
• Edit the preset and every element that uses it changes.
• Presets go live when any page of the website is published, so a half-finished change never reaches visitors.

Use presets for buttons, cards and headings that must look the same everywhere. Use Theme Studio for colours and fonts.

Copy and paste style

To copy a look once without a preset, select the source and press ⌘⌥C, then select the targets and press ⌘⌥V.

Website stylesheet

Each website has one custom stylesheet shared by all its pages, edited in the builder next to the page CSS. Like presets, it goes live when a page is published.

The order on a published page is: the theme, then the website stylesheet, then the page's own CSS. A page can always override a website rule.

See Custom code for page CSS and scripts.