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:
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 creation process will take place directly within a page or article using the Visual Builder, as explained below in video or below in step by step version:
Don't delay any longer! Discover the Divi theme here !
Step 1 - Create a Divi section
You know how to do that!
All you have to do is add a new section within your layout (a blue section), add a line (in green) and then modules.
You can use any module, according to your needs. This can be a simple text module, an image module, a contact form module, a price table etc.
The only thing you will have to do is give a CSS ID and a CSS Class to this section, as you can see in the screenshot below:
Edit the Divi section you want to transform into a popup:
- Go to the section settings (gear icon)
- Go to the Advanced tab > CSS IDs and Classes
- Enter an ID of your choice. For my example, it's "popup-price" but I could have named it "hello", it wouldn't have changed anything.
- Add a "popup" class. This term should not be changed, it is thanks to this class that the section is transformed into a pop-up.
Be aware that there are other classes that the plugin allows to add and that will have an impact on the functioning or appearance of the pop-up:
- "pop-up" +"no-close"
- "pop-up" +"dark"
- "pop-up" + "is modal"
- "pop-up" +"on-exit"
- "pop-up" +"close"
More information on the official website.
As soon as the "popup" class is assigned to a Divi section, it disappears (front-end side).
It is no longer visible to Internet users for the moment.
To make it appear, you will need to add a call to action, such as a button or link for example.
Step 2 - Create a call to action
The second step is to create a button, for example, or any other type of call to action 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 to my section, so the link I add to my call to action is "#popup-price".
That's all! That's all! Your popup works!
You can even insert this link on another element such as an image:
Step 3 - Check the final rendering...
Finally, save all your changes and check the final rendering on the front-end side.
Be careful, I advise you to create sections no larger than the size of the screen. Ideally, your popup should not be long because part of it will be cut off and inaccessible.
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 😉