Los elementos de maquetación agrupan otros elementos y controlan cómo se distribuyen en la pantalla.

:El Flow Builder incluye cinco tipos de elementos de maquetación:

• Containers: organizan los elementos hijos a lo largo de un eje — vertical u horizontal
• Carousel: un contenedor deslizable que muestra una diapositiva a la vez
• Bottom Sheet: un panel que se desliza desde la parte inferior de la pantalla y se renderiza sobre el contenido subyacente
• Footer: un panel fijado en la parte inferior de la pantalla, fuera del área de desplazamiento
• Dividers: líneas finas que separan filas o columnas

Contenedores

Los contenedores agrupan elementos de forma vertical u horizontal. El Vertical Container organiza los elementos en filas; el Horizontal Container los organiza en columnas.

Cambiar la dirección del contenedor

La dirección de un contenedor no es fija. Cambia entre Vertical, Horizontal y Free en la sección Layout del panel derecho en cualquier momento, sin necesidad de eliminar y volver a crear el contenedor.

Configura el espaciado, la alineación y la distribución en esa misma sección Layout. Los elementos secundarios se renderizan en el orden en que aparecen en el panel Layers — arrastra para reordenarlos.

Convertir en contenedor y deshacer el contenedor

Para convertir un elemento existente en un contenedor, selecciónalo y usa la acción de capa Wrap desde acciones de capa. Arrastra elementos adicionales al nuevo contenedor desde el panel Layers. Para eliminar un contenedor y subir sus hijos un nivel, usa Unwrap.

Carrusel

Un Carrusel es un contenedor deslizable que muestra una diapositiva a la vez. El usuario desliza horizontalmente para ver la siguiente diapositiva, o el carrusel avanza automáticamente con un temporizador.

Un Carrusel contiene un conjunto de capas Slide. Cuando una diapositiva está activa, los elementos de esa capa aparecen en pantalla. A diferencia de las pestañas, la diapositiva activa del carrusel no se expone como un grupo seleccionable — las diapositivas no pueden usarse en condiciones ni en texto dinámico. Usa un Carrusel para rotación visual, no para ramificaciones basadas en el usuario.

Cambiar la diapositiva activa

Al seleccionar el carrusel, el builder muestra una barra de control emergente con un desplegable Slide y un botón + Add Slide.

• Haz clic en + Add Slide para añadir una nueva diapositiva vacía.
• Usa el desplegable Slide para cambiar qué diapositiva está activa en el lienzo, o haz clic en la capa Slide correspondiente en el panel Layers.

Para reordenar las diapositivas, arrástralas dentro del Carrusel en el panel Layers.

Propiedades

Desplazamiento automático

El desplazamiento automático hace que las diapositivas pasen solas, sin que el usuario tenga que deslizar para ver todo el contenido.

Dos controles de tiempo determinan su comportamiento:

• Delay — cuánto tiempo permanece visible cada diapositiva (ms).
• Duration — cuánto dura la transición entre diapositivas (ms).

Tamaño del carrusel

Los controles dedicados determinan el tamaño del carrusel y el espacio entre diapositivas adyacentes. Establece Height en Fixed para que el layout no cambie mientras el usuario desliza entre diapositivas con contenidos de diferente longitud.

Tamaño de la diapositiva

Width y Height por diapositiva. Por defecto es Fill, de modo que cada diapositiva se ajusta a las dimensiones del carrusel. Establece un ancho fijo para crear un efecto de vista previa donde las diapositivas adyacentes se muestran parcialmente.

Puntos

El indicador de página en la parte inferior del carrusel. Muestra al usuario cuántas diapositivas hay y cuál está activa.

Desactiva el interruptor Show dots para ocultar el indicador de diapositivas. Cuando los puntos son visibles, las siguientes propiedades controlan su apariencia:

• Color — color de relleno de un punto inactivo.
• Active Color — color de relleno del punto correspondiente a la diapositiva visible actualmente.
• Size — diámetro de cada punto, en píxeles.
• Gap — espacio entre puntos adyacentes.
• Padding — espacio entre la fila de puntos y el contenido del carrusel situado encima.

Hoja inferior

Una hoja inferior es un panel de diseño que se desliza hacia arriba desde la parte inferior de la pantalla, por encima del contenido subyacente.

La hoja siempre desenfoca todo lo que hay detrás; ese desenfoque no se puede desactivar. Actívala al tocar — por ejemplo, detrás de un enlace Mostrar todos los planes — en lugar de al cargar la pantalla.

Estructura

Un Bottom Sheet incluye dos capas principales:

• Heading — un contenedor en la parte superior del sheet, con una capa de texto Title y un Close button ya añadidos. Edítalos o elimínalos según necesites.
• Content — el contenedor principal. Añade productos, botones, enlaces o cualquier otro elemento dentro de él.

Visibilidad inicial

Por defecto, una bottom sheet aparece en cuanto se renderiza la pantalla. Para abrirla bajo demanda:

1. Primero termina el contenido de la sheet — las capas ocultas no se pueden editar, así que la sheet debe permanecer visible hasta que hayas terminado de rellenarla.
2. En el panel Layers, selecciona la bottom sheet.
3. Establece Visibility en Hide .

La sheet permanece en el árbol de capas pero deja de renderizarse en la pantalla.

Activar el panel inferior

Para abrir un panel inferior oculto, añade una acción Show a otro elemento:

1. Selecciona el elemento que actuará como disparador (por ejemplo, un botón o un enlace de texto).
2. 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 Show y elige el panel inferior en el desplegable.

Pie de página

Un Footer es un contenedor fijo que ocupa la parte inferior de la pantalla. Puede tener cualquier altura y contener desde un único botón hasta varias filas de texto. Úsalo para el contenido que debe permanecer en su lugar mientras el resto de la pantalla se desplaza: botones CTA, textos legales, enlaces.

A diferencia de los elementos habituales, el footer se extiende hasta el área segura inferior del dispositivo: su fondo llega hasta el borde mismo de la pantalla. Solo se permite un pie de página por pantalla. No puedes duplicar un pie de página existente ni añadir uno nuevo.

Footer vs. un elemento fijo normal

Ambos permanecen en pantalla mientras el contenido se desplaza. Elige la opción que mejor se adapte a lo que necesitas:

• Usa un Footer para la barra inferior principal de la pantalla (botón de CTA, texto legal, enlaces). Reserva su propia altura, así que el contenido siempre puede desplazarse sin quedar oculto detrás de él, y cubre automáticamente la zona segura inferior.
• Usa un elemento fijo para algo que deba flotar sobre el contenido desplazable en lugar de reservar espacio para sí mismo, o que se ancle a un borde distinto del inferior — un botón flotante de cerrar/restaurar, un banner persistente en la parte superior, un control para volver al inicio. Tú mismo gestionas el espaciado de la zona segura.

Divisores

El Divisor Horizontal y el Divisor Vertical son líneas delgadas que separan contenido. Usa el Divisor Horizontal para separar filas y el Divisor Vertical para separar columnas dentro de un contenedor horizontal. Ajusta el grosor, el color y la longitud desde el panel derecho.