Je vous ai présenté dans un précédent tuto une méthode permettant de créer facilement des fenêtres modales avec le Divi Builder, en n’utilisant que quelques lignes de code.
Si vous voulez aller plus loin, ou ne souhaitez vraiment pas mettre les mains dans le code, le plugin Divi Overlays est tout indiqué car il apporte des options nombreuses et intéressantes que je vais maintenant vous détailler.
Où trouver Divi Overlays ?
Divi Overlays est édité par Divi Life, une société appartenant au développeur Tim Strifler dont vous avez peut-être entendu parler si vous fréquentez un peu la communauté Divi anglophone.
Divi Life était connue, avant Divi Overlays, pour son thème enfant pour Divi : Royal Commerce. Celui-ci, comme son nom l’indique, est dédié à la vente en ligne (via WooCommerce).
Divi Overlay est vraiment très bon marché, car disponible à partir 15 $ pour un site (1 an de mises à jour et de support).
Ensuite, d’autres formules existent pour des licences en lot et ce, jusqu’à la “lifetime” à 129 $, qui avait été réclamée par les utilisateurs peu de temps après la sortie du plugin en v1.
Premiers pas avec Divi Overlays
Installons le plugin
Après avoir fait l’acquisition de Divi Overlays, il nous suffit de télécharger le fichier ZIP et de l’installer comme n’importe quel plugin.
Une fois celui-ci activé, il nous demande de saisir notre clé API obtenue lors de l’achat, ce qui nous permettra de bénéficier des mises à jour durant le temps indiqué par les conditions de la licence choisie (à l’année ou à vie).
Ensuite, nous voyons apparaitre dans le menu de WordPress une nouvelle rubrique intitulée Divi Overlays.
Empressons-nous alors de cliquer sur Add New !
Faisons le tour du propriétaire
La page qui s’affiche vous fera penser à une page d’article, ce qui est tout à fait normal car Divi Overlays créé un “custom post type” (un “type article personnalisé” en français dans le texte), un peu comme WooCommerce et ses produits, par exemple…
De prime abord, pour une utilisation basique de Divi Overlays, cette info ne vous apportera pas grand chose, mais sachez que ça laisse la porte ouverte à pas mal de possibilités de personnalisation au niveau du contenu. Mais ça, ça fera probablement l’objet d’un futur article. 😉
La mise en forme du contenu
Vous avez certainement tout de suite dû remarquer le gros bouton violet qui, au clic, nous donne donc accès à toutes les fonctionnalités du Divi Builder (hormis l’édition en front via le Visual Builder).
Mais vous pouvez aussi très bien choisir de travailler dans l’éditeur classique de WordPress.
Les options ci-dessous nous permettront de sélectionner la couleur de fond de notre modale et la couleur du texte de notre contenu.
Mais gardez toujours à l’esprit que les réglages faits via le Divi Builder auront toujours le dernier mot.
Les différents réglages
Les déclencheurs manuels
Dans l’ordre, voici la première metabox à laquelle nous avons à faire, tout en haut à droite de l’écran :
Elle liste les identifiants uniques correspondants à la modale sur laquelle nous sommes en train de travailler.
- Le premier (CSS ID) est à utiliser si nous choisissons comme déclencheur un bouton, une image ou un simple hyperlien.
- Le second (Menu ID) est à utiliser si nous choisissons comme déclencheur un élément de menu.
Les animations
Cette deuxième metabox permet de sélectionner le type d’animation qui sera jouée lors de l’affichage de la modale et lors de sa fermeture.
On a tout de même le choix entre 11 effets différents !
Les réglages complémentaires
Cette troisième metabox permet de régler 3 options importantes :
- CSS Selector Trigger nous autorise à ajouter un identifiant de déclencheur complémentaire à celui présent dans la première metabox.
C’est utile dans le cas où nous avons besoin d’afficher 2 modales différentes à partir d’un même module. Par exemple, dans un slider, un premier bouton peut afficher une modale et un second bouton une autre modale. - Prevent main page scrolling : une fois coché, le scroll sera désactivé (sur le contenu de la page en arrière-plan) quand la modale sera affichée.
- Enable URL Trigger : une fois coché, nous pouvons choisir sur quelles pages ou articles la modale pourra être affichée.
La personnalisation du bouton “fermer”
La capture d’écran parle d’elle-même : plusieurs réglages permettent de styler le bouton “fermer”, voire même de le masquer.
Remarquez mon super bouton de style “XBOX” ! :p
Les déclencheurs automatiques
Un autre fonctionnalité importante de Divi Overlays est la possibilité d’afficher nos modales automatiquement, selon certaines conditions.
La première liste déroulante permet de choisir un type de déclencheur automatique qui définit quand s’affiche la modale :
- Timed delay : on précise un délai calculé en secondes à partir de l’affichage de la page
- Scroll percentage : on précise une plage de scroll en pixels ou en pourcents
- Exit intent : quand le visiteur quitte la page
Comment utiliser les déclencheurs
Afficher une modale à partir d’un bouton
Rendons-nous sur la page où nous souhaitons afficher notre modale, ouvrons le Divi Builder et insérons un module bouton.
Dans les paramètres du bouton contenu -> lien -> URL bouton, saisissons # suivi du mot ou du texte de notre choix (ça n’a pas d’importance du moment où il n’y a pas d’espace ou de caractères spéciaux).
Ensuite, il nous faut indiquer le fameux CSS ID.
Pour ce faire, copions l’identifiant correspondant à notre modale (vous vous souvenez, celui qui est dans la première metabox Manual Triggers) et allons le coller dans les paramètres de notre bouton avancé -> ID et classes CSS -> ID CSS
Afficher une modale à partir d’un hyperlien
Rendons-nous sur la page où nous souhaitons afficher notre modale, ouvrons le Divi Builder et insérons un module code.
Dans les paramètres du module contenu -> texte -> contenu, saisissons le shortcode suivant (remplacez ‘258’ par votre identifiant) :
[pastacode lang=”markup” manual=”%5Boverlay_content%20unique-id%20%3D%20’258’%5D” message=”” highlight=”” provider=”manual”/]
Ensuite, si c’est n’est pas encore fait, créons un module texte pour ajouter notre hyperlien.
Dans les paramètres du module contenu -> texte -> contenu, saisissons un code du type :
[pastacode lang=”markup” manual=”%3Ca%20id%3D%22overlay_unique_id_258%22%3EMon%20lien%20hypertext%3C%2Fa%3E” message=”” highlight=”” provider=”manual”/]
Alors bien sûr, le contenu de votre hyperlien peut être autant du texte comme dans mon exemple ci-dessus, qu’une image avec la balise <img> et le code adéquat.
Afficher une modale à partir d’une module image
Rendons-nous sur la page où nous souhaitons afficher notre modale, ouvrons le Divi Builder et insérons un module image.
Vous allez voir que le principe est similaire à celui employé pour afficher une modale à partir d’un module bouton.
Dans les paramètres du bouton contenu -> lien -> URL du lien, saisissons # suivi du mot ou du texte de notre choix (ça n’a pas d’importance du moment où il n’y a pas d’espace ou de caractères spéciaux).
Une fois encore, nous devons indiquer le CSS ID.
Pour ce faire, copions l’identifiant correspondant à notre modale (pour rappel, celui qui est dans la première metabox Manual Triggers) et allons le coller dans les paramètres de notre module image, avancé -> ID et classes CSS -> ID CSS
Afficher une modale à partir d’un lien de menu
Il peut y avoir des cas où nous aurions besoin d’appeler une modale au clic sur un élément présent dans le menu de notre site.
Pour ce faire, copions le Menu ID qui se trouve lui aussi dans la première metabox Manual Triggers.
Rendons-nous maintenant dans la rubrique de gestion des menus de WordPress située pour rappel dans Apparence -> Menus :
Sur la page qui s’affiche, cliquons tout en haut sur Options de l’écran et cochons l’option Relation avec le propriétaire du site lié (XFN) :
Nous pouvons désormais configurer notre lien de menu en y ajoutant le Menu ID et en précisant bien # dans le champ Adresse web :
Pour conclure
Nous venons donc de faire un tour presque complet de Divi Overlays, je vous renvoie vers la documentation officielle si vous souhaitez en savoir plus.
Sachez également que le plugin inclut un widget permettant d’ajouter un déclencheur depuis un élément situé dans la sidebar, le footer…
Il nous offre aussi la possibilité de personnaliser le bouton de fermeture de la modale. Pour cela, il suffit d’ajouter dans notre overlay un élément (de type hyperlien, bouton…) avec la classe close-divi-overlay et celui-ci supplantera la croix affichée par défaut.
À vous maintenant de trouver des utilisations judicieuses à ce plugin.
Généralement, les modales fonctionnent bien pour afficher des formulaires divers (contact, login, optin…) mais peuvent aussi être utiles pour publier une vidéo en plein écran (ce que Divi n’autorise pas nativement).
Vous trouverez sur le site de DiviLife, plusieurs exemples d’utilisations, les démos des différentes animations, etc.
Quoi qu’il en soit, si vous ne voulez pas faire fuir vos visiteurs, faites attention à ne pas en abuser… 😉
