Canvas and selection

The canvas is the large editing area in the middle of the screen. It shows how your page will look to visitors. Use the top bar to see the computer version, the phone version or both side by side.

This is where you select your blocks, move them, resize them and trigger the right-hand side panel. This page describes the gestures common to every element. For settings specific to each type, see the dedicated section of the side panel; for the details of each gesture, see the Canvas interactions pages.

The canvas occupies the center of the editor, with section settings on the right.

Select an element

Click on an element of the canvas to select it. The right-hand side panel then automatically adapts to the selected type (text, image, button, form…). Click on an empty area to deselect and find the global page settings.

Hold Shift while clicking to add an element to the current selection and edit several blocks at once. The side panel then switches to Multiple selection mode, which only offers the shared settings. You can also draw a rectangle over an empty area to select every touched block at once (drag select).

Move and resize

Once an element is selected, you can:

• Move it by drag and drop within its parent section, or one grid step at a time with the arrow keys.
• Resize it by grabbing its handles on the edges or corners.
• Rotate it with the rotation handle.
• Copy it with Ctrl+C / Cmd+C then paste it with Ctrl+V / Cmd+V into the currently selected section.
• Delete it with the Delete or Backspace key, or via the actions in the side panel.

The floating action bar that appears above the selection gathers the other common operations: duplicate, lock, group, align, send forward or backward, delete.

Movements and resizes are saved independently for desktop and mobile: switch to the matching preview mode before changing a block's position.

Drop an image

Drop an image file from your computer straight onto the canvas: a crop window opens, then the image is inserted where you dropped it and its alt text is filled in automatically. Pasting an image with Ctrl+V / Cmd+V works the same way, and pasting text creates a text element ready to format.

Understanding sections

A page consists of a series of sections stacked vertically. Each section groups the elements that appear together (a hero banner, a presentation block, a product grid, a contact form…).

Click outside any element, but inside a section, to open the section settings (visibility, background, margins, order…).

Edit the navigation bar and footer

The canvas also displays the navigation bar at the top of every page and the footer at the bottom. These two blocks are shared across every page of the site: editing them from a page editor updates the entire site in one go.

Click on them to open their dedicated settings (navigation bar, footer). If your site doesn't have them yet, an Add a navigation bar or Add a footer button appears in their place.

Empty page

If the page doesn't yet contain any section, the canvas shows a Start by creating a section message with a Create a section button. This button opens the library of section templates, ready to use and tailored to your site's theme.