Las animaciones son una excelente manera de agregar interactividad a tu sitio web y mejorar la experiencia del usuario. Hoy en día, son imprescindibles para atraer tráfico y generar conversiones. Es por ello, que en este artículo, te explicaremos cómo agregar animaciones Lottie a tu sitio web en WordPress.
Lottie es una biblioteca de animaciones creada por Airbnb que se destaca por su tamaño reducido. Los datos de animación se exportan como archivos JSON, lo que hace que sean fáciles de usar en diferentes plataformas. Aunque la herramienta principal para crear y exportar animaciones es After Effects, existen otras opciones como Fable, Aninix, Inkscape, Synfig Studio, Flow y Cavalry.
A continuación dos formas diferentes de agregar animaciones Lottie en tu sitio de WordPress:
Usando el plugin Otter Blocks
Aunque existe un plugin de Lottie Files para WordPress, no se ha actualizado en nueve meses y presenta problemas de compatibilidad con algunos editores de bloques, incluido Gutenberg. Por lo tanto, el plugin Otter Blocks provee una forma sencilla de cumplir con la misma tarea.
Los pasos a seguir, son los siguientes:
- Ingresa al panel de administración de WordPress y haz clic en «Agregar Nuevo» en la opción Plugins.
- Busca el plugin Otter Blocks, instálalo y actívalo.
- Notarás que se han añadido nuevos bloques al editor de Gutenberg.
- Ingresa a la página de Lottie Files, selecciona una animación y copia su dirección. Si por el contrario has creado tu propia animación Lottie o la has descargado, sube el archivo JSON a tu biblioteca de Medios de WordPress.
- En el editor de páginas de tu sitio en WordPress, haz clic en «+» para agregar un bloque y selecciona «Lottie Animation».
- Pega la dirección de la animación previamente copiada desde la página de Lottie Files o selecciona tu archivo desde la biblioteca de Medios.
- En ambos casos, la animación se mostrará de forma inmediata.
Usando código HTML y JS
Este método requiere la edición del archivo function.php de tu tema, por lo que recomendamos trabajar con un tema hijo para evitar perder los cambios tras una actualización del tema principal.
Los pasos a seguir son los siguientes:
- Edita el archivo function.php y agrega las líneas de código a continuación para agregar el reproductor de Lottie:
wp_enqueue_script( 'lottie-player', 'https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js' );
Si deseas ampliar tus conocimientos acerca del uso de esta función, visita el enlace a la página oficial aquí.
- Agrega la animación Lottie, a través de en un bloque HTML. Para ello ingresa el siguiente código:
<lottie-player src="your-animation-lottie-url-here" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
Al publicar la página, o simplemente acceder a una vista previa de la misma, podrás ver la animación en acción.
Y eso sería todo, cómo es posible observar, agregar una animación Lottie a WordPress es verdaderamente sencillo, por lo que esperamos que esta información sea de utilidad y que puedas agregar animaciones atractivas y efectivas a tu sitio web.
Gracias por leernos, hasta una próxima entrega.
