A small looping animation catches the eye in a way a flat icon cannot, and a Lottie file does it in a few kilobytes of JSON rather than a video.
The Info Box widget can use one in place of its icon, so your feature cards can move without slowing the page down.
To check the complete feature overview documentation of The Plus Addons for Elementor Info Box widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Lottie icon type needs The Plus Addons for Elementor Pro. In the free plugin the option is not in the dropdown at all.
- Widget to enable: Info Box, switched on under The Plus Addons > Widgets. In the Elementor panel it appears under Plus Essential.
- You need a Lottie JSON URL. Either host the
.jsonfile yourself or copy an asset link from a service such as LottieFiles.
Get the Animation URL
- Open your Lottie source and choose the animation you want.
- Look for the option to share or embed it, and copy the asset link — the URL that ends in
.json. - Check the URL opens in a browser and shows JSON. If it asks you to log in or returns an error, it will not work in the widget.
Use It in the Info Box
- Add the Info Box widget and set Info Box Style, Title Of Info Box and Description as usual.
- Set Select Icon to Lottie.
- Paste your URL into the Lottie URL field that appears.
Control How It Plays
| Setting | What it does | Default |
|---|---|---|
| Loop Animation | Repeats the animation continuously. | On |
| Hover Animation | Plays only while the pointer is over the box, instead of on its own. | Off |
The Style tab gains a Lottie section where you set the animation’s width, height and playback speed.
Set the size early. The player starts at roughly 50 by 50 pixels, which is smaller than a typical icon and is the usual reason people think the animation has failed to load.
In the Carousel Layout
A carousel has two Select Icon dropdowns. The one in the main Content section sets the icon type for every box at once; the one inside a Carousel InfoBox row sets it for that box only. Set whichever matches what you want, then fill in the matching Lottie URL.
How It Behaves
- The animation is fetched by the visitor’s browser from the URL you paste, so the file must stay publicly reachable.
- With Loop Animation on, it starts as soon as the page loads and keeps going.
- With Hover Animation on, it waits for the pointer, which is quieter on a page with several animated cards.
- It plays on the published page. The editor canvas shows the animation too, but judge size and speed on the real page.
Limitations
- A broken URL fails silently. If the link 404s, returns a 403, or is not valid Lottie JSON, the player is still added to the page but nothing is drawn and no error appears anywhere — not in the editor and not in the browser console. An empty gap where the icon should be is the only clue.
- The default size is very small. At about 50 by 50 pixels the animation is easy to miss next to a normal icon.
- There is no upload field. The widget takes a URL only, so a
.jsonfile on your own machine has to be hosted somewhere first. - Lottie is not in the free plugin at all. The option does not appear in the Select Icon dropdown, so there is nothing to switch on without Pro.
Troubleshooting
There is a blank space where the animation should be
Open the Lottie URL in a browser tab. If it does not return raw JSON — because it needs a login, has expired, or is a share page rather than an asset link — the widget cannot use it.
The animation is tiny
That is the default size. Open Style > Lottie and raise the width and height.
Lottie is not in the Select Icon dropdown
The free plugin does not offer it. The option appears only once The Plus Addons for Elementor Pro is active.
It plays once and stops
Check Loop Animation is on, and that Hover Animation is off unless you want it to wait for the pointer.
