Sections and variants

Pages are built from sections stacked top to bottom. Each section has a type, like Hero or Pricing, and a variant, which is the layout you pick for that type.

Add a section#

1. Hover the canvas between two sections, or at the top or bottom of a section, until Add section appears. On an empty page it is always shown.
2. Click Add section.
3. Pick a section type on the left, then click a variant on the right.

The new section is added where you clicked. Add section points are hidden while something is selected, so click an empty area or press Escape until nothing is selected.

Section types#

Hero comes in several layouts: text only, with an image, on the left or right half, and with a 3D widget on either side.

Move, duplicate or delete a section#

Hover a section to show its controls in the top right corner:

• Section settings opens the settings described below.
• Move section up and Move section down change its order.
• Duplicate section adds a copy below it.
• Delete section removes it. Use undo if you delete one by mistake.

Section settings#

What you see depends on the section:

• Size: Padding at the top and bottom (on every side for sections that span the whole window edge to edge, whose sides aren't set by the page; their left and right padding is their margin, and the grid sits inside it) and, for some sections, Height (Fit content, Full screen, or the video's height). A Full screen section is at least as tall as the window and grows if its content is taller. In the mobile view this card is called Size on phones and changes only the mobile layout.
• Background: None, Colour or Video. For a video you can turn Autoplay, Loop and Muted on or off, set Fit to Fill the section or Show whole, and add an Overlay colour with an Overlay strength.
• Animation: a Scroll animation as the section comes into view: None, Fade, Fade up, Scale, or Fade up + scale.
• Site effects: turn off Include this section to keep pointer effects from reacting over it.

Edit what's inside#

Click any text, image, button or container inside a section to select it. A toolbar appears with options for that element. The Layers panel on the left shows everything in the page as an outline, which helps when items are small or overlap. To move an element, point at it and drag the grip that appears at its left edge, or press Alt (⌥) and an arrow key. While you drag, the page shows where it will land; press Esc to cancel. Once selected, an image, divider, card or column can also be dragged by itself; text keeps the pointer for selecting words, so it moves by its grip. To make a text, an image or an icon a link, select it and click Add link in its toolbar, then pick a page on your site or enter a web address. Options that only change phones, such as Hide on phones and showing a row's second column first, appear when you switch to the mobile view.

Everything side by side lines up with your site's grid of 12 columns, so edges match from section to section:

• Columns: select a row of columns and pick Column widths to choose how many grid columns each one takes, for example 6 / 6 or 3 / 9. A single column can take part of the width, such as 6 of 12 columns, and the row's alignment places it. A centred row leaves the same number of grid columns free on each side, so it offers only widths that can be centred.
• Cards, plans and other repeated items: pick Arrangement to show them stacked or 2, 3, 4 or 6 per row. Each takes an equal share of the grid, and more items wrap onto the next row. A row that isn't full follows the list's alignment, so one or two plans sit in the middle. To make items narrower, pick more per row: three plans at 4 per row are each a quarter of the width, centred.

The space between side-by-side columns and items is the grid's, so Spacing doesn't change it on a computer; on a list of cards or plans, Spacing sets the space between its rows. What sits inside a column or card (text, buttons, an icon beside its label) isn't on the grid and keeps its own spacing. On phones, columns and items stack as before.

Select a card to give it a photo behind its content: click Background in its toolbar and choose an image. From the same menu you can Change image, set Fit to Fill the card or Show whole, add an Overlay colour with an Overlay strength so text over the photo stays readable, or Remove background. A card's text uses your theme's colours, so pick a calm photo, or an overlay that contrasts with your text. To make cards taller, select a card or its list and pick Height: Fit content, Short, Medium or Tall. Every card in the list changes together, and in the mobile view it's Height on phones.

To add a line, hover between two elements, click + and choose Divider. It spans the full width of its column, and its colour and thickness come from your theme. Select it to move or delete it like any other element.

Header and footer#

The header and footer show on every page. They look on the canvas as they do on your site.

• Edit an item: click the logo, a link, a button, a footer group's title or a social icon to change it. A link's or button's editor sets its label and where it goes, adds a dropdown, moves it left or right, or deletes it. A group's editor renames it and has Add link.
• Add items: in the header, Add logo, Add link and Add button show where each goes until there is one; then hover the links or the buttons and click + to add another. The footer works the same way: Add logo, Add social icon, Add link group and, in each group, Add link show where each goes, and + adds another on hover.
• The menu: when the header's links don't fit its width, they fold into its menu button, as on phones, and the button shows how many it holds. Click the menu button (or, in the phone view, the menu icon) to see everything in the menu: click one to edit it, or add a link or a button.
• Settings: click Header settings or Footer settings in the toolbar. Clicking the © line opens the footer's settings too.

Header settings:

• Design: pick a design. Each is shown with your own logo and links, and switching keeps them.
• Position: Scrolls with page keeps the header at the top of the page, so it scrolls away with it. Sticky floats it at the top of the window as a rounded bar of frosted glass, with the page blurred behind it as visitors scroll. It fades out while a page transition plays and back in when the new page is shown. Either way, your first section starts below the header.
• Background: the header's colour. A sticky header's Bar color is separate, so each position keeps its own. Clear either to follow your theme.
• Phone menu: the font, weight and colours of the full-screen menu on phones. Its links and buttons are the header's, and its social icons are the footer's.

Footer settings:

• Design: pick a design.
• Background: the footer's colour.
• Copyright: the name after © and the year. Leave it blank to show your site's title.