How to Create a Popup in Divi Using Divi Supreme

Updated: June 30, 2021

Unlike Elementor and Brizy (read: Elementor vs Divi, Divi vs Brizy), Divi has no built-in feature to create a popup. If you want to create a popup on your Divi-powered WordPress website, you can install a plugin. A Divi plugin we recommend is Divi Supreme. It is one of the most popular Divi plugins, available on the Divi Marketplace. The plugin is actually released as a freemium plugin, but the popup builder is only available on the pro version so that you need to use the pro version of Divi Supreme to be able to create a popup.

The popup builder of Divi Supreme supports four popup types: layout, iFrame, video, and image. In this article, we will show you how to create a popup from a layout. This popup type requires you to create a layout of the popup first before you can call it. The popup layout can be created using the visual editor of Divi Builder.

About the trigger type, Divi Supreme supports the following trigger types:

  • On click
  • On page load
  • On exit intent
  • On page scroll

How to Create a Popup in Divi Using Divi Supreme

Before we continue, make sure you have installed Divi Supreme (the pro version) on your WordPress site.

As mentioned above, we will create the popup from a layout in this example. We will create a simple popup as follows:

It takes only two steps to create a popup using Divi Supreme.

Step 1: Create the Popup Layout/Template

On the first step, you need to create the layout of the popup. You can then call the layout from a page you want the popup to appear.

To create popup layout, go to Divi -> Divi Library on your WordPress dashboard and click the Add New button to create a new layout.

Give your layout a name on the Layout Name field. On the Layout Type field, select Layout. Click the Submit button.

On the appearing dialog, you can select the leftmost option (BUILD FROM SCRATCH) and click the Start Building button.

Click the Build On The Frond End button to create the layout using Divi Builder visual editor.

Once the Divi Builder editor opens, you can prepare the layout by adding the necessary sections and rows. Once the layout is ready, you can then add the modules you want to add. You can add any module to your popup according to your need. In our case (as you can see on the GIF above), we only add the Contact Form module.

Once you are done editing the popup layout, you can click the Save button on the bottom-right corner to save the changes followed by Exit Visual Builder on the top bar to exit the Divi Builder editor.

Click the Update button to update the popup layout.

Step 2: Call the Popup Layout

Once the popup layout is ready, you can call it to show it up. You can call the popup layout on any page on your website. Be it the homepage, landing page, contact page, about page, and so on. You can even call the popup layout on a custom template (e.g., custom footer template) you created with Divi Theme Builder.

As mentioned earlier, the popup builder of Divi Supreme supports four trigger types: on click, on page load, on exit intent, and on page scroll. In this example, we will call the popup using the on click trigger.

First, edit a page (or custom template) you want to call the popup layout on using Divi Builder. Once the Divi Builder editor opens, select a module. Click the gear icon to open the settings panel.

On the settings panel, open the Visibility block under the Advanced tab. Enable the Use Popup option. On the Popup Type option, select Layout. On the Popup (Divi Library) option, select the popup layout you have just created on step one above.

You can scroll down to see more options. For instance, on the Trigger On option, you can select the trigger type to call the popup layout. And on the Close Popup Triggers option, you can select how the popup to be closed.

Here are some setting options you can select:

  • Trigger On

The method (trigger) to call the popup layout. As mentioned, there are four trigger types offered by Divi Supreme:

  1. On click: This trigger type requires a visitor to click a certain element in order for the popup layout to load. There are four element types you can use: module, button, image, and link.
  2. Page Load: This trigger type will call the popup layout based on the page load. The popup will appear once the page is fully loaded, with a certain delay according to the duration that has been set before.
  3. Page Scroll: This trigger type will call the popup layout based on the page scroll. The popup will appear when a user makes a scroll down on the page.
  4. Exit Intent: This trigger type will call the popup on exit intent. The popup will appear when a visitor is intending to exit the page by clicking the close button.

  • Close Popup Triggers

From this setting option, you can select how the popup to be closed. If you choose the Outside Popup option, the popup will be closed when a visitor clicks any area outside the popup. If you choose the Close Button option, the popup will be closed when a visitor clicks the close button.

  • Use Auto Close Popup

You can select this setting option if you want the popup to be automatically closed. You can set the auto close duration after enabling this option.

  • Timed Delay

By default, Divi Supreme displays the popup one second after the trigger condition fulfilled. You can set the custom delay from this option.

  • Cookie Expiry

By default, the popup will only appear once in 30 days to a user. You can set the custom expiry date of the popup from this setting. For instance, if you set the number to 7, the popup will appear once in 7 days to a user.

  • Entrance Animation In

You can set the entrance animation of the popup from this setting option.

  • Exit Animation out

You can set the exit animation of the popup from this setting option.

  • Popup Position

This setting option allows you to set the position of the popup.

  • Popup Position Type

This setting option allows you to set the position type of the popup. Fixed or absolute.

  • Use Fullwidth

You can enable this option if you want the popup to be displayed in the fullwidth mode.

  • Popup Max Width

You can set the maximum width of the popup from this setting option.

  • Show Overlay

If you want to show the overlay, you can simply enable this option. You can then set the overlay color on the color picker beneath it.

  • Show Close Button

If you want to show the close button, you can enable this option. If this option is enabled, you can set the icon size, icon color, and icon placement (inside or outside the popup).

Once you are done editing the page, you can publish it to apply the changes, including the popup.

How to Display the Popup on the Entire Website

The popup builder of Divi Supreme doesn’t support display conditions, but it doesn’t mean you have to edit every single page on your website to display the popup layout on the entire website. Instead, you can make use of the Divi Theme Builder feature to display the popup on the entire website. For instance, you can enable the popup on one of elements of the global header or footer.

On your WordPress dashboard, go to Divi -> Theme Builder. Add a global footer, global body, or header.

Once the Divi Builder editor opens, you can edit one of the modules. On the settings panel of the module, you can open the Visibility block on the settings panel to enable the popup as we have just covered above.

The Bottom Line

Divi Supreme can be a solution if you are looking to create a popup on your Divi-powered WordPress site. It’s a feature-rich Divi plugin. In addition to popup builder, the plugin also offers a set of modules (that consists of 59 modules in total). You can create a beautiful popup using the visual editor of Divi Builder just like when you are creating a regular page.

While the plugin is good enough to create a popup in Divi, it has some drawbacks, though. For instance, it doesn’t display conditions although you can also display the popup on the entire website with a little trick. Another drawback, it doesn’t allow you to preview the popup on the Divi Builder editor like when you are creating a popup in Elementor and Brizy. The popup can only be previewed on a live page. Meaning that you need to publish the page to see the actual popup.

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!