English 中文TürkçeРусскийEspañol日本語Tiếng Việt

Crear una pantalla básica de paywall

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 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

1. Configura los 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 y apariencia — 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 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ñ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.

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 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 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 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.
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 en 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 Container
  1. Arrastra la capa H1 al nuevo contenedor horizontal.
Dragging the H1 layer into the new horizontal container

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.
Botón de cierre y H1 alineados en el contenedor 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 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.

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 ellas se marca automáticamente como predeterminada.

Para saber más 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 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 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 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.
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 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.

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.

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

Pasos siguientes