Tú también eres fan de estos pequeñas animaciones lindo que a veces encuentras en sitios web o aplicaciones móviles? Se llama un Lottie. Si no lo sabes, estás en el lugar correcto, porque este artículo te explicará por qué y cómo añadir Lottie en Divi.
1 – ¿Qué es Lottie?
Uno Lottieo Lottie File o Lottie Animation es un archivo muy ligero Formato JSON que permite animar iconos, logos o imágenes dentro de su sitio o aplicación. Estas animaciones pequeñas permiten iluminar tu diseño, mejorar Compromiso de tus usuarios y aumentar la tasa de conversión.
Un Lottie es un formato reciente que fue creado en la base por Airbnb, para mejorar las interacciones en su aplicación móvil. Luego se creó una biblioteca nativa para que la Lotties la web.
Hoy, gracias a plugins o a un pequeño código, se puede fácilmente integrar Lottie en WordPress pero también en Divi !
¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"
2 - ¿Dónde encontrarlos, cómo crearlos?
Entonces, crear tu propio Lottie no se da a todos. Usted tendrá que estar en posesión de varios software incluyendo Adobe After Effects. Usted tendrá que instalar el AE BodyMovin plugin, crear sus imágenes con Sketch, etc. ¡Así que no es tan simple!
Pero tengo buenas noticias. Hay una biblioteca parcialmente libre donde encontrará cientos de Lotties todo listo, este es el sitio Lottie Files :
Simplemente cree una cuenta gratuita para acceder a todos los archivos de descarga. Nos vemos en el categoría Loterías Gratis para empezar a hacer tu trato.
¿Necesitas dominar Divi? Descubre mi entrenamiento que te acompaña paso a paso en la comprensión y uso de Divi! Más información sobre Divi training.
3 – Plugins para insertar un Lottie con Divi
Una vez que has encontrado tu felicidad en el librería de las Lotties, puede embarcarlos fácilmente en su sitio Divi usando plugins dedicados.
3.1 – Usando Divi Supreme
Ya he introducido este plugin para Divi, para recordarte, aquí hay un pequeño video (a las 7
Divi Supreme es una extensión de freemium (una parte libre, una parte pagada) que trae +49 nuevos módulos dentro del Editor Visual Divi.
Esta extensión enriquece su experiencia con Visual Builder y la buena noticia es que Módulo Lottie está disponible.
Así que puede insertar cualquier imagen animada de la Lottie Files library en menos tiempo de lo que tenía que escribir.
Tenga en cuenta que necesitará la versión Pro del plugin para beneficiarse de este módulo.
3.2 – Usando BrainAddons para Divi Builder
Alternativa: BrainAddons para Divi Builder.
Esto también es cuestión de plugin de freemium para Divi, compuesto por 20 módulos gratis + 20 módulos pagados. Y ya sabes, el Módulo Lottie se propone en la versión pro (pago) del plugin. Como Divi Supreme.
4 - ¿Cómo insertar un Lottie con Divi gratis y sin plugin?
Si planea utilizar este tipo de animación regularmente, le aconsejo que invierta en uno de los 2 plugins mencionados anteriormente, ya que tienen la ventaja de ofrecer una amplia gama de módulos adicionales para Divi y tendrá la oportunidad de absorber su inversión. Además, estos módulos le permiten definir el comportamiento de la Lottie insertada: animación a clic, pergamino, bucle, duración, etc.
Por otro lado, si usted está pensando en utilizar las Lotties en su sitio a tiempo, usted debe encontrar otra solución, de forma gratuita...
¡Tranquilo! Sitio oficial Lottie Files permite un fácil embarque de animaciones dentro del Divi Builder.
Luego visita el sitio Lottie Files y seleccione el Lottie de su elección, haga clic en él. Elegí a estos lindos pajaritos...
Una ventana abre y ofrece varias opciones para incrustar esta animación en su sitio. Nos enfocaremos en 2 opciones:
- Opción A: Código de inserción (código de iFrame)
- Opción B: código HTML
Opción A: con código iFrame
Si eliges esta primera opción, es muy simple:
- Copiar el código iFrame
- Dentro de tu Divi layout, inserte un Módulo de código
- Pruebe el código iFrame en el campo dedicado
- Verás el Lottie en tu diseño. La única preocupación es que es posible que este sea cortado.
Si este es su caso, es posible que la opción B sea más adecuada...
Opción B: con Script + HTML
Esta segunda opción no es más complicada y tiene la ventaja de poder definir algunos parámetros como tamaño, altura, bucle, autoplay, etc.
- Haga clic en el botón HTML para obtener el código
- Establecer los ajustes que necesita, por ejemplo, cambiar el tamaño de la Lottie
- Copia el código generado debajo de la vista Lottie
- De vuelta en su diseño Divi, agregue un módulo de Código a donde desea ver la Lottie aparece
- Una vez validado el módulo del Código, nada puede aparecer. No te preocupes...
- Deja al Editor Visual.
- Una vez liberado del Editor Visual, verás a la Lottie aparecer!
- El único éxito es que el lector Lottie también es visible.
Desafortunadamente, lo intenté todo ("jugar ninguno" en CSS) pero nada hace, este lector no puede (a priori) ser eliminado. Así que, libre a veces tiene sus límites...
¿Necesita más recursos para Divi? Descubre los demás artículos de esta sección!
5 - Algunas ideas de Lottes para sus diseños con Divi
Cuando pasé por la biblioteca de Lottes, tenía algunas ideas...
Personaliza tu página de error 404:
Encontrarás todo Error de frecuencia 404 aquí.
Personaliza tu página de búsqueda:
Usa esto tutorial para crear una página de búsqueda e insertar un Lottie apropiado. Encontrarás todo Loterías en la categoría "búsqueda" aquí.
Personaliza tu página del carrito de compras:
Sigue esto. tutorial para personalizar tu página del carrito y añadir uno de los Loterías en la categoría Tienda :
¡Y no se acabó! ¡Puedes insertar Lotties donde quieras! Disfrútalo, es muy ligero y no desacelera su sitio.
Descubre muchos otros consejos y recursos directamente en el blog de Elegantthemes.
6 - Los Lotties para Divi: en conclusión...
Entonces, tengo curiosidad, ¿conocía a los Lottes? ¿Qué piensas de estas animaciones? Viste que era fácil utilizarlos en Divi...
Note que en esta página he insertado 6 Lotties directo Gutenberg (Este artículo está escrito con el editor de WordPress, no con el Editor Visual Divi). A continuación, utilice la opción B de este tutorial e inserte el código en un Bloque HTML¡Solo!
Super ces lotties ! Je connaissais pas. Si quelqu’un trouve comment enlever le lottie-player ce serait cool 🙂
Ah mais c’est très simple en fait pour enlever le player !! Il suffit de décocher « controls » avant de copier/coller le code 😆
Bonjour Lycia,
Pas mal, bonne trouvaille.
Perso je ne connaissais pas.
Sinon on peut aussi faire plus de chose avec du SVG. Il faudra cependant connaître un minimum le code SVG pour arriver à un bon résultat mais c’est bien plus poussé.
Merci David, oui le SVG est aussi très intéressant mais en effet, rien n’est « pré-maché », il faudra s’y connaitre un peu 😉 alors que la bibliothèque LottieFiles est vraiment pratique.
Oh punaise Cyril, c’est vrai ? Quelle quiche que je suis 😉 je n’ai pas vu cette option. Merci pour l’info, les autres lecteurs vont être contents de ton intervention 😉 Merci encore.
Super ces petites animations je les trouve adorables . Je vais me laisser tenter pour les roulettes.
Comme nous parlons animations tu nous expliqueras un jour comment tu as réalisé les animations de ta page à propos ? 😉😉🙏🙏
Coucou Christine ! Tu parles de ma page À propos sur La Webeuse ?
Oui Lycia, je parle de la page « à propos » de la Webeuse 👍👍👍
Ah c’est simplement les options d’animation des modules de Divi (onglet Style > Animation)
Bonsoir Lycia , et voici mon article illustré par des lotties ….grâce a toi 👏👍
https://desroulettessouslespieds.fr/visiter-ile-saint-honorat-cannes/
Qu’en penses tu ?
Oh trop génial ! La plage, les cocotiers, le voilier… trop sympa ! Mais à la fin de l’article avec la fille qui dit « bye », c’est un lottie aussi ? Car il me semble pas animé… bisous
Merci Lycia 🥰 . « La fille qui dit bye », c’est mon avatar facebook , et ma signature d’article….tu ne m’avais pas reconnue 🤣🤣🤣 ?
MDR
Bonjour Lycia, merci pour ton article sur les lotties. J’utilise divi supreme, mais les lotties ne s’affichent pas sur mobile. Je ne sais pas pourquoi.
Ah c’est bizarre. Quand les images ne s’affichent pas sur mobile c’est parce qu’elles ont des accents dans le nom du fichier mais pour les lotties aucune idée
Bonjour Lycia, super article ! Comme l’a dit Cyril, pour enlever le player, il faut décocher la case Controls. Ce serait super top de modifier ton article pour gagner du temps 😝. Merci pour tes articles !
Oui tu as raison je vais corriger bientôt