Crear una pantalla de paywall básica

Esta es la plantilla de paywall más habitual. Úsala como pantalla independiente o colócala al final de un flow 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

1. Configura estilos reutilizables

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.

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.
Editando un estilo de texto predeterminado en el panel Styles
  1. En la pestaña Colors, haz clic en Plus Create style y añade los colores que vayas a reutilizar en la pantalla.
Estilos de color en el panel Styles

2. Configura el diseño de la pantalla

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.

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.
Configuración de pantalla con Safe area desactivada y diseño Vertical / Space evenly
  1. En Fill, elige un tipo de fondo: color sólido, degradado o imagen. Este ejemplo usa un Gradient Gradient con dos paradas de color.
Configuración del relleno degradado en los ajustes de pantalla

3. Añade el botón de cierre

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.
Añadiendo el botón Close a la pantalla

4. Añade el título y combínalo con el botón de cierre

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.
H1 añadido a la pantalla con el campo Content a la derecha

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.
Three-dot context menu on the close button layer showing Wrap in Horizontal Stack
  1. Arrastra la capa H1 al nuevo stack horizontal.
Dragging the H1 layer into the new horizontal stack

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.
Botón de cierre y H1 alineados en la pila horizontal

5. Añade la descripción del valor

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.
Body text added below the title row

6. Añade la lista de características

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.

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.
Lista de iconos con tres filas de características

7. Añadir la lista de productos

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.

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.
Añadir el elemento Productos y configurar las tarjetas de producto

8. Añade el botón de compra

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.
Configurar la acción de compra en el botón de compra

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.

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.

Enlaces de pie de página con la acción Abrir URL configurada

Pasos siguientes