Cómo agregar animación de Lottie en Elementor (3 formas sencillas)

La animación se ha convertido en una parte indispensable del diseño web moderno. Se utilizan no solo para mantener la atención de los visitantes, sino también para enviar mensajes activables de manera atractiva. GIF, JPEG, PNG y clips de video cortos han satisfecho durante mucho tiempo las demandas gráficas de los sitios web.

Pero también tienen algunas limitaciones perceptibles. Aún así, las imágenes no siempre pueden explicar los mensajes críticos en espacios cortos. Los GIF y los clips de video generalmente tienen un gran peso, lo que afecta la velocidad de la web. Optimizarlos a menudo conduce a la descomposición de píxeles y a las imágenes que gritan.

Lottie Animation ha sido una excelente manera de superar estas tensiones. Porque son rápidos y excelentes para entregar mensajes en el menor tiempo posible. Lo que puede ofrecer una animación de Lottie de tres segundos requiere de 5 a 10 imágenes para hacer lo mismo.

Elementor es una poderosa herramienta de creación de páginas mediante la cual puede agregar animación de Lottie a sus sitios web de manera simple. En este artículo, explicaremos tres métodos para agregar la animación de Lottie en los sitios web de Elementor. Antes de eso, cubriremos algunas preguntas básicas. ¡Sigue leyendo hasta el final!

Tabla de contenido

• ¿Qué es Lottie Animation y por qué debería usarlos?
• ¿Cómo encontrar animaciones gratuitas de Lottie?
• Cómo agregar la animación de Lottie en el sitio web de Elementor: guía paso a paso
• Consejos adicionales: Cosas a considerar al agregar la animación de Lottie en un sitio web
• Preguntas frecuentes sobre cómo agregar animaciones de Lottie en Elementor
• Notas finales sobre cómo agregar animación de Lottie en Elementor

¿Qué es Lottie Animation y por qué debería usarlos?

La animación de Lottie es un archivo basado en JSON (JavaScript Object Notion) que se puede reproducir en aplicaciones y páginas web de cualquier tipo. Las animaciones de Lottie son intrínsecamente ligeras, rápidas y fluidas, ya que están creadas en formato de archivo JavaScript. Puede escalarlos hacia arriba o hacia abajo sin enfrentar ningún problema de pixelación.

A continuación se muestra un ejemplo de la animación de Lottie.

Nota: Hemos subido el archivo de animación en formato de video mp4 solo para presentar un ejemplo. Pero cómo agregar esta animación a su sitio web en formato de archivo Lottie real se tratará en la parte del tutorial de este artículo.

¿Cuáles son los beneficios de usar las animaciones de Lottie?

Hay muchos beneficios de usar las animaciones de Lottie en un sitio web. Pueden ayudarlo a mejorar su rendimiento web y la experiencia del usuario de muchas maneras interesantes. Exploremos por qué debería considerar usar las animaciones de Lottie en su sitio web.

una. Tamaño de archivo pequeño

Los archivos de animación de Lottie son significativamente más pequeños que el video, GIF y otros formatos de archivo. Puede crear fácilmente un archivo de animación de Lottie de alta calidad gráfica de tres segundos dentro de 200 kb. Pero es difícil hacer lo mismo en formatos de video y GIF.

b. Nunca pierde calidad

Las animaciones de Lottie nunca comprometen la calidad gráfica. Ya sea que acerque o aleje, sus píxeles nunca se rompen. Son perfectos para cualquier tipo de pantalla de dispositivo, independientemente de teléfono, tableta o computadora de escritorio.

C. Nunca ralentiza un sitio web

Los archivos pesados ​​ralentizan naturalmente un sitio web. Pero nunca enfrentará el problema con los archivos de animación de Lottie, ya que son relativamente pequeños. Entonces, para mantener una buena velocidad web, debes usar las animaciones de Lottie.

d. Ayuda a desencadenar la conversión

La animación es una forma comprobada de captar la atención de los visitantes, cubriendo una parte importante del embudo de conversión. Si está ejecutando una campaña, tiene ofertas de descuento o está pensando en crear un evento de lanzamiento de producto, las animaciones de Lottie pueden ayudarlo a desencadenar sus conversiones.

mi. Biblioteca de código abierto disponible

www.LottieFiles.com es una gran biblioteca de código abierto donde encontrará toneladas de archivos Lottie listos para usar disponibles. Numerosos diseñadores están haciendo que esta biblioteca sea ingeniosa al contribuir con más animaciones de Lottie casi a diario.

¿Cómo encontrar animaciones gratuitas de Lottie?

Hay muchas herramientas disponibles en línea y sin conexión mediante las cuales puede crear archivos de animación de Lottie. Figma, After Effect, Adobe XD, etc., son algunas herramientas comprobadas que puede usar. Pero necesitará un conocimiento mínimo de los principios de diseño y habilidades técnicas para usarlos.

Si está buscando una solución lista para usar en lugar de invertir tiempo en estas herramientas, LottieFiles.com puede ser una gran solución. Hablamos un poco sobre esta herramienta hace un rato. Aquí, le mostraremos cómo encontrar archivos de animación gratuitos de Lottie de esta fuente abierta.

• Vaya a LottieFiles.com.
• Coloca el cursor debajo de Descubrir .
• En el menú desplegable, haga clic en Animaciones gratuitas listas para usar .

Nota: Puede comprar animaciones premium de Lottie en Marketplace.

• Si desea una animación específica, escriba su nombre/palabra clave en el cuadro de búsqueda.
• Lo verás en la pantalla si está disponible allí.
• También puede encontrar tipos de animaciones más específicos en la opción de categoría.

Haz la parte de exploración tú mismo.

Supongamos que hemos seleccionado la siguiente animación. En la siguiente parte, le mostraremos cómo incrustarlo en su sitio web de WordPress usando Elementor.

Cómo agregar la animación de Lottie en el sitio web de Elementor: guía paso a paso

Elementor es un poderoso complemento de creación de páginas tanto para codificadores como para usuarios sin código. Tiene más de 100 widgets emocionantes y docenas de funciones con las que puede crear sitios web emocionantes desde cero. También tiene toneladas de plantillas listas disponibles en su sección 'Biblioteca de kits' , que puedes importar con solo un clic.

Ahora, lo ayudaremos a explorar tres formas sencillas de agregar las animaciones de Lottie a su sitio web utilizando el complemento de creación de páginas de Elementor. Empecemos.

Método 01: Cómo agregar la animación de Lottie en el sitio de Elementor usando Shortcode

El Shortcode es un widget gratuito del complemento del generador de páginas de Elementor. Solo necesita la versión Lite de este complemento para usar el widget. Descárgalo e instálalo desde el siguiente enlace.

• Elementor

Una vez que esté instalado y activado, comience a seguir los pasos a continuación.

Paso 01: arrastre y suelte el widget de código corto en Elementor Canvas

Abra la publicación o página donde desea mostrar las animaciones de Lottie con Elementor. Haga lo siguiente después.

• Arrastre y suelte el widget de Shortcode en su área seleccionada.

Paso 02: copia el código iFrame

• Regrese al archivo de animación que seleccionó de LottieFiles.com.
• Desplácese hacia abajo en la página un poco.
• Copie el código iFrame del área marcada que mostramos en la foto a continuación.

Paso 03: pegue el código iFrame en el cuadro Shortcode

• Ve a tu página de Elementor.
• Pegue el código iFrame en el cuadro Shortcode del Panel de Elementor.

Verá la animación ejecutándose en Elementor Canvas. Pero el problema con el uso del widget Shortcode para agregar animaciones de Lottie es que no obtendrá ninguna opción de personalización. No puede escalarlo hacia arriba o hacia abajo como desee.

Cuanto más acerques, más se desenfocará. También tendrá problemas de pixelación. Mejor si usa cualquiera de los siguientes dos métodos de descanso.

Método 02: Cómo agregar la animación de Lottie en el sitio de Elementor a través de un enlace externo

Este método requerirá el widget Lottie disponible en Elementor Pro. Significa que debe tener Elementor y Elementor Pro instalados en su sitio de WordPress. Descárgalas desde los siguientes enlaces.

• Elementor
• Elementor Pro

Una vez que la parte de la instalación haya terminado, comience a seguir los pasos a continuación.

Paso 01: Arrastra y suelta el widget Lottie

Escriba Lottie en la barra de búsqueda de Elementor. Obtendrá el widget que aparece a continuación.

• Arrastre y suelte el widget en el área seleccionada de Elementor Canvas.

Paso 02: Copie la URL de animación de Lottie

• Regrese al archivo de animación que seleccionó de LottieFiles.com.
• Copie la URL de animación de Lottie del área marcada que se muestra en la foto a continuación.

Paso 03: Pegue la URL de animación de Lottie en Elementor

• Ve a tu página de Elementor.
• Haga clic en el menú desplegable junto a la fuente .
• Seleccione URL externa .
• Pegue la URL en el cuadro URL externa .

Verá la animación ejecutándose en su Elementor Canvas.

Paso 04: ajustar la configuración

• Haga clic en Configuración .
• Allí se abrirán muchas opciones.

La opción Activar permitirá establecer cuándo aparece la animación, ya sea al hacer clic, pasar el mouse, desplazarse o mirar. Loop permitirá que la animación aparezca de forma recurrente. Explora tú mismo las opciones de descanso.

Paso 05: Estiliza la Animación de Lottie

• Ve a Estilo > Lottie en tu Panel de Elementor.

Puede usar las opciones disponibles para cambiar el ancho, el ancho máximo, el desplazamiento, la opacidad y los filtros CSS como desee.

Método 03: Cómo agregar la animación de Lottie en el sitio de Elementor a través de un archivo multimedia

Este es casi el mismo que el segundo método. Aquí nuevamente, necesitará los complementos Elementor y Elementor Pro. Le dimos los enlaces en la parte inicial del método dos. Espero que los tengas instalados en tu sitio. Entonces, entra en la parte del tutorial.

Paso 01: Arrastra y suelta el widget Lottie

Vuelve a tu página de Elementor.

• Arrastre y suelte el widget Lottie en su área seleccionada como mostramos antes.

Paso 02: Descargue el archivo de animación Lottie JSON

• Vaya al archivo de animación de Lottie que seleccionó.
• Haga clic en el botón Descargar .
• Haga clic en Lottie JSON .

El archivo de animación se descargará en su disco.

Paso 03: cargue el archivo de animación de Lottie a través del archivo multimedia

• Seleccione Archivo multimedia de la lista desplegable junto a Fuente.
• Haga clic en el icono Cargar.

• Seleccione el archivo de animación de la unidad donde lo descargó.

• Verá el archivo de animación de Lottie reproduciéndose en su lienzo de Elementor.

Por lo tanto, puede agregar la animación de Lottie a su sitio de WordPress utilizando el complemento del generador de páginas de Elementor. Ahora depende de usted qué método desea utilizar.

Consejos adicionales: Cosas a considerar al agregar la animación de Lottie en un sitio web

Sin duda, la animación web puede aumentar notablemente la participación del usuario, las sesiones de los visitantes, los clientes potenciales de calidad y las conversiones. Pero no usarlo de la manera correcta puede ser contraproducente para la efectividad de su sitio web en lugar de beneficiarlo.

Aquí, hablaremos sobre algunos puntos importantes que debe considerar al agregar animaciones, para que su rendimiento web nunca fracase.

una. No use demasiadas animaciones

El uso de demasiadas animaciones en las páginas web puede provocar una sobrecarga visual grave. Pero se ve que la mayoría de los nuevos diseñadores web cometen este error. Como las animaciones son divertidas, no pueden resistir la tentación de abusar de ellas. Pero para diseñar un gran sitio web, debes evitar esta tentación.

b. Úselo donde pueda desencadenar conversiones

Como las animaciones captan instantáneamente la atención de los visitantes, debe usarlas en todos los puntos que desencadenan la conversión. A continuación se muestran algunos de los lugares más valiosos de un sitio web donde puede utilizar las animaciones de Lottie.

• Sección de héroe
• Formulario de contacto
• Compartiendo socialmente
• Galerías de imágenes y presentación de diapositivas
• sección gracias

C. Mantenga la consistencia de color entre su sitio web y las animaciones

Si selecciona una animación de Lottie que es conceptualmente buena pero rompe la consistencia de color de su sitio web, es mejor evitarla. Porque la consistencia del color es imprescindible para cualquier diseño web impresionante.

d. Presente animaciones en diseños perfectos (alto y ancho)

Después de cargar los archivos de animación de Lottie, debe personalizar sus tamaños de píxeles para que sean consistentes con las secciones particulares. De lo contrario, puede parecer visualmente desagradable para los visitantes.

Preguntas frecuentes sobre cómo agregar animaciones de Lottie en Elementor

Ahora, cubriremos las respuestas a algunas de las preguntas más frecuentes sobre el tema de cómo agregar animaciones de Lottie en los sitios web de Elementor.

Notas finales sobre cómo agregar animación de Lottie en Elementor

La animación ayuda a retener la atención de los visitantes mientras estén en un sitio web. Agrega un toque de diversión y vitalidad a un sitio web que lo hace visualmente más atractivo y atractivo para los visitantes. Pero cómo agregar archivos de animación a un sitio web con un consumo mínimo de espacio fue un gran rompecabezas para los diseñadores web.

La idea de la animación de Lottie resolvió este problema de larga data y apareció como una gran ayuda. Hemos tratado de presentarle todas las formas posibles en las que puede agregar animaciones de Lottie a su sitio web usando Elementor.

Ahora depende de usted probar el proceso. Si tiene algún problema a mitad de camino, solo envíenos un mensaje o déjenos un comentario a continuación. Nuestro equipo se pondrá en contacto contigo pronto.

Espero que hayas disfrutado este artículo. Suscríbase a nosotros si desea recibir más artículos interesantes como este y siga nuestros canales de Facebook y Twitter para obtener actualizaciones periódicas.