Agregar lotes al elemento

En este artículo, discutiremos agregar archivos Lottie al generador elemental. En el último elemento de actualización pública, se nos ofreció acceso al formulario con varios pasos y animaciones Lottie. Discutiremos cuáles son las animaciones de Lottie, los posibles escenarios de uso y cómo incorporarlas en su sitio web. ¿Qué son los archivos Lottie? “Lottie” o “Lottie Files” o “Lottie Animations” es una biblioteca que le permite animar imágenes con Adobe After Effects y devolverlas de forma nativa en sitios web, aplicaciones móviles y más. Si quieres crear tu propia animación Lottie, el flujo de trabajo es bastante simple. Primero, cree la animación inicial con Adobe After Effect. Luego, utilizando un efecto de adobe después de Bodymovin, expórtelo como un archivo .json. Así es como se ve:

Con Lottie, puede incorporar estas imágenes animadas en sitios web, aplicaciones y otros activos digitales. Lo interesante de la animación de Lottie es que puede configurarlo para jugar cuando el elemento ingresa a la ventana de vista o conectarlo a la interacción del usuario. Por ejemplo, puede animar una lotería a medida que el usuario ejecuta la página. Si no es un experto en efecto posterior o no desea crear sus propias animaciones, hay miles de disponibles en línea gratis y aún más detrás de los municipios de pago de $ 1-5. Elementor recientemente incorporó un elemento nativo en su generador, que le permite incorporar animaciones lottie y fáciles.
¿Cuándo usaría archivos Lottie en mi sitio? El uso de animaciones de Lottie en su sitio es una excelente manera de incorporar elementos animados y efectos interesantes. Debido a que puede conectar la animación de Lottie a la interacción del usuario, como un desfile en la página, las posibilidades son ilimitadas. En lugar de hablar sobre posibles casos de uso, observamos algunos loteros, así como incorporando archivos lottie en los sitios web del mundo real: también puede usar animaciones lottie para reemplazar las tecnologías existentes. Tanto GIF como Lotties cumplen el mismo objetivo: mostrar secuencias animadas en un sitio web. Sin embargo, los GIF tienen un tamaño doble en comparación con un Bodymovin JSON y no se pueden escalar a diferentes resoluciones de pantalla. También puede animar un elemento manual (por ejemplo, animación CSS). Pero este no es un uso efectivo de su tiempo, porque las tarjetas de altura cumplen el mismo objetivo mucho más rápido.




¿Cómo puedo agregar archivos Lottie al uso de Elementor? Versión 2.10 Se entregó un Elementor Pro con dos elementos nuevos: formularios con múltiples pasos y animaciones de ganado. Esto significa que la capacidad de agregar animaciones Lottie a su elemento o sitio web está integrada nativa en el editor. Viene en un paquete fácil de entender, utilizado e implementado. Echemos un vistazo a cómo agregar animaciones lottie al elemento.
Tire del artículo Lottie en su lienzo elemental. Viene con una lotería elemental predeterminada. Agregar lottie a su sitio es bastante fácil. Hay dos formas de agregar un sitio web de Lottie Level: puede cargar su propio archivo JSON, lo cual es útil si elige crear sus propias animaciones usando Adobe After Effects, o simplemente puede importar desde una URL externa. Esto es increíblemente útil si utiliza animaciones Lottie prefabricadas para embellecer su sitio. Todo lo que tiene que hacer es encontrar una URL externa e incorporarla en su sitio web. Echaremos un vistazo a ambas formas de agregar lotties a su sitio web. Método 1: Cargue su propio archivo de medios El formulario básico de un archivo Lottie es un JSON. Si crea su propia lotería (que sería animada por Bodymovin), la exportación predeterminada está en este formato. Simplemente tome esa exportación y cárguela en su generador visual elemental.

A veces, cuando compra o compra un archivo Lottie de una tercera fuente de fiesta, le darán una descarga de JSON. Todo lo que tienes que hacer es cargarlo en el constructor y estarás listo.
En la esquina superior derecha, puede ver la opción de descarga de este archivo verde gratuito disponible en Lotties.com. ¡Es muy fácil agregar una lotería al elemento! Método 2: use una URL externa si compra una lotería de un almacén en línea, es probable que le proporcionen una URL para incorporar directamente a su sitio. Esto se basa en la necesidad de descargar y alojar el archivo JSON y a veces es una opción más fácil y rápida. Si usa Lotties.com, en “Use esta animación en” Simplemente haga clic en HTML y copie URL directamente en su generador de elementos. Que puede manejar. Todas estas configuraciones son opcionales, pero increíblemente útiles cuando se trata de integración en su sitio creado con Elementor.

Echemos un vistazo a cada una de las configuraciones que puede cambiar al incorporar una lotería en su sitio web. La primera configuración es el disparador. Debido a que esta es una animación, algo necesitará activarla para que comience. Puede elegir entre varias opciones.

Viewport: esto animará a Lottie tan pronto como ingrese a la ventana gráfica. Este es el comportamiento predeterminado de los videos que se reproducen automáticamente y los GIFS

OnClick: esto animará a Lottie cuando el usuario haga clic en el elemento.

En Hover: esto animará a Lottie cuando el usuario coloque el cursor del mouse sobre el elemento.
Filation: esto animará a Lottie a medida que el usuario derribe su página cuando el usuario se ejecute en la página, Lottie se animará en la dirección opuesta. Es muy bueno si intenta agregar en su sitio sus efectos de movimiento activados por el usuario. Se muestra la vista si ha seleccionado la ventana de visualización o desplazamiento. Dictar cuando Lottie comienza a ser anime. Por ejemplo, si establece que la parte superior sea del 50%, Lottie comenzará su animación solo cuando sea 50% en la página.
Si selecciona el desplazamiento, aparecerá otra configuración llamada “afecta en relación con el desarrollo”. Puede elegir entre dos opciones, visualización o toda la página. Si configura los efectos en relación con la ventana, tan pronto como Lottie Animation ingrese a la ventana, comenzará la animación, siempre que el usuario continúe corriendo en la página. Si selecciona toda la página, Lottie animará a medida que el usuario se desplaza (si Lottie está en la ventana de vista). Puede elegir configurar a Lottie en el bucle y establecer la velocidad de juego. La velocidad de juego se correlaciona con la velocidad establecida en la animación inicial después de los efectos. Si establece la velocidad de juego en 2, Lottie se animará dos veces más rápido que la exportación de efectos secundarios.
Puede usar el punto de partida y el punto final para seleccionar los puntos respectivos en los que Lottie comienza o termina su animación. Puede elegir entre SVG o lienzo para reproducir el gráfico y también puede activar la carga perezosa (lo que podría ayudar a que la página se cargue más rápido). También puede dimensionar la animación Lottie en la pestaña Estilo del generador de estilo. Conclusión Como puede ver, es bastante fácil agregar una animación de Lotter al constructor elemental. Usando el nuevo elemento nativo incluido en Pro Builder, todo lo que necesita para cargarlo (o agregar una URL) y establecer cuando anime a Lottie. Si tiene preguntas sobre la incorporación de Lotties en Elementor, no dude en comunicarse con la sección de comentarios de inferior.
Suscribir y distribuir
Si le gustó este contenido, suscríbase al resumen mensual de noticias de WordPress, inspiración para sitios web, ofertas exclusivas y artículos interesantes.
Dar la baja en cualquier momento. No enviamos spam y nunca venderemos o distribuiremos su correo electrónico.