Consejos Divi

Lotties para Divi: ¿cómo funciona?

Actualizado en 10/06/21

1153 palabras

4 lectura de minutos
17 Comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

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 :

archivos de lotería
Lottie Files Bookshop

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.

Divi Supreme versión gratuita
Divi Supreme versión gratuita

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.

BrainAddons para Divi
BrainAddons para Divi – versión gratuita

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.

Lottie en Divi sin plugin

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:

lottie divi sin plugin 2
Insertar la lotería usando un iFrame
  1. Copiar el código iFrame
  2. Dentro de tu Divi layout, inserte un Módulo de código
  3. Pruebe el código iFrame en el campo dedicado
  4. 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.

lottie divi sin plugin 3
Ajuste la configuración de lotetie
  1. Haga clic en el botón HTML para obtener el código
  2. Establecer los ajustes que necesita, por ejemplo, cambiar el tamaño de la Lottie
  3. Copia el código generado debajo de la vista Lottie
  4. De vuelta en su diseño Divi, agregue un módulo de Código a donde desea ver la Lottie aparece
lottie divi sin plugin 4
Insertar lottie usando código HTML + Script
  1. Una vez validado el módulo del Código, nada puede aparecer. No te preocupes...
  2. Deja al Editor Visual.
  3. Una vez liberado del Editor Visual, verás a la Lottie aparecer!
  4. 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!

Lottie para Divi
Divi Lottie

Divi training via CPF

Obtener Divi

Capacitación en vídeo

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

icono 256x256
¡Descubre mi plugin wpLingua que hace que sus sitios web de WordPress sean multilingües ! Compatible con SEO / Automático / Editable

Sus comentarios...

17 Commentaires

  1. Cyril

    Super ces lotties ! Je connaissais pas. Si quelqu’un trouve comment enlever le lottie-player ce serait cool 🙂

  2. Cyril

    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 😆

  3. David C.

    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é.

  4. Lycia Diaz

    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.

  5. Lycia Diaz

    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.

  6. Cj-envadrouille

    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 ? 😉😉🙏🙏

  7. Lycia Diaz

    Coucou Christine ! Tu parles de ma page À propos sur La Webeuse ?

  8. Cj-envadrouille

    Oui Lycia, je parle de la page « à propos » de la Webeuse 👍👍👍

  9. Lycia Diaz

    Ah c’est simplement les options d’animation des modules de Divi (onglet Style > Animation)

  10. Lycia Diaz

    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

  11. Cj-envadrouille

    Merci Lycia 🥰 . « La fille qui dit bye », c’est mon avatar facebook , et ma signature d’article….tu ne m’avais pas reconnue 🤣🤣🤣 ?

  12. Lycia Diaz

    MDR

  13. Mélanie

    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.

  14. Lycia Diaz

    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

  15. Gwendal

    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 !

  16. Lycia Diaz

    Oui tu as raison je vais corriger bientôt

Presentar un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *