---
title: "Styles et apparence"
description: "Configurez l'apparence visuelle des éléments — remplissage, bordures, effets, typographie, états et styles de projet."
---

L'onglet **Design** dans le panneau de droite contrôle l'apparence visuelle de chaque élément. Les propriétés disponibles dépendent du type d'élément, mais la plupart partagent des options de style communes.

:::link
Pour le dimensionnement, l'espacement et le positionnement, consultez [Layout et positionnement](manage-paywall-ui-elements).
:::

## Visibilité \{#visibility\}

Le bouton **Visibility** détermine si l'élément s'affiche à l'écran.

* Show **Show** (par défaut) : L'élément est toujours visible.
* Conditional **Conditional** : L'élément n'est visible que lorsque certaines conditions sont remplies. Consultez [Visibilité conditionnelle](onboarding-element-visibility) pour plus d'informations.
* Hide **Hide** : L'élément est toujours masqué. Utilisez cette option pour retirer temporairement un élément du flow sans le supprimer.

<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/3w3YSOmI3tQ?si=vPhoQGt44SI285Ru"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>

## Remplissage \{#fill\}

La section **Fill** contrôle l'arrière-plan de l'élément. Quatre types de remplissage sont disponibles : couleur unie, dégradé, image et vidéo.

Utilisez cette propriété pour définir l'image / vidéo principale de tout l'écran.

* **Solid color** Solid color. Utilisez le sélecteur de couleur, entrez une valeur hex, ou assignez un [style de couleur de projet](#color-styles). Ajustez l'**opacity** pour rendre l'arrière-plan semi-transparent.
* **Gradient** Gradient. Ajoutez un remplissage en dégradé avec deux stops de couleur ou plus. Faites glisser les stops pour ajuster la transition, et modifiez l'angle du dégradé pour contrôler sa direction.

* **Image** Image ou **Video** Video. Définissez une [image / vidéo](custom-media) comme arrière-plan de l'élément.

## Bordure \{#border\}

Les bordures sont désactivées par défaut. Cliquez sur Plus à côté de **Border** dans le panneau de droite pour en ajouter une. Pour supprimer une bordure, cliquez sur Close à côté de l'en-tête **Border**.

Lorsqu'une bordure est présente, configurez :

* **Color** : Utilisez le sélecteur de couleur, entrez une valeur hex, ou assignez un [style de couleur de projet](#color-styles). Ajustez l'**opacity** pour rendre la bordure semi-transparente.
* **Width** : L'épaisseur de la bordure en pixels.

## Coins \{#corners\}

La section **Corners** contrôle le rayon de bordure (coins arrondis).

* **Radius slider** : Définit le même rayon pour les quatre coins
* **Per-corner toggle** Per Corner : Activez pour définir un rayon différent pour chaque coin individuellement

## Effets \{#effects\}

Cliquez sur le bouton plus Plus à côté de **Effects** pour ajouter un ou plusieurs effets visuels :

* **Drop shadow** : Une ombre derrière l'élément
* **Inner shadow** : Une ombre à l'intérieur des limites de l'élément
* **Background blur** : Flou de l'arrière-plan
* **Layer blur** : Flou de l'élément et de ses enfants

Vous pouvez empiler plusieurs effets sur le même élément. Basculez sa visibilité Show pour désactiver temporairement un effet.

## Animation \{#animation\}

Cliquez sur le bouton Plus à côté de **Animation** pour ajouter un effet animé. Actuellement, **Pulse** est la seule animation disponible — l'élément s'agrandit et se rétrécit de façon rythmique pour attirer l'attention.

Configurez l'animation Pulse avec les paramètres suivants :

| Paramètre | Description |
|-----------|-------------|
| Scale amount (%) | L'agrandissement de l'élément par rapport à sa taille d'origine |
| Duration (ms) | Durée d'un seul cycle d'animation |
| Delay between loops (ms) | Pause entre les répétitions |
| Shadow color | Couleur de l'effet d'ombre pulsée |
| Shadow size (px) | Taille de l'ombre pulsée |

### Prévisualiser l'animation \{#preview-the-animation\}

Le builder affiche des écrans statiques par défaut — les animations restent fixes jusqu'à ce que vous les activiez. Deux façons de le faire :

- Cliquez sur le bouton **Toggle animations** Toggle animations au-dessus de l'aperçu de l'appareil. Il active ou désactive les animations de l'écran — une fois activées, elles tournent en continu jusqu'à ce que vous cliquiez à nouveau. Le bouton n'apparaît que lorsque l'écran actif contient au moins une animation.
- Ouvrez le [menu contextuel](paywall-layout-and-products#screen-actions) de l'écran (l'icône à trois points à côté de la couche d'écran) et choisissez **Play Animation**.

## Apparence \{#appearance\}

* **Opacity** : Va de 0 % (transparent) à 100 % (opaque)
* **Rotation** : Entrez une valeur en degrés pour faire pivoter l'élément

## Propriétés typographiques (éléments texte) \{#typography-properties-text-elements\}

Les éléments texte affichent une section **Typography** avec les contrôles suivants :

### Police \{#font\}

:::link
Voir aussi : [Polices personnalisées](using-custom-fonts-in-flow-builder)
:::

Cliquez sur le menu déroulant de police Font select pour ouvrir le sélecteur de polices. Il comporte deux onglets :

* **Styles** : Liste les [styles de texte](#text-styles) enregistrés dans votre projet. Sélectionnez un style pour appliquer en une fois tous ses paramètres typographiques.
* **Fonts** : Liste toutes les familles de polices disponibles. Cherchez ou faites défiler pour trouver celle dont vous avez besoin. Les polices intégrées peuvent **s'afficher différemment selon les appareils** — pour un rendu cohérent, téléchargez une [police personnalisée](using-custom-fonts-in-flow-builder).

### Taille et graisse \{#size-and-weight\}

:::warning
Pour les [polices personnalisées](using-custom-fonts-in-flow-builder), les contrôles **Weight**, **Bold** et **Italic** n'affectent que l'aperçu intégré de l'éditeur. Pour afficher différentes graisses et styles, téléchargez chaque variante de police comme fichier séparé.
:::

* **Weight** : Sélectionnez une graisse de police dans le menu déroulant
* **Size** : Sélectionnez une taille dans le menu déroulant ou saisissez une valeur personnalisée

### Couleur \{#color\}

Cliquez sur l'échantillon de couleur pour ouvrir le sélecteur. Entrez une valeur hex, utilisez la palette, ou sélectionnez l'un des [styles réutilisables](#reusable-styles). Ajustez le curseur d'opacité pour rendre le texte semi-transparent.

### Alignement \{#alignment\}

Deux groupes de contrôles d'alignement :

* **Horizontal** : Gauche Align left, Centre Align center, ou Droite Align right
* **Vertical** : Haut Align top, Milieu Align middle, ou Bas Align bottom

### Décoration \{#decoration\}

* **None** None : Aucune décoration (par défaut)
* **Underline** Underline : Ajoute un soulignement au texte
* **Strikethrough** Strikethrough : Ajoute un barré

### Troncature \{#truncation\}

Activez la troncature pour couper le texte qui dépasse le paramètre **Max Lines**.
Cela est utile pour prendre en charge plusieurs langues : si une chaîne traduite
est plus longue que l'originale, la troncature l'empêche de casser la mise en page.

:::note
Lorsque vous sélectionnez un élément texte, une **barre d'outils en ligne** apparaît également au-dessus de lui sur le canevas. Cette barre offre un accès rapide à la police, à la graisse, à la taille et à l'alignement sans avoir à faire défiler le panneau de droite.
:::

## Paramètres par état (éléments interactifs) \{#state-specific-settings-interactive-elements\}

Les éléments interactifs prennent en charge plusieurs états visuels. Lorsque vous sélectionnez un tel élément, une section **States** apparaît dans le panneau de droite. Basculez entre les états pour configurer différentes propriétés visuelles pour chacun.

Chaque état peut remplacer n'importe quelle propriété visuelle — remplissage, bordure, couleur de typographie, opacité, etc.

### États sélectionnables \{#selectable-states\}

:::link
Article principal : [Éléments sélectionnables](flow-selectable-elements)
:::

Les éléments appartenant à un groupe sélectionnable (options de quiz, produits, onglets, bascules d'essai) proposent deux états par défaut :

* **Default** : L'apparence normale de l'élément
* **Selected** : L'apparence lorsque l'utilisateur a sélectionné cette option. Remplacez des propriétés comme le remplissage, la couleur de bordure et la couleur du texte pour mettre en évidence le choix actif

Pour styliser un élément sélectionnable lorsqu'il n'est pas interactif, ajoutez un troisième état manuellement. Ouvrez **States settings** Settings et ajoutez un **Disabled state**.

L'état **Disabled** est conditionnel. Sélectionnez-le et cliquez sur **Set conditions** set conditions pour définir quand l'élément devient désactivé à l'exécution, par exemple lorsqu'un champ requis est vide.

### États de champ de saisie \{#input-states\}

Les champs de saisie proposent des états supplémentaires :

* **Default** : Apparence normale, sans focus
* **Active** : Le champ est actif et prêt pour la saisie
* **Invalid** : La valeur saisie ne passe pas la validation
* **Disabled** : Le champ n'est pas interactif

### Autres éléments avec états \{#other-state-bearing-elements\}

Quelques éléments exposent un style spécifique à l'état en dehors du schéma standard **Default / Selected / Disabled** :

- **[Étapes de l'indicateur de progression](builder-loaders-and-progress-bars#step-states)** — trois états par étape : **Completed**, **Current** et **Upcoming**.
- **[Points de carrousel](builder-containers#dots)** — deux variantes de couleur : **Color** pour les points inactifs et **Active Color** pour le point de la diapositive actuelle.

## Styles réutilisables \{#reusable-styles\}

Le panneau **Styles** Styles dans la barre latérale gauche vous permet de définir des styles réutilisables qui s'appliquent à tout votre flow. Deux types de styles sont disponibles : les styles de texte et les styles de couleur. Vous devez utiliser les styles de couleur pour activer la prise en charge du mode sombre.

### Styles de texte \{#text-styles\}

:::link
Article principal : [Contenu textuel](onboarding-text)
:::

Les styles de texte stockent un ensemble complet de paramètres typographiques — famille de polices, graisse, taille, interlignage, alignement et décoration. Chaque modèle de flow inclut des préréglages par défaut, et vous pouvez créer des styles personnalisés.

Pour créer un style de texte :

1. Ouvrez le panneau **Styles** Styles et sélectionnez l'onglet **Text**.
2. Cliquez sur **Plus Create style**.
3. Entrez un nom et configurez les paramètres typographiques.
4. Cliquez sur **Create**.

Pour appliquer un style de texte, sélectionnez un élément texte et choisissez le style dans le menu déroulant de police dans la section **Typography**.

### Styles de couleur \{#color-styles\}

Les styles de couleur sont des couleurs nommées que vous pouvez référencer dans tout votre flow. Chaque style de couleur a un nom (comme « Primary text » ou « Brand »), une valeur hex et un compteur d'utilisation indiquant combien d'éléments y font référence.

Pour créer un style de couleur :

1. Ouvrez le panneau **Styles** Styles et sélectionnez l'onglet **Colors**.
2. Cliquez sur **Plus Create style**.
3. Entrez un nom et choisissez une couleur.

Lorsque vous mettez à jour un style de couleur, tous les éléments qui y font référence se mettent à jour automatiquement.

### Mode sombre \{#dark-mode\}

:::link
Article principal : [Mode sombre](paywall-dark-mode)
:::

Si nécessaire, vous pouvez ajouter deux variantes à chaque style de couleur — une pour le mode clair Light mode et une pour le mode sombre Dark mode. Le SDK applique automatiquement la bonne variante selon le thème de couleur actuel de l'appareil.

Pour prévisualiser le mode sombre dans le builder, utilisez le **theme toggle** Dark mode dans la [barre d'outils inférieure](builder-ui#view-controls-bottom-toolbar).