How to Create a Divi Popup

Mark Hendriksen | June 2, 2020 | 0 Comments

Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

Divi popups are a great way to grab the attention of your website visitors. You can use them to get more leads or to guide them through your website.

In this tutorial, You will learn how to build a popup for Divi. I have built 3 Divi popups and 3 slide-ins and you can just import them into your Divi website. You can find a demo of each popup right here:

View Divi Popups Demo’s

To build these popups I do use a premium Divi plugin called Divi Supreme. Not only can you build popups with this plugin, but it also comes with 40+ modules to enhance your website. Read also my complete review of Divi Supreme.

I am a big fan of Divi Supreme and I have written more tutorials for this plugin. You can find those here:

Divi Supreme is a premium plugin. However, I got a special discount from the developers of this plugin. You can get it at a 10% discount. Use coupon code MH10 at checkout.

Download The Popup Layouts For Divi

I have made it very easy for you to build these popups. You can just download and import the popup layouts into Divi. So you do not need to recreate them.

Step 1: Download, unpack and import

Download the layouts here.
Unpack the download folder
Go to Divi > Divi Library > Import and Export
Import the downloaded file “Popups and slide-ins”

Import Divi popups

Step 2: Divi Supreme Settings

Go to Divi Supreme Pro and under the general settings tab enable Divi Popup.

Enable Divi popup

How To Trigger The Popups

You can find the trigger settings in any Divi module on a page. I will be using the button module for this.

Go to the advanced tab of the module and under Visibility enable Popup.

You can learn more about popup triggers here.

Popup trigger settings

In the section below I will describe the settings I have used for each popup and slide-in.

Popup #1

The first popup has a contact form module on the left and address information on the right.

Popup with contactform

Popup 1 Settings

Go to your module and then to the advanced tab and use the following settings:

Popup type: Layout
Popup (Divi Library): Popup 1
Trigger on: Button(click)
Close Popup Triggers: Outside Popup
Use Auto Close Popup: No
Entrance Animation In: Fade In
Exit Animation Out: Fade Out
Popup Position: Center
Popup Position Type: Absolute
Use Fullwidth: No
Popup Max Width: 900px
Show Overlay: Yes
Overlay Background Color: #000000
Show Close Button: Yes
Close Button Placement: Inside
Close Icon Font Size: 24px
Close Button Icon: Default
Close Button Background Color: #14243e
Close Button Icon Color: #ffffff

Popup #2

The second popup that I have created is a fullscreen popup. I have populated the popup with contact information and a contact form.

Fullscreen popup

Popup 2 Settings

Go to your module and then to the advanced tab and use the following settings:

Popup type: Layout
Popup (Divi Library): Popup 2
Trigger on: Button(click)
Close Popup Triggers: Outside Popup
Use Auto Close Popup: No
Entrance Animation In: Fade In
Exit Animation Out: Fade Out
Popup Position: Center
Popup Position Type: Absolute
Use Fullwidth: Yes
Show Overlay: No
Show Close Button: Yes
Close Button Placement: Inside
Close Icon Font Size: 35px
Close Button Icon: Default
Close Button Background Color: e02b20
Close Button Icon Color: #ffffff

Popup #3

The third popup is a good one for capturing new leads. I have used a dark overlay so the popup will pop out nicely.

capture new leads with this popup

Go to your module and then to the advanced tab and use the following settings:

Popup type: Layout
Popup (Divi Library): Popup 3
Trigger on: Button(click)
Close Popup Triggers: Outside Popup
Use Auto Close Popup: No
Entrance Animation In: Fade In
Exit Animation Out: Fade Out
Popup Position: Center
Popup Position Type: Absolute
Use Fullwidth: No
Popup Max Width: 700px
Show Overlay: Yes
Overlay Background Color: #000000
Show Close Button: Yes
Close Button Placement: Inside
Close Icon Font Size: 40px
Close Button Icon: Default
Close Button Background Color: Transparent
Close Button Icon Color: #000000

Slide-in #1

The first slide-in slides from the right side of your page. I use these type of slide-ins often in my designs. I like to use it with a button trigger in my navigation. You can see it in action on my bright design (click on the navigation button “Get in Touch”)

slide-in right

Go to your module and then to the advanced tab and use the following settings:

Popup type: Layout
Popup (Divi Library): Slide-in 1
Trigger on: Button(click)
Close Popup Triggers: Outside Popup
Use Auto Close Popup: No
Entrance Animation In: Slide In Right
Exit Animation Out: Slide Out Right
Popup Position: Center Right
Popup Position Type: Fixed
Use Fullwidth: No
Popup Max Width: 450px
Show Overlay: No
Show Close Button: Yes
Close Button Placement: Inside
Close Icon Font Size: 24px
Close Button Icon: Default
Close Button Background Color: #01ffc0
Close Button Icon Color: 14243e

Slide-in #2

This one is a fullscreen slide-in from the bottom of the page. I have populated this slide-in with a pricing module.

Fullscreen slide-in

Go to your module and then to the advanced tab and use the following settings:

Popup type: Layout
Popup (Divi Library): Slide-in 2
Trigger on: Button(click)
Close Popup Triggers: Outside Popup
Use Auto Close Popup: No
Entrance Animation In: Slide In Up
Exit Animation Out: Slide Out Down
Popup Position: Bottom Right
Popup Position Type: Absolute
Use Fullwidth: Yes
Show Overlay: No
Show Close Button: Yes
Close Button Placement: Inside
Close Icon Font Size: 40px
Close Button Icon: Default
Close Button Background Color: #ef4137
Close Button Icon Color: #ffffff

Slide-in #3

This slide-in slides from the left side of the page. I have populated this one with service boxes and a call to action.

slide-in from the left

Go to your module and then to the advanced tab and use the following settings:

Popup type: Layout
Popup (Divi Library): Slide-in 3
Trigger on: Button(click)
Close Popup Triggers: Outside Popup
Use Auto Close Popup: No
Entrance Animation In: Slide In Left
Exit Animation Out: Slide Out Left
Popup Position: Center Left
Popup Position Type: Fixed
Use Fullwidth: No
Popup Max Width: 450px
Show Overlay: No
Show Close Button: Yes
Close Button Placement: Inside
Close Icon Font Size: 30px
Close Button Icon: Default
Close Button Background Color: 001c38
Close Button Icon Color: #ffffff

If you have any questions let me know in the comments.

You Might Also Like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

Leave a Comment Cancel reply

0 Shares