How to Create a Divi Popup

by | Jun 2, 2020

How to create a Divi Popup

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:

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

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”
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 Visibilty 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 on the left and adress 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.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

4 Shares
Share4
Tweet
Pin
Buffer