---
title: "Crear una pantalla básica de paywall"
description: "Guía paso a paso para construir una pantalla de paywall estándar en el Flow Builder."
---

Esta es la plantilla de paywall más habitual. Úsala como pantalla independiente o colócala al final de un [flow](adapty-flow-builder) de varias pantallas.
Una pantalla de paywall estándar contiene un encabezado, una descripción del valor, una lista de características, una lista de productos, un botón de compra y enlaces en el pie de página para restaurar compras, términos de uso y política de privacidad.
## Antes de empezar \{#before-you-start\}

- [Crea productos](create-product) en el Adapty Dashboard.
- [Conecta Adapty con la App Store y Google Play](integrate-payments).
## 1. Configura los estilos reutilizables \{#set-up-reusable-styles\}

Los estilos reutilizables te permiten aplicar la misma tipografía y colores en todas las pantallas con un solo clic. Cada nuevo flow incluye un conjunto de estilos de texto predeterminados (H1, Body, Button Label, etc.): ajústalos para que coincidan con tu diseño antes de empezar a añadir elementos. Añade estilos de color para los colores de marca que usarás en toda la pantalla.

Para ver las instrucciones completas, consulta [Estilos y apariencia — Estilos reutilizables](builder-styling#reusable-styles).

Para configurar los estilos:
1. En el panel izquierdo, abre el panel **Styles** Styles.
2. En la pestaña **Text**, haz clic en un estilo existente para editar su fuente, grosor, tamaño y color. Añade nuevos estilos solo si los predeterminados no cubren tus necesidades.

3. En la pestaña **Colors**, haz clic en **Plus Create style** y añade los colores que vayas a reutilizar en la pantalla.

## 2. Configura el diseño de la pantalla \{#2-set-up-the-screen-layout\}

La propia pantalla actúa como contenedor de todo lo que añades. Configura primero su diseño, fondo y relleno para que los elementos que añadas después se distribuyan correctamente.

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. El panel derecho cambia a la configuración de pantalla.
2. En **System UI**, desactiva **Safe area** para que el contenido se extienda hasta los bordes de la pantalla.
3. En **Layout**, establece la dirección en **Vertical** Vertical y la distribución en **Space evenly**.

4. En **Fill**, elige un tipo de fondo — color sólido, degradado o imagen. Este ejemplo usa un **Gradient** Gradient con dos paradas de color.

## 3. 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**.

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

El H1 se coloca junto al botón de cierre en la parte superior de la pantalla. Para alinearlos horizontalmente, envuélvelos en un contenedor horizontal.

Para añadir el título:

1. Haz clic en **+** > **Text** > **H1**.
2. Con el H1 seleccionado, abre la pestaña **Design** en el panel derecho 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 en la capa del botón de cierre y elige **Wrap** > **Wrap in Horizontal Container**.

2. Arrastra la capa H1 al nuevo contenedor 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 contenedor horizontal seleccionado, configura la alineación y distribución en el panel derecho para que los elementos queden bien alineados.

## 5. Añade la descripción del valor \{#add-the-value-description\}

Una línea de texto breve bajo el título explica qué obtiene el usuario con la suscripción.

1. Haz clic en **+** > **Text** > **Body**.
2. Con el elemento body seleccionado, edita el texto en el campo **Content** de la pestaña **Design**.

## 6. Añade la lista de características \{#add-the-feature-list\}

La lista de características destaca lo que incluye desbloquear la suscripción. Cada fila tiene un icono, un título de característica y una breve descripción.

Para ver el conjunto completo de presets de lista, consulta [Elements — List](builder-elements#list).

Para añadir la lista de características:

1. Haz clic en **+** > **List** y elige un preset de lista. Icon List es el más habitual para paywalls.
2. Con cada fila seleccionada, edita el título y la descripción en el campo **Content**.
3. Para añadir o eliminar filas, selecciona la lista y usa los controles de fila en el panel **Layers**.

## 7. Añadir la lista de productos \{#add-the-product-list\}

La lista de productos muestra las opciones de suscripción entre las que el usuario puede elegir. El elemento Products renderiza una tarjeta por cada producto asignado a la pantalla, y una de ellas se marca automáticamente como predeterminada.

Para saber más sobre la gestión de productos, consulta [Configurar compras](paywall-product-block).

Para añadir y configurar productos:
1. Haz clic en **+** > **Products** y elige una plantilla de diseño. La lista vertical es la más habitual.
2. Selecciona cada tarjeta de producto en el lienzo y elige un producto del menú desplegable en la pestaña **Design**. El desplegable muestra todos los productos configurados en el Adapty Dashboard.
3. Para cambiar la selección predeterminada, selecciona la tarjeta que quieras y activa **Set as default product** en la pestaña **Design**.
4. Para personalizar la insignia de descuento, despliega una tarjeta de producto en el panel **Layers**, selecciona la capa de la insignia y edita su texto en el campo **Content**. Oculta la insignia en las demás tarjetas activando el icono de ojo Show junto a cada capa de insignia.

## 8. Añade el botón de compra \{#add-the-purchase-button\}

El botón de compra inicia la compra in-app del producto que el usuario haya seleccionado. La variable `products.selectedProduct` siempre se resuelve en el producto actualmente seleccionado en la pantalla.

Para añadir el botón de compra:

1. Haz clic en **+** > **Buttons** y elige un preset de botón.
2. Con el botón seleccionado, abre la pestaña **Interactions** en el panel derecho.
3. Haz clic en **Add trigger** > **On tap** y luego en **Add action**.
4. Establece **Action** en **Purchase** y **Product** en `products.selectedProduct`.

## 9. Añadir enlaces al pie de página \{#add-footer-links\}

El pie de página contiene enlaces a los términos de uso y a la política de privacidad (requeridos por los stores) y un botón para restaurar compras anteriores.

Para añadir los enlaces al pie de página:
1. Haz clic en **+** > **Buttons** > **Links**. Esto añade una fila con Restore Purchases, Terms of Use y Privacy Policy.
2. En el panel **Layers**, selecciona el botón **Terms of Use**. Abre la pestaña **Interactions** — la acción **Open URL** ya está asignada. Haz clic en la acción e introduce la URL de destino.
3. Repite el proceso para el botón **Privacy Policy** con tu URL de privacidad.
4. Deja el botón **Restore Purchases** tal como está. Su acción ya está preconfigurada.

:::tip
Si el posicionamiento de algún elemento te parece demasiado alto o bajo, o si quieres añadir más espacio en algún punto, ajusta los márgenes y el padding del elemento.
:::

## Pasos siguientes \{#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.