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

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

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

• Conteneurs : disposent les enfants selon un axe — verticalement ou horizontalement
• Carrousel : un conteneur à défilement qui affiche une diapositive à la fois
• Feuille du bas : un panneau qui remonte depuis le bas de l’écran et s’affiche par-dessus le contenu sous-jacent
• Pied de page : un panneau épinglé en bas de l’écran, en dehors de la zone de défilement
• Séparateurs : de fines lignes qui séparent des lignes ou des colonnes

Conteneurs

Les conteneurs regroupent des éléments verticalement ou horizontalement. Le Conteneur vertical dispose les éléments en lignes ; le Conteneur horizontal les dispose en colonnes.

Changer la direction du conteneur

La direction d’un conteneur n’est pas figée. Basculez entre Vertical, Horizontal et Libre dans la section Mise en page du panneau droit à tout moment — pas besoin de supprimer et de recréer le conteneur.

Configurez l’espacement, l’alignement et la distribution dans la même section Mise en page. Les enfants s’affichent dans l’ordre où ils apparaissent dans le panneau Calques — faites-les glisser pour les réordonner.

Envelopper et désenvelopper

Pour transformer un élément existant en conteneur, sélectionnez-le et utilisez l’action de calque Envelopper. Faites glisser des éléments supplémentaires dans le nouveau conteneur depuis le panneau Calques. Pour supprimer un conteneur et faire remonter ses enfants d’un niveau, utilisez Désenvelopper.

Carrousel

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

Un Carrousel contient un ensemble de calques Diapositive. Lorsqu’une diapositive est active, les éléments de ce calque apparaissent à l’écran.

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

Changer la diapositive active

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

• Cliquez sur + Ajouter une diapositive pour ajouter une nouvelle diapositive vide.
• Utilisez le menu déroulant Diapositive pour choisir quelle diapositive est active sur le canevas — ou cliquez sur le calque Diapositive correspondant dans le panneau Calques.

Pour réordonner les diapositives, faites-les glisser à l’intérieur du Carrousel dans le panneau Calques.

Propriétés

Défilement automatique

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

Deux contrôles de minuterie définissent son comportement :

• Délai — durée pendant laquelle chaque diapositive reste visible (ms).
• Durée — durée de la transition entre les diapositives (ms).

Taille du carrousel

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

Taille des diapositives

Largeur et Hauteur par diapositive. Par défaut sur Remplir afin que chaque diapositive suive les dimensions du carrousel. Définissez une largeur fixe pour créer un effet d’aperçu 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 Afficher les points pour masquer l’indicateur de diapositive. Lorsque les points sont visibles, les propriétés suivantes contrôlent leur apparence :

• Couleur — remplissage d’un point inactif.
• Couleur active — remplissage du point pour la diapositive actuellement visible.
• Taille — diamètre de chaque point, en pixels.
• Écart — espacement entre les points adjacents.
• Rembourrage — espace entre la rangée de points et le contenu du carrousel au-dessus.

Feuille du bas

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

La feuille floute toujours ce qui se trouve derrière elle ; ce flou ne peut pas être désactivé. Déclenchez-la au toucher — par exemple, derrière un lien Voir tous les plans — plutôt qu’au chargement de l’écran.

Structure

Une Feuille du bas est livrée avec deux calques de premier niveau :

• En-tête — un conteneur en haut de la feuille, prérempli avec un calque de texte Titre et un Bouton Fermer . Modifiez-les ou supprimez-les selon vos besoins.
• Contenu — le conteneur principal. Ajoutez-y des produits, des boutons, des liens ou tout autre élément.

Visibilité initiale

Par défaut, une feuille du bas apparaît dès que l’écran s’affiche. Pour l’ouvrir à la demande à la place :

1. Remplissez d’abord le contenu de la feuille — les calques masqués ne peuvent pas être modifiés, donc la feuille doit rester visible jusqu’à ce que vous ayez terminé de la remplir.
2. Dans le panneau Calques, sélectionnez la feuille du bas.
3. Définissez la Visibilité sur Masquer .

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

Déclencher la feuille du bas

Pour ouvrir une feuille du bas masquée, attachez une action Afficher à 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 droit.
3. Cliquez sur Ajouter un déclencheur > Au toucher, puis sur Ajouter une action.
4. Définissez l’Action sur Afficher et sélectionnez la feuille du bas dans le menu déroulant.

Pied de page

Un Pied de page est un conteneur fixe qui occupe la partie inférieure d’un écran. Il peut avoir n’importe quelle hauteur et contenir n’importe quoi, d’un simple bouton à plusieurs lignes de texte. Utilisez le pied de page pour le contenu qui doit rester en place pendant que le reste de l’écran défile — boutons d’appel à l’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 va 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.

Pied de page vs. un élément fixe ordinaire

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

• Utilisez un Pied de page pour la barre inférieure principale de l’écran (bouton d’appel à l’action, mentions légales, liens). Il réserve sa propre hauteur, de sorte que le contenu défile toujours au-dessus de lui et ne se cache jamais 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 plutôt que de réserver de l’espace, ou qui s’épingle à un bord autre que le bas — un bouton de fermeture/restauration flottant, une bannière persistante en haut, un contrôle de retour en haut. Vous gérez vous-même l’espacement de la zone de sécurité.

Séparateurs

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