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 Estilo de elementos — Estilos reutilizables.

Para configurar los estilos:

  1. En el panel izquierdo, abre el panel 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.
Editando un estilo de texto predeterminado en el panel Styles
  1. En la pestaña Colors, haz clic en Create style y añade los colores que planeas 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 relleno antes de añadir elementos, para que estos 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 los ajustes 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 y la distribución en Space evenly.
Ajustes de pantalla con Safe area desactivado y diseño Vertical / Space evenly
  1. En Fill, elige un tipo de fondo: color sólido, degradado o imagen. En este ejemplo se usa un Gradient con dos paradas de color.
Configuración de relleno con 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ñadir el título y agruparlo con el botón de cierre

El H1 se sitúa junto al botón de cierre en la parte superior de la pantalla. Para alinearlos horizontalmente, envuelve ambos 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.
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 de la capa del botón de cierre y elige Wrap > Wrap in Horizontal Container.
Three-dot context menu on the close button layer showing Wrap in Horizontal Stack
  1. Arrastra la capa H1 al nuevo contenedor horizontal.
Dragging the H1 layer into the new horizontal stack

Para alinear los dos elementos:

  1. Ajusta el tamaño del botón de cerrar 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 la distribución en el panel derecho para que los elementos queden bien alineados.
Botón de cerrar y H1 alineados en el stack 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 y una descripción breve.

Para ver todos los presets de lista disponibles, 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 en 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 tarjeta se marca automáticamente como la 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 la 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 junto a cada capa de insignia.
Añadir el elemento Productos y configurar las tarjetas de producto

8. Añadir 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 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 como Purchase y Product como products.selectedProduct.
Configuración de 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 (requeridos por las 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á asociada. 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.

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

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

Pasos siguientes