Personalizar el módulo deslizador de Divi. 2 maneras de configurarlo
El módulo deslizador o carrusel de Divi
Crear un slider en Divi es una tarea bien sencilla. Da gusto crear un módulo de este tipo y conseguir un deslizador con aspecto profesional con apenas unos clicks. En definitiva, el módulo deslizador de Divi es fácil y práctico. Ya hemos hecho en otras ocasiones tutoriales sobre el módulo deslizador de Divi. Hace muy poco aprendimos cómo usarlo como una galería con urls en cada imagen Puedes consultarlos Aquí. Y aunque son numerosas las opciones de configuración que nos proporciona Divi, a veces necesitamos personalizar un poco más. El módulo deslizador nos permite añadir fácilmente tantas diapositivas como queramos, cada una con su imagen y con su texto. Pero ¿Qué ocurre si necesitamos añadir varias diapositivas con distintos títulos pero con la misma imagen de fondo? ¿O si lo queremos es un slider con imágenes personalizadas pero que compartan el mismo texto? Estas dos personalizaciones es exactamente lo que vamos a ver en el tutorial de hoy. Aprenderemos a configurar nuestro deslizador en estos dos supuestos. Verás lo sencillo que va a resultar.
Una imagen, distintos textos
Creamos el deslizador rellenando los campos de texto en título y contenido en las diapositivas pero no elegimos imagen. Duplicamos la diapositiva y cambiamos los textos por los que queramos. En las opciones generales del módulo (NO en los ajustes de la diapositiva) insertamos el fondo que queramos compartir en todas la diapositivas o slides. A continuación puedes ver la variante del deslizador terminada.
Varias imágenes, mismo texto
Para esta segunda variante, creamos el módulo deslizador y agregamos una diapositiva. En los ajustes de ésta, añadimos el texto que compartirán todas las diapositivas. Ahora subimos la imagen de FONDO para esta diapositiva. ¡OJO! en fondo, no en la sección IMAGEN y VÍDEO un poco más arriba en los ajustes. Queremos un FONDO y lo una imagen a la izquierda del texto. Cuando tengamos los ajustes de la slide listos, duplicamos tantas veces como diapositivas queramos y cambiamos las imágenes de fondo. Salimos de las diapositivas y permanecemos en los ajustes generales del módulo. En Ajustes del módulo > Avanzado > CSS Personalizado > Descripción de diapositiva añadimos el código CSS que te proporcionamos a continuación y que desactivará la animación para el texto.
[css]animation-name: none;[/css]
Abajo puedes ver la variante de este deslizador acabada. ¿Te ha sido útil? Comparte, por favor.
Y el vídeo tutorial, claro:
como hacen el carrousel en la misma pagina, con numeros y van pasndo las paginas sin cambiar el link
Hola, gracias por todos estos tutoriales, son de gran utilidad. Quería saber cómo se puede hacer un deslizador con varios módulos o imágenes en cada diapositiva de modo que cada vez que le das a la flecha desaparece una imagen de las 2, 3 o x imágenes que se mostraban y aparece una nueva.
Gracias