Sections and variants

Pages are built from sections stacked top to bottom. Add Section groups them by what they're for, like Intro or Pricing, and each one comes in several layouts.

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 category on the left, then click a section 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.

Sections by category#

Add Section lists only the sections the page can hold: Next project appears on a project's page, and a gallery or portfolio that fills the whole page takes no other sections.

A card can show what a section does beyond stacking: Full screen, Edge to edge, Pins while scrolling, Holds the scroll, Follows the pointer, Loops or 3D.

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 Image's height / 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, Color, Image or Video. Choosing Image or Video opens your uploads and stock media; Change image or Change video picks another. Set Fit to Fill the section or Show whole, and add an Overlay color with an Overlay strength. For a video you can also turn Autoplay, Loop and Muted on or off.
• Motion: turn off Animate this section to keep it still when your site's motion has sections arrive as visitors scroll to them. Sections with a video, a 3D widget or a moving gallery always stay still.
• 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 first click selects the outermost part under the pointer, such as a column; each click after that goes one level in: a list (such as an FAQ's questions or a row of buttons), then one of its items, then the text or image itself. To change what a text is set in, select it and pick a style from Text style in its toolbar (Display, H1, Lead, Body and the rest); it takes that style's font and size from your theme. Text set to Fit to width grows to span its column on one line, and its box is its letters, from the top of its capitals to its baseline, so it lines up with what's beside it by its letters rather than by the space around them. 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. Linked text is underlined, so visitors can tell it from the text around it; links in the header and footer aren't. When a visitor points at linked text, its underline sweeps off to the right and back in from the left. Buttons and links in a new section don't go anywhere until you set them this way. A link to a page that doesn't exist, or no longer does, goes to your home page. 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. Two columns can split their row any way, each at least 2 grid columns wide, and the menu always includes the widths the row has now. A Project showcase section is one such row: select the section to change its widths, and add another showcase for each project you want to feature. A single column can take part of the width, such as 6 of 12 columns, and the row's alignment places it. A centered row leaves the same number of grid columns free on each side, so it offers only widths that can be centered.
• 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, centered.

The space between side-by-side columns and items is the grid's, the same across your site, so neither Spacing nor dragging the gap changes 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 color with an Overlay strength so text over the photo stays readable, or Remove background. A card's text uses your theme's colors, 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.

In Arrangement, Layered puts a list's items on top of one another in one box instead of one after another. The box is as tall as the tallest item, and each item is drawn over the ones before it. Drag an item within the box to place it at the top, middle or bottom, and left, center or right; this moves it in the box, not in the list. To bring an item in front of another, drag it lower in the Layers panel. Where items overlap, a click selects the one in front, and the Layers panel reaches the others. On phones, layered items are stacked. The Rows with images section is built this way: its label sits over the first row without taking any space, so every row stays the same when you add, copy or delete rows.

To draw lines between items in a grid, like a table, select the list and click Lines between items. Lines run between the items, between the rows and around them all, in your theme's divider style, and the items meet with no space between them. Click Remove lines to take them off.

In a FAQ, select the list of questions and pick Marker to choose what each question is shown beside: Caret, Plus and minus (a minus while the answer is open) or Plus and cross (the plus turns into a cross while the answer is open). From the same menu, put it Before the question or After the question. Before the question, the answers line up under the questions. The marker takes your theme's accent color. In the editor every answer is shown, so each marker is drawn open.

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

To add a tag, a short label in a box such as a discipline or a year, hover between two elements, click + and choose Tag. It takes your theme's tag styles: the Tags colors, the Tag type and the Tags borders, set in the theme panels (see Colors, type and borders). It doesn't link anywhere. Select it, then click its text to change it. Hover beside a tag and click + to add another next to it.

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, a social link or the © line 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. The © line's editor sets the name after © and the year; leave it blank to show your site's title.
• Text logo: in the header's logo dialog, choose Text instead of Image and type your name or brand on one line. It's set like your header links: same font, color and hover, rolling with them when Link hover is Roll. Switching back to Image brings back your uploaded logo.
• Social links and ©: your site has one set of social links and one © name. The footer, the phone menu and the Columns header show the same ones, so a change in one shows in all of them.
• 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 link, 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.
• No footer: set Footer to Off in the Layout panel or in Footer settings, and your pages end at their last section. The footer keeps its content, so turning it back on brings it back.

Header settings:

• Design: pick a design. Each is shown with your own logo and links, and switching keeps them. Columns sets your logo, links, social links and © line in four columns lined up with your page's grid, every label in capitals. It shows up to four links; with more, it shows MENU, which opens the menu with all of them. With more than four social links it shows the first three and MORE. It shows no buttons; they're kept, and come back if you switch design.
• 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. A sticky Columns header spans the page instead, with no bar: the page shows through it unless you give it a Background. 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.
• Links: on a sticky header, Link hover sets how its links answer the pointer. Color changes their color. Roll also slides the label up and out while the same label rises in from below.
• Background: the header's color. 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 colors of the full-screen menu on phones. Its links and buttons are the header's, and its social icons are your site's. With the footer off, it also shows the © line.

Footer settings:

• Footer: On or Off, as in the Layout panel.
• Design: pick a design.
• Background: the footer's color.
• Copyright: the name after © and the year. Leave it blank to show your site's title.