Sections

What is a section?

A page is a series of sections placed one below the other: a welcome banner, an introduction, testimonials, a form… Each section contains text and blocks, and has its own appearance.

Adding a section

Between two sections, a divider carries a + button (Add section): click it to insert a new section at that spot. You can also type / in a page and choose Section. Then fill it with text and blocks.

Moving, duplicating, deleting

These commands are on the divider at the top edge of each section. Move the mouse over the page: between two sections a line appears with, in the middle, a six-dot handle (its tooltip: Drag to move, click for commands) and the round + button.

• Drag the handle up or down to move the section.
• Click the handle to open the menu of the section just below it: Style, Move up, Move down, Duplicate and Delete.

Delete removes the whole section and everything in it, without asking for confirmation. If you make a mistake, undo it straight away with Cmd+Z on a Mac or Ctrl+Z on Windows.

Once you have clicked in a section, the Section tab of the right-hand panel also offers the same commands at the very top: Move section up, Move section down, Duplicate section and Delete section.

Deleting an empty section

An empty section is deleted the same way, with the handle on the divider just above it or from the Section tab. Even simpler: click in its empty line and press Backspace, and the section disappears. Cmd+Z or Ctrl+Z brings it back.

The site header and footer have no handle: they cannot be moved or deleted.

Setting a section’s appearance

Click inside the section, then open the Section tab in the right-hand panel:

• Color palette: Default, Soft, Accent or Bold. The colours come from your style: alternating palettes gives the page rhythm without ever leaving your brand guidelines.
• Layout and Spacing: the width and the breathing room around the content.
• Background image / video, with an Overlay to keep the text legible, the Position and Blur. For an image, the Fixed background switch keeps it still while the content scrolls over it, on computers and phones alike.
• Full screen: the section takes up the full height of the screen.
• Text layout: spreads the text over 2 or 3 columns, with a drop cap or justified text if you wish.

Section effects

• Animated ambience: a living background drawn from the style’s colours (Aurora, Glow, Grid, Dots, Mesh, Constellation, Waves, Liquid). A background image replaces it.
• Heading entrance: the words of headings rise or reveal themselves as they come into view.
• Statement text: the words light up as you scroll. Best kept for one strong sentence.
• Stacked sections: the section stays at the top of the screen while the next one slides over it, like a deck of cards. Turn it on for 2 to 4 consecutive sections.

These effects play on the site, in the preview as well as online. Other effects are set for the whole site in Shapes, effects and animations.