Pour ouvrir la bibliothèque d’éléments et ajouter un nouvel élément à un écran, cliquez sur le bouton 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 (conteneurs de mise en page, texte, médias, listes, badges, coches)
• Formulaires & Quiz (boutons, champs de saisie, quiz, onglets)
• Paywall & Commerce (produits, bascules, engagement utilisateur, compte à rebours)
• Indicateurs de progression et chargeurs

Pour chaque élément, Adapty propose plusieurs presets — des modèles avec du contenu fictif 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.

• Vertical Container : organise les éléments enfants de haut en bas
• Horizontal Container : organise les éléments enfants de gauche à droite
• Dividers (horizontal and vertical) : lignes qui séparent visuellement les sections de contenu
• Carousel : un conteneur glissable
• Footer : un panneau ancré en bas de l’écran, en dehors de la zone de défilement
• Sliding sheet : un panneau qui superpose votre contenu principal sur une image hero
• 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.

Coches

Icônes indicatrices à utiliser dans les éléments sélectionnables, comme les cartes de produits. Chaque forme est disponible en preset activé et désactivé.

• Checkbox
• Circle
• Radiobutton
• Toggle

Pour un interrupteur ou une case à cocher que l’utilisateur tape directement, utilisez plutôt les éléments Toggle.

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

Interrupteurs et cases à cocher que les utilisateurs appuient pour activer ou désactiver une option. Chacun est un élément sélectionnable, ce qui permet à d’autres éléments de réagir à son état.

• Trial toggle : bascule l’affichage du produit entre son prix standard et son offre d’essai gratuit
• Checkbox : une case à cocher avec une étiquette textuelle, préremplie avec une ligne de consentement aux conditions et à la politique de confidentialité
• Toggle : un interrupteur avec une étiquette textuelle

Engagement utilisateur

Blocs pré-stylisés avec des évaluations d’utilisateurs qui renforcent la confiance et favorisent la conversion. Les modèles sont des conteneurs de base avec du contenu fictif.

• Review : une note en étoiles avec un avis et le nom du rédacteur
• Review Carousel : des cartes d’avis défilantes avec des points de pagination
• Rating : un score numérique avec affichage en étoiles
• App Rating : un score prominent avec une barre d’étoiles et un 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