Des pop-up avec Divi c’est facile !
Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.
Un pop-up peut être intéressant pour mettre quelque chose en avant sur un site. Surtout s’il est déclenché par un bouton (qui appelle à l’action).
Comment ça fonctionne ? C’est simple !
1) Installer le plugin « Popups for Divi »
Vous pourrez facilement le rechercher dans la librairie d’extensions disponibles. De plus, ce plugin est entièrement gratuit.
2) Choisir la section à transformer en pop-up.
Se rendre dans les paramètres de la section. Désormais, vous avec un nouvel onglet intitulé « Popup ». Activer l’interrupteur « This is a Popup » (Ceci est un pop-up). Aussitôt un contour hachuré apparaît autour de la section pour signaler que c’est désormais un pop-up. Entrez en dessous l’ID du pop-up (mot de votre choix, pas d’accent, pas d’espace.)
3) Ajout le lien déclencheur
Le pop-up s’ouvre au clic sur un lien texte ou sur un bouton. Se rendre par exemple sur le lien texte et entrer dans url : #lD_de_votre_popup. Dans l’exemple de l’image ci-dessous c’est #Newsletter.
Et le tour est joué ! Sauvegardez le travail et enregistrez la page puis quittez le Visual Builder. La section pop-up n’apparaît plus mais se révèle au clic sur le lien déclencheur.
À noter que le lien déclencheur doit se trouver sur la même page que la section pop-up.
Déclencher le pop-up sur toutes les pages du site
Utiliser le Thème Builder
a) Si vous souhaitez faire apparaître le pop-up sur toutes les pages de votre site, plutôt que de répéter l’opération précédente pour chaque page mieux vaut placer votre lien déclencheur et votre section (pop-up) dans un en-tête global ou un pied de page global.
C’est là qu’intervient le Thème Builder !
Dans le tutoriel, je souhaite par exemple créer un bouton (Contact) dans mon en-tête qui déclencherait un pop-up avec dedans un formulaire de contact.
Je me rends donc dans le Divi Thème Builder, j’ajoute un en-tête global.
b) Je crée une section avec un menu et un bouton.
Je vous invite à regarder ce tutoriel où je vous explique comment procéder.
c) Je crée en dessous une deuxième section où je crée un formulaire. Je vous invite également à regarder cet autre tutoriel où je vous explique comme paramétrer et designer le module formulaire de contact.
Ensuite comme précedemment, je vais dans les paramètres de la section du formulaire. Dans l’onglet « Popup », j’active l’interrupteur « This is a popup ». En dessous je renseigne l’ID du Pop-up (« Formulaire » dans mon cas).
Puis, je vais dans les paramètres du module « Bouton » de l’en-tête et dans l’URL je donne la cible qui est dans mon cas #Formulaire. Et j’enregistre mes modification et ma page. Je sors du Thème Builder. Désormais, j’ai un en-tête sur toutes les pages de mon site avec un bouton « Contact » qui appelle un pop-up avec un formulaire.
Paramétrage du plugin « Popups for Divi »
Close on Background-Click / Fermer en cas de clic sur l’arrière-plan
Cette option vous permet de décider si le pop-up peut être fermé par un clic à l’extérieur de la fenêtre. Lorsque cette option est désactivée, le pop-up ne peut être fermé que par un bouton de fermeture ou en appuyant sur la touche ESC du clavier.
Close other Popups / Fermer d’autres fenêtres contextuelles
Vous pouvez déciderici si ce pop-up doit fermer automatiquement toutes les autres pop-up lorsqu’il est ouvert.
Enable Exit Intent / Activer l’intention de sortie
Lorsque vous activez le déclencheur Exit Intent, le pop-up s’ouvre automatiquement avant que l’utilisateur ne quitte la page Web actuelle. Notez que l’intention de sortie ne fonctionne que sur les navigateurs de bureau, pas sur les appareils tactiles.
Button color / Couleur du bouton de fermeture
Light / dark (clair ou foncé)
Show Close Button /Afficher le bouton de fermeture
Vous pouvez choisir d’afficher le bouton de fermeture par défaut dans le coin supérieur droit du pop-up.
Transparent Background / Arrière-plan transparent
Vous pouvez choisir si le bouton de fermeture doit avoir une couleur d’arrière-plan ou s’il doit uniquement afficher l’icône.
Add a default Shadow /Ajouter une ombre par défaut
Vous pouvez décider si vous souhaitez ajouter une ombre par défaut à votre pop-up. Vous devez désactiver cette option lorsque vous définissez une ombre de boîte personnalisée pour cette section.
Show Loader / Afficher le chargeur
Décidez si vous souhaitez afficher une animation de chargement à l’intérieur du pop-up. Cette option doit être activée lorsque le pop-up contient une iframe ou un autre contenu chargé dynamiquement.
Visibility / Visibilité
Et enfin, le paramètre visibilité permet de désactiver le popup en vue téléphone, tablette ou ordinateur de bureau.
