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.

To reuse a section on other pages, choose Copy to a page… in its handle menu or in the Section tab. Tick the pages, then place the copy at the top or at the end of each page. Each copy is independent, and a single Undo removes the copy everywhere.

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.

Reusable sections

Opening hours, a call to action, a reassurance banner: a reusable section is the same on every page that uses it, content and style included. Edit it once, and every page follows.

1. On a page, click the section’s handle and choose Save as reusable section….
2. Give it a Name, then click Save. This name is only used to find it in TOWeb: it does not appear on the site.
3. On another page, click the + button between two sections, then choose Empty section or one of your Reusable sections.

On the page, a reusable section shows how many pages use it. Edit opens it on its own, in its own screen, and the change applies to all those pages. Detach turns it into an ordinary section, on this page only.

The Reusable sections button in the Pages screen lists them, so you can Rename or Delete them. Deleting a reusable section loses nothing: each page that used it keeps a copy, which you can edit separately.

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.

Hiding a section

Do not publish, in a section’s menu, keeps it in the page, editable and marked Unpublished, but out of the published site. Publish the section puts it online at the next publication.

In the inspector’s Section tab, Show on chooses the screens where the section appears: Desktop, Tablet and Mobile. Turn off Mobile to hide, for example, a large visual on phones. In the editor, the section stays visible with a badge, and the device preview shows the result.