Todo lo que necesitas saber sobre el módulo de carrusel grupal de Divi 5
Publicado: 2025-08-19Uno de los últimos módulos de Divi 5, el Grupo Carousel, está aquí para facilitar la creación de carrusels y animaciones visualmente impresionantes para su sitio web de Divi. Esta poderosa adición permite a los diseñadores web crear atractivos carruseles de sitios web sin necesidad de complementos de terceros o CSS personalizados. Ya sea que esté construyendo una cartera elegante, una tienda de comercio electrónico o un blog, el módulo de carrusel grupal desbloquea nuevos niveles de creatividad.
En esta publicación, cubriremos todo lo que necesita saber sobre el módulo de carrusel grupal, completo con ejemplos y una guía paso a paso sobre cómo usarlo. ¡Vamos a sumergirnos!
- 1 ¿Cuál es el módulo de carrusel grupal?
- 1.1 Características clave
- 2 Cómo usar el módulo de carrusel grupal
- 2.1 Asignar estilo al primer grupo
- 2.2 Agregar contenido al primer grupo
- 2.3 Agregar grupos adicionales
- 2.4 Personalización de grupos y grupos activos
- 2.5 Personalizar el diseño receptivo
- 3 integración con el bucle de bucle de Divi 5
- 4 Ejemplos del mundo real del módulo de carrusel grupal
- 4.1 Control deslizante personalizado de ancho completo / pantalla completa
- 4.2 Showcase de miembros del equipo
- 4.3 Categoría de exhibiciones
- 4.4 testimonios
- 5 Descargar gratis
- 6 Te has suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!
- 7 Desbloquear posibilidades creativas con el módulo de carrusel de Divi 5
¿Cuál es el módulo de carrusel grupal?
El módulo de carrusel grupal en Divi 5 le permite crear carruseles y controles deslizantes dinámicos y llamativos que pueden agregar un poco de movimiento e interactividad a su sitio web. Ya sea que esté exhibiendo piezas de cartera, miembros del equipo o productos, este módulo versátil le permite construir prácticamente cualquier tipo de carrusel, incluidos los que se basan en el contenido dinámicamente.
Cada diapositiva es un lienzo en blanco, lo que le permite agregar cualquier módulo Divi, por lo que es una gran herramienta para diseños creativos y funcionales.
Características clave
El módulo de carrusel grupal se basa en la base optimizada de Divi 5, asegurando tiempos de carga rápidos y transiciones suaves. La interfaz de arrastrar y soltar de Divi 5 le permite agregar fácilmente módulos a los controles deslizantes, con controles receptivos para ajustar los diseños de escritorio, tableta y móvil, mientras mantiene un rendimiento rápido.
Diapositivas personalizables
El módulo Group Carousel ofrece un control completo sobre la cantidad de controles deslizantes, su contenido y configuraciones de animación. Puede ajustar las opciones de transiciones de diapositivas, tiempo y navegación para crear una experiencia de usuario perfecta que coincida con su visión.
Contenido dinámico con Loop Builder
Integrado con el buque de bucle de Divi 5, el módulo admite carruseles dinámicos basados en publicaciones, términos o datos de usuario. Por ejemplo, puede crear un carrusel testimonial utilizando tipos de publicaciones personalizados y campos personalizados avanzados (ACF), extrayendo automáticamente las revisiones del cliente o los estudios de casos sin necesidad de actualizaciones manuales.
Flexibilidad de diseño
Puede aprovechar la configuración de diseño de Divi 5 para construir estilos únicos de carrusel. Aplique transformaciones, filtros, sombras de cajas o efectos de desplazamiento para diapositivas, y personalice módulos individuales dentro del grupo para crear diapositivas visualmente atractivas que mantengan a sus visitantes comprometidos.
Cómo usar el módulo de carrusel grupal
Configurar un carrusel grupal en Divi 5 es intuitivo y flexible. Comience agregando una fila de columna única a la página. A continuación, seleccione el módulo de carrusel grupal en el Visual Builder y agréguelo a su página.
En la pestaña Contenido , haga clic para expandir el menú desplegable Configuración del carrusel .
Habilite la rotación automática , el modo central y configure las diapositivas para mostrar en 3 .
Habilite la navegación de puntos de la muestra en el menú desplegable de elementos. Puede dejar habilitadas las flechas de exhibición o deshabilitarlas.
Asignar un estilo al primer grupo
Con nuestra configuración de carrusel en su lugar, podemos agregar nuestro primer grupo. Haga clic en el icono de configuración del grupo para mencionar la configuración.
En la pestaña Contenido , expanda el menú desplegable de fondo . Haga clic en la pestaña Imagen de fondo y luego haga clic en +Agregar imagen de fondo para agregar una imagen al grupo.
A continuación, navegue a la pestaña de diseño . Expanda el menú desplegable de diseño y establezca el contenido de Justify para finalizar .
Luego, expanda el menú desplegable de espaciado y agregue un margen del 5% a la izquierda y a la derecha de nuestro grupo. Esto agregará un espacio para respirar entre grupos en el carrusel.
Coloque el relleno superior al 100%. Aplique el acolchado de 25px a la izquierda y a la derecha.
Agregar contenido al primer grupo
Podemos centrar nuestra atención en agregar contenido a nuestro grupo. Haga clic en el icono Black + y agregue un módulo divisor .
Navegue a la pestaña de diseño . Expanda el menú desplegable de línea y cambie el color a #ffffff .
A continuación, expanda la pestaña de tamaño. Establezca el peso del divisor en 4px y el ancho al 15% .
A continuación, agregue un módulo de encabezado al grupo. Dale un título al encabezado .
Cambie a la pestaña de diseño . Bajo el texto del encabezado , configure el nivel de encabezado en H2 (o cualquier otro encabezado que desee) , seleccione Inter para la fuente de encabezado , elija Luz para el peso de la fuente, #FFFFFFF para el color del texto del encabezado y 2EM para el tamaño del texto del encabezado .
Antes de duplicar nuestro grupo, volvamos a la pestaña de diseño y ajustemos el espacio vertical a 10px. Esto eliminará cualquier espacio vertical innecesario entre los módulos.
Agregar grupos adicionales
Ahora que nuestro primer grupo está diseñado, podemos copiar el grupo de estilo y simplemente cambiar nuestro contenido (imagen y título de fondo) por el carrusel. Duplicar el grupo ocho veces, y tendremos nueve diapositivas en total.
Después de duplicar el grupo, su carrusel grupal debería verse así.
Mientras estamos aquí, es una buena idea darle a cada grupo un nombre único para que sean más fáciles de identificar. Haga clic en el icono de configuración del primer grupo y desplácese hacia abajo hasta la etiqueta de administración . Nombra el grupo Grecia.
Haga clic en el segundo grupo en el carrusel. Expanda la pestaña de fondo y reemplace la imagen con una nueva.
Mientras esté en la pestaña Contenido , no olvide agregar un nombre al campo Etiqueta de administración . A continuación, cambie el título del módulo de encabezado a Maine .
Repita los pasos con todos los grupos adicionales. Cuando termine, su carrusel debería verse así. Mientras esté en el Visual Builder, puede usar los puntos de navegación para desplazarse por el carrusel para asegurarse de que no se haya perdido ningún paso.
Como puede ver, el texto en algunas de nuestras diapositivas es algo difícil de leer. Podemos corregir esto en la pestaña de diseño a nivel de carrusel sin tener que editar cada elemento de grupo individualmente.
Personalización de grupos y grupos activos
En el módulo de carrusel grupal, puede diseñar grupos activos e inactivos. La clave es que el módulo de carrusel grupal en sí sirve como un lienzo en blanco, y aplica un estilo a los grupos de módulos dentro de él. Esto permite un alto nivel de personalización, lo que le permite crear diseños y efectos únicos.
Ahora que hemos creado un carrusel grupal, diríjase a la pestaña de diseño en la configuración del carrusel principal.
Expanda el menú desplegable de grupos . Esta pestaña controla la configuración de diseño para los grupos de módulos contenidos dentro del carrusel grupal. Cualquier configuración que aplique aquí se aplicará a los módulos de grupo inactivos .
Expanda la pestaña de fondo . Aplicaremos un gradiente de luz a las pestañas inactivas para garantizar que el texto sea legible. Establezca la primera parada de gradiente en #000000 con una opacidad del 0% . Ajuste el control deslizante ligeramente hacia la derecha. Habilite el gradiente de lugar sobre la imagen de fondo de fondo .
Establezca la parada del segundo gradiente en #000000 con una opacidad del 40% .
Habilite el gradiente de lugar sobre la imagen de fondo de fondo .
A continuación, ubique la pestaña Filtros . Reduciremos la saturación en los grupos inactivos para dar a las imágenes de fondo un efecto en blanco y negro. Localice el control deslizante Saturate y configúrelo en 0 .
A continuación, expanda el menú desplegable de los grupos activos y haga clic en la pestaña de fondo . Aplique la misma configuración de gradiente que la anterior.
Asegúrese de habilitar el gradiente de lugar sobre la imagen de fondo de fondo .
Expanda el menú desplegable de filtros en grupos activos y ajuste el control deslizante de saturación al 75% . Esto coloreará solo el elemento activo del carrusel, lo que permitirá a los usuarios identificar la diapositiva activa en el carrusel.
Personalizar el diseño receptivo
Ahora que nuestro carrusel grupal está listo para las computadoras de escritorio, utilizaremos los puntos de interrupción receptivos personalizables de Divi 5 para diseñar la versión móvil de nuestro carrusel. Por defecto, Divi 5 permite tres puntos de interrupción. Puede usar los siete puntos de interrupción disponibles si desea más control sobre varios tamaños de dispositivo. Haga clic en el menú de elipsis en el medio de la barra superior en Visual Builder.
Habilite los puntos de interrupción que desea y haga clic en Guardar para continuar.
Haga clic en el punto de interrupción de la tableta para ver cómo se verá el diseño en los dispositivos de la tableta. Desplácese hacia abajo hasta la configuración del carrusel y ajuste las diapositivas para mostrar a 1 . Esto también se aplicará a cualquier punto de interrupción más pequeño, como el teléfono y el teléfono .
Finalmente, haga clic en el botón Vista previa en la parte superior izquierda de la pantalla para ver el carrusel de su grupo en una nueva pestaña.
Una vez terminado, el carrusel de su grupo debe parecerse al video a continuación.
¡Eso es todo! Construir un carrusel grupal en Divi 5 es sencillo y ofrece resultados increíbles.
Integración con el bucle de bucle de Divi 5
Loop Builder de Divi 5 es una característica poderosa que puede convertir el módulo de grupo en una pantalla de contenido dinámico. Esta característica permite a los diseñadores crear carrusels dinámicos y automatizados que extraen el contenido directamente de WordPress, transformando el contenido estático en pantallas de productos, archivos de categorías o carruseles de miembros del equipo con unos pocos clics.
Al integrar Loop Builder con el carrusel grupal, Divi 5 permite a los usuarios crear carrusels sofisticados y basados en contenido con un trabajo manual mínimo, lo que lo convierte en una característica destacada para el diseño web dinámico.
The Loop Builder permite que el carrusel de grupo se realice dinámicamente en publicaciones, términos o datos de usuario, creando carruseles que reflejan automáticamente el último contenido de su sitio. Debido a que The Loop Builder extrae datos directamente de su base de datos de WordPress, puede mostrar fácilmente publicaciones de blog, categorías de productos o perfiles de usuario.
Por ejemplo, puede crear una publicación de blog Carrusel utilizando un tipo de publicación o un control deslizante de categoría de producto utilizando términos de WooCommerce, lo que hace que el módulo sea increíblemente versátil para las necesidades de contenido dinámico.
Ejemplos del mundo real del módulo de carrusel grupal
La flexibilidad del módulo de carrusel grupal lo hace adecuado para varios casos de uso. Aquí hay algunos ejemplos del mundo real para mostrar lo que es posible.
Control deslizante de ancho completo / pantalla completa personalizada
En este ejemplo, hemos creado un control deslizante de ancho completo/pantalla completa para presentar batidos para una heladería. Configuramos el carrusel para mostrar una diapositiva a la vez, cada una que contiene una imagen de fondo, dos encabezados y un botón de llamada a la acción. También hemos establecido la animación para avanzar a la próxima diapositiva después de un retraso de 3 segundos. Puede lograr este aspecto estableciendo el carrusel grupal y la sección a 100 VH.
Showcase de miembros del equipo
Cuando desee presentar a los miembros del equipo en su sitio web, usar el módulo Group Carousel es una excelente manera de hacerlo. En este ejemplo, hemos configurado un diseño de 3 columnas en nuestro carrusel. Cada diapositiva incluye un tiro en la cabeza, el nombre, el rol y los enlaces de redes sociales utilizando el módulo de seguimiento social de Divi. Establezca el carrusel para desplazarse un tobogán a la vez para un aspecto limpio y profesional.
Categoría de exhibición
El módulo de carrusel grupal de Divi 5 funciona sin problemas con el bucle. Esto le permite crear controles deslizantes atractivos que presenten las categorías de productos de su sitio web. Cada diapositiva se detiene dinámicamente en el nombre de la categoría y la imagen destacada, por lo que es una excelente manera de mostrar sus productos. En este ejemplo, usamos los efectos de filtro para
Testimonios
El módulo de carrusel grupal también es excelente para crear un control deslizante testimonial. Puede mostrar fácilmente sus mejores revisiones de clientes, testimonios de clientes y más. Gracias al módulo de carrusel grupal, ya no está restringido a columnas estáticas o complementos externos.
Descargar gratis
Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.
Te has suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!
Desbloquear posibilidades creativas con el módulo de carrusel de Divi 5
El módulo de carrusel grupal de Divi 5 es una poderosa adición que desbloquea nuevas posibilidades para crear sitios web dinámicos de divi. Desde la creación de controles deslizantes de productos atractivos hasta los testimonios, este módulo facilita agregar contenido interactivo a sus sitios DIVI.
Ahora que la base renovada de Divi 5 ha allanado el camino para más funciones, ¡es el momento perfecto para sumergirse! ¿Ya has probado el módulo de carrusel grupal? Háganos saber en los comentarios a continuación.