Tutorial WordPress Lottie: los mejores complementos para usar Lottie en WordPress

¿Busca una manera fácil de agregar animaciones Lottie a su sitio de WordPress? O confundido por qué diablos es mucho y por qué debería importarte? Ya sea que ya esté familiarizado con las animaciones de Lottie o que no tenga idea de lo que significa este término, esta publicación lo ayudará. En primer lugar, comenzaré explicando cuáles son las animaciones de Lottie y cómo pueden ser una herramienta útil para su sitio de WordPress. Luego le mostraré paso a paso cómo configurar las animaciones de WordPress Lottie en su sitio utilizando dos métodos diferentes. Si ya está familiarizado con Lottie Animations y está aquí solo para el tutorial, también puede hacer clic en este enlace para moverse directamente al lado del tutorial.
¿Qué son las animaciones de Lottie? En resumen, Lottie le ayuda a agregar animaciones interesantes a su sitio de WordPress (o cualquier otro sitio). Es una biblioteca desarrollada por Airbnb que le permite analizar las animaciones de Adobe After Effects que se han exportado como JSON con Bodymovin. Luego puede jugarlos nativos de su sitio web (o en una aplicación móvil). Honestamente, muchas de las discusiones de Lottie pasan sobre mi cabeza porque no soy ingeniero/diseñador. Lo único que necesita saber es que Lottie facilita la adición de animaciones a WordPress. Si desea obtener más información sobre el formato en sí, puede consultar la publicación introductoria de Airbnb.
Ejemplos de animaciones Lottie La mejor manera de descubrir qué son las animaciones de Lottie y cómo podría ser útil experimentarlas usted mismo. Para hacer esto, puede acceder al sitio web de Lottiefiles y echar un vistazo.

El artículo continúa a continuación
Puede navegar a través de muchas animaciones diferentes para diferentes casos de uso y nichos. Muchas de estas animaciones se usan de forma gratuita. Sin embargo, tienen licencia bajo la licencia Creative Commons-Asignment, lo que significa que puede usarlos de forma gratuita, pero debe proporcionar atribución a su sitio ¿Cómo funcionan las animaciones de Lottie? Como mencioné anteriormente, las animaciones de Lottie usan JSON como formato. Básicamente, esto significa que no funciona como un GIF o como una imagen animada “ordinaria”. En cambio, soy un archivo de código grande que se ve así: sí, esta enorme colección de código JSON con apariencia aleatoria es lo que se convierte en esas grandes animaciones en el front-end de su sitio. Sin embargo, debido a que las animaciones de Lottie usan este formato, no puede agregarlas a su sitio como podría hacer un GIF. Llega el resto de esta publicación … cómo usar animaciones de Lottie en WordPress porque este es un tutorial de WordPress, probablemente pueda adivinar a dónde va … la forma más fácil de agregar animaciones de Lottie a WordPress es con – espera – un WordPress Lottie Animation Plug. En este tutorial, le mostraré cómo usar dos complementos separados para completar el trabajo:

WP Bodymovin: este complemento gratuito le permite agregar animaciones Lottie y luego incorporarlas en cualquier lugar de su sitio utilizando un código corto.
Elementor: Elementor Pro incluye un widget lottie dedicado y también puede encontrar extensiones gratuitas.
Pero antes de alcanzarlo, primero debe encontrar la animación Lottie que desea usar y obtener su JSON … 1. Elija una animación y encuentre su archivo JSON para comenzar las cosas, debe encontrar una animación para usar. El artículo continúa abajo
La forma más fácil de hacerlo es usar el sitio web de Lottiefiles que mencioné anteriormente. Muchas de las animaciones en este sitio son gratuitas y ya usan el formato Lottie JSON apropiado, lo que significa que son muy fáciles de incluir en su contenido. Solo recuerde que la licencia para animaciones gratuitas requiere asignación.

También puede encontrar muchas otras fuentes que ofrecen animaciones de efecto que puede exportar utilizando el complemento Bodymovin. Sin embargo, esto agrega complejidad adicional, especialmente si no está familiarizado con el efecto posterior. Un buen lugar para buscar este enfoque son los elementos de Envato. Sin embargo, me quedaré en Lottiefiles porque es, con mucho, la opción más fácil. Vaya al área de animaciones para encontrar todas las animaciones gratuitas. Después de haber encontrado uno que le gusta, haga clic en él para abrirlo. Elegí esta animación de un automóvil conducido por WordPress Wheel. No estoy seguro de por qué existe, pero estoy feliz de existir:

Luego haga clic en el botón Descargar JSON para descargar el archivo .json en su computadora (deberá registrarse para obtener una cuenta para descargar el archivo, pero es gratis). 2. Agregue la animación Lottie a WordPress una vez que tenga el archivo JSON para su animación, está listo para mostrar la animación en WordPress. De nuevo te doy dos opciones aquí:
WP Bodymovin: le permite incorporar su animación en cualquier lugar utilizando un código corto.


WP Bodymovin para iniciar, instalar y activar el complemento WP Bodymovin gratuito en wordpress.org. Luego vaya a animaciones → Agregue nuevos y siga estos pasos:
Dales un título para ayudarte a recordar.
Cargue el archivo JSON usando el selector de archivos de datos JSON.
Haga clic en Publicar para cargar el archivo y generar una vista previa.
El artículo continúa a continuación
Ahora, debería ver una vista previa en vivo de su animación a continuación, elija el juego de animación: le recomiendo que lo deje como SVG. Luego use el generador de código corto para configurarlo aún más. Por ejemplo, marcaría el cuadro de animación del bucle para que la animación siempre la repita. También puede agregar carga perezosa y apagar la animación cuando esté fuera de la cara de visualización para mejorar el rendimiento.
Después de haber tomado las decisiones, copie el código corto. Entonces solo tiene que agregar ese código corto a la ubicación donde desea aparecer:


Y luego debería verlo en el front-end de su sitio:

¡Eso es todo! Simplemente repita el proceso para agregar más animaciones. Elementor si tiene Elementor Pro, Elementor ya incluye su propio widget de animación Lottie que puede usar en su diseño si no tiene Elementor Pro, también puede encontrar suplementos gratuitos Elementor en wordpress.org, que le ofrece un lottie de widget gratuito. Por ejemplo, complemento de animentor gratuito. Usamos y recomendamos Elementor Pro, por lo que lo usaré para este tutorial.

Para comenzar, todo lo que hace es detener el widget de lottie donde desea aparecer. Luego puede cargar el archivo JSON directamente en la configuración del widget (Elementor le advertirá que debe activar las cargas de JSON para hacer esto: WordPress los desactiva por predeterminado): ¡Y eso es todo! Deberías ver la animación de Lottie en diseño. Para controlar la forma en que trabaja, puede extender la sección Configuración del widget para controlar los disparadores, el bucle, la velocidad de juego, la carga perezosa y más:

Comience a usar WordPress Lottie Animations Today Lottie Animations son una excelente manera de agregar un poco de diversión y participación a su sitio de WordPress. Sin embargo, debido a que son archivos JSON, puede ser difícil entender cómo agregarlos a su contenido de WordPress.

En esta publicación, detallé dos formas fáciles de hacer esto. Para un enfoque que funcione con cualquier configuración (incluido el editor de bloques), puede usar el complemento WP Bodymovin gratuito. O, si ya usa Elementor, le recomiendo usar el Widget Elementer Pro de Lottie Dedicated para completar el trabajo. ¿Todavía tiene alguna pregunta sobre cómo usar Lottie en WordPress? ¡Pregunte en los comentarios!