Divi Lottie

A Lottie’s JSON-based animation file format allows designers to use animations on any platform as easily as shipping static assets. They are files that work on any device and can scale up or down without pixilation.

Content → Lottie Elements

1. Lottie JSON File – upload the JSON file for Lottie
2. Title – Include the title to your Lottie design
3. Content – add a summury relevant to the Lottie design you are trying to achieve 
4. Use Button – enable to view the button and its settings

Content → Lottie Elements (Continued)

1. Button Text – Add text to the button
2. Link – include a link for the button to direct the visitors.
3. Link Target – this is to specify whether you want the link clicked to appear in a separate window or a new tab.

Content → Lottie Settings

1. Loop – enable this to keep the animation going on a loop
2. Auto-play – enable this to have the auto-play feature 
3. Stop on Hover – you can enable this to stop the animation when hovered on
4. Speed – adjust the speed of the Lottie animation
5. Direction – use the direction feature to have the animation go backward with reverse or forward to have the animation go as is. 

Design → Lottie

1. Alignment – Align the Lottie animation either to the left, center or the right
2. Lottie Width – adjust the size of the Lottie animation using the slider

Design → Title

1. Heading Level – select a level for the heading
2. Font – Select a font from the collection or use a custom font.
3. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
4. Font Style – Pick a style of font for both front and back.
5. Text Alignment – align the text either to the left, right, center, or the right, and keep the 
6. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
7. Text Size – easily adjust the size of the text using the slider.

Design → Title (continued)

1. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
2. Line Height – adjust the space between the lines using the slider.
3. Text Shadow – select a prebuilt shadow for your text
4. Rounded Corners – adjust the four corners to include rounded corners
5. Border Styles – include borders on any side of the text or all four sides. 

Design → Title (continued)

1. Border Width – adjust the width of the border using the slider.
2. Border Color – pick a color for the border you’ve added.
3. Border Style – select a style of the border from the premade border styles.
4. Title Box Shadow – choose a box shadow to the title text

Design → Description

1. Font – Select a font from the collection or use a custom font.
2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font for both front and back.
4. Text Alignment – align the text either to the left, right, center, or the right, and keep the 
5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
6. Text Size – adjust text size using the slider.
7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.

Design → Description (continued)

1. Line Height – adjust the space between the lines using the slider.
2. Text Shadow – select a prebuilt shadow for your text
3. Rounded Corners – adjust the four corners to include rounded corners
4. Border Styles – include borders on any side of the text or all four sides. 

Design → Description (continued)

1. Border Width – adjust the width of the border using the slider.
2. Border Color – pick a color for the border you’ve added.
3. Border Style – select a style of the border from the premade border styles.
4. Box Shadow – choose a box shadow to the description text

Design → Button

1. Button Alignment – align the button either to the left, center, or to the right
2. Font – Select a font from the collection or use custom font.
3. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
4. Font Style – Pick a style of font for both front and back.
5. Text Alignment – align the text either to the left, right, center, or the right, and keep the 
6. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
7. Text Size – adjust text size using the slider.

Design → Button (continued)

1. Letter spacing – adjust the space betweent the letters using the slider
2. Line Height – adjust the space between the lines using the slider.
3. Text Shadow – select a prebuilt shadow for your text
4. Rounded Corners – adjust the four corners to include rounded corners
5. Border Styles – include borders on any side of the text or all four sides.

Design → Button (continued)

1. Border Width – adjust the width of the border using the slider.
2. Border Color – pick a color for the border you’ve added.
3. Border Style – select a style of the border from the premade border styles.
4. Box Shadow – choose a box shadow to the Button text