Diseño del paywall
Tras seleccionar una plantilla para tu paywall en el Paywall Builder de Adapty, puedes personalizar su apariencia visual para que se ajuste al estilo de tu marca. Los ajustes de Layout ofrecen una gran variedad de controles para modificar el layout, el fondo y el aspecto general del paywall. Exploremos estos ajustes: los ajustes de layout controlan los aspectos básicos del paywall, incluyendo la plantilla, el color de fondo, las fuentes predeterminadas, el flujo de compra, el layout del contenido y los botones superiores.
Esta sección describe el nuevo Paywall Builder, que funciona con los SDKs de iOS, Android y React Native versión 3.0 o superior, y los SDKs de Flutter y Unity versión 3.3.0 o superior. Para información sobre el Paywall Builder heredado compatible con Adapty SDK v2.x o anterior, consulta Diseño del paywall en el Legacy Paywall Builder.
Flujo de compra
Decide cómo completarán las compras tus usuarios. Hay dos opciones:
- Products as list + purchase button: Los usuarios seleccionan los productos primero y luego pulsan el botón de compra para iniciar la transacción.
- Products as purchase buttons: Cada producto es un botón, y la compra comienza cuando el usuario pulsa el botón de ese producto.
Color de fondo
Mantén la coherencia visual estableciendo un fondo predeterminado para tu paywall. Usa el campo Background color en los Layout settings. Haz clic en el cuadrado de color para abrir la ventana de configuración, donde puedes elegir un color sólido o un degradado en pestañas separadas.
Ajustes de fuente de tu paywall
Es importante que el paywall sea visualmente coherente con el resto de tu app, y uno de los factores visuales más importantes es la fuente que usas. Puedes elegir simplemente usar la fuente del sistema (SF Pro para iOS, Roboto para Android), usar una de las fuentes comunes disponibles o subir tu propia fuente personalizada:
Los ajustes de fuente en los Layout settings se aplican a todos los componentes del paywall de forma predeterminada. Puedes sobrescribir estos ajustes para elementos específicos, como cuadros de texto o listas, al editarlos individualmente. Si cambias la fuente predeterminada en los Layout settings, no afectará a los elementos que ya tengan fuentes individuales. Aprende cómo subir una fuente personalizada aquí.
Layout del contenido
No tienes que ajustar manualmente los márgenes y el ancho de cada elemento de contenido del paywall. Ve a Content layout para modificar todos los ajustes siguientes para todos los elementos de contenido a la vez:
- Default child margin: Define el espacio alrededor de cada elemento hijo.
- Spacing: Define el espacio entre elementos dentro de un layout.
- Max width: Establece el ancho máximo de los elementos para optimizar el layout en iPads. Recomendamos 600pt para un diseño limpio y equilibrado.
El parámetro Max width solo está disponible a partir de Adapty SDK v3.7.0 o superior.
Para ajustar el layout de un elemento específico —como establecer el ancho máximo del footer— ve a la sección Layout en App Icon, Header, Feature List, Products o Footer.
Botones superiores
Añade hasta 2 botones superiores a tu paywall para ofrecer a los usuarios opciones como cerrar el paywall. Personaliza su apariencia y comportamiento de la siguiente manera:
- Activa el toggle Top Button o Top Button 2.
- Elige el aspecto y la posición del botón. La vista previa se actualizará al instante.
| Ajuste del botón | Descripción |
|---|---|
| Action | Elige la acción que el paywall debe ejecutar cuando un usuario pulse este botón. Si eliges acciones estándar, el paywall generará un evento estándar que podrás gestionar de forma estándar en el código de tu app. Si eliges una acción personalizada, deberás procesar la acción por su |
| Style | Elige si quieres que el botón tenga aspecto de icono o de texto. Si eliges un icono, selecciona el tipo de icono en el campo correspondiente. |
- Para retrasar la aparición del botón, ajusta el control deslizante Show after delay.