Canvas interactions
The canvas interactions group every gesture you perform directly on the page preview, without going through the side panel: selecting several blocks with a lasso, moving an element with the mouse, resizing or rotating a block with its handles, adjusting an inner margin, navigating between slides of a carousel…
These interactions are designed to be direct and natural: what you see on the canvas is what you'll get on the published site, with no back-and-forth between the preview and a settings form.
Common gestures
| Gesture | Doc page |
|---|---|
| Drag a rectangle in empty space to select several blocks | Rectangle selection |
| Drag a block to move it or transfer it to another section | Move a block |
| Grab a corner or edge handle to resize | Resize |
| Grab the rotation handle to rotate a block | Rotate |
| Stretch the top or bottom of a section, or add a section above/below | Section adjustment |
| Adjust inner margins from inside the block | Inner spacing |
Visual feedback during editing
While you move or resize a block, the editor shows visual markers to help you align your blocks precisely.
| Visual feedback | Doc page |
|---|---|
| Frame of the target area with the grid dimensions | Target marker |
| Grid pattern, alignment lines and spacing indicators | Guides and alignment |
Floating tools above the selected block
When a block is selected, one or more tools appear right next to the selection.
| Floating tool | Doc page |
|---|---|
| Action bar (lock, group, align, duplicate, delete…) | Block action bar |
| Rich-text editor on a single block | Text editing |
| Common rich-text editor across several text blocks | Multiple text editing |
| Forced opening of a dropdown menu during edit | Open dropdown menu |
| Navigation between slides of a carousel being edited | Carousel editing |
For non-visual settings of a block (link text, form configuration, carousel options…), see the side panel. For purely visual formatting (colors, borders, shadows, animations), see the style panel.