--- title: "Elementos" description: "Todos los elementos visuales disponibles en el Flow Builder: contenedores de diseño, texto, multimedia, listas, botones, entradas, productos y más." --- Para abrir la biblioteca de elementos y añadir uno nuevo a una pantalla, haz clic en el botón más Plus del panel izquierdo o encima de la vista previa del dispositivo. Los elementos se dividen en las siguientes categorías: - [Básicos](#basics) (contenedores de diseño, texto, multimedia, listas, insignias, marcas de verificación) - [Formularios y quiz](#forms--quiz) (botones, inputs, quizzes, pestañas) - [Paywall y comercio](#paywall--commerce) (productos, interruptor de prueba, interacción con el usuario, cuenta regresiva) - [Indicadores de progreso](#progress) y cargadores Para cada elemento, Adapty ofrece múltiples presets: plantillas con contenido de marcador de posición o interacciones predefinidas. ## Conceptos básicos \{#basics\} ### Diseño \{#layout\} :::link Artículo principal: [Elementos de diseño](builder-containers) ::: Los elementos de diseño son contenedores que organizan los elementos que contienen. - **Contenedor vertical**: organiza los elementos secundarios de arriba a abajo - **Contenedor horizontal**: organiza los elementos secundarios de izquierda a derecha - **Divisores (horizontal y vertical)**: líneas que separan visualmente las secciones de contenido - **Carrusel**: un contenedor deslizable - **Footer**: un panel fijo en la parte inferior de la pantalla, fuera del área de desplazamiento - **Bottom Sheet**: un panel deslizante anclado en la parte inferior de la pantalla ### Texto :::link Artículo principal: [Contenido de texto](onboarding-text) ::: El texto puede ser estático o incluir [variables](onboarding-variables) (p. ej., el nombre del usuario) y [contenido localizado](paywall-localization). Los siguientes presets de texto vienen incluidos por defecto. Para modificar esta lista, añade o elimina [estilos de texto guardados](builder-styling#reusable-styles): - H1 - H2 - H3 - Button Label - Body - Caption - Small Label El menú **Text** también incluye el elemento **Old Price**: un precio del producto tachado que se calcula automáticamente a partir de un multiplicador. Consulta [Añadir un precio antiguo](onboarding-text#add-an-old-price). ### Medios \{#media\} :::link Artículo principal: [Imágenes, vídeos e iconos](custom-media) ::: :::note Esta sección describe los elementos de medios en primer plano. Cambia el [fondo de pantalla](paywall-layout-and-products#screen-background) para rellenar toda la pantalla con una imagen o un vídeo. ::: - **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 \{#list\} Los elementos de lista organizan el contenido en filas y columnas para mostrar datos con formato uniforme. Internamente, una lista es un [contenedor](manage-paywall-ui-elements#layout). - **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 \{#badge\} 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](manage-paywall-ui-elements#absolute) para colocar una insignia sobre otro elemento. ### Marcas de verificación \{#checkmarks\} Iconos indicadores de selección para usar dentro de [elementos seleccionables](flow-selectable-elements). 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 \{#forms--quiz\} ### Botones \{#buttons\} :::link Artículo principal: [Botones](paywall-buttons) ::: 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](builder-ui#interactions-properties). - **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 \{#inputs\} :::link Artículo principal: [Entradas y formularios](builder-inputs-and-forms) ::: 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](onboarding-variables) para procesar la entrada del usuario e influir en la lógica condicional. ### Cuestionarios \{#quizzes\} :::link Artículo principal: [Encuestas y cuestionarios](onboarding-quizzes) ::: Los elementos de cuestionario presentan pantallas de selección múltiple para encuestas, recopilación de preferencias y segmentación de usuarios. Configura [interacciones](onboarding-navigation-branching) 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 \{#tabs\} :::link Artículo principal: [Pestañas](builder-tabs) ::: 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 \{#paywall--commerce\} ### Productos \{#products\} :::link Artículo principal: [Productos](paywall-product-block) ::: 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 {/* Coming soon - **Bottom Sheet**: product selector inside a slide-up panel */} ### Conmutador de prueba gratuita \{#trial-toggle\} :::link Artículo principal: [Conmutadores](builder-toggles) ::: 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 \{#user-engagement\} 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 \{#countdown\} :::link Artículo principal: [Temporizador de cuenta regresiva](paywall-timer) ::: 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 \{#progress\} :::link Artículo principal: [Cargadores y barras de progreso](builder-loaders-and-progress-bars) ::: ### Indicadores de progreso \{#progress-indicators\} 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 \{#loaders\} 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 {/* - **Loader with label**: progress bar paired with a text label and percentage */}