---
title: "Interactions sur la canvas de l'éditeur"
description: "Maîtrisez tous les gestes à la souris sur la canvas : sélectionner, déplacer, redimensionner, pivoter un bloc et ajuster les marges sans passer par le panneau."
url: https://docs.vivlab.com/editor/interaction/
---

# Interactions sur la canvas

Les **interactions sur la canvas** regroupent tous les gestes que vous effectuez directement sur l'aperçu de la page, sans passer par le [panneau latéral](https://docs.vivlab.com/editor/menu/index.md) : sélectionner plusieurs blocs au lasso, déplacer un élément à la souris, redimensionner ou pivoter un bloc avec ses poignées, ajuster une marge intérieure, naviguer entre les slides d'un carrousel…

Pour **faire glisser**, appuyez sur le bouton de la souris, gardez-le enfoncé pendant le déplacement, puis relâchez. **Shift+clic** signifie maintenir la touche Maj enfoncée pendant le clic. Une **poignée** est un petit repère autour de la sélection que vous déplacez pour la régler.

Ces interactions sont conçues pour être directes et naturelles : ce que vous voyez sur la canvas est ce que vous obtiendrez sur le site publié, sans aller-retour entre l'aperçu et un formulaire de réglages.

## Les gestes courants

| Geste                                                                               | Page de doc                             |
| ----------------------------------------------------------------------------------- | --------------------------------------- |
| Tracer un rectangle dans le vide pour sélectionner plusieurs blocs                  | [Sélection rectangle](https://docs.vivlab.com/editor/interaction/drag-select.md) |
| Glisser un bloc pour le déplacer ou le transférer dans une autre section            | [Déplacement d'un bloc](https://docs.vivlab.com/editor/interaction/move.md)      |
| Saisir une poignée d'angle ou de bord pour redimensionner                           | [Redimensionnement](https://docs.vivlab.com/editor/interaction/stretch.md)       |
| Saisir la poignée de rotation pour pivoter un bloc                                  | [Rotation](https://docs.vivlab.com/editor/interaction/rotate.md)                 |
| Étirer le haut ou le bas d'une section, ou ajouter une section au-dessus/en dessous | [Ajustement de section](https://docs.vivlab.com/editor/interaction/parent.md)    |
| Ajuster les marges intérieures depuis l'intérieur du bloc                           | [Espacement intérieur](https://docs.vivlab.com/editor/interaction/padding.md)    |

## Les retours visuels pendant l'édition

Pendant que vous déplacez ou redimensionnez un bloc, l'éditeur affiche des repères visuels pour vous aider à aligner précisément vos blocs.

| Retour visuel                                                       | Page de doc                                |
| ------------------------------------------------------------------- | ------------------------------------------ |
| Cadre de la zone cible avec les dimensions de la grille             | [Repère cible](https://docs.vivlab.com/editor/interaction/target.md)                |
| Trame de la grille, lignes d'alignement et indicateurs d'espacement | [Repères et alignements](https://docs.vivlab.com/editor/interaction/canvas-grid.md) |

## Les outils flottants au-dessus du bloc sélectionné

Quand un bloc est sélectionné, un ou plusieurs outils apparaissent juste à côté de la sélection.

| Outil flottant                                                         | Page de doc                                           |
| ---------------------------------------------------------------------- | ----------------------------------------------------- |
| Barre d'actions (verrouiller, grouper, aligner, dupliquer, supprimer…) | [Barre d'actions du bloc](https://docs.vivlab.com/editor/interaction/block-action.md)          |
| Éditeur enrichi de texte sur un seul bloc                              | [Édition de texte](https://docs.vivlab.com/editor/interaction/block-text.md)                   |
| Éditeur enrichi commun à plusieurs blocs textuels                      | [Édition de plusieurs textes](https://docs.vivlab.com/editor/interaction/block-text-global.md) |
| Ouverture forcée d'un menu déroulant pendant son édition               | [Menu déroulant ouvert](https://docs.vivlab.com/editor/interaction/block-menu.md)              |
| Navigation entre slides d'un carrousel en cours d'édition              | [Édition d'un carrousel](https://docs.vivlab.com/editor/interaction/swiper.md)                 |

Pour les réglages **non-visuels** d'un bloc (texte d'un lien, configuration d'un formulaire, options d'un carrousel…), reportez-vous au [panneau latéral](https://docs.vivlab.com/editor/menu/index.md). Pour la mise en forme purement visuelle (couleurs, bordures, ombres, animations), reportez-vous au [panneau de style](https://docs.vivlab.com/editor/style/index.md).