Il est possible de créer des pop-ups à partir de sections Divi, et ce, gratuitement ! Grâce au plugin gratuit « Popups for Divi » vous allez transformer n’importe quelle section Divi en une pop-up qui s’ouvre suite à une action de l’internaute (clic) ou à son intention de quitter la page.

Dans ce nouvel article, je vous propose de (re)découvrir cette extension simple à utiliser.

Vous pourrez l’utiliser pour faire apparaître un message texte mais pas seulement ! N’importe quel module Divi pourra apparaître dans une fenêtre surgissante

Voici un aperçu vidéo de ce que vous allez pouvoir créer :

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Un popup ? Une popup ? Pop-up ?

Je vous vois venir ! Une partie des lecteurs de cet article vont dire mais on dit « un popup », d’autres ne seront pas étonnés de lire « une popup », et d’autres penseront mais ça s’écrit « pop-up«  !!!

Pour être honnête, je ne sais jamais quel terme employer… J’ai un petit penchant pour « une popup » ou une « pop-up ».

De toute façon, notre ami Wikipédia nous dit que l’on peut dire un pop-up ou une pop-up.

En français, on pourrait traduire ce terme par « fenêtre surgissante » ou même « fenêtre intruse ». C’est moins fun n’est-ce pas ?

Je pense justement que le mot « pop-up » a été francisé depuis longtemps, tout comme le mot parking ou encore cocktail… Vous vous imaginez dire « trouvons vite une place sur une aire de stationnement car nous allons être en retard pour siroter notre queue de coq »… MDR !!!

Donc, vous le savez déjà, une pop-up est une petite fenêtre qui apparaît sur votre écran d’ordinateur (ou même smartphone) dans le but de vous inciter à faire quelque chose.

J’ai rarement vu (jamais, en fait) une pop-up qui surgit juste vous dire « hey comment ça va ? »

On est bien loin de ça… Une pop-up est généralement mis en place dans un but commercial : un appel à l’action pour inciter les internautes à effectuer une commande ou une inscription.

Sur une échelle de l’agacement de 1 à 10, que pensez-vous de cela :

  • les pop-ups qu’on n’arrive pas à fermer : elle est où cette croix ?
  • les popups qui sont vraiment intrusives : je découvre le site depuis une seconde et demi et on me demande de donner mon email ! C’est fou !
  • les popups non responsives : mais, mais comment je fais ? Aller, hop, je m’en vais !
  • les popups qui s’ouvrent quand « je me barre » : c’est vraiment une bonne idée ça ? Si je m’en vais, c’est que je veux partir, si j’ai envie de revenir, j’enregistre l’onglet dans mon appli dédiée…
  • les popups qui s’ouvrent sur chaque page : pas assez intelligentes pour voir que j’ai déjà cliqué sur la croix… Genre, je surfe sur 10 pages du même site et la pop-up s’ouvre 10 fois…

Bref, il faut que je respire un bon coup, ça va aller (n’hésitez pas à dire en commentaire qu’elle est le type de pop-up que vous détestez le plus)…

Donc, vous l’aurez compris, votre façon d’utiliser une pop-up est déterminante pour votre taux de conversion : si vous êtes trop intrusif, ça ne fonctionnera pas, si vous êtes totalement absent, vous n’aurez aucun retour…

Il faut donc trouver le juste milieu mais ce n’est pas le but de cet article… Je vais vous présenter ce fameux plugin « Popups for Divi » et vous expliquer comment il fonctionne. Donc, pas de théorie marketing ici…

2 – Pop-up ou Modale ?

Petit aparté pour essayer de comprendre la différence entre une pop-up et une fenêtre modale

Donc, comme on vient de le voir, la pop-up est utilisée dans un but commercial, pour inciter l’internaute à passer à l’action. Rien n’est obligatoire et vous pouvez fermer cette fenêtre.

Alors qu’une fenêtre modale est plutôt utilisée à des fins de fonctionnement.

Par exemple, vous cliquez sur un bouton pour créer votre compte et une fenêtre surgit pour récupérer vos informations. Ou bien, vous visitez un site marchand qui vend de l’alcool et une modale surgit pour vous demander si vous êtes bien majeur, vous devrez obligatoirement saisir votre année de naissance pour continuer à naviguer sur le site.

En général, une fenêtre modale prend le contrôle total de l’écran visité et vous ne pourrez pas cliquer ailleurs pour en sortir. La modale passe au-dessus de l’application utilisée, pour en sortir, vous devrez soit saisir les informations demandées, soit annuler votre demande.

3 – Qu’est-ce que « Popups for Divi » ?

Popups for Divi est un plugin gratuit disponible sur le répertoire officiel des extensions WordPress.

Grâce à ce plugin, vous allez créer des popups simples mais son avantage certain est que la fenêtre sera composée d’une section Divi créée à l’aide du Visual Builder.

En savoir davantage sur le Divi Builder.

Cette extension est donc optimisée pour le Divi Builder et ne peut pas fonctionner avec d’autres constructeurs de page.

Des plugins comme Popup Maker sont sympathiques mais vous ne pourrez y pas embarquer de sections construites avec Divi. Excepté si vous bidouillez un peu le code en suivant ce tutoriel.

4 – Comment utiliser Popups for Divi ?

Il vous suffit d’avoir un site WordPress utilisant le thème Divi ou le plugin Divi Builder et d’installer l’extension Popups for Divi disponible ici.

plugin Popups for Divi

Pour cela, rendez-vous à l’onglet Extensions > Ajouter, faites une recherche et cliquez sur Installer puis sur Activer.

Bonne nouvelle, cette extension ne nécessite aucun paramétrage. Elle fonctionne dès son installation.

Le reste du processus de création se passera directement au sein d’une page ou d’un article utilisant le Visual Builder, comme expliqué ci-dessous en vidéo ou plus bas en version step by step :

Ne tardez plus ! Découvrez le thème Divi ici !

Étape 1 – Créez une section Divi

Ça, vous savez faire !

Il vous suffit d’ajouter une nouvelle section au sein de votre layout (une section bleue), d’ajouter une ligne (en vert) puis des modules.

Vous pourrez utiliser n’importe quel module, selon vos besoins. Cela peut être un simple module de texte, un module image, un module de formulaire de contact, un tableau de tarifs etc.

La seule chose que vous devrez impérativement faire, c’est donner un ID CSS et une Classe CSS à cette section, comme vous pouvez le voir dans la capture d’écran ci-dessous :

Ajouter la class Popup ainsi qu'un ID de votre choix.
Ajoutez la class « popup » ainsi qu’un ID de votre choix dans les paramètres de votre section Divi.

Éditez la section Divi que vous souhaitez transformer en popup :

  1. Allez aux réglages de la section (icône de la roue dentée)
  2. Allez à l’onglet Avancé > ID et Classes CSS
  3. Saisissez un ID de votre choix. Pour mon exemple, c’est « popup-price » mais j’aurais pu le nommer « coucou », ça n’aurait rien changer.
  4. Ajoutez une classe « popup ». Ce terme ne doit pas être changé, c’est grâce à cette classe que la section se transforme en pop-up.

Sachez qu’il existe d’autres classes que le plugin permet d’ajouter et qui aura un impact sur le fonctionnement ou l’apparence de la pop-up :

  • « pop-up »
  • « pop-up » + « no-close »
  • « pop-up » + « dark »
  • « pop-up » + « is modal »
  • « pop-up » + « on-exit »
  • « pop-up » + « close »

Plus d’infos sur le site officiel.

Dès que la class « popup » est assignée à une section Divi, celle-ci disparait (côté front-end).

Elle n’est plus visible des internautes pour l’instant.

Pour la faire apparaître, il faudra ajouter un appel à l’action, tel qu’un bouton ou un lien par exemple.

Étape 2 – Créez un appel à l’action

La seconde étape est de créer un bouton, par exemple, ou tout autre type d’appel à l’action permettant d’insérer un lien.

CTA bouton
Créer un appel à l’action via un bouton

Dans l’image ci-dessus, j’ai ajouté un bouton avec un lien vers ma section Divi qui sera utilisée comme popup.

J’ai assigné l’ID « popup-price » sur ma section, alors le lien que je rajoute dans mon appel à l’action est « #popup-price ».

C’est tout ! Votre popup fonctionne !

Vous pouvez même insérer ce lien sur un autre élément comme une image :

CTA image
Créer un appel à l’action sur une image.

Étape 3 – Vérifiez le rendu final…

Enfin, enregistrez toutes vos modifications et vérifiez le rendu final, côté front-end.

Attention, je vous conseille de créer des sections pas plus grandes que la taille de l’écran. Idéalement, votre popup ne doit pas être longue car une partie de celle-ci sera coupée et inaccessible.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

5 – Accédez à la démo de « Popups for Divi » en live !

Vous imaginez tout ce que vous pouvez créer avec cette extension ? Il n’y a plus de limite.

Vous pourrez utiliser les modules de Divi classiques sans oublier que cela peut être idéal pour promouvoir des produits de votre boutique en insérant simplement un « module boutique » au sein de votre section.

Rendez-vous ici pour voir en live la démo de toutes les popups.

Découvrez d’autres plugins compatibles avec Divi… et qui vous veulent vraiment du bien 😉

Pop-up Divi
Plugin "popups for Divi"

Pin It on Pinterest

Shares
Share This