Éléments de mise en page : conteneurs, carrousels, feuilles de bas de page

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

Le Flow & Paywall Builder comprend cinq types d’éléments de mise en page :

• Containers : organisent les enfants selon un axe — vertical ou horizontal
• Carousel : un conteneur à défilement qui affiche une diapositive à la fois
• Bottom Sheet : un panneau qui glisse depuis le bas de l’écran et s’affiche par-dessus le contenu sous-jacent
• Footer : un panneau épinglé au bas de l’écran, en dehors de la zone de défilement
• 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. Basculez entre Vertical, Horizontal et Free dans la section Layout du panneau droit à tout moment — inutile de supprimer et recréer le conteneur.

Configurez l’espacement, l’alignement et la distribution dans la même section Layout. Les enfants s’affichent dans l’ordre où ils apparaissent dans le panneau Layers — faites 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é.

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.