Como crear un carrusel de imágenes (o módulos) en Divi

Tutorial Divi. Crear un carrusel de imágenes (o módulos) en Divi. Introducción.

Hace ya un par de años hice un tutorial similar. Digamos que fue la versión 1.0. Estaba basado en un post de la página divisoup, especializada también en el tema Divi. Hoy haremos un carrusel de imágenes (o módulos) en Divi.

Digo que era la versión 1.0 porque el método, aunque efectivo, usaba código menos actual (obviamente) y el recorrido para conseguir el resultado era más engorroso que el que hoy vamos a ver.

En definitiva, hoy trataré de explicar un efecto similar pero mejorado tanto en el proceso como en la funcionalidad.

Esta vez vamos a usar la rejilla y las variables en css. Con el método rejilla (grid), evitamos el uso de columnas o propiedades float en el código. El uso de variables nos proporciona versatilidad y sencillez a la hora de modificar funcionalidades a nuestro carrusel. Cambiar velocidad, número de imágenes visibles, etc, será cuestión de segundos. Las variables, pues, nos permitirán   modificar fácilmente valores sin tener que buscar entre un montón de líneas de código.

Igual que el tutorial antiguo, éste está basado también en el de Divisoup, esto es una interpretación que espero os haga más sencillo el aprendizaje.

Decía al principio que esta es una versión mejorada. ¿Que aporta de novedososo? Fundamentalmente dos cosas.

1. Va a permitir integrar en el carrusel de Divi casi cualquier módulo (todos excepto los que usan el método de rejilla, como portfolio, galería, blog o tienda).
2. Se añade de la opción de que el carrusel se pause cuando posamos el cursor sobre él (hover).

A continuación puedes ver cómo va a quedar nuestro carrusel una vez finalizado.

Preparando nuestro carrusel Divi

Primero vamos a configurar nuestro contenedor, esto es, la fila que contendrá los módulos o imágenes. En este tutorial usaremos módulos tipo imagen, pero puedes experimentar con módulos tipo anuncio, cta, o el que necesites con las excepciones ya comentadas.

Por lo tanto, creamos una sección estándar, y añadimos una sola fila de una columna.

Abrimos los ajustes de la fila y, en la pestaña Diseño (1) configuramos de esta manera:

– Hacer que esta fila tenga anchura completa: si (2)

– Uso personalizado de Canal de Ancho: si (3)

– Espacio entre columnas: 1 (4)

A continuación puedes ver una captura.

Ahora, en la pestaña avanzado, asignamos a la fila la clase ds-carousel.

Añadiendo los módulos

Ahora, en tu fila agrega un nuevo módulo. Como decía, yo voy a usar el módulo de imagen para este tutorial, pero puedes usar cualquiera de los módulos que no usan el diseño de rejilla. Como hemos configurado esta fila para que tenga un margen de 1 (espacio entre columnas del canalón de ancho), no habrá espacio entre cada módulo en el carrusel. Para añadir un poco de «aire», introduce  relleno personalizado izquierdo y derecho dentro del propio módulo. Con 30 píxeles va bien, pero cambia el valor si quieres a tus necesidades. A continuación, puedes realizar cualquier otro ajuste de estilo que desees.

Cuando hayas configurado tu módulo, duplícalo tantas veces como módulos quieres que aparezcan en tu carrusel. Aquí serán 8,  así que mi fila se verá así:

Nota: Para hacerlo más rápido, he cambiado el nombre de cada módulo en la vista esquema (wireframe) del constructor visual. Ahí te permite cambiarlo directamente y ganar mucho tiempo. En el vídeo te lo explico.

Sustituye las imágenes o contenido

A continuación, accede a cada módulo y sustituye la imagen o el contenido que necesites si es un módulo distinto al de imagen. Al final debes tener 8 módulos con contenido distinto.

Cuando hayas terminado, duplica cada uno de tus módulos una vez, de modo que tengas dos conjuntos de módulos, todos dentro de la misma fila, como esto:

Al igual que al nombrar los módulos, lo haras más rápido si duplicas la fila y vas «moviendo cada módulo a continuación del primer bloque. En el vídeo lo verás más claro.

Como ves, el segundo conjunto de módulos duplicado deberá ser idéntico al primero, esto es lo que nos permite crear un desplazamiento continuo. Por lo tanto, si cambias algo en un módulo en el primer conjunto, asegúrate de hacer los mismos cambios en el módulo correspondiente en el segundo conjunto.

El código CSS

Cuando veas el código igual te sientes frustado. No te preocupes, funcionará. ¿Dónde pongo el código CSS? Pues puedes ponerlo en la hoja de estilos de tu tema hijo, en el panel CSS del tema o en el CSS de la página que es donde lo voy a poner yo.

Probablemente el editor te indicará que tienes errores ([Expected RBRACE] y algun otro). No hagas caso; simplemente es código nuevo y el editor de css aún no lo reconoce como válido. Pero comprobarás que funciona sin problemas.

Este es el código que debes poner:

/*-----------------------------------------------*/ 
/*-----Carrusel de imágenes (o módulos) en Divi----*/ 
/*-----------------------------------------------*/
/*Opciones del carrusel, ajusta testos valores segun necesites*/
:root {
    --ds-module-number: 16; /*Numero total de módulos 8+8=16*/
    --ds-columns-desktop: 6; /*número de módulos que se verán a la vez en escritorio*/
    --ds-columns-tablet: 4; /*número de módulos que se verán a la vez en tablet*/
    --ds-columns-mobile: 2; /*número de módulos que se verán a la vez en moviles*/
    --ds-speed-desktop: 30s; /*velocidad de animación en ordenadores (escritorio)*/
    --ds-speed-tablet: 30s; /*velocidad de animación en tablets)*/
    --ds-speed-mobile: 30s; /*velocidad de animación en móviles*/
}
/**************************************************/
/*No es necesario editar nada debajo de esta línea */
/**************************************************/
/*Variables para escritorio*/
@media all and (min-width: 981px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-desktop));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-desktop);
    }
}
/*Variables para tablets*/
@media all and (max-width: 980px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-tablet));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-tablet);
    }
}
/*Variables para móvil*/
@media all and (max-width: 479px) {
    :root {
        --ds-module-width: calc(100vw / var(--ds-columns-mobile));
        --ds-scroll-speed: var(--ds-speed-mobile);
    }
}
/*Ocultar el desbordamiento de fila*/
.ds-carousel {
    overflow: hidden;
}
/*Define la cuadrícula y aplica animación */
.ds-carousel .et_pb_column {
    display: grid;
    grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width));
    width: var(--ds-column-width);
    -webkit-animation: scroll var(--ds-scroll-speed) linear infinite;
    animation: scroll var(--ds-scroll-speed) linear infinite;
}
/*Aplica el ancho del módulo */
.ds-carousel .et_pb_module {
    width: var(--ds-module-width) !important;
}
/*Define la animación*/
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}
@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}
/*Detener la animación on hover*/
.ds-carousel .et_pb_column:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
/*-----------------------------------------------*/ 
/*---Carrusel de imágenes (o módulos) en Divi--*/ 
/*-----------------------------------------------*/

Explicando el código

Si has copiado y pegado el CSS de arriba ya debería funcionar tu carrusel. Como extra, dividiremos el CSS en 5 bloques y te explicaré de forma básica lo que hace cada parte.

Bloque 1. Las variables

Nuestro primer bloque es donde establecemos variables para el contenido, el diseño y la velocidad de nuestro carrusel. El resto de nuestro CSS se referirá a estas variables y estos son los únicos valores que debes cambiar. En el vídeo puedes ver el efecto al cambiar estos valores.

/*Opciones del carrusel, ajusta estos valores según necesites*/
:root {
    --ds-module-number: 16; 
    --ds-columns-desktop: 6; 
    --ds-columns-tablet: 4; 
    --ds-columns-mobile: 2; 
    --ds-speed-desktop: 30s; 
    --ds-speed-tablet: 30s; 
    --ds-speed-mobile: 30s;
}

Bloque 2. Comportamiento según dispositivo

Luego establecemos algunas variables específicas de cada dispositivo usando cálculos de las variables que establecimos en nuestro primer bloque. Esto nos permite ajustar la cantidad de elementos que se muestran en la pantalla y la velocidad de nuestra animación para ordenadores de escritorio, tabletas y dispositivos móviles.

/*Variables para escritorio*/
@media all and (min-width: 981px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-desktop));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-desktop);
    }
}
/*Variables para tablets*/
@media all and (max-width: 980px) {
    :root {
        --ds-column-width: auto;
        --ds-module-width: calc(100vw / var(--ds-columns-tablet));
        --ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
        --ds-scroll-speed: var(--ds-speed-tablet);
    }
}
/*Variables para móvil*/
@media all and (max-width: 479px) {
    :root {
        --ds-module-width: calc(100vw / var(--ds-columns-mobile));
        --ds-scroll-speed: var(--ds-speed-mobile);
    }
}

Bloque 3. Las variables

A continuación, ocultamos cualquier desbordamiento de nuestro carrusel para evitar una barra de desplazamiento horizontal. Luego configuramos el contenedor para que se muestre como una cuadrícula, lo que nos permite definir el número de columnas al extraer los valores de las variables que configuramos en el primer y el segundo bloque. También definimos el ancho de cada módulo a partir de nuestras variables.

/*Ocultar el desbordamiento de fila*/
.ds-carousel {
    overflow: hidden;
}
/*Define la cuadrícula y aplica animación */
.ds-carousel .et_pb_column {
    display: grid;
    grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width));
    width: var(--ds-column-width);
    -webkit-animation: scroll var(--ds-scroll-speed) linear infinite;
    animation: scroll var(--ds-scroll-speed) linear infinite;
}
/*Aplica el ancho del módulo */
.ds-carousel .et_pb_module {
    width: var(--ds-module-width) !important;
}

Bloque 4. La animación

Esta es nuestra animación real, movemos el carrusel desde su posición inicial hasta su posición final en función de los valores de las variables que establecimos inicialmente, y debido a que usamos «infinito» en nuestra configuración de animación anterior, continuará indefinidamente.

/*Define la animación*/
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}
@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
        transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
    }
}

Bloque 5. Pausa on hover del carrusel Divi

Y finalmente, (esto es opcional), pausamos la animación cuando el usuario se desplaza sobre nuestro carrusel.

/*Detener la animación on hover*/
.ds-carousel .et_pb_column:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

Conclusiones

El CSS proporcionado es para un carrusel de 8 artículos. 6 mostrados en el escritorio, 4 en la tableta y 2 en el móvil, todos con una velocidad de 30 segundos, este es el tiempo que tomarán nuestros 8 módulos para moverse completamente por la pantalla.

Cuando configuramos nuestro carrusel, creamos nuestros módulos, y luego los duplicamos una vez, por lo que con 8 módulos únicos, terminamos con un total de 16.

16 es el número que ingresa para la variable –ds-module-number. Si necesitamos más elementos en nuestro carrusel, cambiar velocidad, etc, solo tenemos que cambiar los valores de las variables. Si quisiéramos 10 imágenes, la variable —ds-module-number debería ser 20 (10+10).

Si quieres comprobar el tutorial y aprender algún truquillo extra, puedes ver el video que te he preparado.