How to use Lottie files in the CLEAN theme

I'm going to break down the important things to know when you want to add a Lottie file to one of your pages.

If you've stumbled upon this article and you're not familiar with what a Lottie file is, let me tell you that they are pretty freakin' awesome! You can think of them as high-quality animated icons or illustrations which are MUCH smaller in file size than their bloated older cousin, the .GIF file.

Pop on over to LottieFiles.com and you'll see what I mean, but here's an example.

lottie-exampleFull disclosure: That's actually a GIF from the Lottie library because HubSpot's knowledge base tool doesn't support real Lottie files, but you get the idea. 

Let's jump in and I'll show you how to use them.

First, find a CLEAN module with the Lottie integration.

There are a few select custom modules within the CLEAN theme that give you the option to add in a Lottie file of your choice.

  • Hero Banner
  • Icon and Text
  • Multi-Column Content

While that may not seem like very many custom modules to chose from, these are some of the most flexible and widely used throughout CLEAN.  When in doubt, go for the Multi-Column Content module. 

Step 1: Turn on the Lottie File Option

In this example, we'll use the Multi-Column content module.  Go ahead and click the module to bring up the editing option on the left sidebar.  Then click into /// Column 1 to edit it.

Scroll down a bit and you'll see the checkbox to turn on the Lottie feature. Click that sucker to see the embed option appear below.

 

lottie-turn-on

Step 2: Find the Lottie file that you want to use

Pop on over to the Lottie Files website and find the one that you want to use. For this example, we'll go with this totally zen'd out dude.

Once you've found the one you want to use, click the little <html> button.

 

lottie-zen

Step 3: Copy the embed code

Once you click that <html> button you'll be directed to a page with a handful of settings and options.  The most important thing is to make sure you can turn off the Controls options.

 

Screen Shot 2021-06-02 at 4.10.40 PM

Now that you have that, you'll want to copy one section of the code snippet below which is highlighted. 

 

Screen Shot 2021-06-02 at 4.15.07 PM

You don't need that top line. It's already included in CLEAN when you turn on this feature. 

Step 4: Paste the embed code

Head on back to HubSpot with that code copied to your clipboard and paste it into the custom module.

The last step is to highlight and delete the text that says:

style="width: 300px; height: 300px;"

Screen Shot 2021-06-02 at 4.17.46 PM

This will ensure the Lottie file fills the width of the column you have it in. In the case you'd like a very small Lottie file in a specific column, you can leave that in.  It's mostly an issue when the Lottie file is large and pushes outside of the column it's in.

Hit apply changes and you're done!