Le Flow & Paywall Builder crée des mises en page responsives. Vous ne faites pas glisser les éléments vers des coordonnées exactes — vous les imbriquez plutôt dans des conteneurs qui organisent automatiquement leurs enfants.

Le conteneur définit la direction des éléments (verticale ou horizontale), leur alignement et leur espacement. Les éléments individuels peuvent ensuite affiner leur taille et leurs marges, ou — si nécessaire — sortir du flux avec un positionnement absolu ou fixe.

Réorganisez sans rien déplacer.

Demandez à l’Éditeur IA un badge « Plus populaire », un pied de page sticky ou une toute nouvelle section de preuves sociales — il crée les conteneurs pour vous.

Explore the AI Editor›

Disposition

La disposition est l’outil principal pour organiser les éléments à l’écran. Chaque conteneur distribue automatiquement ses enfants selon un ensemble de règles — direction, alignement et espacement. Les éléments de disposition disponibles dans le builder sont :

• Conteneur vertical : Dispose les enfants de haut en bas
• Conteneur horizontal : Dispose les enfants de gauche à droite
• Séparateur : Un séparateur visuel entre les éléments
• Carrousel : Un ensemble de diapositives défilant horizontalement
• Feuille du bas : Un panneau superposé coulissant qui révèle du contenu supplémentaire lorsque l’utilisateur appuie sur un bouton

Les conteneurs sont les éléments de base d’un écran. Vous pouvez les imbriquer les uns dans les autres pour créer des mises en page complexes. Chaque conteneur dispose d’une section Layout dans le panneau de droite qui contrôle la disposition de ses enfants.

Pour regrouper des éléments dans un nouveau conteneur, utilisez l’action de calque Wrap layer action. Pour supprimer un conteneur et promouvoir ses enfants, utilisez Unwrap.

Direction

• Free : Pas de mise en page automatique. Les enfants se superposent au lieu de s’aligner. Sélectionner Free convertit chaque enfant en position Absolute, et leur ordre d’empilement détermine ce qui recouvre quoi
• Vertical : Les enfants s’empilent de haut en bas, comme des lignes dans une colonne
• Horizontal : Les enfants s’organisent de gauche à droite, comme des éléments dans une rangée

Ordre des éléments

Les enfants s’affichent dans l’ordre où ils apparaissent dans le panneau Layers. Dans un conteneur vertical, l’élément en haut de la liste apparaît en haut de l’écran. Dans un conteneur horizontal, l’élément en haut de la liste apparaît à gauche. Faites glisser les éléments dans le panneau Layers pour les réorganiser, ou utilisez Move up et Move down comme actions de calque.

Alignement

La grille d’alignement contrôle la position des éléments enfants sur l’axe transversal du conteneur. Dans un conteneur vertical, l’alignement gère le placement horizontal des enfants (gauche, centre ou droite). Dans un conteneur horizontal, il gère leur placement vertical (haut, milieu ou bas).

Distribution

La distribution détermine comment l’espace est réparti entre les enfants le long de l’axe principal :

• Gap (par défaut) : Une valeur en pixels fixe entre les enfants adjacents
• Space Between : Les enfants s’étendent jusqu’aux bords ; des espaces égaux apparaissent entre eux
• Space Around : Un espace égal entoure chaque enfant, avec des demi-espaces aux bords
• Space Evenly : Un espace égal avant, entre et après tous les enfants

Rogner le contenu

Rogne visuellement le contenu qui dépasse les limites du conteneur. Désactivez cette option pour autoriser le débordement (par exemple, un badge qui dépasse intentionnellement le bord de la carte).

Position

Par défaut, la position de chaque élément est déterminée automatiquement par la disposition de son conteneur. Le bouton Position vous permet de le sortir du flux normal et de le positionner manuellement.

Relative (par défaut)

L’élément reste dans le flux de mise en page normal. Sa position est déterminée automatiquement par les règles de disposition du conteneur parent — vous ne pouvez pas le déplacer librement. Utilisez Margin pour ajuster l’espace autour d’un élément en position relative.

Utilisez le positionnement relatif pour la grande majorité des contenus : blocs de texte, images, cartes, boutons et éléments de liste.

Absolu

L’élément sort du flux normal et se superpose aux autres contenus. Il n’affecte plus la disposition des éléments voisins.

Lorsque vous sélectionnez Absolute, des contrôles supplémentaires apparaissent :

• Champs de décalage (T, L, R, B) : Définissent la distance en pixels entre l’élément et chaque bord de son conteneur parent
• Grille d’ancrage : Cliquez sur un point de la grille 3×3 pour choisir le coin, le bord ou le centre du parent auquel l’élément s’ancre
• Ancrage horizontal (Gauche / Centre / Droite) et Ancrage vertical (Haut / Centre / Bas) : Listes déroulantes qui contrôlent le même point d’ancrage que la grille
• Z-index : Champ numérique qui définit l’ordre d’empilement de l’élément parmi les autres éléments positionnés

Utilisez un positionnement absolu pour les superpositions décoratives, les badges, les boutons de fermeture et les icônes placés par-dessus des images.

Fixe

L’élément ignore complètement son conteneur parent et se fixe à l’écran. Il reste visible pendant que l’utilisateur fait défiler — le contenu de la page défile en dessous.

Le positionnement fixe utilise les mêmes commandes qu’Absolu (décalages, grille d’ancrage, Z-index). Tous les décalages sont relatifs à la zone de sécurité de l’écran plutôt qu’au parent. Par exemple, un décalage de 0 depuis le bas maintient l’élément au-dessus de l’indicateur d’accueil. Pour mesurer les décalages depuis les bords physiques de l’écran, activez Ignorer la zone de sécurité.

Utilisez le positionnement fixe pour les éléments qui doivent flotter au-dessus du contenu défilant plutôt que de réserver de l’espace — boutons de fermeture ou de restauration flottants, bandeaux persistants en haut, contrôles de retour en haut de page et barres de navigation. Pour une zone d’action dédiée en bas, utilisez un Footer à la place. Pour superposer votre contenu sur une image hero, utilisez une Sliding sheet.

Position dans un conteneur Free

Un conteneur Free n’ordonne pas ses enfants. Vous devez donc définir leur positionnement manuellement. La position Relative n’est pas prise en charge. Les enfants suivent les règles ci-dessous :

• Si l’enfant est également un conteneur Free, il ne peut avoir qu’une position absolue. Adapty masque son bouton Position. Pour le faire réapparaître, définissez la Direction de cet enfant sur Vertical ou Horizontal.
• Tous les autres enfants peuvent avoir la position absolue ou fixe.

Ignorer la zone de sécurité

La zone de sécurité est la partie de l’écran qui reste dégagée de l’encoche, de la barre de statut et de l’indicateur d’accueil. Par défaut, les éléments positionnés restent à l’intérieur de cette zone.

Cochez la case Ignore safe area sous le sélecteur de type de position pour mesurer les décalages de l’élément depuis les bords physiques de l’écran. L’élément peut alors s’étendre derrière l’encoche et l’indicateur d’accueil.

Pour les médias plein écran : positionnez une image ou une vidéo en Fixed, réglez les quatre décalages à 0, et sélectionnez Ignore safe area. Le média couvre ainsi tout l’écran, bord à bord.

La case à cocher ne fonctionne qu’avec les positionnements absolu et fixe. Pour les éléments en positionnement relatif, elle est désactivée, et repasser un élément en Relative efface ce réglage.

Dimensionnement

Chaque élément dispose de contrôles Width et Height. Cliquez sur le menu déroulant de l’un ou l’autre pour sélectionner un mode de dimensionnement.

Mode	Taille de l’élément	Disponible
Fill	S’étire pour occuper tout l’espace disponible dans son parent. La valeur affichée est calculée automatiquement	Éléments relatifs uniquement
Hug	Se réduit pour s’adapter à son contenu. La valeur affichée est calculée automatiquement	Partout sauf un enfant Free dans un conteneur Free
Fixed	Correspond à la valeur en pixels que vous saisissez, quelle que soit la taille du parent ou du contenu	Partout
Auto	Étire le contenu entre deux décalages	Éléments absolus ou fixes uniquement, une fois que Left et Right, ou Top et Bottom, sont tous les deux définis. Adapty l’applique automatiquement — vous ne pouvez pas le sélectionner

Appliquer la direction Free à l’élément parent d’un élément transforme la taille Fill de cet élément en Fixed. Si l’élément utilise lui aussi la direction Free, sa taille Hug devient également Fixed.

Les images ont leurs propres proportions, donc la hauteur que vous leur donnez détermine si elles sont recadrées. Voir Dimensionnement des images.

Espacement

Définissez les valeurs d’espacement indépendamment pour chaque côté de l’élément.

Contrôle	Ce qu’il fait	Disponible
Margin	Ajoute de l’espace entre l’élément et ses voisins. Une valeur élevée ne pousse jamais l’élément en dehors de son parent	Tout élément avec un positionnement relatif. Les écrans n’ont pas de marge
Padding	Ajoute de l’espace entre la bordure de l’élément et son contenu. Une largeur ou hauteur Hug s’agrandit pour l’inclure	Conteneurs, écrans et autres éléments avec du contenu enfant. Exceptions : les enfants directs des conteneurs Free, et les écrans Free eux-mêmes.

Sélectionner la direction Free direction efface le padding que le conteneur avait.

Ordre d’empilement

Les éléments relatifs ne se superposent jamais entre eux — chaque conteneur dispose ses enfants en séquence. Le chevauchement n’intervient que lorsqu’un élément sort du flux normal avec un positionnement Absolute ou Fixed.

Un élément Absolute ou Fixed s’affiche au-dessus de ses éléments frères relatifs, quelle que soit l’ordre des calques. Les éléments relatifs n’ont pas de champ Z-index, car ils ne se chevauchent jamais.

Lorsque plusieurs éléments Absolute ou Fixed occupent le même espace, leur ordre d’empilement est déterminé par deux critères, par ordre de priorité :

• Z-index. Valeur par défaut : 0. L’élément ayant la valeur la plus élevée apparaît au-dessus, quel que soit l’ordre des calques.
• Ordre des calques. Si deux éléments ont le même z-index, l’élément situé plus bas dans la liste des calques apparaît au-dessus.