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

Le Flow & Paywall Builder comprend 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 pied de page est autorisé par écran. Vous ne pouvez pas dupliquer un pied de page existant, ni en ajouter un nouveau.

Sur un écran avec une feuille coulissante, le pied de page se place à l’intérieur de la feuille mais reste en bas de l’écran.

Footer ou élément fixe

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, mentions légales, liens). Il réserve sa propre hauteur, ce qui garantit que le contenu défile toujours au-dessus sans jamais passer derrière, et il couvre automatiquement la zone de sécurité inférieure.
• Utilisez un élément fixe pour un bouton ou une bannière qui flotte au-dessus du contenu, à n’importe quel bord de l’écran. Le contenu défile en dessous.

Feuille glissante

Une Sliding sheet est un panneau qui superpose votre contenu principal sur une image ou une vidéo en héro. Le panneau couvre la partie inférieure de l’écran et remonte sur le héro au fur et à mesure que l’utilisateur fait défiler. Contrairement à une Bottom Sheet, la sliding sheet est visible dès l’ouverture de l’écran.

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

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.