¿Cómo agrego animaciones a mi sitio wordpress?
¿Cómo agrego animaciones a mi sitio wordpress?
La incorporación de animaciones en tu sitio WordPress es una excelente manera de agregar dinamismo a una página web para quitarle monotonía, y así mantener a tus visitantes atraídos e interesados, durante todo el tiempo que pasan en tu sitio. Para ello, una manera fácil y eficiente de lograrlo es usando animaciones de lottie: ligeras y de alta calidad.
¿Qué son las animaciones de Lottie?
Lottie es una biblioteca para Android, iOS, Web y Windows que genera animaciones de After Effects, y permite que los datos de animación se exporten como archivos JSON, en lugar de un típico archivo de imagen (como un GIF, por ejemplo); pudiendo reemplazar así un activo estático con algo divertido y atractivo, sin necesariamente sumarle un peso significativo de carga a tu sitio.
Esa es la mayor ventaja de usar animaciones de lottie en WordPress: que el tamaño del archivo es muy pequeño, en comparación con la animación GIF o los archivos mp4. Además, el formato de animación flexible permite que el navegador la cargue y muestre sin ningún tipo de inconveniente, ni instalaciones o configuraciones adicionales.
Las muchas posibilidades que tienes para usar animaciones de lottie es una de las razones por las que son tan populares. Puedes usar animaciones en encabezados, botones, elementos gráficos y muchísimo más. También puedes configurar las animaciones para que se activen cuando los visitantes se desplazan o hacen clic en algún elemento de tu página, esto las convierte en una forma innovadora de mejorar la calidad y el aspecto general de tu sitio web.
¿Qué opciones tienes para hacer uso de estas animaciones?
Depende de qué estés buscando y cuánto estés dispuesto a pagar por ello.
Animaciones personalizadas de Lottie
Si está buscando una animación completamente personalizada para tu sitio web, deberás trabajar con un animador o diseñador que se especialice en Adobe After Effects, y esté familiarizado con las animaciones de lottie específicamente.
Una vez definidos los elementos gráficos y los efectos de animación, el animador deberá crear las animaciones personalizadas en Adobe After Effects y exportarlas como animaciones de lottie, usando la extensión de After Effects. Esto generará una animación de alta calidad que se puede implementar fácilmente en tu sitio.
Una de las razones por las que las animaciones de lottie son de alta calidad es que el proceso de creación elimina la necesidad de que un desarrollador o ingeniero recree la animación en un formato web, simplemente la exporta como lottie y listo, ofreciendo una solución lista para usar, que hace que la implementación de animaciones sea más fácil que nunca.
Animaciones del propio Stock Lottie
Las animaciones del Stock Lottie son una excelente opción si estás corto de tiempo. Puedes buscar una animación ya existente y, si es necesario, personalizarla para que se ajuste -hasta donde se pueda- a tus criterios.
Lottie Files es el sitio web donde podrás encontrar una gran cantidad de animaciones de lottie, gratuitas y pagas. El sitio ofrece una herramienta de edición, donde podrás editar los colores de la animación antes de descargarla. Si necesitas ajustar una gran cantidad de colores en una animación, un animador o diseñador experto puede tomar la descarga y usar Adobe After Effects para realizar esos ajustes, de manera más eficiente, y luego exportar la animación resultante nuevamente como lottie.
Ten en cuenta que este tipo de animaciones o gráficos de stock tienen requisitos de licencia para su uso, y en ocasiones se requiere (voluntaria o necesariamente) contribuir con el diseñador original de la animación.
Agregar animaciones de Lottie en WordPress
Es un proceso bastante fluido, puedes utilizar un código HTML personalizado para agregar la animación al sitio, o utilizar un plugin de WordPress.
Código HTML personalizado
Un desarrollador experto de WordPress puede usar una pequeña biblioteca de JavaScript y un HTML personalizado para agregar las animaciones de lottie al sitio. Comenzará cargando en la carpeta del tema activo el script lottie.min.js junto con el archivo de animación .json y cualquier otro recurso de imagen requerido. Luego, habrá un pequeño fragmento de JS que inicia el script de Lottie, cargando el archivo de animación .json en el contenedor div deseado.
Este método es el ideal si no deseas sobrecargar el sitio con plugins adicionales. Se puede controlar si la animación se repite, cuántas veces se repite y qué puede activar el elemento animado en la página.
Ten en cuenta que la mayoría de los plugins para agregar animaciones de lottie -sin la ayuda de un desarrollador- requieren el uso de Elementor, por lo que el enfoque HTML personalizado tiende a funcionar mejor si tienes un sitio donde no hagas uso de este constructor/maquetador de páginas.
Plugins WordPress
Si no deseas usar un desarrollador para hacerlo de manera personalizada, por razones de tiempo o dinero, otra buena opción que tienes es agregar animaciones de lottie a tu WordPress mediante un plugin.
Elementor Pro – Widget Lottie
Elementor es un creador de páginas para WordPress con funciones de arrastrar y soltar, y la licencia de Elementor Pro incluye el widget Lottie. Con este widget puedes agregar animaciones de lottie sin código y personalizar las dimensiones y el comportamiento de la animación. Este complemento se conecta convenientemente con el sitio web de Lottie Files, por lo que puedes seleccionar fácil, rápida y directamente las opciones de animaciones que allí se encuentran, o cargar tus propias creaciones.
Bloques de Gutenberg: Ultimate Addons
Si estás utilizando el editor de Gutenberg en tu sitio, Ultimate Addon para Gutenberg puede ser una buena opción para agregar animaciones de lottie con la ayuda de un plugin, y controlar opciones avanzadas, como la velocidad de la animación y el disparador
Otros plugins
Hay plugins adicionales disponibles en el directorio de WordPress para agregar y personalizar animaciones de lottie. Algunas de esas opciones requieren que tu sitio esté construido y use Elementor, como por ejemplo Premium Addons y Elementskit Addon. También hay plugins destinados a otros temas y constructores de WordPress, como el tema Divi o los bloques de Gutenberg, lo ideal es eches un vistazo para confirmar si alguno de ellos te sirve.
Entérate también sobre estos temas relacionados:
Sites wordpress que no lucen como “uno más”
¿Cómo corregir el frustrante error: “Maximum Execution Time Exceeded” en un sitio Web WordPress?
¿Cómo mejorar la seguridad de un sitio Web WordPress?
¿Puedo usar archivos de fuentes para PC en mi sitio wordpress?
Cómo alojar fuentes de Google localmente en WordPress
 |