Cómo crear un carrusel de imagenes en Divi con un poco de CSS

Bienvenidos de nuevo a este blog de tutoriales. Para este artículo me he basado en un post de la excelente web divisoup, donde podrás encontrar el tutorial original. Veremos cómo creamos un carrusel de imagenes en Divi.

Como ocurre siempre en el entorno WordPress, existen algunos plugins muy interesantes que puedes utilizar para conseguir los mismos resultados. Es cierto. Pero también es cierto que no se recomienda usar demasiados plugins pues terminarás ralentizando tu web casi sin darte cuenta. De manera que vamos a aprender cómo crear un carrusel de imagenes en Divi que estará reproduciéndose constantemente sin necesidad de utilizar ningún plugin para conseguirlo, sólo un poco de CSS que pondremos en nuestra hoja de estilos hijo, o en las opciones del tema Divi.

Es una manera interesante de mostrar, por ejemplo, los logotipos de nuestros clientes. Aquí puedes ver el efecto que queremos conseguir. Necesitaremos 10 imágenes con unas medidas de 200 píxeles de anchura. Es recomendable que tengan también la misma altura para una correcta visualización.

Cómo crear un carrusel de imagenes en divi sin plugins

Lo primero que debemos hacer es crear una sección con una columna e insertamos la referencia de la clase css que más adelante pondremos en nuestra hoja de estilos hijo.

Ajustar la sección

De manera que abrimos los ajustes de la sección y, en la pestaña CSS personalizado, añadimos la clase ds-carousel-section.

Sin salir de la configuración de la sección, ponemos el fondo del mismo color que los fondos de las imágenes, en mi caso blanco desde la pestaña Ajustes generales. Pulsamos guardar y salir.

Ajustes de fila

Ahora vamos a configurar los ajustes de la fila, así que tenemos que hacer click en el botón configurador de ajustes de la fila, como puedes ver en la captura de la izquierda.

Activamos las siguientes opciones en los ajustes generales de la fila:

• Hacer que esta fila tenga anchura completa: SÍ
• Uso personalizado de Canalón de Ancho: SÍ.
• Espacio entere columnas: 1.
• Relleno personalizado: Superior = 0 y Base = 0.

Ahora, en ajustes avanzados, ponemos a cero los valores de Columna Relleno en Superior y base.

Con esto ya tenemos lista la base para nuestro ejercicio.

Ajustes del módulo de imagen

Lo siguiente que haremos será añadir un módulo de imagen a nuestra fila, así que insertamos el módulo y desde Image URL importamos la primera imagen.

Fíjate que hemos optado por usar imágenes en formato PNG con fondo transparente. Esto nos va a permitir poner nuestro carrusel sobre cualquier fondo, independientemente del color o textura de éste. Al ser logotipos con poca información de color, hemos optado por png en 8bits, lo que reduce mucho el peso y ayuda a la optimización de las imágenes. Si hubiéramos guardado los logos en formato jpg, deberíamos poner el fondo de la columna al mismo color del fondo de éstos como te comento más arriba.

En las opciones del módulo imagen, ajustes generales, añade una url de destino si quieres, desactiva la aparición del logo con animación (Animación > Sin animación) y alinea la imagen al centro. El resto de opciones las dejamos en sus valores por defecto.

Por último, pinchamos en la pestaña CSS personalizado y aplicamos la clase ds-carousel-logo en el campo Clase CSS.

Duplicar los logos

Seguidamente duplicamos el módulo imagen que tenemos 4 veces, por lo que tendremos 5 módulos de imagen en total. 5 serán los logotipos que veamos en pantalla, por eso tenemos 5 módulos de imagen en la fila, que vamos a distribuir a lo largo del espacio que disponemos para que se vea horizontalmente. Ya vimos algo parecido en otro tutorial: Ver tutorial.

Una vez has duplicado los módulos, abrimos cada uno de ellos y sustituimos el logo duplicado por el correcto, de forma que tengamos cinco logos distintos.

Duplicar las filas

Vale, ya tenemos la primera fila con sus logos. Ahora necesitamos duplicar dos veces esta fila, dando como resultado 3 filas con sus logos correspondientes, como ves en la imagen de abajo. En la segunda fila que hemos generado, cambia los logos por otros cinco nuevos. La tercera fila la dejamos tal como está. Esto es, exactamente igual que la primera. Si en el futuro cambias un logotipo de la primera fila, hazlo también en la tercera.

Ahora necesitamos aplicar las clases correspondientes a cada fila, por lo tanto pulsamos en la primera fila ajustes > CSS personalizado y en el campo Clase CSS ponemos la clase ds-image-carousel-first.

Hacemos lo mismo que hemos hecho para la primera fila en los ajustes para las filas segunda y tercera:

• Segunda fila: Ajustes >> CSS personalizado >> campo Clase CSS >> ds-image-carousel-second
• Tercera fila: Ajustes >> CSS personalizado >> campo Clase CSS >> ds-image-carousel-third

Aplicando el código CSS

Para hacer funcionar el carrusel necesitas copiar el código CSS en tu hoja de estilo css hijo o en opciones del tema.

Si estás usando un tema hijo, ve hasta hasta Apariencia >> Editor e incluye el código en tu hoja de estilo de tu tema hijo. Aquí tienes una imagen para ayudarte.

Si NO estás usando una hoja de estilos para tu tema hijo, pon el código aquí:  Divi >> Opciones del tema y desplázate abajo del todo. Ahí tienes el panel de CSS personalizado donde debes pegar el CSS que has copiado previamente . Aquí está la captura.

Este es el código CSS que debes copiar explicado brevemente.

/*———————————————–*/
/*—–Scrolling Image Carousel by Divi Soup—–*/
/*———————————————–*/
/*Fuerza al navegador a crear una barra de desplazamiento horizontal*/
.ds-carousel-section {
overflow: hidden;
max-height: 300px;
}
/*Reducela anchura de la sección en móviles*/
@media only screen and (max-width: 567px) {
.ds-carousel-section {
max-height: 140px;
padding: 0;
}
}
/*Establece el ancho de los módulos de imagen y los flota para que estén al lado del otro*/
.ds-carousel-logo {
width: 20%;
float: left;
}
/*Establece la estructura y propiedades de la primera fila*/
.ds-image-carousel-first {
width: 100% !important;
max-height: 200px;
height: 200px;
background: #fff;
animation: 15s first 1 linear;
animation-fill-mode: forwards;

}
/*Establece la estructura y propiedades de la segunda fila*/
.ds-image-carousel-second {
z-index: 2;
height: 200px;
background: #fff;
width: 100% !important;
float: left;
display: inline-block;
top: -200px;
animation: 30s second infinite linear;
}
/*Establece la estructura y propiedades de la tercera fila*/
.ds-image-carousel-third {
z-index: 1;
height: 200px;
background: #fff;
width: 100% !important;
float: left;
display: inline-block;
top: -400px;
animation: 30s third infinite linear;
animation-delay: 15s;
opacity: 0;
}
/*Animación para el efecto de desplazamiento continuo*/
@keyframes first {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
z-index: 3;
}
99.99% {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
z-index: 3;
}
100% {
z-index: -1;
}
}
@keyframes second {
0% {
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes third {
0.1% {
opacity: 0;
}
0.2% {
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 1;
}
100% {
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1;
}
}
/*———————————————–*/
/*—Fin del carrusel—*/
/*———————————————–*/