> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Options de design

> Personnalisation visuelle par bloc à l'aide de l'onglet Design.

## Que sont les options de design

La plupart des blocs ont un onglet **Design** dans l'inspecteur de droite. Les options de design vous permettent de remplacer le style visuel d'un seul bloc sans modifier le reste de la page. Lorsqu'un champ de design est laissé vide (affichant « Theme default »), le bloc hérite de sa valeur depuis le thème actif.

<Frame caption="L'onglet Design sur un bloc Description, montrant les groupes Card Style, Effects et Typography">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/design-tab-card-effects.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=5c1b30c73f04cf3562a90ed6be89a49f" alt="Onglet Design ouvert sur un bloc Description, montrant les groupes Card Style (Style, Card Background, Transparent background), Effects (Card Effect, Card Surface, Shadow) et Typography (Text Color, Font Family, Font Size)" width="1440" height="1000" data-path="images/v2/page-builder/design-options/design-tab-card-effects.png" />
</Frame>

## Comment accéder aux options de design

<Steps>
  <Step title="Sélectionner un bloc">
    Cliquez sur un bloc dans le canevas ou dans la barre latérale gauche pour le sélectionner.
  </Step>

  <Step title="Ouvrir l'onglet Design">
    Dans le panneau de droite, cliquez sur l'onglet **Design**. (Si un bloc n'a aucun style visuel à remplacer, cet onglet est désactivé — par exemple, Footer, Menu et Contact Details n'ont pas du tout d'onglet Design.)
  </Step>

  <Step title="Ajuster une option">
    Le canevas se met à jour en temps réel.

    <Tip>
      Pour réinitialiser un champ à sa valeur par défaut du thème, videz-le (ou resélectionnez « Theme default » dans son menu déroulant).
    </Tip>
  </Step>
</Steps>

## Typography

Les options de style de texte apparaissent sur les blocs qui contiennent du texte de paragraphe, des titres ou des libellés — Page Title, Description, Event Schedule, Event Venue, Couple Names, et d'autres.

| Option      | Description                                                                                                                                                                                          |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text color  | Remplace la couleur du texte du bloc. Laissez vide pour utiliser la couleur de premier plan du thème.                                                                                                |
| Font family | Remplace la police de caractères de ce bloc. Accepte toute police du sélecteur.                                                                                                                      |
| Font size   | Un **multiplicateur** de taille continu, pas une échelle Small/Medium/Large : **0.5×, 0.75×, 1×, 1.25×, 1.5×, 2×, 2.5×, 3×, 3.5×, 4×**. 1× correspond à la taille par défaut du thème pour ce texte. |

<Frame caption="Le menu déroulant Font Size ouvert sur l'onglet Design d'un bloc, montrant la liste complète des multiplicateurs de 0,5× à 4×">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/font-size-multiplier.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=af48a44af33da86980b078235017bf75" alt="Menu déroulant Font Size ouvert montrant des options de multiplicateur de 0,5x à 4x, avec 1x coché comme sélection actuelle" width="1440" height="1000" data-path="images/v2/page-builder/design-options/font-size-multiplier.png" />
</Frame>

<Warning>
  Font Size **n'est pas** une échelle nommée (Small/Medium/Large/Extra Large). C'est un multiplicateur numérique appliqué à la taille de base du thème pour cet élément de texte — choisissez 1× pour conserver la valeur par défaut du thème, ou un multiplicateur plus élevé/plus faible pour l'agrandir ou le réduire.
</Warning>

## Card style

Les options de style de carte contrôlent l'apparence du conteneur d'un bloc. Elles apparaissent ensemble sur tout bloc ayant une présence visuelle de carte (Description, Coupon Details, About Us, Brand Info, et la plupart des autres).

| Option                               | Description                                                                                                                                                               |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Style (parfois nommé « Appearance ») | Choisissez **Card** (un panneau encastré avec bordure et ombre) ou **Full width** (pas d'encart extérieur — le bloc occupe toute la largeur du contenu).                  |
| Card Background                      | Remplace la couleur de fond de la carte du bloc. Laissez vide pour utiliser la couleur de surface du thème. Sans effet visible lorsque Transparent background est activé. |
| Transparent background               | Force un fond entièrement transparent pour ce bloc, à la place de la couleur de surface du thème — fonctionne avec n'importe quel réglage de Style.                       |

## Effects (par bloc)

En plus de Card Background, la plupart des blocs basés sur des cartes exposent trois remplacements supplémentaires sous un groupe **Effects** dans l'onglet Design :

| Option       | Description                                                                                                                                                                                          |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Card Effect  | Choisissez « Theme default » pour hériter de l'effet de carte du thème, ou remplacez-le pour ce bloc uniquement — voir [Effets animés](/fr/page-builder/animated-effects) pour le catalogue complet. |
| Card Surface | Remplace le matériau de la carte (par défaut « Theme default ») — reflète le contrôle « Card material » de la section Surface au niveau du thème, exposé ici par bloc.                               |
| Shadow       | Remplace la variante d'ombre utilisée pour la carte de ce bloc (par défaut « Theme default ») — reflète le contrôle d'ombre de la section Surface au niveau du thème.                                |

<Note>
  **Card Surface** et **Shadow** sont des remplacements par bloc des mêmes tokens définis globalement dans la section **Surface** du thème (voir [Thèmes](/fr/page-builder/themes)). Les définir ici n'affecte que le bloc sélectionné ; tout le reste de la page continue d'utiliser les valeurs du thème.
</Note>

## Button styles

Les options de style de bouton apparaissent sur le bloc **Button** et sur les blocs comportant un bouton intégré (Map, File Download).

| Option        | Description                                                                                  |
| ------------- | -------------------------------------------------------------------------------------------- |
| Button color  | Couleur de remplissage de fond du bouton                                                     |
| Border color  | Couleur de la bordure du bouton                                                              |
| Corner radius | Un sélecteur préréglé à 5 options — **None, S, M, L, Full** — pas une valeur brute en pixels |
| Border width  | Épaisseur de la bordure du bouton en pixels. Réglez sur 0 pour supprimer la bordure.         |

## Icon styles

Les options de style d'icône apparaissent sur les blocs qui affichent une icône décorative. Confirmé en production sur le bloc **Event Venue** (pages Wedding/Event) :

| Option      | Description                         |
| ----------- | ----------------------------------- |
| Icon colour | Couleur appliquée à l'icône du bloc |

<Frame caption="L'onglet Design d'Event Venue, montrant le champ Icon colour sous un groupe ICON">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/icon-color-event-venue.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=b999139ffe53c7d77a5e2b03a041e356" alt="Onglet Design sur le bloc Event Venue montrant Typography, Card Style, un groupe ICON avec Icon colour, et Effects" width="1440" height="1000" data-path="images/v2/page-builder/design-options/icon-color-event-venue.png" />
</Frame>

<Note>
  Tous les blocs comportant une icône n'ont pas ce contrôle — par exemple, Contact Us affiche des icônes mais n'a aucun remplacement Icon colour dans son onglet Design.
</Note>

## Separator styles

Les options de style de séparateur apparaissent sur les blocs qui incluent une ligne décorative intégrée. Confirmé en production sur le bloc **Couple Names** (pages Wedding) :

| Option           | Description                                           |
| ---------------- | ----------------------------------------------------- |
| Separator style  | Choisit le design visuel du séparateur (styles 01–09) |
| Separator colour | Couleur de la ligne de séparation                     |

<Frame caption="L'onglet Design de Couple Names, montrant le groupe SEPARATOR avec Separator style et Separator colour">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/design-options/separator-style-couple-names.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=9d657a0d5976bbc87ddf0c7e157311b4" alt="Onglet Design sur le bloc Couple Names montrant Typography, Card Style, un groupe SEPARATOR avec Separator style réglé sur 01 et Separator colour, et Effects" width="1440" height="1000" data-path="images/v2/page-builder/design-options/separator-style-couple-names.png" />
</Frame>

Ces éléments se distinguent du bloc autonome **Separator** — ce sont des lignes décoratives intégrées à des blocs spécifiques.

## Effets au niveau de la page

De nombreux blocs permettent, dans leur groupe Effects, de remplacer uniquement pour eux-mêmes l'effet par défaut de fond, de carte ou de bouton du thème. Voir [Effets animés](/fr/page-builder/animated-effects) pour la liste complète et la manière de définir les valeurs par défaut au niveau du thème.

## Priorité

Les options de design suivent cet ordre de priorité (du plus élevé au plus faible) :

1. Réglage de l'onglet Design par bloc (s'il est défini)
2. Remplacement de thème au niveau de la page (dans le panneau Customise du sélecteur de thèmes)
3. Valeur par défaut du thème prédéfini

Un champ vide dans l'onglet Design signifie « utiliser la valeur du thème ». Un champ non vide le remplace uniquement pour ce bloc.

## Conseils

* Utilisez les remplacements par bloc avec parcimonie. Remplacer trop de blocs individuellement rend la page visuellement incohérente. Appliquez la majeure partie de la personnalisation via le thème, et réservez les remplacements par bloc à des mises en avant spécifiques.
* Pour mettre en avant un seul bloc Button, donnez-lui une couleur de bouton distinctive tout en laissant les autres blocs aux valeurs par défaut du thème.
* Si vous voulez qu'un bloc se démarque — pour une section d'appel ou une information importante — définissez explicitement son Card Background plutôt que de modifier tout le thème.

## Voir aussi

* [Thèmes](/fr/page-builder/themes) — les tokens au niveau de la page auxquels ces remplacements par bloc font défaut.
* [Effets animés](/fr/page-builder/animated-effects) — le catalogue complet derrière les options Card Effect et Button Effect.
* [Référence des blocs](/fr/page-builder/blocks-reference) — quels blocs exposent un onglet Design.
