Personalizar el módulo deslizador de Divi. 2 maneras de configurarlo

por | 23 Ene, 2018 | Carrusel, Deslizador

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.

Diapositiva 1

En contenido añadimos texto si queremos. Esta es la primera slide

Diapositiva 2

En contenido añadimos texto si queremos. Esta es la segunda slide

Diapositiva 3

En contenido añadimos texto si queremos. Esta es la tercera slide

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]

css-ocultar-animacion Abajo puedes ver la variante de este deslizador acabada. ¿Te ha sido útil? Comparte, por favor.

SUPUESTO 2

En contenido añadimos el texto que comopartiremos. Este TEXTO es el mismo para todas las diapositivas, pero le añadimos un poco de css para que no ejecute ninguna animación.

SUPUESTO 2

En contenido añadimos el texto que comopartiremos. Este TEXTO es el mismo para todas las diapositivas, pero le añadimos un poco de css para que no ejecute ninguna animación.

SUPUESTO 2

En contenido añadimos el texto que comopartiremos. Este TEXTO es el mismo para todas las diapositivas, pero le añadimos un poco de css para que no ejecute ninguna animación.

Y el vídeo tutorial, claro: