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 build 3 Divi popups and 3 slide-ins and you can just import them into your Divi website. You cann find a demo of each popup right here:View Divi Popups Demo’s
To build these popups I do use a premium plugin called Divi Supreme. Not only can you build popups with this plugin, 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 with a 10% discount. Use coupon code MH10 at checkout.
Get Divi Supreme
Get 10% Off With Coupon Code MH10
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”
Step 2: Divi Supreme Settings
Go to Divi Supreme Pro and under the general settings tab 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 Visibilty enable Popup.
You can learn more about popup triggers here.
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 on the left and adress information on the right.
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.
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.
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”)
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.
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.
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