Add Animated Image using Lottier module

This animated image plugin uses the library of JSON from lottiefiles.com. There is a wide range of exciting animations made by professional designers from around the world. You can buy the animation that suits your site or use different variations for free in a few clicks. Such a product can improve any type of WordPress site and design, whether it be Blog, Portfolio, Corporate Website, Creative Agency, eCommerce Project, Personal CV, a Restaurant, or Magazine.

For further work, you need the Divi Builder to be installed on your site.

Open or create a page using Divi to start using the Lottier Divi module.

Lottier module

Click on the Lottier module to add it to the page and start customizing the animated image. In the pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content
Design
Advanced

Content Tab

On the Content tab of the Lottier widget, you can manage the animated image, enter the header and description or change the animation content.

Animation speed – specify the animation speed using the slider. You can adjust the value at intervals of 0.1.
Playback – select a way to playback the animation. The available options: Auto play, SVG hover, Section hover, On click.
Play mode – select animation loop mode. The available options: Normal, Bounce.
Loop – a toggle to enable/disable the animation loop.
Controls – a toggle to enable/disable the control display.
Header – a toggle to enable/disable the header display of the animation block.
Description – a toggle to enable/disable the description display of the animation block.
Enable link – a toggle to enable/disable the animation link.

Header settings

Header – enter the header text of the animation block.
HTML tag – select one of the available tags from the list for the header text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
Show subheader – the toggle to enable/disable the display of the subheader text.

Description settings

Description Position – select the position for the description display. It can be After header or Footer of the animation block.
HTML tag – select one of the available tags from the list for the description text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
Description – enter the description text of the animation block.

Link settings

Link Position – select a position to add the link. It can be applied to the SVG image or to the animation Box.
URL – enter the link URL of the animation.

Animation content settings

Source – select an animated image source. The available options: Media library, URL, JSON
URL – enter the URL of the animated image from https://lottiefiles.com/. The option is available when selecting the Source “URL”.
JSON – paste the code of the JSON file received from the https://lottiefiles.com/. The option is available when selecting the Source “JSON”

Design

On the Lottie widget styles tab, you can configure everything related to the visual style of elements: colors, fonts, size, and more.

Header text

Header Font – сhoose a custom font to use for the header. All Google web fonts are available, or you can upload your own custom font files.
Header Font Weight – сhoose the font weight to use for the header text.
Header Font Style – сhoose the font style to use for the header text.
Header Text Alignment – specify alignment for the header text.
Header Text Color – specify the font color and opacity for the header text using the color picker.
Header Text Size – specify a font size for the header text.
Header Line Height – specify a line height for the header text.

Description Text

Description Font – сhoose a custom font to use for the description. All Google web fonts are available, or you can upload your own custom font files.
Description Font Weight – сhoose the font weight to use for the description text.
Description Font Style – сhoose the font style to use for the description text.
Description Text Alignment – specify alignment for the description text.
Description Text Color – specify the font color and opacity for the description text using the color picker.
Description Text Size – specify a font size for the description text.
Description Line Height – specify a line height for the description text.

Sizing

Width – specify the width of the animation box for different devices.
Max Width – specify the max-width of the animation box for different devices.
Module Alignment – manage animation alignment (left, center, right) for desktop, tablet or mobile.
Min Height – specify the min-height of the animation box for different devices.
Height – specify the height of the animation box for different devices.
Max Height – specify the max-height of the animation box for different devices.

Spacing

Margin – manage the margin of the animation for desktop, tablets or phones.
Padding – manage the padding of the animation for desktop, tablets or phones.

Advanced Tab

The settings in the advanced tab Lottier module allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Divi modules and will be convenient for experienced users of the Divi. Learn more about Advanced Tab settings from Divi’s official documentation.

Save changes

Do not forget to save changes after completing the module setup. To do this, click on the Save button at the bottom of the page after clicking on the purple icon with three dots.

Hosting for Divi websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.