Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

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

 

 

 

 

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).

 

¿Conoces el plugin para Divi que nos permite añadir más de 90 nuevas opciones de configuración a la plantilla? ¿aún no conoces Divi Booster? -> Divi Booster Más info

 

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”.

 

efectos animados en la plantilla divi

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.

 

Aprende a exportar e importar diseños realizados con Divi de una web a otra: Exportar e importar con Divi

 

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 personalización de las animaciones con divi

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.

 

¿No sabes lo que es un tema hijo o child theme para Divi?: Divi hijo

 

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.

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto. Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies