> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://katalyz.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Styliser les sections et les widgets

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

1. Un **menu flottant** en ligne qui s'affiche au-dessus de la sélection — pour les actions rapides (ouvrir, mise en page, modifier le contenu, design, plus, demander à l'IA).
2. Le panneau **Design** à gauche — qui devient **contextuel**, affichant les contrôles de design de l'élément sélectionné en haut, au-dessus des paramètres globaux de Design de la page.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-17-at-18230_2t5rmk.png)

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

## Le menu flottant

De gauche à droite, les puces du menu sont :

* **Ouvrir** *(widgets uniquement)* — ouvre la configuration complète du widget.
* **S / M / L** *(widgets uniquement)* — bascules de mise en page / largeur par widget.
* **Modifier le contenu** *(widgets uniquement)* — modifie le contenu du widget en ligne.
* **Design** — ouvre le panneau Design contextuel (voir ci-dessous).
* **⋮ Plus** — menu d'actions rapides (différent pour les sections et les widgets — voir ci-dessous).
* **Demander à l'IA** — puce IA dégradée ; démarre une conversation IA ancrée sur cet élément.

### Menu Plus — pour les sections

* **Copier le lien** — lien direct vers cette section pour le partage interne
* **Dupliquer** — copie indépendante
* **Masquer / Afficher** — basculer la visibilité pour les acheteurs
* **Copier en modèle** — enregistrer cette section comme modèle de section (micro-modèle) réutilisable dans tous les espaces. Voir [Modèles de section](https://katalyz.crisp.help/fr/article/modeles-de-section-micro-modeles-10g86wx/).
* **Ajouter à la page** — attacher cette section à des pages supplémentaires (la même section, partagée — pas une copie ; voir [Partager une section sur plusieurs pages](→ 02-rooms/02-structuring-a-room/02-adding-reordering-sections#share-a-section-across-multiple-pages))
* **Renommer**
* **Monter** / **Descendre**
* **Supprimer**

### Menu Plus — pour les widgets

* **Dupliquer**
* **Supprimer**

(Les widgets n'ont pas Masquer/Renommer/Monter-descendre car ces opérations ne s'appliquent pas au niveau du widget — voir [Ajouter et réorganiser les widgets](https://katalyz.crisp.help/fr/article/ajouter-et-reorganiser-les-widgets-4cu9sj/).)

## Le panneau Design contextuel

Cliquer sur **Design** dans le menu flottant ouvre le panneau Design à gauche. Le 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 **paramètres globaux de Design de la page** (Valeurs par défaut des sections, En-tête, Palette de couleurs, Typographie) se trouvent en dessous.


![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-17-at-18232_1tj5d6p.png =342xauto)


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

### Mise en page et coins
* **Compaction** *(sections uniquement)* — bascule segmentée :
* **Activée** — les widgets ferment automatiquement les espaces lorsque vous les déplacez ou les redimensionnez. Idéal pour un contenu linéaire et lisible (propositions, QBR).
* **Désactivée** — les widgets peuvent être placés n'importe où avec des espaces entre eux. Vous pouvez placer les widgets côte à côte ou les superposer. Idéal pour les pitch decks, les héros de landing page, le contenu créatif.
  Par section, donc le même espace peut combiner une section "Tarification" compactée et une section "Hero" en libre disposition.
* **Coins** — rayon des coins extérieurs de la section.

### Espacement
* **Marge** *(sections uniquement)* — espacement externe autour de la section. Saisies sur les 4 côtés (haut, droite, bas, gauche), avec une bascule de liaison dans la ligne du libellé du champ pour verrouiller les quatre ensemble.
* **Padding** — espacement interne autour du contenu. Même modèle de saisies sur 4 côtés + bascule de liaison.

### Arrière-plan
Remplissage derrière le contenu de la section/du widget :
* **Aucun** — transparent
* **Couleur** — choisir une valeur hex
* **Image** ou **Vidéo** — utiliser le sélecteur de médias pour soit télécharger un fichier, soit coller une URL

### Couverture *(sections uniquement)*
Un calque pleine largeur qui se trouve **derrière tout le reste** dans la section — il s'étend de bord à bord, quel que soit le padding de la section :
* **Aucune / Couleur / Image / Vidéo**

Différent de l'Arrière-plan : l'Arrière-plan remplit l'intérieur de la section (dans le padding) ; la Couverture déborde sur toute la largeur derrière l'ensemble, utile pour des décors spectaculaires ou des images hero pleine page.

### Bordure
* **Aucune / Pleine / Pointillée / Tirets** — style
* Contrôles de largeur et de couleur de bordure

### Effets
* **Opacité** — 0–100 %. Utile pour atténuer sans masquer.
* **Ombre** — intensité de l'ombre portée, 0–100 %.
* **Flou d'arrière-plan** — intensité du flou en arrière-plan (utile avec des arrière-plans translucides).

> Les contrôles sont tous dans des **sections repliables** (et non des onglets imbriqués). Ouvrez ceux dont vous avez besoin ; les autres restent rangés. Les saisies sur 4 côtés utilisent une **bascule de liaison** dans la ligne du libellé du champ, ce qui donne aux quatre saisies une largeur complète lorsqu'elles sont déliées.

## Ce qui est disponible sur les widgets vs les sections

| Contrôle | Sections | Widgets |
| ---- |
| Compaction (dans Mise en page et coins) | ✅ | ❌ (la compaction de la section parente les régit) |
| Coins | ✅ | ✅ |
| Marge (Espacement) | ✅ | ❌ |
| Padding (Espacement) | ✅ | ✅ |
| Arrière-plan | ✅ | ✅ |
| Couverture | ✅ | ❌ |
| Bordure | ✅ | ✅ |
| Effets (Opacité / Ombre / Flou d'arrière-plan) | ✅ | ✅ |

## Options spécifiques aux widgets

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

* **Widget Image** — bascule **Taille** supplémentaire (S / M / L) et bascules pour les légendes **Titre**, **Sous-titre** et **Citation**.
* **Widget CTA** — modifications en ligne pour le **libellé** et la **destination** du bouton (lien / page / action).

D'autres widgets (vidéo, document, contact, réunion, signature, etc.) ont leurs propres contrôles en ligne ou dans un panneau — voir leurs articles individuels dans le [catalogue des widgets](https://katalyz.crisp.help/fr/article/introduction-aux-widgets-1e90glq/).

> **Remarque sur les widgets texte :** l'édition de texte utilise sa propre barre d'outils de texte contextuelle (gras, italique, titres, listes, liens — les fonctionnalités standard de texte enrichi). Une chose qui vaut la peine d'être connue : vous pouvez **insérer des images directement dans un widget texte**, afin qu'elles se trouvent à côté de votre texte comme dans un traitement de texte classique — vous n'avez pas besoin d'un widget image séparé pour les images en ligne.

## Astuces

* **Choisissez la Compaction par section** — une seule page peut combiner une section "Tarification" compactée avec une section "Hero" en libre disposition.
* **Les Couvertures sont plus efficaces que les images d'arrière-plan** pour avoir de l'impact en haut de page.
* **Utilisez la marge avec parcimonie** — les espaces avec beaucoup d'espace blanc semblent premium ; les espaces avec une marge sur chaque section semblent dispersés.
* **Choisissez un rayon de coin et tenez-vous-y** — `0`, `4`, `8`, `12` px — dans tous vos modèles.

## Articles connexes
* [Ajouter et réorganiser les pages et les sections](https://katalyz.crisp.help/fr/article/ajouter-et-reorganiser-les-pages-et-sections-1a8j5bf/)
* [Ajouter et réorganiser les widgets](https://katalyz.crisp.help/fr/article/ajouter-et-reorganiser-les-widgets-4cu9sj/)
* [Modèles de section](https://katalyz.crisp.help/fr/article/modeles-de-section-micro-modeles-10g86wx/)
* [Introduction aux widgets](https://katalyz.crisp.help/fr/article/introduction-aux-widgets-1e90glq/)