Cómo cambiar las transiciones en el módulo slider de Divi

por | 8 May, 2018 | Carrusel, Deslizador, Sliders

Imagen-destacada-slider_transiciones-Divi

El módulo deslizador de Divi

A día de hoy, la transición que incorpora por defecto el módulo deslizador del tema para wordpress Divi, es un fundido desde la izquierda para la imagen y hacia arriba para el texto, como puedes ver en el slider bajo estas líneas. Vamos a ver cómo podemos cambiar estas transiciones por otras distintas.

Cambiar las transiciones en el módulo slider de Divi_1

DESLIZADOR. TRANSICIÓN POR DEFECTO

Este es el texto descriptivo. Para cambiar la transición en el módulo slider, tenemos que añadir un poco de código.
TUTORIAL DIVI
Cambiar las transiciones en el módulo slider de Divi_2

SLIDER. VISTA TRANSICIÓN POR DEFECTO

Aquí tenemos el texto descriptivo que acompaña ala cabecera. Además, para cambiar la transición en el módulo deslizador, añadiremos un poquito de código.
TUTORIAL DIVI 3

Cambiando las transiciones

Cambiar las transiciones que vienen predeterminadas en los módulos tipo deslizador (carrusel si usas Extra) es muy fácil.  Sólo tenemos que añadir el nombre de la transición apropiada según el efecto que queramos activar. ¿Dónde? En la pestaña CSS personalizado de los ajustes del módulo deslizador. Ahí debes buscar los campos descripción de diapositiva  e imagen de la diapositiva; de esta manera puedes cambiar la transición que se va a aplicar.

ajustes-diapositiva-transiciones-Divi

Las transiciones

Justo bajo estas líneas puedes ver el código que vamos a emplear según queramos una u otra transición. Dispones de 10 transiciones distintas. Copia y pega en las zonas indicadas para cambiar la transición del módulo. Además puedes combinarlas según te convenga:

Fundido normal
animation-name:fadeIn;
Entrando desde arriba
animation-name:fadeTop;
Entrando desde la izquierda
animation-name:fadeLeft;
Entrando desde abajo
animation-name:fadeBottom;
Fundido entrando desde arriba
animation-name:fadeInTop;
Fundido entrando desde la izquierda
animation-name:fadeInLeft;
Fundido entrando desde la derecha
animation-name:fadeInRight;
Fundido entrando desde abajo
animation-name:fadeInBottom;
Flip horizontal (sobre el eje x).
animation-name:flipInX;
Flip vertical (sobre el eje y).
animation-name:flipIny;

Aquí puedes ver un ejemplo con las transiciones flip horizontal y vertical:

Cambiar las transiciones en el módulo slider de Divi_3

DESLIZADOR. TRANSICIÓN FLIP SOBRE EL EJE Y EN EL TEXTO LA IMAGEN

Este es el texto descriptivo. En esta ocasión verás la transición flip sobre el eje X (flip horizontal) aplicada al texto .
TUTORIAL DIVI
Cambiar las transiciones en el módulo slider de Divi_4

DESLIZADOR. TRANSICIÓN FLIP SOBRE EL EJE X EN LA IMAGEN

Este es el texto descriptivo. En esta ocasión verás la transición flip sobre el eje y (flip vertical) aplicada al texto .
TUTORIAL DIVI 3

Finalmente, bajo estas líneas tienes el vídeo del tutorial: