Todo lo que necesitas saber sobre el módulo Lottie de Divi 5

El módulo Lottie de Divi 5 trae animaciones dinámicas y livianas a sus páginas, haciendo que sus páginas sean más atractivas e interactivas. Las imágenes correctas son clave para llamar la atención y mantener a los visitantes comprometidos. Con el módulo Lottie, Divi 5 le permite agregar animaciones de aspecto profesional que también son amigables con el rendimiento.

En esta publicación, explicaremos todo lo que necesita saber sobre el módulo Lottie, incluidas sus características, proceso de configuración, opciones de personalización y formas de usarlo. ¡Vamos a saltar!

¿Qué son los archivos Lottie?

Las animaciones de Lottie son gráficos livianos y basados ​​en JSON que representan vectores escalables. Entregan imágenes escalables sin los tamaños de archivo fuertes de videos o GIF. Gracias a su capacidad para combinar el rendimiento con flexibilidad, Lottie ha ganado popularidad, lo que lo hace popular para el diseño web moderno. A diferencia de las animaciones tradicionales, los archivos Lottie utilizan datos JSON basados ​​en vectores, asegurando imágenes nítidas y una reproducción suave en todos los dispositivos y tamaños de pantalla.

Suscríbete a nuestro canal de YouTube

En Divi 5, el módulo Lottie integra perfectamente estas animaciones en Visual Builder, lo que permite a los usuarios agregar toques dinámicos y modernos a sus sitios web de Divi en unos pocos clics. Ya sea que resalte un CTA o agregue un estilo a una sección de héroes, el módulo Lottie hace que la incorporación de animaciones sin codificación compleja sin esfuerzo.

Con el módulo Lottie, Divi 5 transforma la forma en que trae movimiento a sus diseños web, haciéndolos cautivadores y eficientes.

Características clave

El módulo Lottie en Divi 5 es una herramienta versátil llena de capacidades que facilitan la creación de animaciones dinámicas y optimizadas. Ofrece control sobre el comportamiento de animación, lo que le permite ajustar la velocidad, la dirección, los desencadenantes y más. Echemos un vistazo a algunas de sus características clave.

Facilidad de uso

El módulo Lottie en Divi 5 está diseñado con la simplicidad en mente, lo que lo convierte en amigable para principiantes y accesible para los usuarios de todos los niveles de habilidad. No necesita ser un experto en codificación para agregar animaciones profesionales y llamativas a su sitio web de Divi.

Gracias a la cantidad de recursos disponibles en línea, la obtención de animaciones es fácil. Plataformas como Lottiefiles y Lordicon ofrecen extensas bibliotecas de animaciones lottie gratuitas y premium, que van desde iconos de carga sutiles hasta gráficos vibrantes.

Para aquellos que buscan un toque único, pueden crear animaciones personalizadas utilizando herramientas como Adobe After Effects con el complemento BodyMovin. Este complemento exporta animaciones como archivos JSON compatibles con el módulo Lottie. Ya sea que elija animaciones prefabricadas o personalizadas, el proceso es sencillo.

Opciones de personalización

El módulo Lottie en Divi 5 ofrece opciones de personalización, lo que le brinda control sobre varios aspectos del archivo Lottie. Para experiencias interactivas, use la animación de activación para elegir cuándo activar la animación, como en la carga, cuándo el elemento ingresa a la ventana gráfica, desplazada, hace clic o desplazan. Puede habilitar la animación de bucle para permitir el movimiento continuo en su archivo Lottie, ajustar la velocidad de animación , seleccionar la dirección (hacia adelante o hacia atrás) y elegir entre normal o rebotar en el campo Modo de juego .

Subiendo animaciones JSON

Agregar animaciones Lottie a Divi 5 requiere cargar archivos JSON, el formato estándar para archivos Lottie. Sin embargo, WordPress no admite de forma nativa las cargas de JSON en su biblioteca de medios, por lo que deberá tomar medidas adicionales para asegurarse de que puede cargarlas.

La primera opción es crear un tema infantil y agregar un fragmento PHP al archivo Functions.php de su tema de su hijo. Este método es liviano y garantiza un manejo seguro de sus archivos de animación. Alternativamente, puede usar un complemento como tipos de carga de archivo para permitir cargas de JSON sin tocar ningún código, lo que lo hace ideal para usuarios que prefieren una solución plug-and-play. Para obtener una guía paso a paso para implementar cualquiera de los métodos, consulte nuestro artículo de soporte, que lo guía a través del proceso para configurar su sitio web Divi 5 para cargas JSON.

Cómo usar el módulo Lottie en Divi 5

Agregar una animación Lottie en Divi 5 es sencillo. Cree o descargue una animación Lottie de una fuente como Lottiefiles o Lordicon. Busque y haga clic en el módulo Lottie en el Visual Builder para agregarlo a su página.

Cargue el archivo JSON o lo ubique en su galería de medios de WordPress.

Elija la animación del activador . Puede configurarlo para animar en la carga, ver, desplazar, hacer clic o desplazarse para animar.

Si desea que su animación Lottie tenga un elemento interactivo, use el desplazamiento del módulo para animar el disparador.

El uso de este disparador ofrece una excelente manera de crear experiencias de usuario dinámicas y atractivas. En lugar de usar la animación cuando la página se carga, desplácese para animar lazos de la animación directamente al comportamiento de desplazamiento del usuario. A medida que el usuario se desplaza por la página, la animación progresa marco por cuadro. Esto hace que la animación sea un elemento interactivo que hace que la experiencia se sienta más dinámica.

Si desea que la animación se encienda sin fin, habilite la alternancia de animación de bucle . También puede establecer la velocidad de animación , controlar la dirección ( hacia adelante o hacia atrás ) y seleccionar normal o rebotar para el modo de juego .

En la pestaña de diseño , puede controlar el tamaño, la alineación, la altura, el espacio y más.

Aunque no puede cambiar los colores de sus archivos Lottie dentro de Divi 5, la mayoría de los sitios web de Lottie le permiten elegir colores específicos y anchos de trazo antes de descargarlos.

Como puede ver, agregar un archivo Lottie a su sitio web Divi 5 toma segundos y agrega un poco de talento a sus páginas web sin preocuparse por el rendimiento.

Ejemplos prácticos utilizando el módulo Lottie

El módulo Lottie en Divi 5 ofrece una amplia gama de aplicaciones, agregando estilo a sitios web con animaciones dinámicas. Desde mejorar las páginas de contacto hasta las secciones llamativas de héroes, su flexibilidad se adapta a todo tipo de diseños.

Con sus opciones de integración y personalización perfecta, los usuarios de Divi pueden crear experiencias atractivas y amigables para el rendimiento en todo su sitio web.

Páginas de contacto

Agregar animaciones Lottie puede hacer que sus páginas de contacto sean más atractivas. Por ejemplo, coloque los módulos Lottie de bucle junto a las horas comerciales, los números de teléfono e otra información de contacto para crear una experiencia interactiva y acogedora que aumente las conversiones sin ralentizar su sitio.

404 páginas

Convierta los errores frustrantes 404 en momentos memorables con animaciones lúdicas de Lottie. Agregue una brújula giratoria o un icono de búsqueda animado a su página 404, junto con un mensaje corto.

Use la configuración de animación de bucle para mantener el movimiento continuo y activarlo en la carga para llamar la atención instantáneamente. Esto hace que la página 404 se sienta menos como un callejón sin salida y más como un punto de contacto creativo.

Productos destacados

Muestre sus productos o categorías Woo favoritos con animaciones Lottie para resaltar productos a la venta. Por ejemplo, coloque una animación Lottie de la insignia de venta junto a un producto destacado para resaltarlo.

Primero, configure la animación para activarse en la carga. Luego, se activa a medida que los usuarios navegan, atraen sus ojos a los productos y aumentan el atractivo visual.

Secciones de servicios

Tome su sección de servicios a la vida con animaciones de Lottie que representan visualmente sus ofertas. Por ejemplo, use animaciones de bucle para su agencia de marketing, ajustando la velocidad para que coincida con el tono.

Además, establezca el disparador de la vista para activar animaciones a medida que los usuarios exploran, asegurando una presentación dinámica y profesional.

Secciones de héroes

Haga que sus secciones de héroes sean inolvidables con animaciones de lottie en negrita que establezcan el tono para su sitio web. Primero, agregue una animación de fondo suave utilizando el módulo Lottie de Divi. Luego, colóquelo detrás de filas y módulos con la configuración de posición de Divi.

Por ejemplo, una animación moderna y fluida o un efecto sutil de partículas puede agregar profundidad a su sitio con poco esfuerzo. Use el desencadenante de carga para el impacto inmediato y ajuste el modo de juego para rebotar en busca de un efecto cautivador.

Descargar los archivos

Descargar gratis

Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!

Conclusión

En Divi 5, el módulo Lottie simplifica agregar animaciones livianas y dinámicas a los sitios web. Integrado sin problemas en el Visual Builder, permite animaciones profesionales con un esfuerzo mínimo. Controles flexibles, personalización extensa y plataformas gratuitas de archivos Lottie facilitan la mejora de su sitio.

¿Listo para probar el módulo Lottie? Comparta sus pensamientos o creaciones en los comentarios o en las redes sociales.