Si ya estás usando Divi 5 y quieres aprender a dominar la creación de carruseles en Divi 5 de forma nativa, este tutorial te va a caer como anillo al dedo. En esta masterclass te explico la base real del nuevo módulo de carrusel de Divi 5 para que puedas construir sliders de logos, tarjetas, categorías, productos, posts del blog o prácticamente cualquier cosa, sin plugins extra y sin código.

Si quieres llevar esto al siguiente nivel, dentro de uxdivi.com/cursos lo explico más a fondo en el curso de Divi 5, y además lo conectamos con casos más avanzados (por ejemplo carruseles de productos más trabajados). También estamos preparando un curso de e-commerce con Divi 5 donde esto se vuelve una herramienta clave para maximizar conversión en home, categorías y fichas de producto.

Qué son los carruseles nativos en Divi 5 y por qué importan

Lo más importante que quiero que entiendas es esto: el carrusel nativo de Divi 5 no es “un slider clásico” que solo muestra imágenes. Es un sistema basado en un módulo agrupador que te deja construir cada slide con el diseño que tú quieras, usando módulos reales de Divi dentro de cada diapositiva.

Eso significa que un slide puede ser una tarjeta con imagen y título, pero también puede ser un bloque con icono + texto + botón, un video, un formulario, un anuncio (Blurb), un layout más complejo… lo que sea. Para mí, esa es la verdadera potencia: estás haciendo carruseles con diseño libre, pero con comportamiento de carrusel ya resuelto.

El ejemplo real de la masterclass: carrusel de categorías tipo “food delivery”

En el video usé un ejemplo muy realista: una home de una tienda tipo delivery/fast food con tarjetas de categorías como Pizza, Hamburguesa, Sushi, Postres y Bebidas. Visualmente son “tarjetas clickeables” que te llevan a su categoría.

Ese tipo de bloque se usa muchísimo en e-commerce porque acelera la navegación y hace que el usuario entre rápido a lo que le interesa. Y si además lo vuelves carrusel, te permite mostrar más categorías sin llenar la pantalla, especialmente en móvil.

En mi caso, esas tarjetas estaban hechas con un módulo de Anuncio/Blurb (no era texto simple), con título y una imagen colocada arriba. Y el enlace se lo puedes agregar al módulo para que lleve a la categoría o a la URL que tú quieras.

Cómo funciona el módulo de carrusel en Divi 5 por dentro

Aquí está la clave conceptual del módulo, y es lo que te desbloquea todo.

Group Carousel: el contenedor principal

El módulo que vas a agregar en Divi 5 se llama algo como Group Carousel / Grupo de carrusel. Está mal traducido en español en varias partes, pero quédate con la idea: es un contenedor que incluye configuraciones de carrusel.

Este Group Carousel se comporta parecido a otros módulos “group” de Divi: dentro vive contenido anidado.

Carousel Toggle: cada slide del carrusel

Dentro del Group Carousel aparecen los Carousel Toggle (en el video me salió como “Tobogán de Carousel”, que es una traducción rarísima, pero es eso: cada “slide”).

Y dentro de cada Carousel Toggle tú metes los módulos que quieras.

Consejo rápido: Piensa en cada Toggle como “una diapositiva con layout libre”. No lo pienses como “una imagen”.

Paso a paso para crear un carrusel desde cero en Divi 5

Te lo dejo como flujo explicativo (sin saturarte con listas) siguiendo el proceso real del tutorial.

1) Crear una fila nueva y mantener consistencia de ancho

Yo creé una fila nueva debajo del bloque original para no romper nada. Luego copié los valores de ancho para que quedara igual visualmente: ancho al 100% y un Max Width al 90% (en mi caso), para mantener coherencia con el diseño.

Esto es importante porque si el carrusel tiene un ancho distinto, aunque funcione bien, se va a ver “desalineado” con el resto de la home.

2) Insertar el módulo Group Carousel

En esa fila agregué el módulo Group Carousel. Una vez insertado, si abres las capas (Layers) vas a ver la estructura: el Group Carousel y dentro uno o más Toggles.

Aquí yo recomiendo usar Layers sí o sí. Para este tipo de módulos anidados, Layers te ahorra muchísimo tiempo y te evita estar “pescando” elementos con el mouse.

3) Diseñar un slide “base” dentro del primer Toggle

En el video hice una prueba rápida metiendo un icono, un texto y hasta un video, solo para demostrar el punto: dentro del Toggle puedes meter lo que sea.

Pero para el ejemplo real (categorías) lo que hice fue preparar un slide base limpio y luego duplicarlo.

Consejo rápido: no empieces duplicando sin tener listo un slide bien diseñado. Define primero el “patrón” y luego lo replicas.

4) Duplicar el Toggle tantas veces como elementos necesitas

Una vez que tienes un Toggle con el diseño base, duplicas ese Toggle para crear el resto de slides.

Ese es el método más rápido: duplicas y solo cambias el contenido (título, imagen, enlace) en cada Toggle duplicado.

5) Mover módulos existentes dentro de los Toggles (método pro)

Como yo ya tenía las seis tarjetas construidas en columnas separadas, lo que hice fue duplicar la sección para no dañarla y luego mover cada módulo Blurb dentro de su Toggle correspondiente.

La lógica fue: “cada categoría existente se convierte en un slide”. Y listo.

Sí, es un poco manual, pero una vez que te acostumbras al flujo con Layers, se vuelve súper rápido.

6) Eliminar la fila vacía que ya no se usa

Cuando ya moviste todo al carrusel, la fila original con columnas queda vacía y la puedes borrar para dejar el diseño limpio.

Ajustes esenciales del carrusel: lo que realmente cambia el resultado

Aquí es donde Divi 5 se pone bueno. Las opciones te permiten controlar comportamiento, navegación, ritmo y experiencia.

Slides to show y slides to scroll

“Diapositivas a mostrar” define cuántos elementos se ven al mismo tiempo. Si pones 6, todo se hace más pequeño para que quepa. Si pones 4, cada tarjeta se vuelve más grande.

“Diapositivas a desplazarse” define cuántos slides avanzan por cada movimiento. Si pones 2, el carrusel salta más rápido. Yo en la mayoría de casos lo dejo en 1 para que el movimiento se sienta natural.

Autoplay y pausa al pasar el cursor

Autoplay activa el carrusel automático, y puedes configurar cada cuántos segundos rota.

La opción de “pausa al pasar el cursor” es clave si tus slides son clickeables (productos, categorías, posts). Si el usuario está intentando dar click y el carrusel se mueve, es una mala experiencia. Con pausa al hover, lo vuelves más usable.

Modo central

El modo central es uno de mis favoritos para ciertos carruseles, especialmente de logos o categorías.

Cuando lo activas, el slide activo se centra y los de los lados se ven “cortados” un poco, lo cual le comunica al usuario visualmente que hay más contenido desplazable, incluso si ocultas flechas.

Esto se vuelve todavía más potente cuando el carrusel está a ancho completo (100%), porque da ese efecto de “nace desde los lados” y se siente como UI moderna tipo app.

Velocidad de transición (dato importante del tutorial)

Aquí te cuento algo que descubrí grabando: la velocidad de transición tiene límite. En mi prueba, más de 2000ms no se pudo (Divi 5 no lo aceptó).

Lo práctico: para un movimiento natural normalmente uso 500–700ms. Si lo pones muy bajo, se siente brusco. Si lo pones al máximo, se siente más suave, pero sin exagerar.

Un tip rápido que sí te recomiendo: usa autoplay con rotación más lenta (por ejemplo 3 segundos) y transición moderada (500–700ms). Eso suele sentirse “premium”.

Navegación: flechas y puntos (cuándo sí y cuándo no)

Flechas

Las flechas ayudan a que el usuario entienda que eso es un carrusel. En algunos diseños yo las dejo, especialmente en desktop, porque es el patrón mental clásico.

Divi 5 te deja cambiar el icono de la flecha izquierda y derecha, y también estilarlas: color, tamaño, posición (dentro, fuera, o centradas entre contenido y borde).

Si tu carrusel va a ancho completo, a veces las flechas estorban. En ese caso, el modo central con puntos o incluso sin navegación puede funcionar mejor.

Puntos (dots)

Los puntos ayudan a “educar” visualmente al usuario: le dicen cuántos pasos hay y dónde está parado.

Puedes elegir posición (abajo, arriba o superpuestos), alineación (izquierda, centro, derecha), tamaño y color. Yo suelo hacerlos discretos, con un color activo que combine con el diseño.

Si estás haciendo carrusel de categorías, los puntos quedan bien porque no estorban y mantienen la UI limpia.

Estilos del grupo y estilos por slide

Aquí hay dos niveles de diseño y conviene entenderlos para no confundirte.

Estilo global del carrusel (desde el Group Carousel)

Si aplicas fondo, borde, sombra o padding desde el Group Carousel, se aplica a todos los slides. Esto te sirve para mantener consistencia.

Por ejemplo, si quieres que todas las tarjetas del carrusel tengan un borde redondeado y sombra sutil, es más rápido aplicarlo a nivel grupo.

Estilo individual (desde cada Toggle)

Si quieres que una diapositiva tenga un estilo distinto, editas ese Toggle específico.

Esto es útil si quieres destacar el elemento activo o hacer una tarjeta “featured”. En el tutorial jugué con la idea de escalar el slide activo (transform 110%) para que se sienta protagonista, sobre todo cuando está en modo central.

Consejo rápido: si vas a escalar el slide activo, hazlo muy sutil (105%–110%) y con sombra ligera. Si te pasas, el carrusel empieza a sentirse “brincolín” y puede afectar percepción de calidad.

Ajuste responsive del carrusel en Divi 5

Esto es lo que separa un carrusel “bonito” de uno realmente usable.

En móvil, si dejas 6 slides visibles, se ve fatal. La solución es usar el ajuste responsive dentro del carrusel: para tablet mostrar 3 o 4, y para móvil mostrar 2 o 3 según tu diseño.

En el tutorial yo ajusté “diapositivas a mostrar” por dispositivo, y con eso el carrusel quedó perfecto en tablet y móvil sin necesidad de hacks.

Consejo rápido: en móvil, 2 suele verse más premium para tarjetas grandes (categorías o productos). 3 funciona cuando las tarjetas son más compactas (logos o iconos).

Ideas prácticas: qué tipos de carruseles vale la pena construir en Divi 5

Lo que más vas a usar en proyectos reales suele ser esto: carruseles de logos (confianza), carruseles de categorías (navegación rápida), carruseles de productos (venta), carruseles de testimonios (conversión) y carruseles de posts (contenido).

La ventaja de hacerlo nativo en Divi 5 es que reduces dependencias, evitas problemas de rendimiento con sliders externos y mantienes el control del diseño dentro del builder.

Recomendaciones finales para carruseles que se vean “pro”

• No uses carrusel si no hay una razón real. Un carrusel existe para ahorrar espacio y mostrar más contenido sin saturar la pantalla. Si tienes 3 elementos y caben perfecto, tal vez no lo necesitas.
• Define una jerarquía visual: si es carrusel de categorías, que el título sea corto y legible; si es carrusel de productos, que el precio y CTA sean claros; si es carrusel de posts, que la imagen y el headline manden.
• Ajusta responsive desde el carrusel y no “a ojo” con tamaños raros. Si un carrusel no se ve bien en móvil, se siente amateur aunque en desktop esté perfecto.
• Y por último, piensa en conversión: pausa al hover si hay clicks, velocidad natural, navegación clara, y no marees al usuario con rotaciones demasiado rápidas.

Cursos y contenidos recomendados en UXDivi

Si quieres dominar esto de forma profesional y entender no solo “qué tocar” sino por qué tocarlo, en uxdivi.com/cursos te recomiendo entrar al curso de Divi 5, donde explico la interfaz, Layers, ajustes responsive, sistema de diseño y módulos nuevos (incluyendo carruseles) con ejemplos reales.

También mantente atento al curso de e-commerce con Divi 5 que estamos preparando, porque ahí el carrusel deja de ser “bonito” y se vuelve una herramienta directa de ventas: carruseles de productos personalizados, bloques dinámicos y layouts listos para convertir.