---
title: "Créer un écran de paywall basique"
description: "Guide pas à pas pour créer un écran de paywall standard dans le Flow Builder."
---

C'est le template de paywall le plus courant. Utilisez-le comme écran autonome ou placez-le à la fin d'un [flow](adapty-flow-builder) multi-écrans.

Un écran de paywall standard contient un titre, une description de la valeur, une liste de fonctionnalités, une liste de produits, un bouton d'achat et des liens en pied de page pour restaurer les achats, les conditions d'utilisation et la politique de confidentialité.

## Avant de commencer \{#before-you-start\}

- [Créez des produits](create-product) dans l'Adapty Dashboard.
- [Connectez Adapty à l'App Store et Google Play](integrate-payments).

## 1. Configurez les styles réutilisables \{#1-set-up-reusable-styles\}

Les styles réutilisables vous permettent d'appliquer les mêmes typographies et couleurs sur tous les écrans en un seul clic. Chaque nouveau flow est livré avec un ensemble de styles de texte par défaut (H1, Body, Button Label, etc.) — ajustez-les pour correspondre à votre design avant d'ajouter des éléments. Ajoutez des styles de couleur pour les couleurs de votre marque que vous utiliserez sur l'ensemble de l'écran.

Pour les instructions complètes, consultez [Styles et apparence — Styles réutilisables](builder-styling#reusable-styles).

Pour configurer les styles :

1. Dans le panneau gauche, ouvrez le panneau **Styles** Styles.
2. Dans l'onglet **Text**, cliquez sur un style existant pour modifier sa police, sa graisse, sa taille et sa couleur. N'ajoutez de nouveaux styles que si les styles par défaut ne couvrent pas vos besoins.

3. Dans l'onglet **Colors**, cliquez sur **Plus Create style** et ajoutez les couleurs que vous comptez réutiliser sur l'écran.

## 2. Configurez la mise en page de l'écran \{#2-set-up-the-screen-layout\}

L'écran lui-même fait office de conteneur pour tout ce que vous ajoutez. Configurez sa mise en page, son arrière-plan et ses marges internes en premier, afin que les éléments ajoutés ensuite se distribuent correctement.

Pour la liste complète des propriétés d'écran, consultez [Écrans et calques — Paramètres d'écran](paywall-layout-and-products#screen-settings).

Pour configurer l'écran :

1. Cliquez sur une zone vide du canvas pour sélectionner l'écran. Le panneau droit bascule sur les paramètres de l'écran.
2. Sous **System UI**, désactivez **Safe area** pour que le contenu s'étende jusqu'aux bords de l'écran.
3. Sous **Layout**, définissez la direction sur **Vertical** Vertical et la distribution sur **Space evenly**.

4. Sous **Fill**, choisissez un type d'arrière-plan — couleur unie, dégradé ou image. Cet exemple utilise un **Gradient** Gradient avec deux points de couleur.

## 3. Ajoutez le bouton de fermeture \{#3-add-the-close-button\}

Le bouton de fermeture ferme le paywall. Le preset **Close** est préconfiguré — aucune configuration d'action n'est nécessaire.

1. Sur le canvas, cliquez sur **+**.
2. Sélectionnez **Buttons** > **Close**.

## 4. Ajoutez le titre et associez-le au bouton de fermeture \{#4-add-the-title-and-pair-it-with-the-close-button\}

Le H1 se place à côté du bouton de fermeture en haut de l'écran. Pour les aligner horizontalement, regroupez-les dans un conteneur horizontal.

Pour ajouter le titre :

1. Cliquez sur **+** > **Text** > **H1**.
2. Avec le H1 sélectionné, ouvrez l'onglet **Design** dans le panneau droit et modifiez le texte dans le champ **Content**.

Pour regrouper le titre avec le bouton de fermeture :

1. Dans le panneau **Layers**, cliquez sur le menu à trois points Context menu du calque du bouton de fermeture et choisissez **Wrap** > **Wrap in Horizontal Container**.

2. Faites glisser le calque H1 dans le nouveau conteneur horizontal.

Pour aligner les deux éléments :

1. Ajustez la taille du bouton de fermeture et la taille de police du H1 pour qu'ils tiennent confortablement sur la même ligne.
2. Avec le conteneur horizontal sélectionné, définissez l'alignement et la distribution dans le panneau droit pour que les éléments s'alignent correctement.

## 5. Ajoutez la description de la valeur \{#5-add-the-value-description\}

Une courte ligne de corps sous le titre explique ce que l'utilisateur obtient avec l'abonnement.

1. Cliquez sur **+** > **Text** > **Body**.
2. Avec l'élément body sélectionné, modifiez le texte dans le champ **Content** de l'onglet **Design**.

## 6. Ajoutez la liste de fonctionnalités \{#6-add-the-feature-list\}

La liste de fonctionnalités met en avant ce qu'inclut le déverrouillage de l'abonnement. Chaque ligne comporte une icône, un titre de fonctionnalité et une courte description.

Pour l'ensemble des presets de liste, consultez [Éléments — List](builder-elements#list).

Pour ajouter la liste de fonctionnalités :

1. Cliquez sur **+** > **List** et choisissez un preset de liste. Icon List est le plus courant pour les paywalls.
2. Avec chaque ligne sélectionnée, modifiez le titre et la description dans le champ **Content**.
3. Pour ajouter ou supprimer des lignes, sélectionnez la liste et utilisez les contrôles de ligne dans le panneau **Layers**.

## 7. Ajoutez la liste de produits \{#7-add-the-product-list\}

La liste de produits affiche les options d'abonnement parmi lesquelles l'utilisateur peut choisir. L'élément Products génère une carte par produit assigné à l'écran, et une carte est automatiquement désignée comme sélection par défaut.

Pour en savoir plus sur la gestion des produits, consultez [Configurer les achats](paywall-product-block).

Pour ajouter et configurer les produits :

1. Cliquez sur **+** > **Products** et choisissez un preset de mise en page. Vertical List est le plus courant.
2. Sélectionnez chaque carte produit sur le canvas et choisissez un produit dans le menu déroulant de l'onglet **Design**. Le menu déroulant affiche tous les produits configurés dans l'Adapty Dashboard.
3. Pour changer la sélection par défaut, sélectionnez la carte souhaitée et activez **Set as default product** dans l'onglet **Design**.
4. Pour personnaliser le badge de réduction, développez une carte produit dans le panneau **Layers**, sélectionnez le calque du badge et modifiez son texte dans le champ **Content**. Masquez le badge sur les autres cartes en cliquant sur l'icône œil Show à côté de chaque calque de badge.

## 8. Ajoutez le bouton d'achat \{#8-add-the-purchase-button\}

Le bouton d'achat lance l'achat intégré pour le produit sélectionné par l'utilisateur. La variable `products.selectedProduct` correspond toujours au produit actuellement sélectionné sur l'écran.

Pour ajouter le bouton d'achat :

1. Cliquez sur **+** > **Buttons** et choisissez un preset de bouton.
2. Avec le bouton sélectionné, ouvrez l'onglet **Interactions** dans le panneau droit.
3. Cliquez sur **Add trigger** > **On tap**, puis cliquez sur **Add action**.
4. Définissez **Action** sur **Purchase** et **Product** sur `products.selectedProduct`.

## 9. Ajoutez les liens du pied de page \{#9-add-footer-links\}

Le pied de page contient des liens vers les conditions d'utilisation et la politique de confidentialité (requis par les stores) ainsi qu'un bouton pour restaurer les achats précédents.

Pour ajouter les liens du pied de page :

1. Cliquez sur **+** > **Buttons** > **Links**. Cela ajoute une ligne avec Restore Purchases, Terms of Use et Privacy Policy.
2. Dans le panneau **Layers**, sélectionnez le bouton **Terms of Use**. Ouvrez l'onglet **Interactions** — l'action **Open URL** est déjà associée. Cliquez sur l'action et saisissez l'URL cible.
3. Répétez l'opération pour le bouton **Privacy Policy** avec votre URL de politique de confidentialité.
4. Laissez le bouton **Restore Purchases** tel quel. Son action est préconfigurée.

:::tip
Si le positionnement d'un élément vous semble trop haut ou trop bas, ou si vous souhaitez ajouter de l'espace quelque part, ajustez les marges et la marge interne de l'élément.
:::

## Étapes suivantes \{#next-steps\}

- [Enregistrez et publiez votre flow](builder-save-publish).
- [Ajoutez le flow à un placement](create-placement) pour commencer à le montrer aux utilisateurs.