It is possible to create pop-ups from Divi sections, and this, for free! Thanks to the free plugin "Popups for Divi" you will transform any Divi section into a pop-up that opens following an action by the user (click) or his intention to leave the page.
In this new article, I propose you to (re)discover this simple to use extension.
You can use it to display a text message but not only! Any of the following Divi module will appear in a pop-up window....
Here is a video preview of what you will be able to create:
- 1 - A popup? A popup? Pop-up?
- 2 - Pop-up or Modal?
- 3 - What is "Popups for Divi"?
- 4 - How to use Popups for Divi?
- 5 - Access the "Popups for Divi" live demo!
Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
1 - A popup? A popup? Pop-up?
I see you coming! Some of the readers of this article will say but we say "a popup", others will not be surprised to read "a popup", and others will think but it is spelled "pop-up"!!!
To be honest, I never know what term to use... I have a little penchant for "a popup" or "pop-up".
Anyway, our friend Wikipedia tells us that we can say a pop-up or a pop-up.
In French, this term could be translated as "pop-up window" or even "intruder window". It's less fun, isn't it?
I think the word "pop-up" has been Frenchized for a long time, just like the word parking or cocktail... You can imagine yourself saying "let's quickly find a place on a parking lot because we're going to be late to sip our cocktails"... MDR !!!
So, as you already know, a pop-up is a small window that appears on your computer screen (or even smartphone) to encourage you to do something.
I've rarely (ever, actually) seen a pop-up that just pops up and says, "hey, how are you?"
We are far from that... A pop-up is usually set up for a commercial purpose: a call to action to encourage Internet users to place an order or register.
On a scale of 1 to 10, what do you think of this?
- the pop-ups we can't close: where is that cross?
- popups that are really intrusive: I discovered the site a second and a half ago and I was asked to give my email! This is crazy!
- non-responsive popups: but, but, but how do I do it? Come on, hop, I'm leaving!
- the popups that open when "I'm out": is that a really good idea? If I leave, it's because I want to leave, if I want to come back, I save the tab in my dedicated app...
- the popups that open on each page: not smart enough to see that I've already clicked on the cross... Like, I surf on 10 pages of the same site and the pop-up opens 10 times...
In short, I need to take a deep breath, I'll be fine (don't hesitate to say in commentary that she's the type of pop-up you hate the most)...
So, as you will have understood, the way you use a pop-up is decisive for your conversion rate: if you are too intrusive, it will not work, if you are totally absent, you will have no feedback...
So you have to find the right balance but that's not the purpose of this article... I'll introduce you to this famous plugin "Popups for Divi" and explain how it works. So, no marketing theory here....
2 - Pop-up or Modal?
A little aside to try to understand the difference between a pop-up and a modal window....
So, as we have just seen, the pop-up is used for commercial purposes, to encourage the Internet user to take action. Nothing is mandatory and you can close this window.
While a modal window is used for operating purposes.
For example, you click on a button to create your account and a window appears to retrieve your information. Or, you visit a merchant site that sells alcohol and a modal appears to ask you if you are of legal age, you will have to enter your year of birth to continue browsing the site.
In general, a modal window takes full control of the visited screen and you will not be able to click anywhere else to exit it. The modal passes over the application used, to exit it, you will either have to enter the requested information or cancel your request.
3 - What is "Popups for Divi"?
Popups for Divi is a free plugin available on the official directory of WordPress extensions.
Thanks to this plugin, you will create simple popups but its definite advantage is that the window will be composed of a Divi section created using the Visual Builder.
This extension is therefore optimized for the Divi Builder and cannot work with other page builders.
4 - How to use Popups for Divi?
To do this, go to the Extensions tab > Add, do a search and click Install and then click Activate.
Good news, this extension does not require any configuration. It works as soon as it is installed.
The rest of the pop-up creation process will take place directly within a page or article using the Visual Builder, as explained below:
Don't delay any longer! Discover the Divi theme here !
Step 1 - Turn your Divi section into a Popup
Creating a Divi section, you know how to do that!
You just need to add a new section in your layout (a blue section for example), add a line (in green) and then modules.
Once the design of your section is complete, open the settings window (the gear wheel) and go to the Popup tab.
This new tab appears after installing and activating the Popups for Divi extension.
To turn your Divi section into a Popup, simply enable the "This is a Popup" option and enter a CSS ID in the dedicated field. For this example, my ID is "popup-price".
There, your section is a popup now...
All you have to do is set up his behaviour...
Step 2 - Set the Popup's behavior
Still from the "Popup" tab located in the settings of your section, other options are available to you:
From the Behavior tab, you will find 3 options:
- Close on Background-Click: the popup can be closed when the user clicks anywhere around. If this option is disabled, the user will only be able to close it via the "Close" button or by pressing the ESC key on his keyboard.
- Close other Popups: If you are using several Popups at the same time, this option allows you to close them all at once.
- Enable Exit Intent: this option allows the popup to appear when the user is about to leave your site. You know this type of popup! However, it only works on computers, not on mobiles or tablets.
Close Button Tab:
From the "Close Button" tab, you will be able to configure the close button of your Popup :
- Show Close Button: You can show or hide the close button.
- Button color: choose whether the closing button should be light or dark
- Transparent Background: The close icon (the cross) can have a colored or transparent background.
Layout Tab :
The Layout tab allows you to add a "default" shadow to your popup.
If you prefer to set a custom shadow, use Divi's native feature instead in the settings section on the Style tab > Box Shadow tab.
In this case, deactivate this option.
Visibility Tab :
The Visibility tab simply allows you to define on which type of screen you want this popup to appear.
This can be a good solution for improve the responsiveness of your Divi site and user experience.
More information on the official website.
Step 3 - Create a call to action to display the Popup
The third step is to create a button, for example, or any other type of module to insert a link.
In the image above, I added a button with a link to my Divi section that will be used as a popup.
I have assigned the "popup-price" ID on my section, so the link I add in my call to action is "#popup-price".
That's it! Your popup appears when the user clicks on the link!
You can even insert this link on another element such as a :
You can put this link anywhere, even on a piece of text (link anchor).
Step 4 - Check the final rendering .
Finally, save all your changes and check the final rendering on the front-end side.
Important: I advise you to create sections no larger than the screen size. Ideally, your popup should not be long because part of it will be cut off and inaccessible.
Also note that these popups are not displayed when the site opens. They are popups that are intended to appear either after a click or when leaving the site. If you want a popup to appear as soon as the user arrives on your site, choose instead an extension such as Popup Builder.
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"
5 - Access the demo of "Popups for Divi" live!
Can you imagine how much you can create with this extension? There is no longer any limit.
You can use the classic Divi modules without forgetting that it can be ideal to promote your shop's products by simply inserting a "shop module" within your section.
Come here to see live the demo of all popups.
Discover others Divi compatible plugins... and who really want you to feel good 😉