Styliser les sections et les widgets

Quand vous sélectionnez une Section ou un widget, deux éléments d'interface apparaissent :

1. Une pastille de sélection en ligne qui flotte au-dessus de la sélection — pour les actions rapides (ouvrir, mise en page, modifier le contenu, design, plus, Ask AI).
2. Le panneau Design à gauche — qui devient contextuel et affiche en haut les contrôles de design de l'élément sélectionné, au-dessus des réglages Design globaux de la Page.

Les deux n'apparaissent qu'en mode édition. En mode Présenter, les acheteurs ne voient ni l'un ni l'autre.

La pastille de sélection

De gauche à droite, les chips de la pastille sont :

• Demander à l'IA — la chip IA en dégradé, toujours en premier. Démarre (ou ré-ancre) un fil IA sur cette Section ou ce widget.
• Open (ouvrir — sur certains widgets) — l'action « ouvrir » du widget : plein écran pour une image ou une vidéo, ouverture du fichier pour un document, ouverture de l'URL pour un lien, édition de la personne pour un contact.
• S / M / L (widgets document et lien uniquement) — les bascules de mise en page. Les autres widgets se redimensionnent en faisant glisser le bloc lui-même.
• l'édition du contenu (modifier le contenu — la plupart des widgets) — ouvre la popup ou la popover de réglages propre à ce widget.
• Design — ouvre le panneau Design contextuel (voir plus bas).
• le menu ⋯ (plus) — menu d'actions rapides (différent pour les Sections et pour les widgets — voir plus bas).

Les chips n'apparaissent que si le widget sélectionné propose réellement l'action, donc la pastille d'un widget Texte ou Espacement se réduit à Ask AI · Design · ⋮ More.

Menu More — pour les Sections

• Copier le lien — lien direct vers cette Section, pour un partage en interne
• Dupliquer (dupliquer) — copie indépendante
• Hide / Show (masquer / afficher) — bascule la visibilité pour les acheteurs
• Copier comme modèle (copier comme modèle) — enregistre cette Section comme modèle de section (micro-modèle) réutilisable d'un Espace à l'autre. Voir Modèles de section.
• Add to page (ajouter à une page) — rattache cette Section à d'autres Pages (la même Section, partagée — pas une copie ; voir Partager une section sur plusieurs pages)
• Renommer (renommer)
• Move up / Move down (monter / descendre)
• Supprimer (supprimer)

Menu More — pour les widgets

• Dupliquer
• Supprimer

(Les widgets n'ont pas Hide/Rename/Move up-down parce que ces opérations ne s'appliquent pas au niveau du widget — voir Ajouter et réorganiser les widgets.)

Le panneau Design contextuel

Cliquer sur Design dans la pastille ouvre le panneau Design à gauche. Ce panneau est désormais contextuel : les contrôles de design de l'élément sélectionné sont épinglés en haut dans des sections repliables, et les réglages Design de tout l'Espace — regroupés sous Paramètres de l'Espace sous la forme En-tête, Color Palette, Typography, les réglages par défaut de la page et Section Defaults — se placent en dessous.

Les contrôles de la sélection sont regroupés ainsi :

Layout & corners (mise en page et coins)

• Compaction (Sections uniquement) — bascule segmentée :
• • Enabled (activée) — les widgets referment automatiquement les espaces vides quand vous les déplacez ou les redimensionnez. Idéal pour du contenu linéaire et lisible (propositions, QBR).
  • Disabled (désactivée) — les widgets peuvent se placer n'importe où, avec des espaces entre eux. Vous pouvez les poser côte à côte ou les faire se chevaucher. Idéal pour les pitch decks, les héros de landing page, le contenu créatif.

Réglage par Section, donc un même Espace peut mélanger une Section « Pricing » compactée et une Section « Hero » en mise en page libre.

• Corners (coins) — le rayon des coins extérieurs de la Section.

Spacing (espacement)

• Margin (marge — Sections uniquement) — l'espacement externe autour de la Section. Quatre champs (haut, droite, bas, gauche), avec une bascule de liaison sur la ligne du libellé pour verrouiller les quatre ensemble.
• Padding (marge interne) — l'espacement interne autour du contenu. Mêmes quatre champs + même bascule de liaison.

Background (arrière-plan)

Le remplissage derrière le contenu de la Section ou du widget :

• None (aucun) — transparent
• Color (couleur) — choisissez une valeur hexadécimale
• Image ou Vidéo — utilisez le sélecteur de médias pour télécharger un fichier ou coller une URL

Cover (couverture — Sections uniquement)

Une couche pleine largeur qui se place derrière tout le reste dans la Section — elle s'étend d'un bord à l'autre, quelle que soit la marge interne de la Section :

• None / Color / Image / Video

Différent de Background : Background remplit l'intérieur de la Section (à l'intérieur du padding) ; Cover déborde sur toute la largeur derrière l'ensemble, utile pour des fonds spectaculaires ou une imagerie de héros pleine page.

Border (bordure)

• None / Solid / Dotted / Dashed (aucune / pleine / pointillée / tiretée) — le style
• Les contrôles d'épaisseur et de couleur de la bordure

Effects (effets)

• Opacity (opacité) — 0–100 %. Utile pour atténuer sans masquer.
• Shadow (ombre) — l'intensité de l'ombre portée, 0–100 %.
• Background blur (flou d'arrière-plan) — l'intensité du flou derrière l'élément (utile avec des fonds translucides).

Les contrôles sont tous des sections repliables (pas des onglets imbriqués). Ouvrez celles dont vous avez besoin ; les autres restent rangées. Les quatre champs utilisent une bascule de liaison sur la ligne du libellé, ce qui leur donne toute la largeur lorsqu'ils sont déliés.

Ce qui est disponible sur les widgets et sur les Sections

Options propres à certains widgets

Certains types de widgets exposent des options supplémentaires, au-delà de ce que montre le panneau Design. Quelques exemples :

• Les widgets Document et Lien — une bascule de mise en page S / M / L en plus sur la pastille.
• Les widgets Image et Vidéo — une popup Resource details (détails de la ressource) (via l'édition du contenu) avec le titre, la description et les citations, chacun avec son propre interrupteur Shown / Hidden (affiché / masqué).
• Le widget CTA — une popover l'édition du bouton (modifier le CTA) avec le libellé du bouton, l'URL du lien, les couleurs, la bordure et l'effet au survol.

Les autres widgets (vidéo, document, contact, réunion, signature, etc.) ont leurs propres contrôles, en ligne ou dans le panneau — voir leurs articles dédiés dans le catalogue des widgets.

À noter sur les widgets Texte : l'édition de texte utilise sa propre barre de mise en forme contextuelle (gras, italique, titres, listes, liens — les fonctions classiques du texte enrichi). Un point utile à connaître : vous pouvez insérer des images directement à l'intérieur d'un widget Texte, pour qu'elles se placent au fil du texte comme dans un traitement de texte classique — pas besoin d'un widget Image séparé pour les images en ligne.

Conseils

• Choisissez la Compaction Section par Section — une même Page peut mélanger une Section « Pricing » compactée et une Section « Hero » en mise en page libre.
• Les Covers l'emportent sur les images d'arrière-plan pour l'impact en haut de Page.
• Utilisez la marge avec parcimonie — les Espaces avec beaucoup de blanc font premium ; les Espaces avec une marge sur chaque Section font brouillon.
• Choisissez un rayon de coin et tenez-vous-y — 0, 4, 8, 12 px — sur l'ensemble de vos modèles.

Articles associés

• Ajouter et réorganiser les pages et sections
• Ajouter et réorganiser les widgets
• Modèles de section
• Introduction aux widgets

Mis à jour le : 26/10/2026