--- title: "Éléments" description: "Tous les éléments visuels disponibles dans le Flow Builder : conteneurs de mise en page, texte, médias, listes, boutons, champs de saisie, produits et plus encore." --- Pour ouvrir la bibliothèque d'éléments et ajouter un nouvel élément à un écran, cliquez sur le bouton plus Plus dans le panneau gauche ou au-dessus de l'aperçu de l'appareil. Les éléments se répartissent dans les catégories suivantes : - [Bases](#basics) (conteneurs de mise en page, texte, médias, listes, badges, coches) - [Formulaires et quiz](#forms--quiz) (boutons, champs de saisie, quiz, onglets) - [Paywall et commerce](#paywall--commerce) (produits, bouton d'essai gratuit, engagement utilisateur, compte à rebours) - [Indicateurs de progression](#progress) et chargeurs Pour chaque élément, Adapty propose plusieurs présets — des modèles avec du contenu de substitution ou des interactions prédéfinies. ## Bases \{#basics\} ### Mise en page \{#layout\} :::link Article principal : [Éléments de mise en page](builder-containers) ::: Les éléments de mise en page sont des conteneurs qui organisent les éléments qu'ils contiennent. - **Conteneur vertical** : dispose les éléments enfants de haut en bas - **Conteneur horizontal** : dispose les éléments enfants de gauche à droite - **Séparateurs (horizontal et vertical)** : lignes qui séparent visuellement les sections de contenu - **Carousel** : un conteneur à défilement par glissement - **Pied de page** : un panneau épinglé au bas de l'écran, en dehors de la zone de défilement - **Feuille inférieure** : un panneau coulissant ancré au bas de l'écran ### Texte \{#text\} :::link Article principal : [Contenu textuel](onboarding-text) ::: Le texte peut être statique ou inclure des [variables](onboarding-variables) (ex. : nom d'utilisateur) et du [contenu localisé](paywall-localization). Les présets de texte suivants sont disponibles par défaut. Pour modifier cette liste, ajoutez ou supprimez des [styles de texte enregistrés](builder-styling#reusable-styles) : - H1 - H2 - H3 - Button Label - Body - Caption - Small Label Le menu **Text** comprend également l'élément **Old Price** — un prix de produit barré calculé automatiquement à partir d'un multiplicateur. Voir [Ajouter un ancien prix](onboarding-text#add-an-old-price). ### Médias \{#media\} :::link Article principal : [Images, vidéos et icônes](custom-media) ::: :::note Cette section décrit les éléments multimédias au premier plan. Modifiez l'[arrière-plan de l'écran](paywall-layout-and-products#screen-background) pour remplir tout l'écran avec une image ou une vidéo. ::: - **Icône** : une icône vectorielle de la bibliothèque d'icônes intégrée, avec taille et couleur personnalisables - **Image** : une image — téléchargez la vôtre ou fournissez une URL - **Vidéo** : un lecteur vidéo intégré pour les fichiers jusqu'à 50 Mo. Supporte la lecture en boucle. ### Liste \{#list\} Les éléments de liste organisent le contenu en lignes et en colonnes pour afficher des données uniformément formatées. En coulisse, une liste est un [conteneur](manage-paywall-ui-elements#layout). - **Liste d'icônes** : lignes avec une icône en tête et une étiquette de texte - **Chronologie** : séquence verticale avec des indicateurs d'étapes connectées - **Liste d'images** : lignes avec une image en tête et du texte - **Cartes d'icônes** : grille de cartes avec des icônes centrées - **Cartes d'images** : grille de cartes avec des images - **Tableau comparatif** : tableau multi-colonnes comparant des fonctionnalités entre les plans (ex. : Gratuit vs Pro) ### Badge \{#badge\} Une petite étiquette superposée pour mettre en avant un élément — généralement utilisée pour promouvoir des remises ou des plans spécifiques (ex. : « Économisez 5 % »). Utilisez le [positionnement absolu](manage-paywall-ui-elements#absolute) pour placer un badge par-dessus un autre élément. ### Coches \{#checkmarks\} Icônes d'indicateur de sélection à utiliser dans des [éléments sélectionnables](flow-selectable-elements). Chaque préset de coche inclut un état activé et désactivé qui se met à jour automatiquement en fonction de la sélection de l'utilisateur. - Checkbox - Circle - Radiobutton - Toggle ## Formulaires et quiz \{#forms--quiz\} ### Boutons \{#buttons\} :::link Article principal : [Boutons](paywall-buttons) ::: Les boutons déclenchent des actions lorsqu'on appuie dessus — naviguer vers un autre écran, ouvrir une URL ou quitter le flow. Chaque préset est un point de départ — personnalisez son style et assignez-lui n'importe quelle action. Configurez le comportement des boutons dans l'onglet [Interactions](builder-ui#interactions-properties). - **Base** : bouton classique avec texte centré - **Icône à droite** : bouton avec une icône sur le côté droit - **Avec sous-titre** : inclut deux lignes de texte - **Animation pulsée** : inclut un effet de pulsation animé - **Achat** : déclenche un achat - **Contour secondaire** : bouton avec contour pour les actions secondaires - **Retour** : retourner à l'écran précédent - **Fermer le flow** : quitter le flow - **Voir plus de plans** : révéler des options de produits supplémentaires - **Liens** : un ensemble de boutons de pied de page (Restore, Terms of Service, Privacy Policy) ### Champs de saisie \{#inputs\} :::link Article principal : [Champs de saisie et formulaires](builder-inputs-and-forms) ::: Les champs de saisie permettent aux utilisateurs d'entrer des données. Chacun applique une méthode de saisie et des règles de validation adaptées. - Texte - E-mail - Mot de passe - Nombre - Numéro de téléphone - Date - Heure - Date et heure Les champs Date, Heure et Date et heure ouvrent le sélecteur natif de l'appareil (molette ou calendrier) lorsqu'on appuie dessus. Utilisez des [variables](onboarding-variables) pour traiter les saisies des utilisateurs et influencer la logique conditionnelle. ### Quiz \{#quizzes\} :::link Article principal : [Sondages et quiz](onboarding-quizzes) ::: Les éléments de quiz présentent des écrans de sélection multi-options pour les sondages, la collecte de préférences et la segmentation des utilisateurs. Configurez des [interactions](onboarding-navigation-branching) pour orienter le flow en fonction de la réponse de l'utilisateur. - **Options avec icônes** : liste à une colonne avec des icônes - **Options avec emojis** : liste à une colonne avec des emojis - **Options avec images** : liste à une colonne avec des images - **Grille d'icônes** : grille multi-colonnes avec des icônes - **Grille d'emojis** : grille multi-colonnes avec des emojis - **Grille d'images** : grille multi-colonnes avec des photos - **Évaluation** : échelle numérique (ex. : 1–5) ### Onglets \{#tabs\} :::link Article principal : [Onglets](builder-tabs) ::: Les onglets divisent une section d'écran en panneaux de contenu commutables. L'utilisateur sélectionne un onglet et le contenu en dessous se met à jour en conséquence. Couramment utilisés pour regrouper des plans de produits ou basculer entre une tarification mensuelle et annuelle. - **Contrôle segmenté** : sélecteur en forme de pilule avec des coins arrondis autour de l'onglet sélectionné - **Onglets boutons** : onglets séparés en style bouton - **Souligné** : étiquettes de texte avec un soulignement marquant l'onglet sélectionné ## Paywall et commerce \{#paywall--commerce\} ### Produits \{#products\} :::link Article principal : [Produits](paywall-product-block) ::: Les éléments de produit affichent les détails des achats intégrés et gèrent la sélection de produits. Chaque préset dispose les données produit dans une mise en page différente. Liez vos produits pour alimenter les éléments avec des données réelles provenant d'Adapty. - **Liste verticale** : cartes de produits empilées - **Liste horizontale** : cartes de produits côte à côte - **Carousel de fonctionnalités** : cartes à défilement par glissement avec listes de fonctionnalités - **Cartes de fonctionnalités** : cartes statiques avec listes de fonctionnalités - **Liste bannière** : lignes compactes avec des badges intégrés {/* Coming soon - **Bottom Sheet**: product selector inside a slide-up panel */} ### Bouton d'essai gratuit \{#trial-toggle\} :::link Article principal : [Boutons bascule](builder-toggles) ::: Un bouton bascule qui fait passer le produit affiché de son prix standard à son offre d'essai gratuit. Lorsqu'il est activé, la sélection du produit et l'état de l'élément se mettent à jour automatiquement. ### Engagement utilisateur \{#user-engagement\} Blocs prêts à l'emploi avec des évaluations utilisateurs qui renforcent la confiance et encouragent la conversion. Les modèles sont des conteneurs simples avec du contenu de substitution. - **Avis** : une note en étoiles avec un commentaire et le nom de l'auteur - **Évaluation** : un score numérique avec affichage d'étoiles - **Note de l'app** : un grand score avec une barre d'étoiles et un nombre d'avis - **Preuve sociale** : une pile d'avatars avec un nombre d'utilisateurs ### Compte à rebours \{#countdown\} :::link Article principal : [Minuteur de compte à rebours](paywall-timer) ::: Affiche des heures, des minutes et des secondes décomptant jusqu'à zéro. Utilisez-le pour créer un sentiment d'urgence pour des offres à durée limitée. Le minuteur peut déclencher des actions lorsqu'il atteint zéro — comme naviguer vers un autre écran ou masquer le badge de remise. - **Inline** : affichage numérique compact - **Inline avec unités** : affichage numérique avec étiquettes d'unités - **Badge** : petite superposition de minuteur mise en évidence - **Blocs** : cartes séparées pour les jours, les heures, les minutes et les secondes ## Progression \{#progress\} :::link Article principal : [Chargeurs et barres de progression](builder-loaders-and-progress-bars) ::: ### Indicateurs de progression \{#progress-indicators\} Barres de progression par étapes qui montrent la position de l'utilisateur dans un flow à plusieurs écrans. Utiles pour les séquences d'onboarding où l'utilisateur doit voir combien d'étapes il reste. - **Linéaire** : une seule barre continue qui se remplit à mesure que l'utilisateur avance - **Segmenté** : une barre divisée en segments distincts, un par étape - **Connecteurs** : marqueurs d'étapes numérotés reliés par de courtes lignes de connexion ### Chargeurs \{#loaders\} Indicateurs de chargement animés pour les transitions. Utilisez des chargeurs lorsque votre application traite des données utilisateur — par exemple, après la soumission d'un quiz. - **Spinner** : indicateur circulaire rotatif - **Spinner avec étiquette** : spinner accompagné d'une étiquette de texte (ex. : « Chargement... ») - **Chargeur** : barre de progression horizontale {/* - **Loader with label**: progress bar paired with a text label and percentage */}