--- title: "Ajouter et styliser du texte et des listes dans le Flow Builder" description: "Ajoutez et stylisez des titres, sous-titres, paragraphes et listes dans le Flow Builder d'Adapty, et personnalisez le texte pour une expérience utilisateur à votre image." --- Ajoutez des titres, paragraphes ou listes en un seul clic, stylisez-les aux couleurs de votre marque, et utilisez des [variables dynamiques](onboarding-variables) pour personnaliser le contenu pour chaque utilisateur. Demandez à l'Éditeur IA de réécrire vos textes, de mentionner l'essai gratuit ou de raccourcir tous les éléments textuels de l'écran en une seule fois. ## Configurer les styles de texte \{#set-up-text-styles\} Le panneau **Styles** inclut des styles de texte préconfigurés : H1, H2, H3, Button Label, Body, Caption et Small Label. Cliquez sur n'importe quel style pour modifier sa famille de polices, son poids, sa taille, son alignement, sa décoration et d'autres propriétés. Lorsque vous [ajoutez un élément texte](#add-text), vous pouvez choisir parmi les styles que vous avez configurés ici. :::important Les modifications apportées à un style s'appliquent à tous les éléments texte qui l'utilisent, sur tous les écrans. ::: Pour créer un nouveau style : 1. Cliquez sur Palette pour ouvrir le panneau **Styles**. 2. Dans l'onglet **Text**, cliquez sur **Create style**. 3. Saisissez un nom et configurez la typographie — famille de police, graisse, alignement et [autres propriétés](#typography-properties). :::warning Les [polices personnalisées](using-custom-fonts-in-flow-builder) se comportent différemment des polices intégrées. Lisez le guide — certains contrôles ne s'appliquent pas et chaque variante de police nécessite son propre fichier. ::: 4. Cliquez sur **Create**. ## Ajouter du texte \{#add-text\} Pour ajouter un élément texte : 1. Cliquez sur **+** en haut à gauche. Sélectionnez **Text**. Choisissez l'un des [styles de texte](#set-up-text-styles) préconfigurés ou définis par vous. 2. Cliquez sur le nouvel élément et modifiez son contenu dans la section **Content** du panneau **Design** à droite. 3. Si nécessaire, ajustez les [propriétés typographiques](#typography-properties) dans le panneau **Design**. Ou sélectionnez le texte dans l'aperçu pour ouvrir une infobulle de personnalisation rapide du style. 4. Optionnellement, dans les panneaux **Design** et **Interaction**, vous pouvez également appliquer d'autres configurations disponibles pour les composants du flow. Pour plus de détails, voir [Styles et apparence](builder-styling). :::tip Si vous devez utiliser le même élément de texte sur plusieurs écrans, copiez-collez-le : sélectionnez l'élément, appuyez sur Ctrl+C (ou ⌘+C sur Mac), naviguez vers un autre écran, puis appuyez sur Ctrl+V (ou ⌘+V sur Mac) pour coller. ::: ### Modifier le style d'une partie du texte \{#change-styling-for-parts-of-text\} :::warning La mise en forme **Gras** et **Italique** n'a aucun effet sur le texte utilisant des [polices personnalisées](using-custom-fonts-in-flow-builder). Pour appliquer des variantes d'une police personnalisée, importez chaque variante en tant que fichier de police distinct et sélectionnez-la dans le menu déroulant **Font family**. ::: Pour modifier le style d'une partie seulement d'un élément texte : 1. Sélectionnez une partie d'un élément texte dans la section **Content**. 2. Dans l'infobulle qui apparaît, modifiez la couleur du texte, appliquez une mise en forme gras, souligné, italique ou barré, ou ajoutez une URL. L'aperçu se met à jour immédiatement. ## Ajouter un ancien prix \{#add-an-old-price\} L'élément Ancien Prix affiche un prix « de référence » gonflé à côté du vrai prix d'un produit, pour que la réduction soit visible d'un coup d'œil. Il multiplie le prix du produit par un coefficient que vous choisissez et le barre automatiquement. Vous n'éditez pas le contenu de l'élément. La valeur est calculée à partir du prix en store du produit au moment de l'exécution, donc la devise correspond toujours au vrai prix. Pour ajouter un ancien prix : 1. Cliquez sur **+** en haut à gauche. Sélectionnez **Text**, puis **Old Price**. 2. Dans le panneau **Layers**, faites glisser l'élément à l'intérieur d'une carte produit. L'élément fonctionne également à l'intérieur des cartes produit enregistrées en tant que composants réutilisables. :::important L'élément Old Price doit se trouver à l'intérieur d'une carte produit — le prix est extrait du produit de cette carte. En dehors d'une carte produit, le builder affiche un espace réservé « Old price » à la place du prix. ::: 3. Dans le panneau **Design**, dans la section **Price**, définissez le **Multiplier**. Adapty multiplie le prix du produit par cette valeur. Par exemple, avec le multiplicateur par défaut de 2, un produit à 12,99 $ affiche 25,98 $ barré. 4. Si nécessaire, ajustez les [propriétés typographiques](#typography-properties). L'élément prend en charge le même style que le texte ordinaire. :::tip Pour barrer le prix réel d'un autre produit — par exemple, le prix mensuel sur une carte annuelle — construisez la ligne de prix à partir d'éléments texte et de variables. Voir [Afficher un prix barré avec un badge de réduction](strikethrough-price). ::: ## Propriétés typographiques \{#typography-properties\} Chaque élément de texte et chaque style de texte partagent les mêmes contrôles typographiques : - **Font family** : Choisissez une police — une police intégrée ou une [police personnalisée](using-custom-fonts-in-flow-builder). :::warning Les appareils n'incluent pas tous les mêmes polices, et peuvent afficher la même police différemment. Si la police n'est pas présente sur l'appareil, le système utilisera une police par défaut (SF Pro / Roboto). Pour afficher la même police de manière cohérente sur tous les appareils, importez une [police personnalisée](using-custom-fonts-in-flow-builder). ::: - **Weight** : Définissez la graisse de la police. :::warning Les contrôles **Weight**, **Bold** et **Italic** ne s'appliquent pas aux [polices personnalisées](using-custom-fonts-in-flow-builder), qu'elles soient définies dans le panneau **Styles**, la section typographie du panneau **Design**, la barre d'outils en ligne ou l'infobulle de mise en forme de la partie texte. Pour appliquer des variantes d'une police personnalisée, chargez chaque variante en tant que fichier de police distinct et sélectionnez la bonne dans la liste déroulante **Font**. ::: - **Size** : Définissez la taille de la police en pixels. - **Color** : Définissez la couleur du texte. - **Line height** : Définissez l'espacement entre les lignes, ou laissez sur **Auto**. - **Alignment** : Définissez l'alignement horizontal (gauche, centré, droite) et vertical (haut, milieu, bas). - **Decoration** : Appliquez un soulignement ou un barré. - **Truncate** : Limitez le nombre de lignes affichées. Le texte au-delà de cette limite est tronqué. Utile lorsque la longueur du contenu varie en raison de variables dynamiques ou de la localisation. ## Ajouter des liens \{#add-links\} Les flows proposent deux façons de transformer du texte en lien cliquable. Choisissez selon le rôle du texte : - **Lien inline** — pour une URL dans du texte courant, comme une référence « En savoir plus » intégrée dans un paragraphe. S'ouvre toujours dans le navigateur intégré. - **une action Open URL** — pour des éléments cliquables autonomes, comme un bouton Conditions d'utilisation. Peut s'ouvrir dans le navigateur intégré ou le navigateur externe. ### Lien intégré \{#inline-link\} Pour transformer une partie d'un élément texte en lien : 1. Sélectionnez le texte dans la section **Content**. 2. Dans l'infobulle de mise en forme, cliquez sur l'icône de lien. 3. Collez l'URL de destination dans la fenêtre contextuelle. ### Action Ouvrir une URL \{#open-url-action\} :::link Article principal : [Actions](onboarding-actions#open-url) ::: Pour transformer un bouton entier en lien : 1. Ajoutez un [Bouton](builder-elements#buttons) — ou utilisez le preset **Links**, une rangée toute prête avec les boutons Restore / Terms of Service / Privacy Policy. 2. Sélectionnez le bouton dans le panneau **Layers** et ouvrez l'onglet **Interactions** dans le panneau de droite. 3. Définissez la destination pour l'action [**Open URL**](onboarding-actions#open-url). :::important Une action Open URL vide [bloque la prévisualisation et la publication](builder-save-publish#troubleshooting). ::: ## Ajouter du texte conditionnel \{#add-conditional-text\} Le texte conditionnel modifie ce qu'affiche un élément de texte selon une condition. Par exemple, un titre peut afficher un message quand l'utilisateur sélectionne le forfait annuel, et un autre message pour le forfait mensuel. Le texte conditionnel fonctionne comme la [visibilité conditionnelle](onboarding-element-visibility), mais il permute le contenu au lieu d'afficher ou de masquer l'élément. Pour configurer un texte conditionnel : 1. Sélectionnez un élément de texte sur le canevas. 2. Dans le panneau **Design**, dans la section **Content**, sélectionnez **Conditional**. 3. Construisez la condition **if**. Choisissez une propriété dans l'onglet **Custom**, **Products** ou **Elements**, définissez l'opérateur et saisissez la valeur à comparer. Pour plus de détails sur les types de propriétés, consultez [Visibilité conditionnelle](onboarding-element-visibility). 4. Dans **then**, saisissez le texte à afficher lorsque la condition est vraie. La mise en forme du texte enrichi fonctionne de la même façon que pour le [texte ordinaire](#change-styling-for-parts-of-text). Pour insérer une [variable](onboarding-variables), cliquez sur **{ } Add variable**. 5. Dans **else**, saisissez le texte de repli à afficher lorsqu'aucune condition n'est remplie. 6. (Facultatif) Cliquez sur **+ Add else/if** pour ajouter d'autres conditions, chacune avec son propre texte. :::tip Pour modifier le texte conditionnel dans une autre langue, changez la langue active en bas de l'éditeur. Ajoutez d'abord les langues dans le panneau **Localizations** — voir [Ajouter une langue dans le Flow Builder](add-paywall-locale-in-adapty-paywall-builder). ::: ## Ajouter des listes \{#add-lists\} :::note Les éléments de liste sont des conteneurs composés de composants d'éléments individuels. Pour les listes à puces ou numérotées simples dans un texte courant, utilisez un élément texte et appliquez la mise en forme souhaitée via le panneau **Design**. ::: 1. Cliquez sur **+** en haut à gauche. Sélectionnez **List** et choisissez l'un des modèles de liste. 2. Accédez au panneau **Design** à droite pour modifier les éléments de la liste ou importer une image comme marqueur d'élément.