Barre latérale et barre d'outils de l'éditeur de page

L'éditeur de page maintient le canevas au centre et regroupe tous les contrôles du générateur dans une seule barre latérale à droite, empilés de haut en bas. Une barre d'outils supérieure permet d'enregistrer, de publier et d'afficher un aperçu sur appareil. Vous pouvez réduire la barre latérale pour agrandir la largeur du canevas.

Il n’y a pas de barre latérale gauche distincte pour les blocs ou les paramètres : tout se trouve à droite.

Aperçu des fonctionnalités

Zone	Fonction
Barre d’outils supérieure	Enregistrer, publier, annuler/rétablir, prévisualisation sur appareil, afficher/masquer la barre latérale
Barre latérale de droite — rangée supérieure (icônes)	Sélecteur de panneau : Modifier, Calques ou Blocs
Barre latérale de droite — partie inférieure (en mode Modifier)	Onglets Style, Attr, Événements pour l’élément sélectionné
Toile	Composition de la page en temps réel

Barre latérale de droite — sélecteur de panneau (en haut)

Trois boutons icônes alignés en haut de la barre latérale :

Édition (icône crayon)

Mode par défaut. Sélectionnez un élément sur le canevas, puis utilisez les onglets situés en dessous (Style, Attr, Événements).

Calques

Une liste structurée de sections → lignes → colonnes → blocs. À utiliser lorsque :

Vous ne pouvez pas cliquer sur la ligne souhaitée car les blocs se chevauchent.
Vous souhaitez réorganiser des éléments imbriqués sans les faire glisser sur le canevas.
Vous devez sélectionner l'élément section pour modifier l'espacement entre les sections.

Blocs (plus icône)

La bibliothèque de blocs regroupés par catégorie (Basique, Mise en page, Portfolio, Hero, Avancé, etc.). Faites glisser un bloc sur le canevas ; déposez-le dans une colonne lorsque vous y êtes invité. Une fois le bloc déposé, la barre latérale revient généralement sur l’onglet Modifier pour vous permettre de le configurer.

Les blocs contenant beaucoup de médias sont documentés dans Blocs de présentation multimédia pris en charge. Les blocs de mise en page et de texte se trouvent dans Blocs de l’éditeur et référence de mise en page.

Barre latérale de droite — Onglets du mode Modifier (sous les icônes)

Affichés lorsque Modifier est actif et qu’un composant est sélectionné sur le canevas (bloc, ligne, colonne ou section).

Style

Apparence visuelle — espacement, typographie, couleurs, arrière-plans lorsque la plateforme les propose pour ce type de composant.

Remplissage et marges : sous Espacement, utilisez l’icône de lien pour basculer entre le mode lié (une seule valeur s’applique aux quatre côtés) et le mode non lié (définissez les marges supérieure, droite, inférieure et gauche indépendamment). Les curseurs sont limités à 160 px ; saisissez des valeurs plus grandes dans les champs numériques si nécessaire.

Largeur : une largeur fixe (par exemple 800 px) sur un bloc autonome le centre automatiquement sur la page. Pour le contenu normal d’une page à l’intérieur d’une Section → Ligne, privilégiez plutôt Ligne → Largeur maximale sous Attr — voir Mise en page et contenu.

Attr

Attributs de ce composant : sélection d’images, source du portfolio, nombre de colonnes, mode de mise en page « hero », libellé du CTA, destinataire du formulaire, etc. C’est ici que vous configurez principalement les paramètres Médias, Portfolio ou de commerce. (Certains guides appellent cela des « traits » ; dans l’éditeur, l’onglet s’intitule Attr.)

Événements

Interactivité des éléments pour le site publié : ajoutez des déclencheurs (clic, apparition au défilement, survol, au chargement) et des actions (activer/désactiver une classe, afficher/masquer, atténuer la luminosité des éléments voisins de la galerie, défilement fluide, parallaxe) sans écrire de code JavaScript. L’onglet s’intitule Événements dans la barre latérale ; l’en-tête du panneau est Interactivité des éléments.

Guide complet avec des exemples, les limites et le dépannage : Événements et interactions de l’éditeur de page.

Exemple rapide	Ce que vous configurez dans Événements
La section apparaît progressivement lors du défilement	Entrée dans la fenêtre d'affichage → Ajouter une classe + transition CSS sur cette classe
Ouverture/fermeture du menu mobile	Clic → Basculer la classe sur un panneau de menu (sélecteur `#menu`)
Grille de vignettes du portfolio	Survol : entrée → Atténuer les éléments frères ; Survol : sortie → Annuler l’atténuation sur le conteneur des vignettes
Saut vers une ancre dans la page	Clic → Défilement vers avec `#section-id`

Les interactions s’exécutent sur les pages en direct et en aperçu après avoir enregistré la page — pas nécessairement lorsque vous vous contentez de faire glisser des éléments sur le canevas. Privilégiez d’associer les interactions à la racine du bloc que vous avez sélectionnée (section, conteneur de carte, bouton), plutôt qu’à des nœuds internes profonds.

Pour les lignes, le remplissage et la largeur maximale sont généralement contrôlés depuis Attr (champs de mise en page des lignes). Si Attr et Style affichent tous deux des valeurs de remplissage, privilégiez les contrôles de ligne sous Attr pour éviter les conflits de valeurs.

Espacement de la mise en page (sections, lignes, colonnes)

L’espacement est réparti sur trois calques. Les confondre est la raison la plus courante pour laquelle une bande semble trop haute, trop courte ou décentrée après la publication.

Calque	Ce qu’il contrôle	Où le modifier
Section	Espace vertical extérieur au-dessus et en dessous de la ligne (l'espace de « respiration » de la « bande »)	Sélectionnez la section → Attr (espacement de section) ou Style
Ligne	Largeur maximale, espacement entre les colonnes, remplissage de la ligne	Sélectionnez la ligne → Attr (mise en page de la ligne) — à privilégier par rapport au remplissage des lignes via Style
Colonne	Remplissage intérieur des cellules, hauteur minimale, alignement vertical	Sélectionnez la colonne → Attr

Le remplissage de section ne redimensionne pas les éléments enfants. Augmenter le remplissage de section ajoute un espace blanc autour de la ligne ; cela **n’**étire pas les lignes ou les colonnes pour remplir la fenêtre d’affichage. Pour agrandir une bande, augmentez la hauteur minimale de la colonne ou son remplissage, ou ajoutez un bloc Spacer.

Difficile de cliquer sur la ligne ? Utilisez Calques → développez Section → sélectionnez Ligne, puis modifiez la largeur maximale ou l’espacement sous Attr.

La ligne semble décentrée ou trop étroite sur le site en ligne ? Définissez la largeur maximale de la ligne sous Attr (et pas seulement dans Style). Si Attr et Style définissent tous deux le remplissage de la même ligne, utilisez uniquement Attr.

Guide complet sur la largeur du contenu, la différence entre une section et une ligne, et quand utiliser chaque contrôle : Mise en page et contenu.

Liste plus détaillée des blocs : Référence sur les blocs de l'éditeur et la mise en page.

Barre d'outils supérieure

Commande	Fonction
Brouillon / Publier	Détermine si la page est publique (avec Enregistrer la page)
Enregistrer la page	Enregistre les modifications apportées au canevas sans nécessairement les publier
Ordinateur de bureau / Tablette / Mobile	Aperçu de la largeur de l’espace de travail
Annuler / Rétablir	Actions récentes dans l’éditeur

Workflow complet de publication : Aperçu et publication.

Éditeur de page vs onglet « Paramètres de la page »

Au-dessus du canevas, deux onglets permettent de séparer les différentes fonctionnalités :

Éditeur de page — Tout ce qui est présenté dans cet article (canevas + barre latérale droite + barre d'outils).
Paramètres de la page — Slug, champs SEO, remplacements de modèle : Paramètres et remplacements de page.

Étapes suivantes et validation

Ouvrez n’importe quelle page dans l’éditeur.
Sélectionnez un bloc → vérifiez que les onglets Style, Attr et Événements se mettent à jour sous Modifier.
Cliquez sur l’icône Couches → sélectionnez une ligne → modifiez la largeur maximale sous Attr.
Cliquez sur l’icône Blocs → faites glisser un bloc sur le canevas.
Ouvrez Événements dans une section → ajoutez une interaction Entrée dans la zone d’affichage → Enregistrer la page → prévisualisez la page publique.