Lotties for Divi: how does it work?

Published on 14/06/2021 | 13 comments

Are you also a fan of those cute little animations that you sometimes find on websites or mobile applications? It's called a Lottie. If you don't know what a lottie is, you've come to the right place, because this article will explain why and how to add lotties to Divi.

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is a Lottie?

A Lottieor Lottie File or Lottie Animation is a very light file in JSON format that allows you to animate icons, logos or images within your site or application. These little animations can brighten up your layoutThis will improve user engagement and increase conversion rates.

A Lottie is a recent format that was originally created by Airbnb, to improve interactions in its mobile application. Then, a native library was created so that Lotties could invade the web.

Nowadays, with plugins or a little code, you can easily integrate Lotties into WordPress but also in Divi !

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

2 - Lotties: where to find them, how to create them?

So creating your own Lottie is not for everyone. You will need to have a variety of software including Adobe After Effects. You will need to install the AE BodyMovin pluginCreate your images with Sketch, etc. So, it's not that simple!

However, I have some good news. There is a partially free bookshop where you can find hundreds of ready-made Lotties, it's called Lottie Files :

lottie files
Lottie Files bookshop

Simply create a free account to access all the files for download. Go to the free lotties category to start shopping.

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

3 - Plugins to insert a Lottie with Divi

Once you've found what you're looking for in the Lotties library, you can easily embed them on your Divi site using dedicated plugins.

3.1 - Using Divi Supreme

I have already presented you this plugin for Divi, as a reminder, here is a short video (at 7'24, you will discover my test of Lottie):

Divi Supreme is a freemium extension (one part free, one part paid) that brings +49 new modules to the Divi Visual Builder.

Divi Supreme version gratuite
Divi Supreme free version

This extension enhances your experience with the Visual Builder and the good news is that a Lottie" module is available.

So you can insert any animated image from the Lottie Files library in less time than it took me to write it.

Please note that you will need the Pro version of the plugin to use this module.

3.2 - Using BrainAddons for Divi Builder

Alternatively: BrainAddons for Divi Builder.

BrainAddons for Divi
BrainAddons for Divi - free version

Again, this is a freemium plugin for DiviThe programme consists of 20 free modules + 20 paying modules. And as you can imagine, the Lottie module is offered in the pro (paid) version of the plugin. Just like Divi Supreme.

4 - How to insert a Lottie with Divi for free and without plugin?

If you plan to use this type of animation regularly, I advise you to invest in one of the 2 plugins mentioned above, because they have the advantage of offering a wide range of additional modules for Divi and you will have the opportunity to amortize your investment. Moreover, these modules allow you to define the behaviour of the inserted lottie: click, scroll, hover, loop, duration, etc.

On the other hand, if you are planning to use Lotties on your site from time to time, you should find another solution, free of charge...

It's easy! The official Lottie Files website makes it easy to embed animations into the Divi Builder.

Lottie dans Divi sans plugin

Please visit the website Lottie Files and select the Lottie of your choice, click on it. I chose these cute little birds...

A window opens and offers you several options to embed this animation on your site. We will focus on 2 options:

  • Option A: the Embed Code (iFrame code)
  • Option B: the HTML code

Option A: with iFrame code

If you choose the first option, it is very simple:

lottie divi sans plugin 2
Inserting the lottie using an iFrame
  1. Copy the iFrame code
  2. Within your Divi layout, insert a Code module
  3. Paste the iFrame code in the dedicated field
  4. You will see the Lottie appear in your layout. The only problem is that it may be cropped.

If this is your case, it is possible that option B is more suitable...

Option B: with Script + HTML

This second option is not more complicated and has the advantage of being able to define some parameters such as size, height, loop, autoplay, etc.

lottie divi sans plugin 3
Adjusting the lottie settings
  1. Click on the HTML button to get the code
  2. Define the settings you need, for example, change the size of the Lottie
  3. Copy the generated code below the Lottie preview
  4. Back in your Divi layout, add a Code module where you want the Lottie to appear
lottie divi sans plugin 4
Inserting the lottie using HTML + Script
  1. Once the Code module has been validated, it is possible that nothing will appear. Don't worry...
  2. Exit the Visual Builder.
  3. Once out of the Visual Builder, you will see the Lottie appear!
  4. The only problem is that the Lottie reader is also visible.

Unfortunately, I tried everything ("display none" in CSS) but nothing works, this player cannot (a priori) be removed. So, sometimes free has its limits...

Need more resources for Divi? Check out the other articles in this section!

5 - Some Lottie ideas for your Divi layouts

While browsing through Lotties' library, I got some ideas...

👉 Customise your 404 error page:

You will find all the 404 error lotties here.

👉 Customize your search page:

Use this tutorial for creating a search page and insert an appropriate Lottie. You will find all the Lotties from the "research" category here.

👉 Customize your shopping cart page:

Follow this tutorial to customize your shopping cart page and add one of the Lotties in the Shop category :

And that's not all! You can insert Lotties anywhere you like! Enjoy it, it's very light and it does not slow down your site.

Discover many other tips and resources directly on Elegantthemes' blog.

6 - The Lotties for Divi: in conclusion...

So I'm curious: did you know about the Lotties? What do you think of these animations? Did you see how easy it was to use them in Divi?

Note that on this page, I have inserted 6 Lotties directly into Gutenberg (this article is written with the WordPress editor, not the Divi Visual Builder). Then just use option B in this tutorial and insert the code into an HTML Block, plain and simple!

Lottie pour Divi
Divi Lottie

1,142 words

5

You should like it too:

Comment personnaliser le curseur de la souris sur votre site ?

How to customise the mouse cursor on your site?

Do you want a site that is customised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised!

13 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

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This