---
title: Écrans et calques
description: "Gérez les écrans et la hiérarchie des éléments dans chaque écran du Flow Builder."
---

Un flow est composé d'un ou plusieurs écrans. Chaque écran représente une étape du parcours utilisateur — par exemple, un paywall, un quiz ou une diapositive présentant des informations sur un produit.

Les éléments de chaque écran sont organisés selon une hiérarchie de calques.

Pour gérer vos écrans, calques et éléments, ouvrez la vue **Screens and Layers** par défaut. Elle affiche la séquence de vos écrans ainsi que la structure des calques de chaque écran.

## Gérer les écrans \{#manage-screens\}

La partie supérieure du panneau gauche liste tous les écrans du flow. Chaque entrée affiche un libellé numéroté et un aperçu miniature.

* **Sélectionner un écran** : Cliquez sur une entrée pour la rendre active. L'éditeur visuel affiche l'écran sélectionné et la section Calques en dessous se met à jour pour montrer sa hiérarchie de calques.
* **Ajouter un écran** : Cliquez sur le bouton Plus en haut de la section Screens pour ajouter un nouvel écran vide au flow.
* **Ouvrir la bibliothèque de templates** : Cliquez sur le bouton Templates en haut de la section Screens pour parcourir et appliquer des [templates de flow](paywall-builder-templates).
* **Réorganiser les écrans** : Faites glisser-déposer les entrées pour modifier leur ordre dans le flow.

:::important
Si votre flow contient des écrans vides inutilisés, la publication sera impossible. Supprimez les écrans brouillons avant de publier.
:::

### Actions sur les écrans \{#screen-actions\}

Cliquez sur l'icône à trois points Context d'une entrée d'écran pour ouvrir le menu contextuel.

| Action | Raccourci | Description |
|--------|----------|-------------|
| **Play Animation** | | Prévisualiser les animations configurées sur cet écran |
| **Copy** | ⌘C / Ctrl+C | Copier l'écran dans le presse-papiers |
| **Paste here** | ⌘V / Ctrl+V | Coller un écran précédemment copié |
| **Duplicate** | ⌘D / Ctrl+D | Créer une copie de l'écran et l'ajouter au flow |
| **Rename** | | Modifier le nom d'affichage de l'écran |
| **Delete** | ⌘⌫ / Ctrl+Del | Supprimer l'écran du flow |

:::tip
Le presse-papiers est partagé entre les flows. Copiez un écran ou un élément depuis un flow, ouvrez un autre flow et collez-le.
:::

:::warning
Lorsque vous supprimez un écran, toute action [Navigate to Screen](onboarding-navigation-branching) qui pointait vers lui **perd sa cible**, mais l'action elle-même **n'est pas supprimée**. Assignez une nouvelle destination ou supprimez l'action — sinon, vous ne pourrez pas [prévisualiser ni publier le flow](builder-save-publish#publish-a-flow).
:::

## Naviguer entre les écrans \{#navigate-between-screens\}

:::link
Article principal : [Navigation et interaction](onboarding-navigation-branching)
:::

L'ordre des écrans dans la liste ne détermine pas la navigation par lui-même. Pour relier les écrans, utilisez les interactions des éléments : configurez un bouton pour diriger l'utilisateur vers un autre écran.

## Paramètres de l'écran \{#screen-settings\}

Pour afficher les propriétés et paramètres de l'écran actif, cliquez sur une zone vide de l'aperçu de l'écran. Le panneau droit basculera vers la vue des paramètres de l'écran.

### Interface système \{#system-ui\}

Contrôle la façon dont l'écran interagit avec le matériel de l'appareil.

* **Safe area** ajoute un espacement qui maintient le contenu à l'écart de l'encoche et des barres système. Les éléments positionnés individuellement peuvent désactiver cet espacement — voir [Ignore safe area](manage-paywall-ui-elements#ignore-safe-area).
* **Status bar** affiche ou masque la barre d'état système (heure, batterie, signal).

### Inclure l'écran dans l'indicateur de progression \{#include-screen-in-progress-indicator\}

Si vous ajoutez un élément [Progress Indicator](builder-loaders-and-progress-bars#progress-indicators) à votre flow, Adapty l'affiche sur chaque écran.

Décochez **Include screen in progress indicator** pour retirer l'indicateur de progression d'un écran particulier. Utilisez cette option pour soigner l'affichage des écrans de bienvenue, du paywall final ou de toute étape que vous ne souhaitez pas comptabiliser comme progression.

### Mise en page de l'écran \{#screen-layout\}

:::link
Article complet : [Mise en page et positionnement](manage-paywall-ui-elements)
:::

La section **Layout** détermine comment l'écran distribue ses éléments enfants. Ces propriétés sont disponibles sur tout élément conteneur.

* **Free** : Les éléments enfants sont positionnés de façon indépendante.
* **Vertical** : Les éléments sont disposés de haut en bas, comme une colonne flexbox.
* **Horizontal** : Les éléments sont disposés de gauche à droite, comme une rangée flexbox.

Pour les mises en page verticales et horizontales, vous pouvez également configurer l'espacement et l'alignement.

* **Alignment** : Position des éléments sur l'axe transversal.
* **Gap** : Espace entre les éléments adjacents.
* **Distribution** : Répartition de l'espace entre les éléments enfants et autour d'eux.

#### Mise en page RTL \{#rtl-layout\}

Cochez la case **Mirror for RTL** pour inverser la mise en page pour les systèmes d'écriture allant de droite à gauche. L'ordre des éléments dans les conteneurs horizontaux sera retourné.

### Arrière-plan de l'écran \{#screen-background\}

:::link
Article principal : [Arrière-plans](paywall-head-picture)
:::

**Fill** définit l'[arrière-plan de l'écran](paywall-head-picture) avec une couleur unie, un dégradé, une image ou une vidéo. L'arrière-plan couvre l'intégralité de la zone d'affichage de l'appareil, y compris les zones derrière l'encoche et les barres système — même lorsque **Safe area** est activé.

#### Boucle de la vidéo d'arrière-plan \{#loop-background-video\}

Activez le bouton **Loop** pour lire la vidéo d'arrière-plan en boucle continue.

#### Assigner un identifiant média personnalisé \{#assign-a-custom-media-id\}

Comme pour [toute image ou vidéo](custom-media), vous pouvez assigner un identifiant média personnalisé à l'arrière-plan de l'écran pour le référencer dans votre SDK.

### Espacement de l'écran \{#screen-spacing\}

Ajuste le padding de l'écran pour chaque côté (haut, droite, bas, gauche).

### Défilement \{#scroll\}

Contrôle le comportement en cas de débordement. Activez **Vertical scroll** pour permettre au contenu de l'écran de défiler lorsqu'il dépasse la hauteur de la zone d'affichage.

:::link
Utilisez un [Footer](builder-containers#footer) pour ancrer du contenu en bas de l'écran lorsque celui-ci déborde.
:::

### Groupes sélectionnables \{#selectable-groups\}

:::link
Article principal : [Éléments et groupes sélectionnables](flow-selectable-elements)
:::

La section **Selectable groups** liste tous les groupes sélectionnables de l'écran actuel — issus de [quiz](onboarding-quizzes), de [produits](paywall-product-block), d'[onglets](builder-tabs), de [bascules d'essai](builder-toggles) ou de tout [élément sélectionnable personnalisé](flow-selectable-elements#make-an-element-selectable).

Cliquez sur une entrée de groupe pour la renommer, modifier son type, consulter les variables qu'elle expose ou la supprimer.

## Gérer les calques \{#manage-layers\}

Chaque élément d'un écran est représenté sous forme de calque. La section Calques affiche l'ordre des éléments sur l'écran actif.

:::important
Les calques d'un flow ne se superposent pas comme dans un logiciel de conception graphique. Ils représentent des composants individuels de l'écran. Les éléments ne se chevauchent *que* s'ils utilisent un [positionnement absolu ou fixe](manage-paywall-ui-elements). Leur ordre d'empilement est déterminé par la propriété `z-index`, et non par leur position dans l'arborescence des calques.
:::

L'arborescence reflète les relations parent-enfant. Cliquez sur la flèche d'un calque parent pour développer ou réduire ses enfants.

Vous ne pouvez pas créer de calques directement. Chaque élément ajouté via la vue [Add element](builder-elements) apparaît comme un nouveau calque dans l'arborescence.

* **Sélectionner un calque** : Cliquez sur un calque pour le sélectionner. L'éditeur visuel met en surbrillance l'élément correspondant sur le canevas, et le panneau droit affiche ses propriétés de [conception](builder-styling) et d'[interaction](onboarding-navigation-branching).
* **Réorganiser les calques** : Faites glisser-déposer les calques dans l'arborescence pour modifier leur ordre dans le conteneur parent. L'ordre dans l'arborescence correspond à l'ordre visuel à l'écran.
* **Afficher ou masquer un calque** : Survolez un calque pour révéler l'icône œil Eye sur sa droite. Cliquez dessus pour basculer la visibilité du calque. Les calques masqués restent dans l'arborescence mais n'apparaissent ni dans l'éditeur visuel ni sur l'appareil. Pour contrôler la visibilité avec une logique à l'exécution, utilisez la [visibilité conditionnelle](onboarding-element-visibility).
* **Réduire tous les calques** : Cliquez sur le bouton réduire Collapse en haut à droite de la section Calques pour replier toute l'arborescence.

### Actions sur les calques \{#layer-actions\}

Cliquez sur l'icône à trois points Context pour ouvrir le menu contextuel.

| Action | Raccourci | Description |
|--------|----------|-------------|
| **Copy** | ⌘C / Ctrl+C | Copier le calque dans le presse-papiers |
| **Paste here** | ⌘V / Ctrl+V | Coller un calque précédemment copié en tant qu'enfant |
| **Duplicate** | ⌘D / Ctrl+D | Créer une copie du calque dans le même conteneur |
| **Rename** | | Modifier le nom d'affichage du calque. Par défaut, les calques utilisent leur contenu ou type de composant comme nom |
| **Delete** | ⌘⌫ / Ctrl+Del | Supprimer le calque et tous ses enfants |
| **Wrap** | | Envelopper le calque dans un nouveau conteneur : **Wrap in Horizontal Container** ou **Wrap in Vertical Container** |
| **Unwrap / Ungroup** | | Retirer le conteneur enveloppant et déplacer ses enfants d'un niveau vers le haut |
| **Move up** | ↑ | Déplacer le calque d'une position vers le haut dans son conteneur parent |
| **Move down** | ↓ | Déplacer le calque d'une position vers le bas dans son conteneur parent |