Lottie Animations Section/Container Addon Tutorial


The latest addition to Premium Addons PRO for Elementor is Elementor Lottie Animations section/container addon. With this new feature, you can revolutionize your website design by effortlessly incorporating captivating animated Lottie Files. The best part is that you won’t have to be concerned about your website’s performance, as Lottie files are considerably lighter compared to GIFs and other animation formats. Plus, you don’t need any coding skills to make the most of this exciting addition.

Elementor Lottie Animations Section Addon Video Tutorial


  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Enable Lottie animations section or container addon on Elementor editor
Premium Lottie Animations Section Addon for Elementor Page Builder

Animation JSON URL

Please follow the steps below to get your JSON URL.

  • Go to LottieFiles.com.
  • Select the animated file that you want to use.
  • Open it, then copy the Lottie Animation URL.
Screenshot showing a Lottie Animation file popup window on LottieFiles.com.
Lottie Animation File URL
  • Go back to the backend of your webpage, then paste the copied URL into the Animation JSON URL field.
This provides clear instructions on where to insert the Lottie Animation JSON URL in the Premium Lottie Animations Section or Container Addon for Elementor.
Inserting Animation JSON URL Into Elementor Lottie Animations Section Addon
  • Loop, Reverse, and Speed Controls: You can control the behavior of your Lottie Animation file on your webpage by toggling the Loop and Reverse options. Additionally, you’ll have the flexibility to adjust the speed of the Lottie animation.
  • Hover Action: Decide whether you want the Lottie animations to play or pause when the mouse hovers over it. You can see a real example from here.
  • Start Animations on Viewport: This option will make the Lottie Animation file work once the user reaches the Viewport area. You can enable or disable it as you want.
Displaying options within Premium Lottie Animations Section or Container Add-on.
Lottie Animation Hover Action is Set to [Pause]

  • Horizontal and Vertical Positions: Manage your Lottie Animation file placement in percentage within the page using the horizontal and vertical controls. Also, you can enjoy a freehand design experience by moving your Lottie Animations Section Addon elements freely using your mouse!
  • Size, Opacity, and Rotate Controls: Control your Lottie Animations width and height using the Size control, in addition, you can play with the Opacity and Rotate options to make the Lottie Files fit well on your website according to your needs.
  • Background Type: Select background color or image behind your Lottie animation file.
  • Border Type, Border Radius, and Box Shadow: Add a border around your Lottie animation and adjust the border-radius and box-shadow for the container behind it.
  • Scroll Parallax: Create a smooth vertical scrolling effect for the Lottie animation as you scroll down the page. You can explore Premium Parallax Elementor Section Addon for more details.
  • Padding, Z-Index, and Responsive Controls: Customize the space around your Lottie animation with the Padding controls. Additionally, you have the ability to individually adjust the z-index for each Lottie animation file. Lastly, decide on which devices you want to show or hide each Lottie animation in your Elementor section.
This screenshot is showing the responsive controls and position within Premium Lottie Animations Section Add-on for Elementor.
Lottie Animations Section Addon Responsive Controls

What if I want to use Lottie Animation as a foreground object?

Please check this Elementor Lottie Animation tutorial which will help you add Lottie animations wherever you want on your website.


Elementor Lottie Animations addon in Premium Addons PRO for Elementor allows you to effortlessly incorporate captivating animated Lottie Files into your website, improving design without sacrificing performance. Plus, it’s user-friendly, requiring no coding skills. This exciting addition enhances your website’s visual appeal and interactivity.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.