---
title: "Crear un paywall con pestañas"
description: "Construye una pantalla de paywall con dos pestañas que alternan entre diferentes listas de características, grupos de productos y acciones de compra."
---

Esta plantilla usa pestañas para alternar entre dos variantes de la misma oferta en una sola pantalla. Cada pestaña contiene su propia lista de características, lista de productos y botón de compra. Al tocar una pestaña, el contenido visible cambia sin salir de la pantalla — ideal para separar planes por nivel, período de facturación o segmento de audiencia.
## Antes de empezar \{#before-you-start\}

- [Crea productos](create-product) en el Adapty Dashboard.
- [Conecta Adapty con App Store y Google Play](integrate-payments).
## 1. Configura el diseño de la pantalla \{#1-set-up-the-screen-layout\}

La pantalla actúa como contenedor del botón de cierre, el encabezado, las pestañas y el contenido de cada pestaña. En este ejemplo, el fondo es una imagen, aunque un color sólido o un degradado funcionan igual.

Para ver la lista completa de propiedades de pantalla, consulta [Pantallas y capas — Configuración de pantalla](paywall-layout-and-products#screen-settings).

Para configurar la pantalla:
1. Haz clic en un área vacía del lienzo para seleccionar la pantalla.
2. En **System UI**, desactiva **Safe area** para que el fondo se extienda hasta los bordes de la pantalla.
3. En **Fill**, elige un tipo de fondo y configúralo. En este ejemplo se usa una **Image** Image, pero un color sólido o un degradado funcionan igual.
4. En **Layout**, establece la dirección en **Vertical** Vertical y configura el espacio y la alineación para que los elementos se apilen desde arriba y el contenido de las pestañas ocupe el espacio restante.

## 2. Añade el botón de cierre \{#add-the-close-button\}

El botón de cierre descarta el paywall. El preset **Close** viene preconfigurado — no es necesario configurar ninguna acción.

1. En el canvas, haz clic en **+**.
2. Selecciona **Buttons** > **Close**.

## 3. Añadir el título y agruparlo con el botón de cierre \{#add-the-title-and-pair-it-with-the-close-button\}

El encabezado aparece junto al botón de cierre en la parte superior de la pantalla. Para alinearlos horizontalmente, envuélvelos en un stack horizontal.

Para añadir el título:

1. Haz clic en **+** > **Text** > **H1**.
2. Con el H1 seleccionado, abre la pestaña **Design** y edita el texto en el campo **Content**.

Para agrupar el título con el botón de cierre:
1. En el panel **Layers**, haz clic en el menú de tres puntos Context menu de la capa del botón de cierre y elige **Wrap** > **Wrap in Horizontal Stack**.

2. Arrastra la capa H1 al nuevo stack horizontal.

Para alinear los dos elementos:
1. Ajusta el tamaño del botón de cierre y el tamaño de fuente del H1 para que quepan cómodamente en la misma línea.
2. Con el stack horizontal seleccionado, configura la alineación y la distribución en el panel derecho para que los elementos queden bien alineados.

## 4. Añadir las pestañas y configurar sus etiquetas \{#4-add-the-tabs-and-configure-their-labels\}

El elemento Tabs divide una sección de la pantalla en paneles de contenido intercambiables. Cada pestaña tiene su propio contenedor de contenido que aparece cuando el usuario la selecciona.

Para más información sobre el elemento Tabs, consulta [Elementos — Tabs](builder-elements#tabs). Para más información sobre los grupos seleccionables, consulta [Elementos y grupos seleccionables](flow-selectable-elements).

Para añadir las pestañas:
1. Haz clic en **+** > **Tabs** y elige un preset: Segment control, Button Tabs o Underline.
2. Con el nombre de cada pestaña seleccionado en el lienzo o en el panel **Layers**, edita el campo **Content** en la pestaña **Design** para cambiar la etiqueta; por ejemplo, `Premium` y `Pro`.

## 5. Añade una lista de características a la primera pestaña \{#5-add-a-feature-list-to-the-first-tab\}

Una lista de características breve y compacta dentro de la primera pestaña indica a los usuarios qué incluye ese plan.

Para ver el conjunto completo de ajustes de lista, consulta [Elementos — Lista](builder-elements#list).

Para añadir la lista de características:

1. Haz clic en **+** > **List** y elige un ajuste de lista. Icon List es el más compacto para paywalls. El elemento aparece al final del árbol de capas.
2. Con cada fila seleccionada, edita el título en el campo **Content**.

3. En el panel **Layers**, arrastra la lista al contenedor **Content** de la primera pestaña.

## 6. Añade la lista de productos al primer tab \{#add-the-product-list-to-the-first-tab\}

La lista de productos muestra las opciones de suscripción del primer tab. El elemento Products renderiza una tarjeta por cada producto asignado a la pantalla y crea su propio grupo seleccionable.

Para más información sobre cómo gestionar productos, consulta [Configurar compras](paywall-product-block).

Para añadir y configurar productos:

1. Haz clic en **+** > **Products** y elige un preset de diseño. Vertical List funciona bien para planes apilados. El elemento aparece al final del árbol de capas.
2. Selecciona cada tarjeta de producto en el canvas y elige un producto del desplegable en la pestaña **Design**.

3. En el panel **Layers**, arrastra la capa Products al contenedor **Content** de la primera pestaña.

## 7. Añadir el botón de compra a la primera pestaña \{#add-the-purchase-button-to-the-first-tab\}

El botón de compra inicia la compra in-app del producto que el usuario haya seleccionado en la primera pestaña. Su etiqueta muestra el precio del producto seleccionado para mantenerse sincronizada con la elección del usuario.

Para más información sobre la acción de compra, consulta [Acciones — Compra](onboarding-actions#purchase).

Para añadir y configurar el botón de compra:
1. Haz clic en **+** > **Buttons** y elige un preset de botón. El elemento aparece al final del árbol de capas.
2. Con el botón seleccionado, abre la pestaña **Design** y coloca el cursor en el campo **Content**. Haz clic en el icono de variable Variable icon, selecciona `products.selectedProduct` y luego el atributo `prod_price` — la variable completa se resuelve como `products.selectedProduct.prod_price`. Rodéala con el resto de la etiqueta — por ejemplo, `Subscribe for {prod_price}`.

3. Cambia a la pestaña **Interactions** y haz clic en **Add trigger** > **On tap** > **Add action**.
4. Establece **Action** en **Purchase** y **Product** en `products.selectedProduct`.

5. En el panel **Layers**, arrastra el botón al contenedor **Content** de la primera pestaña.

## 8. Copia el contenido del primer tab en el segundo tab \{#8-copy-the-first-tabs-content-into-the-second-tab\}

En lugar de reconstruir la misma estructura desde cero, copia la lista de características, la lista de productos y el botón de compra del primer tab al segundo. Solo tendrás que actualizar los valores después.

Para copiar el contenido:
1. En el panel **Layers**, expande el contenedor **Content** de la primera pestaña.
2. Selecciona cada elemento que haya dentro (lista de funciones, productos, botón de compra), cópialo con ⌘C / Ctrl+C y pégalo con ⌘V / Ctrl+V. Las copias aparecerán al final del árbol de capas.
3. Arrastra cada elemento copiado al contenedor **Content** de la segunda pestaña.

## 9. Actualiza el contenido de la segunda pestaña \{#update-the-second-tabs-content\}

La segunda pestaña ahora es un espejo de la primera. Actualiza cada elemento para que refleje el segundo plan.

Para actualizar la segunda pestaña:
1. Edita la lista de características dentro de la segunda pestaña para que las filas coincidan con las características del segundo plan.
2. Selecciona cada tarjeta de producto en el elemento Products de la segunda pestaña y asigna los productos del segundo plan desde el desplegable. Este elemento Products se convierte automáticamente en un grupo seleccionable separado (`products2`).
3. Selecciona el botón de compra en la segunda pestaña. En el campo **Content** de la pestaña **Design**, cambia la variable de precio de `products.selectedProduct.prod_price` a `products2.selectedProduct.prod_price`.
4. Cambia a la pestaña **Interactions** y actualiza el **Product** de la acción **Purchase** de `products.selectedProduct` a `products2.selectedProduct`.

## 10. Añadir los enlaces del pie de página compartidos \{#add-the-shared-footer-links\}

Los enlaces de términos de uso, política de privacidad y restaurar compras son visibles independientemente de la pestaña activa. Añádelos a nivel de pantalla —fuera de los dos contenedores de contenido de pestañas— para que sean compartidos entre las pestañas.

Para añadir los enlaces del pie de página:
1. Haz clic en **+** > **Buttons** > **Links**. Esto añade una fila con Restore Purchases, Terms of Use y Privacy Policy al final del árbol de capas, que es justo donde la necesitas: en la raíz de la pantalla, no anidada dentro de una pestaña.
2. Selecciona el enlace **Terms of Use**, abre la pestaña **Interactions** y pega la URL de tus términos en el campo **Open URL**.
3. Repite el proceso para el enlace **Privacy Policy** con tu URL de privacidad.
4. Deja el enlace **Restore Purchases** tal como está. Su acción ya está preconfigurada.

## Próximos pasos \{#next-steps\}

- [Guarda y publica tu flow](builder-save-publish).
- [Añade el flow a un placement](create-placement) para empezar a mostrárselo a los usuarios.