Las últimas versiones de la plantilla Divi incluyen una serie de efectos de animación o animaciones que son muy interesantes para poder crear una página web con wordpress diferente y que llame la atención al visitante.
DESCUENTOS PLANTILLA DIVI
ÍNDICE DEL POST
- 1.- ¿Dónde podremos incluir estos efectos de animación de la plantilla Divi?
- 2.- ¿Dónde encontrar el apartado dedicado a estos efectos de movimiento con wordpress y Divi?
- 3.- Ejemplos de animaciones realizados con la plantilla Divi para Wordpress
- 4.- Tipos de animación incluidas en la plantilla Divi y el Divi Builder
- 5.- Opciones de configuración de los efectos animados de Divi para Wordpress
1.- ¿Dónde podremos incluir estos efectos de animación de la plantilla Divi?
Elegant themes ha incluido estas animaciones o efectos de movimientos en todos los elementos que conforman el divi builder (page builder de la plantilla Divi).
Es decir, podremos usar estos efectos de movimiento o efectos de animación que incorpora la plantilla Divi en: secciones, filas y módulos.
Poder insertar estos efectos animados en cualquiera de los elementos que conforman el page builder de Divi nos permitirá crear combinaciones de efectos que alucinarán al visitante de nuestra página web wordpress.
2.- ¿Dónde encontrar el apartado dedicado a estos efectos de movimiento con wordpress y Divi?
Tanto en Secciones, filas o módulos, el apartado dedicado a incluir efectos animados estará en la pestaña “Diseño” de la configuración de la sección, fila o módulo.
El apartado se titulará “Animación” y el selector de la animación a incluir lo encontrarás como “Animation Style”.
Apartado dedicado a los efectos de animación de Divi
3.- Ejemplos de animaciones realizados con la plantilla Divi para WordPress
Para que veas las posibilidades que tienen estos efectos de animación que incluye la plantilla Divi para wordpress haz clic en el botón para ver una demo. Ve haciendo scroll para ir visualizando este conjunto de efectos animados que ha preparado Elegant Themes
VER DEMO EFECTOS ANIMADOS
4.- Tipos de animación incluidas en la plantilla Divi y el Divi Builder
Las últimas versiones de Divi incorporan 7 tipos de animaciones diferentes:
i.- Desvanecer (Fade): con este efecto conocido como “Fade” el elemento aparecerá de manera progresiva.
ii.- Diapositiva (slide): con este efecto de animación conocido como “Slide” el elemento aparecerá a través de un desplazamiento lateral.
iii.- Bounce (rebotar): con este efecto de animación de Divi conocido como “Bounce” y cuya traducción es “rebotar” conseguiremos que el elemento aparezca a través de una serie de movimientos de contracción y expansión.
iv.- Zoom: con este efecto de animación que incluye la plantilla Divi para wordpress conseguiremos que la imagen aparezca a través de la ejecución de un zoom de menor a mayor.
v.- Invertir (Flip): usando este efecto conocido como “Flip” y que podemos traducir como “Invertir” o “dar la vuelta” conseguiremos que el elemento aparezca a través de un giro de 90 º en el eje x-y-z
vi.- Fold (doblar): usando el efecto “Fold” que podríamos traducir como “efecto de doblado” conseguiremos que se muestre el elemento reproduciendo el efecto de pasar una página. Es decir, un efecto de doblado.
vii.- Roll (enrollar): usando el efecto “Roll” del divi builder que podríamos traducir como “enrollar” conseguiremos que aparezca el elemento con un efecto de giro en el plano x / y
5.- Opciones de configuración de los efectos animados de Divi para WordPress
Si no queremos establecer ningún efecto de animación deberemos marcar la opción: “None”. Si por el contrario seleccionamos alguno de los efectos veremos que nos aparecen más abajo una serie de opciones de personalización o configuración del efecto.
Opciones de configuración efectos movimiento divi
Las opciones de configuración que tenemos para estos efectos de la plantilla Divi son:
i.- Animation repeat (repetición animación): por defecto el efecto solo se ejecuta una sola vez, pero podríamos hacer que el efecto se repitiera de manera indefinida a modo de bucle si elegimos la opción “Loop”. Esto podría ser interesante para crear un call to action o llamada a la acción.
ii.- Animation direction (dirección animación): no todos los efectos tienen esta opción. Sirve para establecer la dirección desde la que aparecerá el elemento. Podremos elegir entre centro, derecha, izquierda, arriba y abajo.
iii.- Animation duration (duración de la animación): con esta opción estableceremos la duración en milisegundos del efecto de animación con Divi. El tiempo por defecto es de 1000 milisegundos que equivale a 1 segundo. Podremos establecer una duración máxima de 2000 milisegundos (ms)
iv.- Animation Delay (retardo efecto): cuando introducimos una combinación de varias animaciones puede ser muy interesante utilizar esta opción de retardo o retraso en la ejecución de la animación para que la sincronización con los otros efectos sea más impresionante aun si cabe. Podremos establecer un retardo de entre 0 y 3000 milisegundos.
v.- Animation intensity (intensidad animación): con este selector podremos establecer si el efecto animado es más sutil o más marcado. En cada tipo de efecto la intensidad se manifiesta de una manera u otra y afecta a parámetros como la velocidad y el recorrido del efecto.
vi.- Animation Starting Opacity (opacidad de inicio): por defecto todos los efectos incluyen un efecto tipo “Fade” desde cero. Con este selector podremos reducir este efecto “Fade” o incluso eliminarlo por completo.
vii.- Animation Speed Curve (curva de velocidad): desde aquí podremos modificar la curva de velocidad del efecto que producirá pequeñas diferencias en el aspecto del efecto.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joquín! estoy trabajando con Divi 3.21.4 y al aplicar una animación a un texto (cualquier animación) el texto desaparece y no se muestra. Nunca me pasó antes con otras versiones de Divi. Sabrás que puede ser? Muchísimas gracias!!
Hola Alejandra.
Pues no, no me ha pasado nunca algo Así.
Escríbelo en el foro de soporte de Elegant Themes, para que le echen un vistazo
Hola felicidades por tu excelente blog de ayuda a divi es genial.
¿es posible variar la velocidad de fusionado de las imágenes, cuando esta activado en modo «reproducción automática» del modulo «Control deslizante de anchura completa»?
Hola Manel.
Mira a ver si en la pestaña: «AVANZADO» de la configuración del módulo, tienes una partado denominado: «Transitions».
un saludo
Muy interesante el post. Muchas gracias Joaquín. Me pondré manos a la obra en poco tiempo.
hola, por que los módulos que tengo con animación no se muestran?
Buenas Walter,
Si los tienes correctamente configurados, solo se me ocurre que la plantilla no esté actualizada
Estupendo post Joaquin. Como siempre.
¡Enhorabuena!
Graias a ti Antonio por seguirme
Un saludo