--- title: "Elementos de diseño: contenedores, carruseles y hojas inferiores" description: "Agrupa elementos en pilas, carruseles y hojas inferiores en el Flow Builder." --- Los elementos de diseño agrupan otros elementos y controlan cómo se distribuyen en la pantalla. El Flow Builder incluye cuatro tipos de elementos de diseño: - **Stacks**: organiza los elementos hijos a lo largo de un eje — vertical u horizontalmente - **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 - **Dividers**: líneas finas que separan filas o columnas :::link Los **Tabs** también pertenecen a esta categoría, pero tienen su propio artículo. Consulta [Tabs](builder-tabs) para más detalles. ::: ## Stacks \{#stacks\} :::link Artículo principal: [Posicionamiento de elementos](manage-paywall-ui-elements) ::: Los stacks agrupan elementos vertical u horizontalmente. El **Vertical Stack** organiza los elementos en filas; el **Horizontal Stack** los organiza en columnas. :::tip Anida stacks dentro de otros stacks para crear diseños más complejos. ::: ### Cambiar la dirección del stack \{#change-stack-direction\} La dirección de un stack 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 la misma sección **Layout**. Los elementos secundarios se renderizan en el orden en que aparecen en el panel **Layers**; arrástralos para reordenarlos. ### Envolver y desenvolver \{#wrap-and-unwrap\} Para convertir un elemento existente en un stack, selecciónalo y usa la acción de capa **Wrap** [acción de capa](paywall-layout-and-products#layer-actions). Arrastra elementos adicionales al nuevo stack desde el panel **Layers**. Para eliminar un stack y promover sus hijos un nivel arriba, usa **Unwrap**. ## Carrusel \{#carousel\} 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 según un temporizador. Un Carrusel contiene un conjunto de capas de tipo **Diapositiva**. 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 está disponible como [grupo seleccionable](flow-selectable-elements) — las diapositivas no se pueden referenciar en condiciones ni en texto dinámico. Usa un Carousel para rotación visual, no para ramificaciones controladas por el usuario. ### Cambiar la diapositiva activa \{#change-active-slide\} 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. {/* TODO: on-device GIF */} ### Propiedades #### Auto-scroll \{#auto-scroll\} El auto-scroll hace que las diapositivas avancen automáticamente, 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 \{#carousel-sizing\} Los controles dedicados determinan el tamaño del carrusel y el espaciado entre diapositivas adyacentes. Establece **Height** en **Fixed** para que el diseño no cambie al deslizarse entre diapositivas de diferente longitud de contenido. #### Tamaño de diapositiva \{#slide-sizing\} **Width** y **Height** por diapositiva. El valor predeterminado es Fill para que cada diapositiva siga las dimensiones del carrusel. Establece un ancho fijo para crear un efecto de vista parcial donde las diapositivas adyacentes sean parcialmente visibles. #### Puntos \{#dots\} 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 toggle **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 en ese momento. - **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 \{#bottom-sheet\} :::link Guía: [Mostrar todos los planes en una hoja inferior](show-plans-bottom-sheet) ::: 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 \{#structure\} Un Bottom Sheet incluye dos capas principales: - **Heading** — una pila en la parte superior del sheet, con una capa de texto **Title** y un botón **Close** Close ya incluidos. Edítalos o elimínalos según necesites. - **Content** — el contenedor principal. Añade productos, botones, enlaces o cualquier otro elemento dentro de él. {/* TODO: on-device GIF */} ### Visibilidad inicial \{#initial-visibility\} 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** Hide. La sheet permanece en el árbol de capas pero deja de renderizarse en la pantalla. ### Activar el panel inferior \{#triggering-the-bottom-sheet\} 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. ## Divisores \{#dividers\} El **Horizontal Divider** y el **Vertical Divider** son líneas delgadas que separan contenido. Usa el Horizontal Divider para dividir filas y el Vertical Divider para dividir columnas dentro de una pila horizontal. Ajusta el grosor, el color y la longitud desde el panel derecho.