Repères et alignements
Pendant que vous déplacez ou redimensionnez un bloc, l'éditeur affiche en surimpression plusieurs repères visuels pour vous aider à aligner précisément vos éléments. Ces repères ne s'affichent que pendant l'interaction et disparaissent une fois le bloc relâché.
Trame de la grille
La canvas est structurée par une grille de colonnes et de lignes invisibles en temps normal. Pendant un mouvement, des lignes pointillées grises apparaissent pour rendre cette grille visible. Les blocs s'alignent automatiquement sur cette grille, ce qui garantit une mise en page cohérente.
Les lignes principales (toutes les 32 colonnes sur desktop, 24 sur mobile) sont plus marquées que les lignes secondaires.
Lignes d'alignement
Quand votre bloc en cours de mouvement aligne un de ses bords ou son centre avec un autre bloc de la même section, une ligne violette s'affiche pour confirmer l'alignement. Six alignements sont détectés :
- Bord gauche, droite, haut, bas.
- Centre horizontal ou centre vertical.
Cela vous évite de tâtonner pour aligner deux blocs au pixel près : il suffit de glisser jusqu'à voir apparaître la ligne, puis de relâcher.
Repères de taille équivalente
Quand votre bloc a la même largeur ou la même hauteur qu'un autre bloc de la section, des traits roses s'affichent autour des deux blocs pour vous le signaler. Pratique pour donner exactement la même taille à plusieurs cartes côte à côte.
Indicateurs d'espacement
Dès que plusieurs blocs sont espacés régulièrement entre eux (même intervalle des deux côtés ou plus), des pastilles noires affichent la valeur de l'écart en pixels. C'est ainsi qu'on confirme que trois colonnes sont également espacées, ou qu'un bouton est centré entre deux paragraphes à distance égale.
Centrage dans la section
Si vous centrez un bloc par rapport au centre de sa section parente (horizontalement, verticalement ou les deux), un trait pointillé violet traverse la section pour confirmer le centrage exact.