How to add Lottie animations in Divi

Open the Divi Visual Builder and add a module. If you can search for a Lottie module, you are using the native Divi 5 route. Divi 5 supports animated SVG and JSON files directly in that module.

If the module is missing, do not keep looking for a hidden setting. Use the manual embed route in this guide or install a Divi Lottie plugin.

Download the animation as JSON, SVG or dotLottie from a source you trust. LottieFiles can provide a direct asset link and embed code, and its current player supports both .lottie and standard JSON files.

WordPress normally blocks JSON and SVG uploads. If the Media Library rejects the file, enable the file type only after checking its source and backing up the site. Uploading untrusted JSON or SVG files creates an avoidable security risk.

Open the page in the Visual Builder, add a row, click the module button and search for Lottie. Add the module, then upload your JSON or SVG file in the animation setting. Divi displays the animation in the builder once the file is selected.

Place the module in its own column if you need predictable sizing. This makes it easier to align the animation with nearby text, buttons or images.

Use the Content settings to choose the trigger, loop behaviour, speed, direction and play mode. A view or click trigger is usually safer than hover because phones and tablets do not provide a normal hover interaction. Use a one-time play mode for an entrance effect and looping only when repeated motion supports the page.

Open the Design settings to set width, spacing and alignment. Use Divi's responsive controls to reduce the animation on mobile, and consider disabling a decorative loop on small screens to reduce distraction and battery use.

On older Divi versions, add a Code module where the animation should appear. In LottieFiles, use the implementation or embed option to obtain the current HTML, player element or iframe code, then paste that code into the module. The provider documents HTML embed code, direct asset links and iframe options.

This route is workable but has drawbacks: you must load and maintain the player separately, playback controls are not native Divi settings, and the animation may not render inside the builder preview even when it works on the front end. If the code appears as text, preview the published page and check whether your security or optimisation plugin has stripped the script.

Save the page and test it while logged out on desktop and mobile. Check the trigger, first-frame loading, animation size, page movement and whether the animation still works after caching is enabled.

If it is blank, confirm that the file URL is reachable, the file format is supported, the player script has loaded and the animation was not blocked by a content-security or optimisation setting. For a Divi 5 site, returning to the native module is usually simpler than debugging a custom embed.

For Divi 5, the native module is the quickest option and you may not need another plugin. For older Divi versions, Lottie Animated Images for Divi Builder is the faster practical route when you want a Divi-native interface without writing embed code. It is suited to motion-focused page design and provides animation settings such as speed, loop and trigger controls.

Install it by uploading the plugin through WordPress, activating it, and then looking for its Lottie module in the Divi Builder. Confirm that it supports your installed Divi version before using it on a production site.