Para abrir la biblioteca de elementos y añadir un nuevo elemento a una pantalla, haz clic en el botón de más Plus en el 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, cuestionarios, pestañas)
• Paywall y Comercio (productos, interruptor de prueba, interacción con el usuario, cuenta atrás)
• 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

Diseño

Los elementos de diseño son contenedores que organizan los elementos en su interior.

• Vertical Stack: organiza los elementos hijos de arriba hacia abajo
• Horizontal Stack: organiza los elementos hijos 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 deslizante anclado en la parte inferior de la pantalla

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

Los siguientes presets de texto están disponibles de serie. 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 indica 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 un formato uniforme. Internamente, una lista es un stack.

• Icon List: filas con un icono al inicio y una etiqueta de texto
• Timeline: secuencia vertical con indicadores de pasos conectados
• Image List: filas con una imagen al inicio 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 concretos (p. ej., “Ahorra un 5%”). Usa el posicionamiento absoluto para colocar una insignia sobre otro elemento.

Marcas de selección

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

• Checkbox
• Circle
• Radiobutton
• Toggle

Formularios y cuestionarios

Botones

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

Cada preset es un punto de partida: dale el estilo que quieras y asígnale cualquier acción. Configura el comportamiento del botón en la pestaña Interactions.

• Base: botón estándar con texto centrado
• Right Icon: botón con un icono en el lado derecho
• 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 borde para acciones secundarias
• Back: vuelve a la pantalla anterior
• Close flow: cierra el flow
• View more plans: muestra opciones de producto adicionales
• Links: enlaces de pie de página

Entradas

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

• 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 las 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
• Image Options: lista de una columna con imágenes
• Icon Grid: cuadrícula multicolumna con iconos
• Emoji Grid: cuadrícula multicolumna con emojis
• 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 la 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 con forma de píldora y 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 con un diseño diferente. Vincula tus productos para rellenar los elementos con datos reales de Adapty.

• Vertical List: tarjetas de producto apiladas
• Horizontal List: tarjetas de producto en fila
• 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

Interruptor de prueba

Un interruptor que alterna el producto mostrado entre su precio estándar y su oferta de prueba gratuita. Al activarlo, la selección del producto y el estado de los elementos se actualizan 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 marcador de posición.

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

Cuenta atrás

Muestra horas, minutos y segundos en cuenta atrás hasta llegar a cero. Úsalo para generar urgencia en ofertas por tiempo limitado. El temporizador puede activar acciones al llegar a cero, como navegar a otra pantalla u ocultar la insignia 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 al usuario en qué punto se encuentra dentro de un flow de varias pantallas. Son útiles en secuencias de onboarding donde el usuario necesita ver cuántos pasos quedan.

• Lineal: una barra continua que se va llenando a medida que el usuario avanza
• Segmentada: una barra dividida en segmentos discretos, uno por paso
• Conectores: marcadores de paso numerados unidos por líneas conectoras cortas

Loaders

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

• Spinner: indicador circular giratorio
• Spinner with label: spinner combinado con una etiqueta de texto (p. ej., “Loading…”)
• Loader: barra de progreso horizontal