How to Create Popup in Divi: With or Without Plugin

Popups are indispensable when it comes to generating leads and sales today, so everyone should use them. 

In this guide, I’ll show you how to create a popup in Divi both using a plugin and manually by using JavaScript and CSS code.

Let’s get started.

First, let’s look at what we’re building. In the following section, we will recreate the below designs to capture email subscribers from the blog page which will appear on page load.

Method 1: Create a Divi Popup with the DiviFlash Popup Plugin

The default Divi Builder lacks a built-in Popup module. Fortunately, the DiviFlash popup maker offers everything you need to create any kind of popup for Divi. So, here’s what you need to do,

Step 1: Install and Activate DiviFlash Popup Plugin

First, purchase the DiviFlash (Which includes 50+ modules besides the Popup module) from      their websites. Then navigate to your WordPress Dashboard and follow the instructions below,

• Go to Plugins > Add New Plugin.
• Click Upload Plugin and choose Choose File.
• Select the DiviFlash Plugin ZIP file and click Install Now.

• After successful installation, click “Activate” to activate DiviFlash.

The Popup Module may not be enabled by default, so you might need to enable it manually. To do this, 

• Navigate to WordPress Dashboard > DiviFlash > Settings > General tab,
• Look for the “Popup Enable” option, and enable it. 

Now you will see “DF Popups” appear on the left side of your WordPress dashboard bar.

• Navigate to the “DF Popups” setting to proceed further.

Step 2: Add a New Popup

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

• Navigate to DF Popups > Add New to access the Popup window.

• Give your popup a title, such as “Email Subscribers from Blog Posts“.
• Now, we will design the 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 open, giving you a blank canvas to design your popup within Divi. we will choose to “Build On The Front End” to continue the design process.

• The page will refresh now. Again, the page will present three options. Choose “BUILD FROM SCRATCH“.

Step 3: Create a Popup Section

Now, let’s create a popup section using the Divi Visual Builder. First, we will add a single-column row for content visualization. 

• Click the green (+) button at the center. 

• A popup will appear with the available module list. We will add the module later. So, close the tab for now. 

Section Settings

In the section setting, we will adjust the max width and spacing for a perfect popup shape. 

• From the Section Settings, open up the Background and add the background image. 

• Now, navigate to the Design tab > Sizing and change the max width value,  

Max width: 365px

• Next, navigate to the Design tab > Spacing and make the following changes,  

Bottom margin: 30px

Left margin: 30px

Right margin: 30px

• Next, navigate to Design tab > Border and make the following changes,  

Rounded corner: 16px (All)

• Next, navigate to the Design tab > Box Shadow apply a all side shadow, and make the following changes in the settings options,  

Box shadow vertical positions: 8px

Box shadow blur strength: 16px

Shadow color: rgba(0,0,0,0.08)

• Save changes and close the section settings.

Row Settings

From the row setting, we will make some changes to the width. 

• From the Row Settings navigate to the Design tab > Sizing, and change the width value to 100%.

• Next, navigate to the Design tab > Spacing, and change the padding value to 50px for all.

• Save changes and close the row settings.

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

Now, let’s proceed to set up the content for the popup. According to our design, we are going to create a popup to capture email subscribers from the blog page which will appear on page load.

All modifications will occur in a single-column section which includes a logo and an email opt-in form. With this scenario in mind, let’s design the popup. You are always welcome to customize it as needed.

Add the Logo 

First, we will add the logo using the Image module.

• Click the gray (+) icon to add the Image module. 

• From the Image option select or upload the image. 

• Next, navigate to the Design Tab > Alignment, and set the image alignment to Center,

• Next, navigate to the Design Tab > Sizing, and change the max width value to 41%,

• Next, navigate to the Design Tab > Spacing and change the bottom margin value to 16px.

• Save changes and close the module settings.

This is how the popup will look so far, 

Add an Email Opt-in Form 

Now, we will add an email opt-in form to collect email addresses just below the previous section. 

• 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, write a catchy Title field, Button text, Body text, and Footer text. Then, choose your preferred email service provider to start the connection.

• Scroll down to the Fields option and make sure all the default settings are turned off.

• Again, scroll down to the Background option and disable the “Use Background Color” option. 

• Now, navigate to the Design Tab > Layout, and choose the Layout as ‘Body On Top, Form On Bottom‘.

• Scroll down to the Field option, and set the Email field color as follows,

Fields background-color: #ffffff

Fields text color: #545454

Fields focus background-color: #ffffff

Fields padding (Top): 14px

Fields padding (Bottom): 14px

Fields font: Titillium Web

Fields text size: 16px

Fields line height: 26px

Fields rounded corners: 5px (All)

Fields border-style: All side

Fields border width: 1px

Fields border-color: #e0e0e0

• Next, scroll down to the Title Text, and make the following changes,

Title heading level: H5

Title font: IBM Plex Sans

Font weight: Bold

Title text alignment: Center

Title text color: #141100

Title text size: 22px

Title line height: 26px

• Next, scroll down to the Body Text, and make the following changes,

Body font: Titillium Web

Body text alignment: Center

Body text color: #141100

Body text size: 16px

Body line height: 26px

• Next, scroll down to the Button option and make the following changes. First, enable the Use Custom Style For Button.

Button text size: 16px

Button text color: #141100

Button text color (on hover): #ffffff

Button background-color: #ffd512

Button background-color (on hover): #141100

Button border-color: #ffd512

Button border-color (on hover): #141100

Button border-radius: 5px

Button font: Titillium Web

Button font-weight: Bold

Show button icon: Turn off

Button padding: 12px (Top), 12px (Bottom)

• Save changes and close the module settings.

This is how the popup will look so far, 

Step 5: Configure Your Divi Popup

After finishing the design, it’s time to configure the settings to activate the popup. Simply select the “Edit Popup” option at the top of the page.

It will take you to the DiviFlash Popup Setting window. Just scroll down a bit to access the options. 

The DiviFlash popup settings provide a wide range of control and customization options, organized into categories like General, Display, Design, and Cookie settings. 

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. For this example, we will select the ‘On Load‘ trigger type. 

• Next, set the “Delay” time to 3 seconds. It will define the delay time for the popup once the page is loaded completely.

Display Settings

The display settings of this Divi popup plugin let you control when and how popups appear. You can choose specific user roles, like showing popups only to administrators or subscribers. You can also decide whether popups show on desktops, tablets, or mobile devices. Plus, condition settings offer even more customization.

In our case, we will keep the default settings as it is. Also, set a condition to determine where the popup will be displayed. 

From the Display Tab look for Condition Settings, and select Include > Post > All.

Design Settings

In the design setting, you will get tons of customization options from popup position, popup animation popup background settings. Simply make the following changes,

• Popup Position: Bottom Right
• Animation Style: Slide Right
• Animation Duration: 1500 milliseconds
• Animation Delay: 200 milliseconds
• Animation Timing Function: Linear

• Clickable Outside Popup Area: Enable
• Move Close Button Inside Popup Area: Enable
• Close Button Position in Inside Popup: Top Right

• Close Button Design: Enable
  • Button Color: #6b7280
  • Button Font Size: 20px
  • Button Font Weight: 600
  • Button line Height: 10px
  • Button Padding: 10px
  • Button Margin: 10px (Top)
  • Button Margin: 10px (Right)

Click the ‘Save Changes’ button to complete all popup configuration steps. 

Preview the Popup

Our Popup for Divi will look like this. 

Create Popup for Divi using DiviFlash Free Popup Layout

The DiviFlash popup builder provides top-notch premade designs you can easily import using the Import & Export option. Best of all, they’re free and require no coding or design skills.

Simply follow these steps:

• Visit https://modules.diviflash.xyz/popup/ and select your preferred design to download.
• Go to DF 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.

Method 2: Create a Divi Popup Without Plugin

To create a popup without plugins in your blog post, you will need to create a post template from the Divi Theme Builder, or you can use an existing one and add the popup if you already have an existing template.

Step 1: Design the Single Post page 

Here’s how you can create a new template for your blog posts,

• From your WordPress dashboard, navigate to Divi > Theme Builder.
• Click Add New Template > Build New Template

• From the Template Settings modal select, Posts > All posts, and then click Create Template

• A custom template is now generated. Click Add Custom Body > Build Custom Body. The builder should open with a blank template.

Here, we will design the single blog post along with the Popup. Since the main focus is on the popup design, we will give the layout a basic structure using the Post Title and Post Content module. 

Once you have created the post template, it’s time to create the popup section that you would like to display in all posts as a popup.

Step 2: Create the Popup Section

Since we’ve already covered how to do this in the previous method, we will skip the detailed steps.  

Simply add a new action with a single row and recreate the popup as we demonstrated in the previous method. You can copy the design and paste it here too. 

Step 1: Design the Close Button

In method one, the DiviFlash plugin took care of designing and handling the close button, which was really convenient. However, if you create the popup manually you need to design and add the close button from scratch. We will use the Icon module to create the close button.

• Click the gray (+) icon to add the Icon module. 

• From the Icon option select the Icon. 

• Now, navigate to the Design tab > Icon and make the following changes, 

Icon Color: #6b7280

Icon size: 17px

• Now, navigate to the Advanced tab > Position and make the following changes to set it in the right place, 

Position: Absolute

Location: Top right corner

Vertical offset: -95px

Horizontal offset: -25px

Z index: 500

• Save changes and close the module settings.

Step 2: Define CSS ID & Classes 

Once we are done with all the design and customization we will then define the CSS ID & Classes to blend this with the code and work as a popup.

Define CSS ID & Classes in Section

• Open the popup section setting. 

• From the section setting, navigate to the Advanced tab, then to the CSS ID & Classes section. Enter ‘popup-section‘ in the CSS ID field and ‘popup-content’ in the CSS Class field.

Define CSS ID & Classes in Icon

• Open the Icon module setting. 

• Then, navigate to the Advanced tab > CSS ID & Classes and add the ‘popup-close’ CSS class to the CSS Class field.

• Save the changes.

Step 3: Add CSS Snippet

Now, the next step is to add a CSS snippet. We’ve prepared the CSS code for you—just copy and paste it.

To add the CSS code, go to your WordPress Dashboard and follow these steps,

• Click on Divi, then Theme Options. 
• Under the General tab, find the Custom CSS section and paste your code there.

Here’s the code:

After you’ve pasted the code, click “Save Changes.”

Step 4: Add JavaScript Snippet

Next, we will need to add some JavaScript code. Navigate to Divi > Theme Options > Integration, and paste the code into the box labeled “Add code to the <head> of your blog.” 

Just copy and paste the below code.

Click “Save Changes” afterward.

Preview the Popup

Our Popup for Divi will look like this. 

Conclusion

Creating a Divi popup without a plugin has its limits, like fewer options for customizing how it appears or works on mobile. Therefore, we recommend DiviFlash, a plugin that comes with everything you need, including popups, and it’s reasonably priced.

If you encounter any issues, please leave a comment below. We will do our best to help you out.