Popups for Divi: a very clever free plugin!

Updated on 08/05/2020 | Published on 25/11/2019 | 26 comments

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.

Learn more about the Divi Builder.

This extension is therefore optimized for the Divi Builder and cannot work with other page builders.

Plugins like Popup Maker are nice but you won't be able to take on sections built with Divi. Unless you tweak the code a little bit by following this tutorial.

4 - How to use Popups for Divi?

All you need is a WordPress site using the Divi theme or the Divi Builder plugin and install the Popups for Divi extension available here.

plugin 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.

You will be able to use any module, according to your needs. It can be a simple text modulea image modulea contact form modulea rate tableetc.

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".

Convertir une section Divi en popup
Convert a Divi section into a popup

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:

Behavior tab:

Popup Behavior
Behavior tab

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:

Popup Close
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 :

Popup Layout

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 :

Popup Visibility

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.

CTA bouton
Create a call to action via a button

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 :

CTA image
Create a call to action on an image.

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 😉

Pop-up Divi
Plugin "popups for Divi"
Divi Section Pop-up

1,719 words

7

You should like it too:

Divi Switch : un plugin multifonction qui vous veut du bien !

Divi Switch: a multifunctional plugin that wants you to feel good!

You are looking for ways to remove the grey line under the menu, make your phone number clickable in the top menu, change the hamburger icon or even the color of the "back up" button... Don't waste any more time coding and install Divi Switch ! A multifunctional plugin in-dis-pen-sa-ble!

26 Commentaires

  1. Speckens

    Bonjour,
    Ok, ça marche avec un call to action pour afficher la popup. Comment fait-on pour que la popup s’affiche automatiquement à l’ouverture de la page ? Merci
    Julien

  2. Lycia Diaz

    Salut Julien,
    Tu ne peux pas afficher la popup à l’ouverture avec ce plugin. Si tu veux ça, tu dois utiliser Popup Builder https://wordpress.org/plugins/popup-builder/
    Mais tu ne pourras pas y insérer une section Divi à l’intérieur.
    😉

  3. Sandra

    Bonjour,
    J’ai essayé, et essayé mais je n’ai pas réussi à faire fonctionner.
    La section a bien été créée, monCSS-ID s’affiche en haut de la section. Quand je clique sur l’image où je veux le popup, Il s’affiche en bas à gauche monurl.com/#monCSS-ID mais il ne va nul part, rien s’affiche, il ne se connecte pas. 🙁
    J’ai essayé sur la même page, nouvelle page etc etc – rien. J’ai vidé le cache, essayé un autre « browser », ET oui, tout est à jour.
    Pour l’instant c’est un site de test sans beaucoup de plugins.

    C’est dommage. Ce sera très sympa.
    Avez-vous des suggestions?
    Merci

  4. Muriel

    comment faire pour rendre obligatoire l’entrée d’un N° de téléphone pour pouvoir télécharger le lien du popup ?

  5. Lycia Diaz

    Salut Muriel. Je ne pense pas que ce plugin te permette de faire ce dont tu as besoin. Peut-être que Bloom te permet de le faire ou un autre plugin d’optin…

  6. Lycia Diaz

    Salut Sandra. C’est bizarre, il y a une étape que tu dois rater car pour moi, tout fonctionne. J’utilise même ce plugin en production pour mon Calendrier de l’Avent Spécial Divi : https://astucesdivi.com/calendrier-avent-freebies/

  7. Floriane Besse

    bonjour, j’ai besoin d’aide… la section texte, soit le popup, reste visible tout le temps et non seulement quand je clique sur le bouton.

    J’ai donc un bouton « Clic » avec comme lien « #popup-ini »
    Et une section texte avec ID CSS « popup-ini » et Class CSS « popup ».

    Merci pour votre aide

  8. Lycia Diaz

    Bonsoir Floriane.
    Je ne peux pas vous dire d’où ça vient, il faudrait que je regarde de plus près mais si vous avez suivi à la lettre le tuto, ça devrait marcher 😉

  9. Floriane Besse

    Ben j’ai noté exactement ce que j’ai mis dans mon premier message. Je ne comprends pas pourquoi ça ne va pas.

  10. Philippe

    Bonjour Lycia,
    Soit j’ai pas tout compris soit c’est pas possible ???
    J’ai un module texte et j’aimerai que lorsque l’on clique sur le texte un popup s’ouvre avec le formulaire contact de Divi.
    Merci pour vos tuto qui mon déjà bien aidé.
    Cordialement
    Philippe

  11. Lycia Diaz

    Merci Philippe 😉
    Autre solution : j’ai mal expliqué ?
    Pourtant ce plugin te permet bien de faire ce dont tu as besoin. Il est justement fait pour embarquer des modules de Divi dans des popups. Il faut juste bien mettre les ID et Classes CSS aux bons endroits.

  12. janjaq

    Effectivement ça ne marche pas, le le module qu’on assigne comme modal ne disparait pas. Rien ne fonctionne. Need help please. Si vous le voulez bien contacter mon adresse mail que je renseigne et je vous ferais un partage d’écran. Merci.

  13. Lycia Diaz

    Bonjour Janjaq,
    Ce plugin fonctionne parfaitement, je l’utilise et je n’ai pas de souci. Donc, soit vous avez un conflit, soit vous ne placez pas la bonne classe ou ID CSS au bon endroit. Il faut juste suivre à la lettre ce qui est inscrit dans le tuto. Sinon, vous pouvez également vous rapprocher de la documentation officielle du plugin (https://fr.wordpress.org/plugins/popups-for-divi/), voire ouvrir un ticket si le bug persiste 😉

  14. Mamour Ly

    Bonjour,
    Le PopUp s’affiche mais l’image à l’intérieur, elle ne s’affiche pas. Vous savez pourquoi ?

  15. Lycia Diaz

    Non, je vois pas… C’est bizarre.

  16. Alexandre

    Bonjour, désolé mais ça ne fonctionne pas du tout .

    Il faut simplement remplir le champ CSS class (par exemple: newsletter) et ensuite dans bloom, il ne faut pas mettre a# mais juste un point (par exemple: .newsletter)

  17. Patrick V.

    Bonjour à tous,

    Après quelques recherches (https://wordpress.org/support/topic/automatic-trigger/):

    – ouverture automatique après 5 secondes:

    window.setTimeout(function(){
    DiviPopup.openPopup(‘#get-newsletter’)
    }, 5000);

    Salutations à tous

  18. Lycia Diaz

    Super !

  19. Mihary

    Bonjour Lycia,

    Un très grand merci pour ces explications.
    De mon côté tout a fonctionné 🙂

    Avant, j’utilisais Popup Maker, mais Popups for Divi est bien meilleur et bien plus simple à utiliser.

    PS : Attention, pour que ça fonctionne, il faut que la popup ainsi que le bouton (ou image ou texte) pour appeler la popup doivent être sur la même page. Autrement, la popup ne s’ouvrira pas.

  20. Lycia Diaz

    Merci à toi !

  21. Pierrick Camel

    Bonjour à tous,

    Est-il possible dans une pop-up d’ajouter un bouton qui ferme la pop-up?

    En gros j’aimerais bien faire un choix avec 2 boutons dans ma pop-up :

    Option 1: recevoir un cadeau
    Option 2: fermer la pop-up (sans utiliser la petite croix en haut à droite)

    Bien cordialement,
    Pierrick.

  22. Lycia Diaz

    Salut Pierrick, à ma connaissance je ne crois pas mais tu peux poser la question au développeur du plugin

  23. Marius

    Bonjour,

    La fonction pop-up ne s’affiche pas lorsque j’installe le plugin.

  24. Lycia Diaz

    Salut Marius, tu as peut-être un conflit de plugin ?

  25. Deschamps

    Merci, mais il semble que le pop-up soit un handicap pour le référencement.
    Il est conseillé de préférer l’utilisation de pop-in, pourquoi pas un post sur la bonne méthode pour les mettre en oeuvre ?

  26. Lycia Diaz

    Merci Pierre.
    Oui c’est une idée à creuser 😉

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This