---
title: "Créer un paywall avec des onglets"
description: "Créez un écran de paywall avec deux onglets qui alternent entre différentes listes de fonctionnalités, groupes de produits et actions d'achat."
---

Ce template utilise des onglets pour alterner entre deux variantes de la même offre sur un seul écran. Chaque onglet contient sa propre liste de fonctionnalités, liste de produits et bouton d'achat. Appuyer sur un onglet change le contenu visible sans quitter l'écran — pratique pour diviser les plans par niveau, période de facturation ou segment d'audience.

## 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. Configurer la mise en page de l'écran \{#1-set-up-the-screen-layout\}

L'écran sert de conteneur pour le bouton de fermeture, le titre, les onglets et leur contenu. Dans cet exemple, l'arrière-plan est une image, mais une couleur unie ou un dégradé fonctionne de la même façon.

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

Pour configurer l'écran :

1. Cliquez sur une zone vide du canvas pour sélectionner l'écran.
2. Sous **System UI**, désactivez **Safe area** pour que l'arrière-plan s'étende jusqu'aux bords de l'écran.
3. Sous **Fill**, choisissez un type d'arrière-plan et configurez-le. Cet exemple utilise une **Image** Image, mais une couleur unie ou un dégradé fonctionne de la même façon.
4. Sous **Layout**, définissez la direction sur **Vertical** Vertical et configurez l'espacement et l'alignement pour que les éléments s'empilent depuis le haut, le contenu des onglets remplissant l'espace restant.

## 2. Ajouter le bouton de fermeture \{#2-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**.

## 3. Ajouter le titre et le grouper avec le bouton de fermeture \{#3-add-the-title-and-pair-it-with-the-close-button\}

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

Pour ajouter le titre :

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

Pour grouper 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 de droite pour que les éléments s'alignent correctement.

## 4. Ajouter les onglets et configurer leurs étiquettes \{#4-add-the-tabs-and-configure-their-labels\}

L'élément Tabs divise une section de l'écran en panneaux de contenu commutables. Chaque onglet dispose de son propre conteneur de contenu qui s'affiche lorsque l'utilisateur sélectionne cet onglet.

Pour en savoir plus sur l'élément Tabs, voir [Éléments — Tabs](builder-elements#tabs). Pour en savoir plus sur les groupes sélectionnables, voir [Éléments et groupes sélectionnables](flow-selectable-elements).

Pour ajouter les onglets :

1. Cliquez sur **+** > **Tabs** et choisissez un preset — Segment control, Button Tabs ou Underline.
2. Avec le nom de chaque onglet sélectionné sur le canvas ou dans le panneau **Layers**, modifiez le champ **Content** dans l'onglet **Design** pour changer l'étiquette — par exemple, `Premium` et `Pro`.

## 5. Ajouter une liste de fonctionnalités au premier onglet \{#5-add-a-feature-list-to-the-first-tab\}

Une liste de fonctionnalités courte et compacte dans le premier onglet indique aux utilisateurs ce que ce plan inclut.

Pour l'ensemble des presets de liste, voir [É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 compact pour les paywalls. L'élément apparaît à la fin de l'arborescence des calques.
2. Avec chaque ligne sélectionnée, modifiez le titre dans le champ **Content**.

3. Dans le panneau **Layers**, faites glisser la liste dans le conteneur **Content** du premier onglet.

## 6. Ajouter la liste de produits au premier onglet \{#6-add-the-product-list-to-the-first-tab\}

La liste de produits affiche les options d'abonnement du premier onglet. L'élément Products génère une carte par produit assigné à l'écran et crée son propre groupe sélectionnable.

Pour en savoir plus sur la gestion des produits, voir [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 convient bien aux plans empilés. L'élément apparaît à la fin de l'arborescence des calques.
2. Sélectionnez chaque carte produit sur le canvas et choisissez un produit dans le menu déroulant de l'onglet **Design**.

3. Dans le panneau **Layers**, faites glisser le calque Products dans le conteneur **Content** du premier onglet.

## 7. Ajouter le bouton d'achat au premier onglet \{#7-add-the-purchase-button-to-the-first-tab\}

Le bouton d'achat lance l'achat intégré pour le produit sélectionné par l'utilisateur dans le premier onglet. Son étiquette utilise le prix du produit sélectionné pour rester synchronisée avec le choix de l'utilisateur.

Pour en savoir plus sur l'action Purchase, voir [Actions — Purchase](onboarding-actions#purchase).

Pour ajouter et configurer le bouton d'achat :

1. Cliquez sur **+** > **Buttons** et choisissez un preset de bouton. L'élément apparaît à la fin de l'arborescence des calques.
2. Avec le bouton sélectionné, ouvrez l'onglet **Design** et placez le curseur dans le champ **Content**. Cliquez sur l'icône de variable Variable icon, sélectionnez `products.selectedProduct`, puis sélectionnez l'attribut `prod_price` — la variable complète est `products.selectedProduct.prod_price`. Entourez-la du reste de l'étiquette — par exemple, `Subscribe for {prod_price}`.

3. Passez à l'onglet **Interactions** et cliquez sur **Add trigger** > **On tap** > **Add action**.
4. Définissez **Action** sur **Purchase** et **Product** sur `products.selectedProduct`.

5. Dans le panneau **Layers**, faites glisser le bouton dans le conteneur **Content** du premier onglet.

## 8. Copier le contenu du premier onglet dans le second \{#8-copy-the-first-tabs-content-into-the-second-tab\}

Plutôt que de reconstruire la même structure de zéro, copiez la liste de fonctionnalités, la liste de produits et le bouton d'achat du premier onglet dans le second. Vous n'aurez qu'à mettre à jour les valeurs ensuite.

Pour copier le contenu :

1. Dans le panneau **Layers**, développez le conteneur **Content** du premier onglet.
2. Sélectionnez chaque élément à l'intérieur (liste de fonctionnalités, produits, bouton d'achat), copiez-le avec ⌘C / Ctrl+C, et collez-le avec ⌘V / Ctrl+V. Les copies apparaissent à la fin de l'arborescence des calques.
3. Faites glisser chaque élément copié dans le conteneur **Content** du second onglet.

## 9. Mettre à jour le contenu du second onglet \{#9-update-the-second-tabs-content\}

Le second onglet reproduit maintenant le premier. Mettez à jour chaque élément pour qu'il reflète le second plan.

Pour mettre à jour le second onglet :

1. Modifiez la liste de fonctionnalités dans le second onglet pour que les lignes correspondent aux fonctionnalités du second plan.
2. Sélectionnez chaque carte produit dans l'élément Products du second onglet et assignez les produits du second plan depuis le menu déroulant. Cet élément Products devient automatiquement un groupe sélectionnable distinct (`products2`).
3. Sélectionnez le bouton d'achat dans le second onglet. Dans le champ **Content** de l'onglet **Design**, changez la variable de prix de `products.selectedProduct.prod_price` en `products2.selectedProduct.prod_price`.
4. Passez à l'onglet **Interactions** et mettez à jour le **Product** de l'action **Purchase** de `products.selectedProduct` vers `products2.selectedProduct`.

## 10. Ajouter les liens du pied de page partagés \{#10-add-the-shared-footer-links\}

Les conditions d'utilisation, la politique de confidentialité et la restauration des achats restent visibles quel que soit l'onglet actif. Ajoutez-les au niveau de l'écran — en dehors des deux conteneurs de contenu des onglets — pour qu'ils soient partagés entre les onglets.

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 à la fin de l'arborescence des calques, ce qui est exactement l'emplacement voulu — à la racine de l'écran, pas imbriqué dans un onglet.
2. Dans le panneau **Layers**, sélectionnez le bouton **Terms of Use**. Ouvrez l'onglet **Interactions** et collez l'URL de vos conditions dans le champ **Open URL**.
3. Répétez l'opération pour le bouton **Privacy Policy** avec votre URL de confidentialité.
4. Laissez le lien **Restore Purchases** tel quel. Son action est préconfigurée.

## É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.