---
title: "Canvas interactions in the editor"
description: "Master every mouse gesture on the canvas: select, move, resize, rotate a block and adjust spacing without going through the side panel."
url: https://docs.vivlab.com/en/editor/interaction/
---

# Canvas interactions

The **canvas interactions** group every gesture you perform directly on the page preview, without going through the [side panel](https://docs.vivlab.com/en/editor/menu/index.md): 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…

To **drag**, press the mouse button, keep it pressed while moving, then release it. **Shift+click** means holding the Shift key while clicking. A **handle** is a small control around your selection that you drag to adjust it.

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](https://docs.vivlab.com/en/editor/interaction/drag-select.md) |
| Drag a block to move it or transfer it to another section            | [Move a block](https://docs.vivlab.com/en/editor/interaction/move.md)               |
| Grab a corner or edge handle to resize                               | [Resize](https://docs.vivlab.com/en/editor/interaction/stretch.md)                  |
| Grab the rotation handle to rotate a block                           | [Rotate](https://docs.vivlab.com/en/editor/interaction/rotate.md)                   |
| Stretch the top or bottom of a section, or add a section above/below | [Section adjustment](https://docs.vivlab.com/en/editor/interaction/parent.md)       |
| Adjust inner margins from inside the block                           | [Inner spacing](https://docs.vivlab.com/en/editor/interaction/padding.md)           |

## 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](https://docs.vivlab.com/en/editor/interaction/target.md)             |
| Grid pattern, alignment lines and spacing indicators | [Guides and alignment](https://docs.vivlab.com/en/editor/interaction/canvas-grid.md) |

## 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](https://docs.vivlab.com/en/editor/interaction/block-action.md)           |
| Rich-text editor on a single block                   | [Text editing](https://docs.vivlab.com/en/editor/interaction/block-text.md)                 |
| Common rich-text editor across several text blocks   | [Multiple text editing](https://docs.vivlab.com/en/editor/interaction/block-text-global.md) |
| Forced opening of a dropdown menu during edit        | [Open dropdown menu](https://docs.vivlab.com/en/editor/interaction/block-menu.md)           |
| Navigation between slides of a carousel being edited | [Carousel editing](https://docs.vivlab.com/en/editor/interaction/swiper.md)                 |

For **non-visual** settings of a block (link text, form configuration, carousel options…), see the [side panel](https://docs.vivlab.com/en/editor/menu/index.md). For purely visual formatting (colors, borders, shadows, animations), see the [style panel](https://docs.vivlab.com/en/editor/style/index.md).