Para abrir la biblioteca de elementos y añadir uno nuevo a una pantalla, haz clic en el botón más del panel izquierdo o encima de la vista previa del dispositivo. Los elementos se dividen en las siguientes categorías:

• Básicos (contenedores de diseño, texto, multimedia, listas, insignias, marcas de verificación)
• Formularios y quiz (botones, inputs, quizzes, pestañas)
• Paywall y comercio (productos, interruptor de prueba, interacción con el usuario, cuenta regresiva)
• Indicadores de progreso y cargadores

Para cada elemento, Adapty ofrece múltiples presets: plantillas con contenido de marcador de posición o interacciones predefinidas.

Conceptos básicos

Layout

Los elementos de layout son contenedores que organizan los elementos que contienen.

• Vertical Container: organiza los elementos hijo de arriba a abajo
• Horizontal Container: organiza los elementos hijo de izquierda a derecha
• Dividers (horizontal and vertical): líneas que separan visualmente las secciones de contenido
• Carousel: un contenedor deslizable
• Bottom Sheet: un panel que se desliza desde la parte inferior de la pantalla

El texto puede ser estático o incluir variables (por ejemplo, el nombre del usuario) y contenido localizado.

Los siguientes presets de texto están disponibles por defecto. Para modificar esta lista, añade o elimina estilos de texto guardados:

• H1
• H2
• H3
• Button Label
• Body
• Caption
• Small Label

Medios

• Icon: un icono vectorial de la biblioteca de iconos integrada, con tamaño y color personalizables
• Image: una imagen — sube la tuya propia o proporciona una URL
• Video: un reproductor de vídeo integrado para archivos de hasta 50 MB. Admite reproducción en bucle.

Lista

Los elementos de lista organizan el contenido en filas y columnas para mostrar datos con formato uniforme. Internamente, una lista es un contenedor.

• Icon List: filas con un icono inicial y una etiqueta de texto
• Timeline: secuencia vertical con indicadores de pasos conectados
• Image List: filas con una imagen inicial y texto
• Icon Cards: cuadrícula de tarjetas con iconos centrados
• Image Cards: cuadrícula de tarjetas con imágenes
• Comparison Table: tabla de varias columnas que compara características entre planes (p. ej., Free vs Pro)

Insignia

Una pequeña etiqueta superpuesta para destacar un elemento — se usa habitualmente para promocionar descuentos o planes específicos (p. ej., “Ahorra un 5%”). Usa el posicionamiento absoluto para colocar una insignia sobre otro elemento.

Marcas de verificación

Iconos indicadores de selección para usar dentro de elementos seleccionables. Cada preajuste de marca de verificación incluye un estado activo y uno inactivo que se actualizan automáticamente según la selección del usuario.

• Checkbox
• Circle
• Radiobutton
• Toggle

Formularios y cuestionarios

Botones

Los botones desencadenan acciones al pulsarlos: navegar a otra pantalla, abrir una URL o cerrar el flow.

Cada plantilla es un punto de partida: personaliza su estilo y asígnale cualquier acción. Configura el comportamiento de los botones en la pestaña Interactions.

• Base: botón normal con texto centrado
• Right Icon: botón con un icono a la derecha
• With Subtitle: incluye dos líneas de texto
• Pulse Animation: incluye un efecto de pulso animado
• Purchase: activa una compra
• Secondary Outline: botón con contorno para acciones secundarias
• Back: vuelve a la pantalla anterior
• Close flow: sale del flow
• View more plans: muestra opciones de producto adicionales
• Links: conjunto de botones de pie de página (Restore, Terms of Service, Privacy Policy)

Entradas

Los campos de entrada permiten a los usuarios introducir datos. Cada uno aplica un método de entrada y reglas de validación adecuados.

• Texto
• Correo electrónico
• Contraseña
• Número
• Número de teléfono
• Fecha
• Hora
• Fecha y hora

Los campos de Fecha, Hora y Fecha y hora abren el selector nativo del dispositivo (rueda o calendario) al pulsarlos.

Usa variables para procesar la entrada del usuario e influir en la lógica condicional.

Cuestionarios

Los elementos de cuestionario presentan pantallas de selección múltiple para encuestas, recopilación de preferencias y segmentación de usuarios. Configura interacciones para ramificar el flow según la respuesta del usuario.

• Icon Options: lista de una columna con iconos
• Emoji Options: lista de una columna con emojis
• Emoji Grid: cuadrícula multicolumna con emojis
• Image Options: lista de una columna con imágenes
• Icon Grid: cuadrícula multicolumna con iconos
• Image Grid: cuadrícula multicolumna con fotos
• Rating: escala numérica (p. ej., 1–5)

Pestañas

Las pestañas dividen una sección de pantalla en paneles de contenido intercambiables. El usuario selecciona una pestaña y el contenido inferior se actualiza en consecuencia. Se usan habitualmente para agrupar planes de productos o alternar entre precios mensuales y anuales.

• Segment control: selector en forma de píldora con esquinas redondeadas alrededor de la pestaña seleccionada
• Button Tabs: pestañas con estilo de botón independientes
• Underline: etiquetas de texto con un subrayado que marca la pestaña seleccionada

Paywall y comercio

Productos

Los elementos de producto muestran los detalles de las compras in-app y gestionan la selección de productos. Cada preset organiza los datos del producto en un diseño diferente. Vincula tus productos para rellenar los elementos con datos reales de Adapty.

• Vertical List: tarjetas de productos apiladas
• Horizontal List: tarjetas de productos en fila horizontal
• Feature Carousel: tarjetas deslizables con listas de características
• Feature Cards: tarjetas estáticas con listas de características
• Banner List: filas compactas con etiquetas en línea

Conmutador de prueba gratuita

Un conmutador que alterna el producto mostrado entre su precio estándar y su oferta de prueba gratuita. Al activarlo, la selección de producto y el estado de los elementos se actualiza automáticamente.

Participación del usuario

Bloques con estilos predefinidos que muestran valoraciones de usuarios para generar confianza y fomentar la conversión. Las plantillas son contenedores básicos con contenido de ejemplo.

• Review: valoración con estrellas, reseña y nombre del autor
• Rating: puntuación numérica con visualización de estrellas
• App Rating: puntuación grande con barra de estrellas y número de reseñas
• Social Proof: conjunto de avatares con recuento de usuarios

Cuenta regresiva

Muestra horas, minutos y segundos contando hacia atrás hasta llegar a cero. Úsalo para generar urgencia en ofertas de tiempo limitado. El temporizador puede desencadenar acciones al llegar a cero, como navegar a otra pantalla u ocultar el indicador de descuento.

• Inline: visualización numérica compacta
• Inline with units: visualización numérica con etiquetas de unidad
• Badge: pequeña superposición de temporizador resaltada
• Blocks: tarjetas separadas para días, horas, minutos y segundos

Progreso

Indicadores de progreso

Barras de progreso por pasos que muestran la posición del usuario en un flow de varias pantallas. Resultan útiles en secuencias de onboarding donde el usuario necesita ver cuántos pasos quedan.

• Linear: una barra continua que se va llenando conforme el usuario avanza
• Segmented: una barra dividida en segmentos discretos, uno por paso
• Connectors: marcadores de paso numerados unidos por líneas conectoras cortas

Cargadores

Indicadores de carga animados para transiciones. Usa cargadores cuando tu app procese datos del usuario, por ejemplo, tras enviar un cuestionario.

• Spinner: indicador circular giratorio
• Spinner con etiqueta: spinner acompañado de una etiqueta de texto (p. ej., “Cargando…”)
• Loader: barra de progreso horizontal