Divi Supreme's Popup extension opens a whole new world for Creating Popups in Divi. It makes it really easy while creating Popups of anykind. It's a whole new solution that works really nice with Divi. This extension will extend the Visibility Option in all the Module setting that will allow you to use the Popup. Currently, the available supported modules are listed below: All Divi Default Modules All Divi Supreme Pro Modules(Pro Version). Before Using Divi Popups: Before you start using the whole new solution of Popups make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Supreme Popup and the Click on the Save Changes Button. Usage To use Divi Popups Extension, go to any of the supported module’s (listed above) settings and navigate to the Advanced Tab Scroll to Visibility and look for Use Popup Switch. Use Popup This will enable or disable the Popup extension. Popup Type: This is where you can choose the Popup type. Layout : You can choose this option to select a layout from Library to be shown in Popup. iFrame : Using this Popup type you can load a web URL in the Popup. Image : You can use this to show an image in the popup. You’ll be prompted to upload an image or select from Media Library.. Video : Using this Popup type you can show a video in the Popup just enter the URL of the video and you’re good to go.. Popup (Divi Library): This is an interesting part where you can choose any Layout from your Library to show in Popup. Trigger On: This is where you can choose how to trigger the Popup. Module Click : The Popup will be triggered when the whole module is clicked. Button Click : If the module is Button the popup will only be triggered when exactly the button is clicked. Image Click: If the module is an Image the popup will only be triggered when exactly the image is clicked. Hyperlink Click : If there is any link in your text module then selecting the Hyperlink method will show the Popup when the link is clicked. By ID : Select this Trigger Type to open the Popup from any element click If It has that ID. By Class : Select this Trigger Type to open the Popup from any element click If It has that Class. Page Load : If selected the Popup will be shown on Page Load —– Timed Delay : Set the Duration for the Popup to show. —– Cookie Expiry : Set the Expiry in days after then the Popup will be shown again. —– Use Custom Cookie Expiry Date : Set your own Custom Expiry for the cookie. Scroll : If selected the Popup will be shown only then when you’ll scroll to that module. —– Timed Delay : Set the Duration for the Popup to show. —– Cookie Expiry : Set the Expiry in days after then the Popup will be shown again. —– Use Custom Cookie Expiry Date : Set your own Custom Expiry for the cookie. Exit Intent : If selected the Popup will be shown when you’re about to leave the Browser Tab. Close Popup Triggers: This is where you can choose the way your popup should be closed. Outside Popup : The Popup will close after clicking anywhere outside of the popup. Close Button : A button will be shown to close the popup you can change the icon of the button and play with colors as well. Use Auto Close Popup: Enabling this option will let you close your popup after time you’ll enter in the field. After Time Passed (in s) : A button will be shown to close the popup you can change the icon of the button and play with colors as well. * Entrance Animation In: This is where you can choose the Entrance Animation of your Popup from 43+ Different Animations. Exit Animation In: This is where you can choose the Exit Animation of your Popup from 43+ Different Animations. Popup Position: This is where you can choose where on the screen the popup will show. There are 9 places you can select from: Top Left Top Center Top Right Center Left Center Center Right Bottom Left Bottom Center Bottom Right Popup Position Type: Absolute: If selected the popup will be shown as simple content on page it will scroll with page scroll. Fixed: If selected the popup will be fixed on screen it will stay on front even on page scroll. Very great for Cookie Notice. Use Fullwidth: Here you can enable this option to make the popup content to be shown on full screen. Popup Max Width: Here you can enable this option to make the popup content to be shown on full screen. Show Overlay: You can choose this option whether you want to use the background overlay or not Overlay Background Color: Here you can change the width of the slider. Show Close Button: Using this Switch you can Show or Hide the Close button to Close the Popup. Close Button Placement: Here you can change the Placement of the Close Button Inside or Outside. Inside : This will show the Close Button inside of the Popup. Outside : This will show the Close Button outside of the Popup. Close Icon Font Size: Here you can change the size of the close button. Close Button Icon: You can change the Icon of the Close button to your Desired one from the Whole Divi Icon Library. Close Button Background Color: Here you can change the Background Color of the Close Button Icon. Close Button Icon Color: Here you can change the Color of the Close Button Icon. Some Tutorial/Helpful Links for you to get started with Divi Popup Extension: How to create Popups using Divi Popup Extension - Complete look at all the Features How to Create Beautiful Popup with Divi Supreme - A simple popup + Free Layout 10 Beautiful Popup Layouts to Get Started with Our Popup Extension How to Open Popup from Menu Item Click So we've been getting a lot of requests on this from Customers to open the Popup from the Menu Item. So Finally, there's a way to Open It from any Menu Item you wish. Step 1: Go to Divi -> Theme Builder -> Edit Global Footer and here add an empty Text Module. Step 2 : Then Set up your Popup in this Module the way you wish. And make sure to change the Trigger type to "By Class" and then enter the class "open-popup" (You can add any class here). Step 3 : Now go to Appearance -> Menus and here click the "Screen Option" at the top and check the "CSS Classes" option. Step 4 : Now add that class to any Menu Item you wish to Open the Popup from. Video Walkthrough:

Display your WordPress menu and design it in whatever way you want. Use it for Footer or Sidebar. Content Options Menu Title This field is where you can enter the title of your menu. Menu Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu. Collapse Sub Menu Enable this Option If you'd like to collapse the Sub Menu and that will reveal when you click on the Parent Menu Item. An example how we use the menu module with the Footer Template to design our Footer Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. 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. Layout Menu Layout Currently the available Menu Layout is vertical. Title Here you can style the Title text of the Menu Module Bottom Gap Add some spacing under the Title text of the Module. And you can then change the color, font, weight and more of the Title text. Menu Menu Link Color Here you can choose the color of the Menu Items Active Link Color Change the Active Menu Link Color here. Menu Link Active Color Change the color of the Active Menu Item here. Menu Link Visited Color Change the color of the Menu Item a user already visited. When a user opens a link and come back to that page where this Menu Module is added, the color of that Menu item the user just visited will be changed. Space Between Add some space between Menu Items here Left Spacing Add some spacing on the Left side of the Menu Items. List Style Type Here you can change the List style of the Menu Items to Disc, Circle, Decimal and Square. You can choose None if you don't want List style. List Style Position You can either choose Inside or Outside means If you've got longer text in the Menu item the text will go below the Disc (or any type you choose) and If you'll choose Outside option it will not show the text below the Disc the text will be shown below the Menu Item text. List style Color Change the color of the List bullets here. And then you play around with changing Font, size, weight and more of the Menu Items. Sub Menu If there's a sub menu in the Menu you've added, then you can style those submenus here. Left Spacing Add some spacing on Left of of the Sub Menu Item(s). And then you play around with changing Font, size, weight and more of the Sub Menu Items. Sub Menu Collapse From here you'll be able to style the Sub Menu Collapse Icon easily. Arrow Color Here you'll be able to change the Icon color. Arrow Background Color You can change the Arrow Background color from here. Arrow Gap Change the Arrow gap between the Menu Item and Arrow Icon. Arrow Padding You can add Padding to the Icon from here, Useful If you've added Background to the Icon. Arrow Font Size You can change the Icon font size from here. Arrow Border, Border Radius and Box Shadow And else you can add border radius, boc shadow and Border to the Icon easily. Animation Use Link Hover Animation Enable this option to add a Hover animation to Menu Items. Animation Type Change the Type of the animation of the Animation here. Currently there's only Underline available we'll be adding more in upcoming updates. Underline Animation Here you can change the direction of the Underline Animation. You can change the direction of the Underline from 3 different types: Left to Right Right to Left Center Out Link Color Change the color of the Underline here. 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.

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.

A creative Divi module to display a beautiful combination of texts, links, badge and image. With Image Hover Zoom animation, you can now impress your visitors even more. Content Options Text Title Enter your title text here. You can take out the text if you don’t want the Title text. Subtitle Enter your subtitle text here. You can take out the text if you don’t want the subtitle text. Content Enter your description text here. You can take out the text if you don’t want the description text. Image & Badge Manage your Image and Badge text here. Image Add an image from your Library here. Use Image as background Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image. Image Height Change the height of the image by sliding the slider. Background Image animation Add animation to the image from 4 different animations and to even add more in upcoming updates. Animation Speed (in ms) Change the Hover Background Image Speed from here in ms. Badge Text Add text to the Badge here. You can take out the text if you don't want the badge text. You can also add a link to the badge under the link panel. Icon If you want to add an Icon to the Card you can do so here. Use Icon Enable this switch to enable the Use of Icon for the Card Module. Once you'll enable this you'll see so many Icons to choose from. Button Button text Add text to the button here you can always remove the text of the element which you don’t want. Button URL Add a URL to the button here. Design Options Layout & Alignment Layout Change the type of layout to Stacked or Inline. Stacked will place the image on top and content on the bottom. Inline will place the content Inline which means Image and content both in the same line. Layout type Inline Settings - If you’ll select this layout type you will be able to see these options: Width : Change the width of the image 2.** Order Alignment**: Change the alignment of the image to Left(Places the image on the left side of the content) or Right (Places the image on the right side of the content). Horizontal Content Alignment - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type. Image Make changes to the image here. Image Overlay Enable this switch if you want to add overlay color or icon or both to the image. Overlay Color Change the color of the overlay on the image to your own one. Use Icon You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well. Image Rounded Corners, Border and Box Shadow Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image. Badge Change badge’s position color, background color and more here. Position Change the position of the badge anywhere on the Image. Use Custom Position Enabling this switch will let you position the badge on your own custom position on the image. Background Color Change the background color of the badge to your desired one. Padding Add padding to the badge here to expand it more. And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text. Add Rounded Corners, Border and Box Shadow to Badge Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image. Other Titles, Subtitle, and Body Texts And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels. Button Enable Use Custom Styles for button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button. Advanced Options Use the advanced options to give your Card module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. How to Equalize Card Heights If you want to equalize card heights to the other cards in the Row, you can easily do that by going to Row settings -> Design tab -> Sizing -> and enable "Equalize Column Heights". This will equalize the Card Heights in that row. How to align buttons to the bottom In many cases, when you've equal height cards, you'll want that buttons should be at the bottom. For that, you need to make sure that the "Equalize Column Heights" Option is enabled in the Row settings and then add the below CSS anywhere, For Example, Divi -> Theme Options -> Custom CSS box or in Page settings -> Custom CSS. .dsm_card_wrapper .et_pb_button_wrapper { margin-top: auto; }

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.

Most popular - Divi Supreme - FAQs and Documentation

Most popular results

Divi Popup Extension

How to Install Divi Supreme Pro

Divi Card Carousel Module

How to Import Layouts

Divi Menu Module

Divi Custom Attributes

Divi Supreme Advanced Tabs Module

Divi Flipbox Module

Divi Icon List Module

Divi Contact Form 7 Module

Divi Typing Effect Module

Divi Image Carousel Module

Divi Card Module

Divi Post Carousel Module

Divi Supreme Pro License

Divi Lottie Module

Divi Library Shortcodes Extension

Divi Facebook Feed Module

Divi Content Timeline Module

Divi Supreme Masonry Gallery Module