Section variants
Every section you add in the builder belongs to a family (such as a hero, gallery, or pricing block). Inside that family, a variant is one specific layout for the same content. This page explains how variants change a section's look, how to switch between them, and how they relate to your website's active theme.
What a variant is
A family groups sections that do the same job. A variant is one design option within that family. For example, a hero family might offer a centered variant, a split image variant, and a full-bleed variant. They all hold the same kind of content (a heading, some text, a button), but each one arranges and styles it differently.
When you switch variants, your content stays put. Variants only change the layout and styling around your content, not the content itself.
Choosing a variant when you add a section
You pick a variant the moment you create a section:
- In the builder, click Add section in the top toolbar, or hover the section list on the left.
- Choose a family. The flyout (or the Insert Section dialog) shows every available variant for that family as a live thumbnail.
- Click the variant you want. The section is added to the canvas using that variant.
Each thumbnail is a real preview rendered in your active theme, so what you see is what you get.
Switching variants on an existing section
You can change a section's variant at any time without losing your work:
- Click the section on the canvas to select it. The settings panel opens on the right.
- At the top of the panel, under Browse variants, you'll see thumbnails of the other variants in that family.
- Click a thumbnail to switch to it. If the family has more than a few options, click Browse all variations to open the full library and search by name.
The canvas updates immediately, and your change is saved automatically.
Your content is kept safe
The builder separates your fields into two groups, shown in the settings panel:
- Base holds shared content that survives variant changes, like your heading and main text. This stays the same no matter which variant you pick.
- Variant holds fields that only the currently selected variant uses.
Because base content is shared, you can try several variants freely. If a variant adds its own extra fields, those values are remembered per variant, so switching back restores what you had entered before.
How variants relate to your active theme
Variants come from your website's active theme (also called its kit). The kit decides which variants exist for each family and how they look. You'll see the current kit shown as a badge in the builder toolbar, for example "Minimal kit".
A few things follow from this:
- The variant thumbnails and the live preview always reflect your active theme's styling.
- If your theme doesn't include a particular family, that family won't appear in the Add section list.
- Your chosen variant is remembered per kit. If you switch your website to a different theme, each section uses that theme's matching variant where one exists, and your content carries over.
To change which variants are available, change your theme. See Themes for how to pick and manage a theme for your website.
Previewing and publishing
Use the device buttons (desktop, tablet, phone) and the dark mode toggle in the canvas toolbar to check a variant across screen sizes before you commit. When you're happy, click Publish (or Publish changes) to make the layout live. Until then, your variant changes stay in the draft.