---
title: "Crear una pantalla de paywall básica"
description: "Guía paso a paso para crear 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 de 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 estilos reutilizables \{#1-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 de elementos — 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, peso, 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ñadas. Configura su diseño, fondo y márgenes primero para que los elementos que agregues 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 la 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ñade el título y combínalo 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, envuelve ambos 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** 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 sobre la capa del botón de cierre y selecciona **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 la pila horizontal seleccionada, configura la alineación y la distribución en el panel derecho para que los elementos queden correctamente 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 qué incluye desbloquear la suscripción. Cada fila tiene un icono, un título de característica y una descripción breve.

Para ver el conjunto completo de presets de lista, consulta [Elementos — Lista](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 las tarjetas se marca automáticamente como predeterminada.

Para más información 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 en el desplegable de 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 haciendo clic en 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 apunta al producto actualmente seleccionado en 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 la política de privacidad (obligatorios en 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. Selecciona el enlace **Terms of Use**. En la pestaña **Interactions**, la acción **Open URL** ya está configurada — pega la URL de tus términos en el campo URL.
3. Repite el proceso para el enlace **Privacy Policy** con la URL de tu política de privacidad.
4. Deja el enlace **Restore Purchases** tal como está. Su acción está preconfigurada.
:::tip
Si algún elemento parece estar demasiado alto o demasiado bajo, o si quieres añadir más espacio en cualquier parte, ajusta los márgenes y el relleno 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.