Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. And we’re bringing it to Divi with a Custom Module that’ll let you add beautiful animations with ease. Click here to see live demo. Content Options Lottie JSON File Here you’ll need to upload the .JSON File that you’ll download from LottieFiles and you don’t have to worry about uploading a .JSON File because Divi Supreme already did it for you. Loop If you want to keep running/Looping enable this option. Number of Times Here you can specify the number of times the Animation will Loop. If you enter 2 the animation will loop 2 times and then it will stop. Direction Here you can change the direction of the animation it maybe either Normal or Reverse. Speed (More is Faster) Here you can change the speed of the animation the more value you’ll enter here the more speed of the animation will be. Trigger Enable this option to trigger the animation on Hover or Click. Trigger Method Play Animation on Hover/Mouse over - This option will let you play the Lottie Animation when you hover the mouse on the Animation. Play Animation on Click - This option will let you play the Animation on click. So when you'll click the Animation it will play. Play Animation on Scroll - (A great addition) This will let you animate the Animation on Scroll. Create something extraordinary. Relative To Entire Page - You can relate the animation Scroll to Entire Page, more option will be added in upcoming Updates! On Mouseout action This option will show if you select the Animation Trigger method as "Hover". And it will let you do different things with Animation like Stop, Pause or Reverse the Animation when you move the mouse away from the Module. Animate in Viewport Here you can play around with animation to play at a specific viewport. Design Options Because It’s an animation you don’t need to do any design settings here. But if you want then you can add a Box Shadow, Corner Radius and Play around with other settings here. Advanced Options Use the advanced options to give your Lottie Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

With over 15 effects to choose from, you can now create stunning interactive content that converts. # Content Options **+ Flipbox Item** This is where you add content, images and icon to your Flipbox Module. Just like a Blurb Module but with Front and Back Animation to show the front and back of an element when you hover. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new Flipbox. See below for individual Flipbox settings. After you add your first image, you will see a gray bar appear with the title of your Flipbox shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image. Note : Create only two items because one is identify as Front and the other as Back. Design Options Sizing --Height By default, the flipbox is set at 200px. You can set to other height to suit the content of your flipbox. This is one of the most important part when using flipbox. If you content is too long and doesn’t look right. Adjust your height. Animation This is where you can change the flipbox animation effect. Trigger Animation On Choose a trigger animation for the Flipbox here. You can either select "Hover" or "Click". When you'll select Click the Flipbox will flip on Click instead of on hover. Click On This option will appear once you'll select the Trigger method as "Click". And from here you can choose If you want to flip the Flipbox on Whole Flipbox click or Button click. Flipbox Type There are 5 types of Flipbox Effect to choose from. Flip Slide Zoom In Zoom Out Fade See Flipbox Demo here . Flip Animation There are 4 types of Flip Effect to choose from. "Flip Left" "Flip Right" "Flip Up" "Flip Down" 3D Effect This option will only show up when you choose Flipbox Effect as Flip And this will create a 3D effect to your Flipbox. Slide Animation This option will only show up when you choose Flipbox Effect as Slide There are 4 types of Slide Effect to choose from. "Slide Left" , "Slide Right" , "Slide Up" and "Slide Down" . Zoom In Animation This will have a zoom in animation on your flipbox. Zoom Out Animation This option will only show up when you choose Flipbox Effect as Zoom Out There are 5 types of Zoom Out Effect to choose from. Zoom Out Zoom Out Up Zoom Out Down Zoom Out Left * Zoom Out Right Animation Speed (in s) This will control the speed animation of the flipbox. Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices. Flipbox Item Content Title Give a title to your Flipbox that will appear above the body text of the Flipbox in a bold text style. Sub Title If you would like to use a sub title, add it here. Your sub title will appear below your title in a small font. Content This field is where you can enter the body content of your Flipbox. Flipbox Text will also span the full width of your column. Use Icon When using Flipbox, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead. Icon If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Flipbox. Image If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Flipbox image is determined by the aspect ratio of your original image, so making all of your Flipbox images the same height is a good idea if you are placing them side by side. Button Button Text Input your desired button text. Button URL Input the destination URL for your button. URL Opens Here you can choose whether or not your link opens in a new window. Flipbox Item Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. Image & Icon Icon Color If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color. Circle Icon If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. Circle Color If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here. Show Circle Border If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color. Circle Border Color If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border. Use Icon Font Size If enabled, you can input a custom size for the icon that is displayed. Sizing Here you can change the width of the image. Width Applying a max width value here will limit the width of the Flipbox image. This only affects Flipbox that are not in icon mode. Spacing Custom Padding Padding is the space added inside of your flipbox item, between the edge of the file and its internal elements. You can add custom padding values to any of the flipbox item’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. Flipbox Item Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Divi Supreme - Divi Supreme - FAQs and Documentation

Icons Rendering conflict with other Plugins

How to Solve common issues caused by Cache.

Divi Caldera Forms Module

Do i need to uninstall Lite version if i have the Pro version?

Divi Library Widget Extension

I didn't find my License key because I purchased from Elegant Themes - Divi Marketplace

How to show a Popup Globally

Divi Lottie Module

Divi Flipbox Module

SCRIPT_DEBUG and et_load_unminified_scripts issue