La incorporación de animaciones en su sitio web de WordPress es una excelente manera de animar una página web cansada y mantener a sus visitantes interesados durante todo el tiempo que pasan en su sitio. Una manera fácil y eficiente de hacer esto es usando animaciones de lottie: animaciones ligeras y de alta calidad.
Las animaciones de Lottie están aumentando en popularidad por numerosas razones, y si está listo para subirse al carro y arreglar su sitio web, es posible que sean para usted.
Hay algunas formas diferentes de crear estas animaciones y agregarlas sin problemas a su sitio de WordPress.
¿Qué son las animaciones de Lottie?
lotería 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 tipo de archivo de imagen típico. En resumen, pueden reemplazar fácilmente un activo estático con algo divertido y atractivo.
Esta solución de código abierto fue presentada por primera vez por el equipo de AirBnB, pero está ganando popularidad rápidamente entre los diseñadores y animadores en diferentes mercados. Una gran ventaja de usar animaciones de lottie en su sitio web de WordPress es 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 maneje la representación.
Las muchas posibilidades para usar animaciones de lottie es una de las razones por las que son tan populares. Puede usar animaciones de lottie como encabezados animados, botones, elementos gráficos llamativos y más. También puede configurar la animación para que se active cuando los visitantes se desplazan, se desplazan o hacen clic en la página web. Su versatilidad y fácil implementación tanto para B2C como para sitios web B2B conviértalos en una forma innovadora de mejorar la calidad y el aspecto general de su diseño web.
Creación de animaciones de Lottie
Al considerar si agregar animaciones de lottie a su sitio, primero deberá decidir si desea hacer un enfoque estándar o personalizado. Cada uno tiene sus pros y sus contras, por lo que es aconsejable considerar ambas opciones antes de decidir.
Con cualquier tipo de animación, menos es siempre más. Al incorporar un elemento animado en un rediseño del sitio webconsidere qué función cumple esa animación en el viaje del cliente.
Animaciones personalizadas de Lottie
Si está buscando una animación de lotería personalizada para su sitio web, deberá trabajar con un animador o diseñador que se especialice en Adobe After Effects y está familiarizado con este tipo de animación.
Muchas animaciones de lottie usan un estilo de ilustración, por lo que deberá decidir si esto encaja con la marca y el estilo del sitio web antes de seguir adelante. Una vez que decida 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, utilizando la extensión de After Effects. Esto generará una animación de alta calidad que se puede implementar fácilmente en su 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 del diseñador en un formato web. Ofrece una solución lista para usar que hace que la implementación de animaciones sea más fácil que nunca.
Animaciones de Stock Lottie
Las animaciones de Stock Lottie son una excelente opción si desea acelerar su nuevo diseño. Puede buscar una animación de lottie existente y, si es necesario, personalizarla para que se ajuste a su marca.
Lottie archivos es un sitio web de valores donde puede encontrar una gran cantidad de animaciones de lotería gratuitas y de pago. El sitio también ofrece una herramienta de edición donde puede editar los colores de la animación antes de descargarla. Si necesita cambiar una gran cantidad de colores en una animación, un animador o diseñador experto también puede usar Adobe After Effects para realizar esos cambios de manera más eficiente y exportar la animación.
Si está buscando implementar numerosas animaciones en un sitio, o si tiene una estética de sitio muy específica, puede ser difícil encontrar múltiples opciones de acciones en el estilo correcto. En este caso, puede considerar contratar a un animador para la creación de más animaciones que se ajusten a su sitio y coincidan con las opciones de acciones que ya ha elegido.
Con cualquier tipo de animación o gráficos de stock, tenga en cuenta los requisitos de licencia para las animaciones de stock y asegúrese de contribuir con la animación al diseñador original si es necesario.
Agregar animaciones de Lottie en WordPress
Es un proceso bastante fluido para agregar animaciones de lottie a un sitio web de WordPress. Puede utilizar un widget HTML personalizado para agregar el código de animación al sitio o utilizar un complemento de WordPress para agregar la animación.
Widget HTML personalizado
Un desarrollador experto de WordPress puede usar una pequeña biblioteca de JavaScript y un widget HTML personalizado para agregar las animaciones de lottie al sitio. Comenzará cargando el script lottie.min.js junto con el archivo de animación .json y cualquier recurso de imagen a la carpeta del tema. Luego, hay un pequeño fragmento de JS para agregar al widget para iniciar el script de Lottie, que carga el archivo de animación .json en el contenedor div deseado.
Este enfoque simplificado puede ser ideal para la mayoría de los sitios de WordPress porque evita sobrecargar el sitio con complementos de WordPress adicionales. Al agregar las animaciones de lottie, también puede controlar si la animación se repite, cuántas veces se repite y qué puede activar el elemento animado en la página.
La mayoría de los complementos para agregar animaciones de lottie sin la ayuda de un desarrollador requieren el generador de páginas Elementor, por lo que el enfoque HTML personalizado tiende a funcionar mejor si está utilizando un complemento de generador de páginas o tema que no sea Elementor.
Agregar elementos al sitio sin un complemento también es mejor para la velocidad y el rendimiento del sitio web, ya que agregar más y más complementos sobrecargará el sitio.
Opciones de complemento de WordPress
Si no desea usar un desarrollador para hacerlo de manera personalizada, otra opción para agregar widgets de lottie a su sitio es usar un complemento de WordPress.
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 la Widget de lotería. Con este widget, puede 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 acciones de Lottie Files, por lo que puede seleccionar fácilmente las opciones de animación de acciones directamente desde el sitio o cargar sus propias creaciones.
Bloques de Gutenberg: complementos definitivos
Si está utilizando el editor de Gutenberg en su sitio, el Complemento Ultimate Addon para Gutenberg puede ser una buena opción para agregar animaciones de lottie con la ayuda de un complemento. El editor Gutenberg ha sido parte del núcleo de WordPress desde el lanzamiento de WordPress 5.0, sin embargo, no es el más popular. Muchos sitios todavía usan el editor clásico u otros creadores de páginas como Site Origin, Elementor o Beaver Builder, por nombrar algunos.
No obstante, es una opción viable. The Ultimate Addons for Gutenberg es un complemento bien revisado y ofrece muchas funciones excelentes, incluida la opción de agregar animaciones de lotería y controlar opciones avanzadas, como la velocidad de la animación y el disparador.
Complementos adicionales de WordPress
Hay complementos adicionales disponible en el directorio de WordPress para agregar y personalizar animaciones de lottie. Tenga en cuenta que algunos de los complementos requieren que su sitio esté construido y use Elementor, como Premium Addons para Elementor y Elementskit Addon para Elementor. También hay complementos destinados a otros temas y constructores de WordPress, como el tema Divi o los bloques de Gutenberg.
Hora de animarse
Las animaciones de Lottie son extremadamente accesibles para cualquier persona con un sitio de WordPress. Ya sea que desee animaciones personalizadas o animaciones de stock, animaciones de héroes o de desplazamiento, los recursos están al alcance de su mano.
Puede ser creativo en cómo quiere que se vean sus animaciones y qué quiere que hagan, y cuando comience a explorar las posibilidades de las animaciones de lotería, comenzará a darse cuenta de cuánto pueden agregar a la calidad de su sitio web. .