Divi does not allow you to create popups by default. But thanks to DiviFlash, now you can create popups effortlessly with Divi.

In this blog, we will give you a proper solution for how to create a popup in Divi. Our bet is – this complete guideline won’t leave you with a question behind. 

Let’s get started!

Prerequisite

As we mentioned the default Divi theme doesn’t have built-in options for creating popups. 

So, there is no option without using a third-party plugin. And in search of that, we found DiviFlash.

DiviFlash offers ‘Divi Popup Maker’ which allows you to create stunning popups for Divi using any Divi modules within minutes. You can find a vast customization option according to your needs.

Now to start the process, we have some requirements to fill in –

• Install the latest Divi Theme version
• And the latest version of the DiviFlash Plugin

How to Create Popup in Divi

Step One: Enable DiviFlash Popup Module

Hope you are done with the Divi Theme and DiviFlash installation.

Now our initial step will be to start by navigating – DiviFlash > Dashboard > DiviFlash Plugin Settings in your WordPress dashboard. 

Then, click the ‘Popup Enable’ button to enable the DiviFlash popup. 

Next, we have to hit the ‘Save Changes’ button to make it save in WordPress.

Step Two: Add a Popup

After enabling the popup, you will be shown ‘DF Popups’ on your left dashboard bar. 

Just click on it to launch the DiviFlash Popup extension. Or, follow DF Popups > Add New Popup to add a new popup. 

Then you are free to name your popup. Here we named it ‘Popup Tutorial’.

Note: If you do not see the ‘DF Popups’ in the WordPress sidebar, reload the page. 

Next, we’ll create our popup template with the popup editor through visual builder. 

• Click on the ‘Use The Divi Builder’ button and It will prompt with three options
• Select ‘BUILD FROM SCRATCH’ will let you do the next.

Note: Our goal is to make a popup for beginners, that’s why we are going to build from scratch. But you are always welcome to go with a premade layout or an existing page.

Step Three: Start with Section, Row, and Module

To start any design, Divi visual builder is required to add section, rows, and modules. But here, for the popup, it will let you design by adding a section automatically when you click ‘BUILD FROM SCRATCH’.

1.1: Change Section Settings

As we know, popups always remain background-free. That’s why we have to make it transparent. So, just go over the ‘Section Settings’ –

• Content > Background > Transparent

Additionally, to make the popup with a perfect output, we have to lessen the width. 

• Go to Design > Sizing > Max Width > 665px

That’s it. From now on, we will go for the rest row and modules -. 

1.2: Add New Row

Changing over the section settings, you will visible a green (+) button in the center. 

Tap this to add a row but you will be prompted with a variety of row designs. But for popups, the single-column row is perfect for this design.

After that, here’s a small addition to the ‘Row Settings’ –

• Design > Sizing > Width > 100%

1.2: Add Divi Module

Now the turns up to add divi module, click the gray(+) icon and the module list will appear. 

Here, for our design, we searched for the ‘Advanced Blurb’ module and clicked to insert that.

Note: You are not bound to take only ‘Advanced Blurb’ module. You can make your popup with the existing DiviFlash modules according to your design.

Step Four: Popup Creation

Now, we are in the step of setting up the content to make a popup. We are going to work with only the Content tab and Design tab cause the Advanced tab requires coding skills.

Note: For this step, you have full rights to do customization as you need.

1.1 Content Tab Settings

Content Makeover

In this step, we have to makeover the popup according to our design. So, go to the Content option, and fill the fields with –

• Title: Hey, Wait
• Subtitle: Get 50% off
• Content: Your Next Purchase

Add Button

It’s necessary to put a button in the popup because when a visitor feels like subscribing or following you, he/she can do it with just one click.

To do so, Click on Button > Button Text > write ‘Shop Now’

You can write subscribe, join, sign up, follow, and more depending on how you want it to look.

Else, there are Button URL for redirecting your page and the Button New tab will help your user load the content on the same page or new. They can be customized according to your needs.

Add Image

To add an image and right placement simply go the Image and Icon option and change the following – 

• +Add Image button > Upload an image
• Image or Icon Container Placement > Outside Content Area
• Image or Icon Position > Left
• Image or Icon Alignment > Left
• Image or Icon Item Align > Center

1.2 Design Tab Settings

This design setting will help you to design your popup. 

However, you are not limited to tweaking this design only. There are a vast of different settings available. Go and explore them all. 

Now, Go to the ‘Design’ tab and change the settings of these fields –

Change Image Settings

To change the Image settings, Go over the ‘Image’ and change these fields – 

• Image Container Width > 225px
• Border Width > 8px
• Border Color > #1c242c

Note: Here, you are free to choose any image. And our image setting won’t be suitable for your chosen image. So, please customize them according to your needs. Else, you can download the same image from here.

Add Content Background Color

• Content Area > Background Color > #010d1a

Changing Text Styles and Others

You can make over this step as you like or follow our guidelines. Go to the –

Title

• Title Font > Noto Sans
• Title Font Weight > Bold
• Title Font Style > TT (TrueType font)
• Title Text Alignment > Center
• Title Text Color > #ffffff
• Title Text Size > 48px

Sub title

• Sub Title Font > Noto Sans
• Sub Title Font Weight > Bold
• Sub Title Font Style > TT (TrueType font)
• Sub Title Text Alignment > Center
• Sub Title Text Color > #ffffff
• Sub Title Text Size > 24px

Content

• Body Font > Noto Sans
• Body Text Alignment > Center
• Body Text Color > #ffffff
• Body Text Size > 24px
• Body Line Height > 29px

Button Designing

Button should always look to be appealing. That’s why, we are going over gradient background instead of solid color. You can customize this button on your own.

Now, Go over the ‘Button’, switch to the middle one – gradient, and change the following –

• Turn on the ‘Use gradient background’ button
• Add colors for the button. For the first one – #af40ff and the second one – #02e6f4
• Gradient Direction > 135deg
• Button Alignment > Center
• Button Font > Noto Sans
• Button Font Weight > Bold
• Button Font Style > TT (TrueType font)
• Button Text Alignment > Center
• Button Text Color > #ffffff
• Rounded Corners > 60px

Custom Spacing

To make it look perfect, we need to nurture the spacing. It’s all about the margins and padding things you know.

Get over the ‘Content’ tab and let’s customize –

Field Name	Top	Bottom	Left	Right
Title Margin	30px	20px	40px	40px
Sub Title Margin		8px
Sub Title Padding		5px
Content Margin		30px	40px	40px
Button Margin		40px
Button Padding	14px	14px	40px	40px

Sizing

Move to the ‘Sizing’ and change the ‘Content Width’ to 100%

Step Five: Changing the DiviFlash Popup Settings

We have completed the popup creation process. Now, we have to change the settings to make it live and do the exit button design.

Though, DiviFlash Popup Settings continues with four options – General, Display, Design, and Cookie. But as a beginner, we will only work on two steps – ‘General’ and ‘Design’.

Here, the ‘Design’ option is by default okay and the last ‘Cookie’ option is available if you are an advanced-level user. Else, you can check out our Popup Documentation to know more.

1.1 On General Settings

First, toggle ON the Popup Status Button to activate this popup on your website

Then, select the trigger type you want. Here we are going to use the ‘On Scroll’ type. For this, you have to set the scrolling trigger offset. This setting specifies how far the browser window offsets from the top edge. 

Here we are making it 30%, which means if the visitor scrolls 30% of the pages, the popup will appear. Additionally, you can set the value as pixel too.  

These triggers refer to how you want to show the popup to visitors. In this setting, you are going to be introduced to six trigger-type options. They are –

• Click: Use CSS Selector to define a central area and make your popup visible whenever a visitor clicks on a part of your website. But remember, you have to add CSS class or ID in the Advanced tab of the module settings.
• On Load: Display your popup upon loading. Specify how long the popup will appear after the visitor opens the page.
• On Scroll: This enables a popup when the visitor scrolls your site. You can define here the scrolling length in pixels or %.
• Scroll To Element: Popup appears when visitors point their mouse to a certain part of the web page. Define the CSS selector like the Click trigger type.
• On Exit: When visitors intend to exit your site.
• On Inactivity: A popup display will appear if visitors remain inactive for a while.

1.2 Design Settings

Change these design settings according to below. But you are open to designing your own.

• Animation Style  > Zoom Center
• Animation Duration > 1500

1.3 Exit Button Designing

For user convenience, we need to design the close button. Scroll down the ‘Design Settings’ and change the following –

• Enable the ‘Move Close Button Inside Popup area’ button
• Toggle ON the ‘Close Button Design’
• Select ‘Button Color’ to #0d1b2a or you can pick any color
• Button Font Size > 20

• Button Line Height > 10
• Button Background Color > #ffffff
• Button Padding > Top – 6px, Bottom – 5px, Left – 5px, Right – 5x
• Button Margin > Top – 42px, Left – 15px
• Button Border Radius > 100%

Now click on the ‘Save Changes’ and you’re done with all popup steps.

Preview

That’s it.

Let’s have a look at what we made!

Wrapping Up

This is how you make a Divi popup using DiviFlash, the easiest popup maker for beginners. We’ve also noted some steps where you can design your own.  

Simply, follow these steps to add a popup easily.

Else, you can take a look at our DiviFlash premade popup designs. 

So, please leave a comment below with your design. If you face any problem regarding this, Just give us a knock!