Cómo agregar animaciones de Lottie en WordPress (4 pasos simples)

El uso de animaciones de Lottie en WordPress puede ser una excelente manera de mejorar sus páginas. Por lo general, son livianos y personalizables y, por lo tanto, pueden ayudarlo a crear contenido atractivo sin dañar su experiencia de usuario (UX). Sin embargo, es posible que esté buscando una manera sin estrés de agregarlos a su sitio.

Afortunadamente, el proceso es más fácil de lo que piensas. Al usar un complemento como Otter Blocks, puede agregar y personalizar sus animaciones de Lottie con solo unos pocos clics. También podrás establecer condiciones de visibilidad para que se reproduzcan en el momento adecuado.

Una introducción a las animaciones de Lottie

Lottie es un formato de archivo de código abierto para animaciones web. Le permite crear animaciones personalizadas para su marca y usarlas en su sitio web:

Por supuesto, siempre puede optar por los GIF, pero estos archivos pueden sobrecargar su sitio. Las animaciones de Lottie son mucho más pequeñas que los GIF. Por lo tanto, pueden ayudarlo a hacer que su sitio sea más interesante mientras preserva su UX y brinda tiempos de carga rápidos.

Además, las animaciones de Lottie vienen con muchas opciones de personalización. La biblioteca en sí es extensa y brinda acceso a miles de elementos, personajes e ilustraciones. Sin embargo, también puede intercambiar colores, cambiar la configuración de visualización y agregar condiciones de visibilidad.

Las animaciones personalizadas pueden ayudarte a impresionar a tus visitantes. Además, pueden hacer que su sitio se vea fresco y único.

Cómo agregar animaciones de Lottie a WordPress (en 4 pasos)

Ahora que sabe un poco más sobre Lottie Animations, veamos cómo agregarlas a su sitio web de WordPress:

Paso 1: Instalar y activar Otter Blocks

Hay muchas formas de agregar animaciones de Lottie en WordPress. Por ejemplo, puede usar HTML y JavaScript. Sin embargo, este método puede ser bastante complejo.

Alternativamente, puede usar el complemento de animaciones Lottie, aunque es posible que no sea compatible con todos los creadores de páginas. Además, no ofrece muchas opciones estilísticas.

La forma más fácil de agregar Lottie Animations a su sitio es con un complemento como Otter Blocks:

Este complemento agrega nuevos bloques de contenido y plantillas a su sitio, incluido un bloque para animaciones de Lottie. También amplía la funcionalidad del Editor de bloques con CSS personalizado, animaciones, condiciones de visibilidad y más. Por lo tanto, lo ayuda a diseñar sus páginas de manera más eficiente y reduce la necesidad de creadores de páginas.

Si actualiza a Otter Blocks Pro, obtendrá acceso a funciones avanzadas como bloques especiales de WooCommerce y configuraciones estilísticas adicionales. Sin embargo, no necesita la versión Pro para usar la función de animaciones de Lottie.

Si desea usar la versión gratuita, diríjase a Complementos > Agregar nuevo en su panel de WordPress y busque "Otter Blocks:"

Luego, haz clic en Instalar > Activar . Ahora debería ver una selección de nuevos bloques en el Editor de bloques.

Paso 2: elige una animación de la biblioteca de Lottie

Ahora que tiene Otter Blocks configurado en su sitio web, puede dirigirse a la biblioteca de Lottie para elegir una animación. Para acceder a los diseños, deberá crear una cuenta gratuita.

Una vez que haya creado su perfil, vaya a Descubrir y seleccione Animaciones gratuitas listas para usar :

Aquí, puede navegar a través de una biblioteca de elementos de Lottie que se pueden usar en sitios web, aplicaciones y redes sociales:

Cuando encuentre una animación que desee utilizar, haga clic en el diseño. Aparecerá una ventana emergente donde puede realizar algunos cambios en la apariencia de la animación:

Por ejemplo, puede ajustar la velocidad de la animación y cambiar el color de fondo. Si hace clic en Editar colores de capa , accederá al Editor de sorteos:

Aquí puedes personalizar el color de cualquier parte del diseño. Simplemente haga clic en una sección del elemento que desea cambiar, vaya a Todos los colores y use el selector de color para aplicar un nuevo tono:

Si realiza un cambio que no le gusta, haga clic en la flecha Deshacer en la parte superior izquierda de la pantalla.

Paso 3: pegue la URL de animación de Lottie en su Otter Block o cargue el archivo de Lottie

Una vez que esté satisfecho con su diseño, tiene dos opciones para agregarlo a WordPress:

1. Puede copiar la URL de Lottie Animation para agregar la versión del servidor de LottieFiles a su sitio. Encontrarás esto en la ventana emergente de tu animación, justo debajo del diseño.
2. Puede descargar el LottieFile terminado a su computadora haciendo clic en el botón Descargar en la esquina superior derecha y seleccionando el formato dotLottie . Esto le permitirá alojar el archivo en su servidor.

Luego, regrese a su sitio de WordPress y abra la página o publicación donde desea insertar su animación.

Haga clic para agregar un nuevo bloque y busque "Animaciones de Lottie:"

Agrega el bloque a tu página. Luego, elige una de estas opciones:

• Insertar desde URL : use esto si desea ingresar el enlace al archivo de Lottie en los servidores de LottieFiles. Todo lo que necesita hacer es pegar el enlace URL de animación de Lottie que copió del sitio web de LottieFiles.
• Cargar : use esto si descargó el archivo dotLottie real de LottieFiles. A continuación, puede cargar ese archivo en su sitio de WordPress.

Luego, presiona Enter y la animación aparecerá en la página:

Ahora puede guardar sus cambios y pasar al paso final.

Paso 4: Personaliza tu animación con Otter Blocks

Ahora que ha agregado sus animaciones de Lottie en WordPress, está listo para personalizar el diseño y el diseño. En la configuración de bloqueo, verá una selección de opciones de visualización.

En TRIGGER , puede elegir entre reproducción automática , desplazamiento , desplazamiento o clic . La animación no se reproducirá hasta que se complete una de estas acciones en la página:

También tiene la opción de alternar la animación para que se reproduzca en bucle. Además, puede ajustar la velocidad de su animación con el control deslizante, invertir la dirección y cambiar el ancho del diseño.

Si desea cambiar el color de fondo, haga clic en la pestaña Fondo . Aquí, puede seleccionar una de las opciones sólidas predeterminadas, usar el selector de color o elegir un fondo degradado:

Si te diriges a Condiciones de visibilidad , podrás configurar tu animación para que solo aparezca en ciertas circunstancias:

Por ejemplo, es posible que desee que el bloque sea visible solo para los usuarios registrados o que se muestre en una fecha específica. Para hacer esto, haga clic en Agregar grupo de reglas . Luego, seleccione la flecha para abrir la configuración:

En CONDICIÓN , use el menú desplegable para configurar sus ajustes de visibilidad. Puede agregar más de una condición y crear grupos de reglas adicionales.

Comience con las animaciones de Lottie en WordPress

En resumen, aquí hay cuatro pasos para agregar animaciones de Lottie en WordPress:

Para obtener aún más formas de mejorar el editor nativo de WordPress, puede consultar nuestra colección completa de los mejores complementos de bloque de WordPress.

¿Tiene alguna pregunta sobre cómo agregar Lottie Animations en WordPress? ¡Háganos saber en la sección de comentarios!