Les éléments de mise en page regroupent d’autres éléments et contrôlent leur disposition à l’écran.

Le Flow Builder et le Paywall Builder proposent six types d’éléments de mise en page :

• Containers : disposent les éléments enfants sur un axe — verticalement ou horizontalement
• Carousel : un conteneur à défilement tactile qui affiche une diapositive à la fois
• Bottom Sheet : un panneau qui remonte depuis le bas de l’écran et s’affiche par-dessus le contenu sous-jacent
• Footer : un panneau épinglé 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 de fond
• Dividers : de fines lignes qui séparent les lignes ou les colonnes

Conteneurs

Les conteneurs regroupent des éléments verticalement ou horizontalement. Le Vertical Container dispose les éléments en lignes ; le Horizontal Container les dispose en colonnes.

Modifier la direction du conteneur

La direction d’un conteneur n’est pas figée. Vous pouvez à tout moment basculer entre Vertical, Horizontal et Free dans la section Layout du panneau de droite. Passer en mode Free convertit automatiquement chaque enfant en position Absolute.

Les enfants sont affichés dans l’ordre où ils apparaissent dans le panneau Layers — faites-les glisser pour les réorganiser.

Envelopper et désencapsuler

Pour transformer un élément existant en conteneur, sélectionnez-le et utilisez l’action de calque Wrap dans layer action. Faites glisser d’autres éléments dans le nouveau conteneur depuis le panneau Layers. Pour supprimer un conteneur et remonter ses enfants d’un niveau, utilisez Unwrap.

Carrousel

Un Carrousel est un conteneur à défilement qui affiche une diapositive à la fois. L’utilisateur fait défiler horizontalement pour passer à la suivante, ou le carrousel avance automatiquement selon un minuteur.

Un Carrousel contient un ensemble de couches Slide. Lorsqu’une diapositive est active, les éléments de cette couche apparaissent à l’écran.

Contrairement aux onglets, la diapositive active du carrousel n’est pas exposée en tant que groupe sélectionnable — les diapositives ne peuvent pas être référencées dans les conditions ou le texte dynamique. Utilisez un carrousel pour la rotation visuelle, pas pour la navigation pilotée par l’utilisateur.

Changer de diapositive active

Lorsque vous sélectionnez le carrousel, le builder affiche une barre de contrôle contextuelle avec un menu déroulant Slide et un bouton + Add Slide.

• Cliquez sur + Add Slide pour ajouter une nouvelle diapositive vide.
• Utilisez le menu déroulant Slide pour changer la diapositive active sur le canevas — ou cliquez sur le calque Slide correspondant dans le panneau Layers.

Pour réorganiser les diapositives, faites-les glisser dans le Carousel depuis le panneau Layers.

Propriétés

Défilement automatique

Le défilement automatique fait défiler les diapositives automatiquement — l’utilisateur n’a pas à faire glisser pour voir tout le contenu.

Deux réglages de temporisation déterminent son comportement :

• Delay — durée d’affichage de chaque diapositive (ms).
• Duration — durée de la transition entre les diapositives (ms).

Dimensionnement du carrousel

Des contrôles dédiés déterminent la taille du carrousel et l’espacement entre les diapositives adjacentes. Définissez Height sur Fixed pour que la mise en page ne se décale pas lorsque l’utilisateur fait défiler des diapositives de longueurs de contenu différentes.

Dimensionnement des diapositives

Width et Height par diapositive. Par défaut sur Fill, chaque diapositive suit les dimensions du carrousel. Définissez une largeur fixe pour créer un effet de débordement où les diapositives adjacentes sont partiellement visibles.

Points

L’indicateur de page en bas du carrousel. Il indique à l’utilisateur combien de diapositives existent et laquelle est active.

Désactivez le bouton Show dots pour masquer l’indicateur de diapositives. Lorsque les points sont visibles, les propriétés suivantes contrôlent leur apparence :

• Color — couleur de remplissage d’un point inactif.
• Active Color — couleur de remplissage du point correspondant à la diapositive actuellement visible.
• Size — diamètre de chaque point, en pixels.
• Gap — espacement entre les points adjacents.
• Padding — espace entre la rangée de points et le contenu du carrousel au-dessus.

Bas de page

Un Bottom Sheet est un panneau de mise en page qui remonte depuis le bas de l’écran, par-dessus le contenu sous-jacent.

Déclenchez le panneau au tap — par exemple, derrière un lien Show all plans — plutôt qu’au chargement de l’écran.

Structure

Une Bottom Sheet comprend deux couches de niveau supérieur :

• Heading — un conteneur en haut de la feuille, prérempli avec une couche de texte Title et un bouton Close button . Modifiez-les ou supprimez-les selon vos besoins.
• Content — le conteneur principal. Ajoutez-y des produits, des boutons, des liens ou tout autre élément.

Visibilité initiale

Par défaut, une bottom sheet s’affiche dès que l’écran se charge. Pour l’ouvrir à la demande à la place :

1. Construisez d’abord le contenu de la sheet — les calques masqués ne peuvent pas être modifiés, donc la sheet doit rester visible jusqu’à ce que vous ayez fini de la remplir.
2. Dans le panneau Layers, sélectionnez la bottom sheet.
3. Définissez Visibility sur Hide .

La sheet reste dans l’arborescence des calques mais cesse de s’afficher à l’écran.

Déclenchement de la bottom sheet

Pour ouvrir une bottom sheet masquée, associez une action Show à un autre élément :

1. Sélectionnez l’élément déclencheur (par exemple, un bouton ou un lien texte).
2. Ouvrez l’onglet Interactions dans le panneau de droite.
3. Cliquez sur Add trigger > On tap, puis sur Add action.
4. Définissez Action sur Show et sélectionnez la bottom sheet dans le menu déroulant.

Pied de page

Un Footer est un conteneur fixe qui occupe la partie inférieure de l’écran. Sa hauteur est libre et il peut contenir aussi bien un simple bouton que plusieurs lignes de texte. Utilisez le pied de page pour les éléments qui doivent rester en place pendant que le reste de l’écran défile — boutons d’action, mentions légales, liens.

Contrairement aux éléments classiques, le pied de page s’étend jusqu’à la zone de sécurité inférieure de l’appareil : son arrière-plan descend jusqu’au bord de l’écran.

Un seul footer est autorisé par écran. Vous ne pouvez pas dupliquer un footer existant ni en ajouter un nouveau.

Pied de page ou élément fixe classique

Les deux restent à l’écran pendant que le contenu défile. Choisissez l’option qui correspond à votre besoin :

• Utilisez un Footer pour la barre principale en bas de l’écran (bouton CTA, texte légal, liens). Il réserve sa propre hauteur, de sorte que le contenu défile toujours en dessous sans jamais se retrouver masqué derrière lui, et il couvre automatiquement la zone de sécurité inférieure.
• Utilisez un élément fixe pour quelque chose qui doit flotter au-dessus du contenu défilant sans réserver d’espace, ou qui se fixe à un bord autre que le bas — un bouton flottant de fermeture/restauration, une bannière persistante en haut, un bouton de retour en haut de page. Vous gérez vous-même l’espacement de la zone de sécurité.

Feuille glissante

Une feuille glissante affiche votre contenu principal par-dessus une image hero. Le panneau recouvre la partie inférieure de l’écran et remonte sur le fond de l’écran lorsque l’utilisateur fait défiler. Le fond se déplace sur iOS et reste fixe sur les autres plateformes. Ce comportement ne peut pas être modifié.

Les éléments ajoutés en dehors de la feuille s’affichent par-dessus le fond de l’écran. Utilisez-les pour un titre ou un logo sur l’image hero.

• Start position définit quelle proportion de l’écran la feuille couvre, mesurée depuis le bas. Par défaut, la feuille couvre les 55 % inférieurs et le fond est visible sur les 45 % supérieurs. Il n’est pas possible de définir la hauteur de la feuille en valeur absolue. Pour agrandir la feuille, augmentez sa Start position.
• Fill définit l’arrière-plan derrière votre contenu. Augmentez l’opacité pour laisser apparaître l’image hero en transparence.

Une seule feuille coulissante est autorisée par écran. Vous ne pouvez pas dupliquer une feuille coulissante existante ni en ajouter une nouvelle.

Feuille glissante vs. Feuille du bas

Ces deux panneaux occupent le bas de l’écran. Choisissez celui qui correspond à votre besoin :

• Utilisez une Feuille glissante pour superposer le contenu principal de l’écran sur une image hero. La feuille est visible dès l’ouverture de l’écran et se déplace uniquement lorsque l’utilisateur fait défiler.
• Utilisez une Feuille du bas pour du contenu qui apparaît à la demande, comme une liste de plans accessible via un lien Show all plans. Vous l’affichez avec une action Show.

Séparateurs

Le Horizontal Divider et le Vertical Divider sont de fines lignes qui séparent le contenu. Utilisez le Horizontal Divider pour diviser des lignes, et le Vertical Divider pour diviser des colonnes à l’intérieur d’un conteneur horizontal. Ajustez l’épaisseur, la couleur et la longueur depuis le panneau de droite.