Éléments

Pour ouvrir la bibliothèque d’éléments et ajouter un nouvel élément à un écran, cliquez sur le bouton plus dans le panneau de gauche ou au-dessus de l’aperçu de l’appareil.

Les éléments sont répartis dans les catégories suivantes :

• Basics (conteneurs de mise en page, texte, médias, listes, badges, coches)
• Forms & Quiz (boutons, champs de saisie, quiz, onglets)
• Paywall & Commerce (produits, bascule d’essai, engagement utilisateur, compte à rebours)
• Progress indicators et chargeurs

Pour chaque élément, Adapty propose plusieurs presets — des modèles avec du contenu de substitution ou des interactions prédéfinies.

Les bases

Disposition

Les éléments de mise en page sont des conteneurs qui organisent les éléments qu’ils contiennent.

• Conteneur vertical : organise les éléments enfants de haut en bas
• Conteneur horizontal : organise les éléments enfants de gauche à droite
• Séparateurs (horizontal et vertical) : lignes qui séparent visuellement les sections de contenu
• Carrousel : un conteneur avec défilement par glissement
• Pied de page : un panneau épinglé en bas de l’écran, en dehors de la zone de défilement
• Bottom Sheet : un panneau qui remonte depuis le bas de l’écran

Text

Le texte peut être statique ou inclure des variables (ex. : nom d’utilisateur) et du contenu localisé.

Les préréglages de texte suivants sont disponibles par défaut. Pour modifier cette liste, ajoutez ou supprimez des styles de texte enregistrés :

• H1
• H2
• H3
• Button Label
• Body
• Caption
• Small Label

Le menu Text comprend également l’élément Old Price — un prix barré calculé automatiquement à partir d’un multiplicateur. Voir Ajouter un ancien prix.

Médias

• Icon : une icône vectorielle issue de la bibliothèque d’icônes intégrée, avec une taille et une couleur personnalisables
• Image : une image — importez la vôtre ou fournissez une URL
• Video : un lecteur vidéo intégré pour les fichiers jusqu’à 50 Mo. Prend en charge la lecture en boucle.

Liste

Les éléments de liste organisent le contenu en lignes et colonnes pour afficher des données avec une mise en forme uniforme. En coulisses, une liste est un conteneur.

• Icon List : lignes avec une icône en tête et un texte
• Timeline : séquence verticale avec des indicateurs d’étapes reliés
• Image List : lignes avec une image en tête et un texte
• Icon Cards : grille de cartes avec des icônes centrées
• Image Cards : grille de cartes avec des images
• Comparison Table : tableau multi-colonnes comparant les fonctionnalités entre les offres (ex. : Gratuit vs Pro)

Badge

Un petit label superposé pour mettre en valeur un élément — généralement utilisé pour promouvoir des remises ou des offres spécifiques (par exemple, « Économisez 5 % »). Utilisez le positionnement absolu pour placer un badge par-dessus un autre élément.

Cases à cocher

Icônes d’indicateur de sélection à utiliser dans les éléments sélectionnables. Chaque préréglage de case à cocher inclut un état activé et un état désactivé qui se mettent à jour automatiquement selon la sélection de l’utilisateur.

• Case à cocher
• Cercle
• Bouton radio
• Bascule

Formulaires & Quiz

Boutons

Les boutons déclenchent des actions au moment du clic — naviguer vers un autre écran, ouvrir une URL ou fermer le flow.

Chaque modèle 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.

• Base : bouton classique avec texte centré
• Right Icon : bouton avec une icône à droite
• With Subtitle : inclut deux lignes de texte
• Pulse Animation : inclut un effet de pulse animé
• Purchase : déclenche un achat
• Secondary Outline : bouton avec contour pour les actions secondaires
• Back : revenir à l’écran précédent
• Close flow : quitter le flow
• View more plans : afficher des options de produits supplémentaires
• Links : un ensemble de boutons de pied de page (Restore, Terms of Service, Privacy Policy)

Champs de saisie

Les champs de saisie permettent aux utilisateurs d’entrer des données. Chacun impose 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 & Heure

Les champs Date, Heure et Date & Heure ouvrent le sélecteur natif de l’appareil (molette ou calendrier) au moment du tap.

Utilisez des variables pour traiter les saisies utilisateur et influencer la logique conditionnelle.

Quiz

Les éléments quiz affichent des écrans de sélection à choix multiples pour les sondages, la collecte de préférences et la segmentation des utilisateurs. Configurez des interactions pour faire bifurquer le flow en fonction de la réponse de l’utilisateur.

• Icon Options : liste en colonne unique avec des icônes
• Emoji Options : liste en colonne unique avec des emojis
• Image Options : liste en colonne unique avec des images
• Icon Grid : grille multi-colonnes avec des icônes
• Emoji Grid : grille multi-colonnes avec des emojis
• Image Grid : grille multi-colonnes avec des photos
• Rating : échelle numérotée (par ex., 1–5)

Onglets

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.

• Segment control : sélecteur en forme de pilule avec des coins arrondis autour de l’onglet sélectionné
• Button Tabs : onglets stylisés en boutons séparés
• Underline : libellés texte avec un soulignement indiquant l’onglet sélectionné

Paywall & Commerce

Produits

Les éléments produit affichent les détails des achats intégrés et gèrent la sélection des produits. Chaque préréglage organise les données du produit selon une mise en page différente. Associez vos produits pour alimenter les éléments avec les données réelles d’Adapty.

• Vertical List : cartes produit empilées
• Horizontal List : cartes produit côte à côte
• Feature Carousel : cartes défilantes avec listes de fonctionnalités
• Feature Cards : cartes statiques avec listes de fonctionnalités
• Banner List : lignes compactes avec badges intégrés

Bascule d’essai

Une bascule qui fait passer l’affichage du produit de son prix standard à son offre d’essai gratuit. Lorsqu’elle est activée, la sélection du produit et l’état des éléments se mettent à jour automatiquement.

Engagement des utilisateurs

Blocs prédéfinis avec des notes d’utilisateurs qui inspirent confiance et encouragent la conversion. Les templates sont des conteneurs de base avec du contenu fictif.

• Review : une note en étoiles avec un avis et le nom de l’auteur
• Rating : un score numérique avec affichage en étoiles
• App Rating : un grand score avec une barre d’étoiles et le nombre d’avis
• Social Proof : une pile d’avatars avec un nombre d’utilisateurs

Compte à rebours

Affiche les heures, minutes et secondes défilant jusqu’à zéro. Utilisez-le pour créer un sentiment d’urgence autour des offres à durée limitée. La minuterie peut déclencher des actions lorsqu’elle atteint zéro — comme naviguer vers un autre écran ou masquer le badge de réduction.

• Inline : affichage numérique compact
• Inline with units : affichage numérique avec étiquettes d’unité
• Badge : petit minuteur en surimpression mis en valeur
• Blocks : cartes séparées pour les jours, heures, minutes et secondes

Progression

Indicateurs de progression

Barres de progression par étapes qui indiquent la position de l’utilisateur dans un flow multi-écrans. Utiles pour les séquences d’onboarding où l’utilisateur a besoin de savoir combien d’étapes il reste.

• Linear : une barre continue unique qui se remplit au fur et à mesure de la progression
• Segmented : une barre divisée en segments distincts, un par étape
• Connectors : indicateurs d’étapes numérotés reliés par de courtes lignes de connexion

Chargeurs

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 libellé : spinner associé à un libellé texte (ex. : « Chargement… »)
• Loader : barre de progression horizontale