Ajouter et styliser du texte et des listes dans le Flow & Paywall Builder
Ajoutez des titres, des paragraphes ou des listes en un seul clic, stylisez-les aux couleurs de votre marque, et utilisez des variables dynamiques 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
Le panneau Styles inclut des styles de texte préconfigurés pour les titres et fonctions courants. Chaque style de texte dispose des paramètres suivants :
- Famille de police
- Graisse
- Taille
- Hauteur de ligne
- Espacement des lettres
Pour modifier un style, cliquez dessus, changez ses paramètres, puis cliquez sur Save.
Lorsque vous ajoutez un élément texte, vous pouvez sélectionner l’un des styles configurés ici.
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 :
- Ouvrez le panneau Styles .
- Dans l’en-tête du panneau, cliquez sur Create style.
-
Définissez Type sur Text, saisissez un nom et configurez les paramètres de typographie.
-
Cliquez sur Create.
Ajouter du texte
Pour ajouter un élément texte :
- Cliquez sur + en haut à gauche. Sélectionnez Text. Choisissez l’un des styles de texte préconfigurés ou définis par vous.
- Cliquez sur le nouvel élément et modifiez son contenu dans la section Content du panneau Design à droite.
- Si nécessaire, ajustez les propriétés typographiques dans le panneau Design. Ou sélectionnez le texte dans l’aperçu pour ouvrir une infobulle de personnalisation rapide du style.
- 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.
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
Gras et Italique n’ont aucun effet sur une police personnalisée si sa famille ne comprend pas de variante grasse ou italique. Importez la variante correcte vous-même.
Pour modifier le style d’une partie seulement d’un élément texte :
- Sélectionnez une partie d’un élément texte dans la section Content.
- Dans l’infobulle qui apparaît, changez la couleur du texte, appliquez le gras, le soulignement, l’italique ou le barré, ou ajoutez une URL.
L’aperçu se met à jour immédiatement.
Ajouter un ancien prix
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 :
-
Cliquez sur + en haut à gauche. Sélectionnez Text, puis Old Price.
-
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.
ImportantL’é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.
-
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é.
-
Si nécessaire, ajustez les propriétés typographiques. L’élément prend en charge le même style que le texte ordinaire.
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.
Propriétés typographiques
Les éléments de texte disposent des contrôles typographiques suivants :
-
Font family : Choisissez une police — une police intégrée ou une police personnalisée.
WarningLes appareils n’incluent pas tous les mêmes polices et peuvent afficher la même police différemment. Si la police est absente de 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.
-
Weight : Définit la graisse de la police.
-
Size : Définit la taille de la police en pixels.
-
Color : Définit la couleur du texte.
-
Line height : Définit l’interlignage, ou laissez sur Auto.
-
Alignment : Définit l’alignement horizontal (gauche, centre, droite) et vertical (haut, milieu, bas).
-
Decoration : Applique un soulignement ou un barré.
-
Truncate : Limite le nombre de lignes affichées. Le texte au-delà de cette limite est tronqué. Utile lorsque la longueur du contenu varie à cause de variables dynamiques ou de la localisation.
Les paramètres suivants ne peuvent pas être enregistrés dans un style de texte réutilisable :
- Couleur
- Alignement
- Décoration
- Troncature
Définissez-les pour chaque élément de texte individuellement.
Ajouter des liens
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é
Pour transformer une partie d’un élément texte en lien :
- Sélectionnez le texte dans la section Content.
- Dans l’infobulle de mise en forme, cliquez sur l’icône de lien.
- Collez l’URL de destination dans la fenêtre contextuelle.
Action Ouvrir une URL
Article principal : Actions
Pour transformer un bouton entier en lien :
-
Ajoutez un Bouton — ou utilisez le preset Links, une rangée toute prête avec les boutons Restore / Terms of Service / Privacy Policy.
-
Sélectionnez le bouton dans le panneau Layers et ouvrez l’onglet Interactions dans le panneau de droite.
-
Définissez la destination pour l’action Open URL.
ImportantUne action Open URL vide empêche la prévisualisation et la publication.
Ajouter du texte conditionnel
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, mais il permute le contenu au lieu d’afficher ou de masquer l’élément.
Pour configurer un texte conditionnel :
- Sélectionnez un élément de texte sur le canevas.
- Dans le panneau Design, dans la section Content, sélectionnez Conditional.
- 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.
- Sous then, saisissez le texte à afficher lorsque la condition est vraie. La mise en forme du texte enrichi fonctionne de la même manière que pour un texte ordinaire. Pour insérer une variable ou un tag personnalisé, cliquez sur Add variable.
- Sous else, saisissez le texte de remplacement à afficher si aucune condition ne correspond.
- (Facultatif) Cliquez sur + Add else/if pour ajouter d’autres conditions, chacune avec son propre texte.
Pour traduire un texte conditionnel, ouvrez le panneau Localizations, où chaque branche possède sa propre ligne.
Ajouter des listes
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.
-
Cliquez sur + en haut à gauche. Sélectionnez List et choisissez l’un des modèles de liste.
-
Accédez au panneau Design à droite pour modifier les éléments de la liste ou importer une image comme marqueur d’élément.