How to Create a Popup in Divi?

Popups play a crucial role in marketing, serving as a solution to capture more email subscribers, promote webinars, or offer discounts to online shoppers. Despite their mixed reputation, popups can be highly effective.

While the average conversion rate for a popup is about 3%, targeted efforts can push these rates above 5% or even 10%. However, poorly crafted popups may be perceived as annoying and frustrating by visitors.

In this article, I’ll show you how to create a Divi popup that converts in five easy-to-follow steps. All of it shouldn’t take more than 30 minutes of your time to add a popup in Divi. 

Let’s dive in!

Step 1: Install and Activate DiviGear Popup Plugin

The default Divi Builder lacks a built-in Popup module, requiring third-party plugins for this feature. Fortunately, the DiviGear Popup Maker Plugin offers an even better solution. This plugin lets you create a popup for Divi with diverse content and popup trigger options.

Available in the Divi Marketplace, it integrates seamlessly into your website, ready for customization using any Divi modules and design settings. You can create professional-looking popups for various purposes like showcasing multimedia, collecting leads, and displaying offers. 

So, here’s what you need to do,

• Install the latest version of Divi.
• Purchase and install the latest version of the DiviGear Popup Plugin.

• Activate the plugin from the Installed Plugins list, and you’ll see “DG Popups” appear on the left side of your WordPress dashboard bar.
• Navigate to the “DG Popups” setting to proceed further.

Step 2: Add a New Popup

As we are started from scratch that’s why ‘DG Popups’ appears with an empty list. To add a new popup, follow these steps:

• Go to DG Popups > Add New to access the Popup window.

• Give your popup a title, such as “Promo Bar” for a discount promotion.
• Next, design your popup layout using the Divi Builder. Click on the “Use The Divi Builder” button, which will present three options. Choose “BUILD FROM SCRATCH” to create a popup from scratch.

• The Divi Builder editor will then open, providing a placeholder to design your popup within Divi. You can either design it here or opt to “Build On The Front End,” depending on your preference.

Step 3: Create a Popup Section

Now, let’s create a popup section using the Divi Visual Builder. Begin by adding sections and rows. Then, add a module to establish the base of the popup.

• For Section Settings: Adjust the width for a perfect popup shape. Navigate to Design > Sizing > Max Width and set it to your preference. In this case, we’ll set it to 620px.

• Adding a New Row: Within the section settings, you’ll see a green (+) button at the center. Click this button to add a dual-column row, as our Promo Bar requires two separate columns for content visualization.

• Adding a Divi Module: Next, add a Divi module. Click the gray (+) icon, and select any Divi module here according to your needs.

Step 4: Design and Insert Body Elements to Your Divi Popup 

Now, let’s proceed to set up the content for the popup. We aim to create a popup for an e-commerce site visitor offering discounts in exchange for their email address. Additionally, we’ll include a decline message for those who choose not to claim or provide their email address.

With this scenario in mind, let’s design the popup. You are always welcome to customize it as needed.

Add a Background Image

First we will select a fitting background image for the entire section or row. Navigate to Row Settings > Background > Background Image, where you can upload or choose an image from the Media Library. 

Additional options allow adjustments to the background size, position, image repeat, or blend mode.

Next, we’ll incorporate the essential elements, including the store logo, promotional discount text, email opt-in form, and supplemental text, to provide the actual content for the popup. All modifications will occur in the right column section according to design demand.

Add the Blurb Module for Logo and Promotional Content

Now we will add the logo and the promotional discount content. To do so we will use the Blurb module.

• Click the gray (+) icon to add a new module. Choose the ‘Blurb’ module and insert it.

• Within the Content Tab, input a title and additional text in the body section. Then, under Image & Icon, upload or select an image from the Media Library for the logo.

• In the Design Tab, ensure the Image & Icon placement is centered. Similarly, center the Text placement. Utilize the H1 format to indicate the discount percentage, adjusting settings like text size and color under the Title Text option. For the remaining text, adjust similar settings under the Body Text option.

Add an Email Opt-in Form 

Here’s how to add an email opt-in form to collect email addresses. 

• Click the gray (+) icon and select the ‘Email Optin’ module to add it. By default, it creates fields for email input and a button.

• In the Content Tab, give the button a catchy text and leave the title field open. Choose your preferred email service provider to start the connection.

• Now, let’s design the form in the Design Tab. Select the Layout as ‘Body On Top, Form On Bottom’ and enable Email Fullwidth to extend the input field.

• Set the Email field color to transparent and the text color to a cozy Gray, ensuring it’s visible yet subtle. Apply additional design as desired, and set the border style to Solid with white color.

• As we move forward, let’s change the button appearance. Enable the “Custom Style” to “Yes” and sequentially adjust the text color, size, and background color. That’s it!

Add Another Text Field

Lastly, we’ll include another text field to insert the decline message, following the same process as before.

Once you are done with the design, click the Save Changes button in the bottom right corner to apply the change you have just made.

Step 5: Configure Your Divi Popup

Now, it’s time to configure the settings to activate the popup. The DiviGear popup Settings offer numerous control and customization features categorized into General, Display, Design, and Cookie settings. For more details, you can check out our Popup Documentation.

General Settings

To activate the popup on your website, first, toggle the Popup Status to ON.

Next, choose the popup trigger type to determine when the popup will be revealed. You can choose from various trigger options to suit your needs, such as on-page load or on-click.

For this example, we’ll use the ‘On Scroll’ trigger type. Set the scrolling trigger offset, which specifies how far the browser window must scroll from the top edge before the popup appears.

We’re setting it to 30%, meaning the popup will appear when the visitor scrolls 30% of the page. This value can be set in pixels too.

You can also schedule the time to display the popup on specific days, dates, and times from the Display Schedule option. 

Finally, to complete the general popup settings, specify the Closing CSS ID. As we’ve utilized “NO THANKS” as the decline message, this will serve as the trigger to close the popup. Simply copy the message and insert a dot and underscore between the message content (e.g., .no_thanks).

DiviGear Popup Trigger Types

DiviGear offers a total of six different types of popups. They are –

• Click: Show a modal popup when visitors click on a specified area of your website, requiring a CSS class or ID.
• On Load: Display a popup immediately upon page load, with adjustable duration.
• On Scroll: Trigger popup as visitors scroll, with customizable scrolling length.
• Scroll to Element: A Divi popup modal will appear when visitors reach a certain element of the webpage.
• On Exit: Show an exit popup when visitors attempt to leave your site.
• On Inactivity: Display a popup message if visitors remain inactive for a set period.

Display Settings

The Display Settings of this Divi popup plugin offer precise control over how and when your popups appear to visitors. You can specify the user role, ensuring that the popup is displayed only to certain types of visitors, such as administrators or subscribers. 

You can tailor the popup’s visibility across different devices by specifying whether it should appear on desktops, tablets, and/or mobile devices. And, condition settings allow for further customization. 

In our case, we will keep the default settings as it is. 

Design Settings

In the design setting, you will get tons of customization options from popup position, popup animation popup background settings. For more details, you can check out our Popup Documentation.

Ensure that the design settings of the popup plugin align with the following specifications. These settings control the popup’s appearance and behavior, including position, animation style, duration, and timing for both opening and closing.

• Set Popup Position to ‘Center’.
• Choose Animation Style ‘Zoom Center’.
• Adjust Animation Duration to 1500 milliseconds.
• Set the Animation Delay to 200 milliseconds.
• Select  Animation Timing Function ‘Linear’.
• Enable the Close Animation.
• Choose Close Animation Style ‘Zoom Center’.
• Adjust Close Animation Duration to 1500 milliseconds.
• Select Close Animation Timing Function ‘Linear’.

Design the Popup Exit Button

Let’s configure the close button, which will be positioned at the top right corner of the popup. If your popup already contains a closing message, you may skip this step. However, including an exit button in a popup is a standard practice. 

Simply make the following adjustments:

• Enable the ‘Move Close Button Inside Popup area’ option.
• Set the Close Button Position inside Popup to the Top Right.
• Turn ON the ‘Close Button Design’ toggle.
• Choose a Button Color, such as black (#0F0F0F) or any other preferred color.
• Adjust the Button Font Size to 20px.
• Set the Button Font Weight to 600 for a bold appearance.
• Ensure the Button Line Height is 10px for spacing.
• Select a Button Background Color, typically white (#ffffff).
• Specify Button Padding as 5px for spacing around the text.
• Set Button Margin to Top – 10px, Right – 10px for positioning.
• Apply a Button Border Radius of 100% for a rounded look.
• Choose a Button Border Color, like Gray (#A7A7A7), to define the button’s outline.

Cookie Settings

You have the option to define the popup’s display period using the Cookie Activity attribute, which offers three configurable options.

Preview

Click the ‘Save Changes’ button to complete all popup configuration steps. Our Popup for Divi will look like this. 

Create Popup for Divi using DiviGear Free Popup Layout

The DiviGear popup builder offers industry-leading premade designs that you can easily import into your site via the Import & Export option. Choose from a variety of eye-catching free popup layouts, including modal popups, video popups, lightbox modals, email opt-in forms, notification popups, promotional popups, fullscreen overlays, and many more. 

These layouts are optimized for all devices and fully customizable to suit your needs. Best of all, they’re completely free, requiring no coding or design skills. 

Simply follow these steps:

• Visit https://plugins.divigear.net/popup/ and select your preferred design to download.

• Go to DG Popups > Import & Export in your WordPress dashboard.

• Click on ‘Choose File’ and upload the popup JSON file, then click ‘Import’ to import the popup layout.

• Access your new Divi popup layout from the ‘All Popups’ section.

Wrapping Up

Creating a popup in Divi with the DiviGear premium popup plugins is pretty straightforward. Simply Follow the steps we’ve discussed to effortlessly create any type of popup using the Divi builder and trigger it whenever you need!

If you still facing any issues just let us know.