Dans ce tutoriel sur le thème Divi d’Elegant Themes, nous allons voir comment associer un formulaire créé avec le plugin Bloom à un bouton, afin qu’il s’ouvre dans une pop-up.

Bloom est un des plugins premium de l’offre d’Elegant Themes. Il permet de créer très facilement des formulaires afin de capturer des adresses mails. Il offre de nombreuses options d’affichage, de design et également d’intégration de services tiers comme Aweber, Mailchimp et autres.

Dans les différentes options d’affichage, le plugin Bloom propose l’ouverture du formulaire dans une fenêtre pop-up.

S’il est possible d’afficher celle-ci après quelques secondes, un certain pourcentage de scroll ou encore un certain temps d’inactivité, nous allons voir ici comment afficher un formulaire Bloom après avoir cliquer sur un bouton créé dans Divi.

Ce tutoriel Divi n’explique pas comment créer le formulaire avec Bloom, je pars du principe que vous savez le faire.

Identifier la class de votre bouton

Pour identifier la class par défaut de n’importe quel élément dans votre thème Divi, rien de plus simple.

Il vous suffit d’aller dans les propriétés du module, de se rendre dans l’onglet « Avancé » et de se placer dans le champ CSS « Élément principal« . La class apparaît alors en orange.

divi-connaître-class-module-bouton
Cliquer pour agrandir

 

Associer la class à votre formulaire Bloom

Rendez-vous maintenant dans votre formulaire Bloom, dans la partie « Display settings« .

Il faut maintenant cocher « Trigger On Click » et renseigner le champ « CSS Selector (string) » avec la class de votre module.

bloom-configuration-pour-ouverture-pop-up-bouton

Pensez également à choisir « Everything » comme réglage de la rubrique « Display On« .

display-on-everything

Et voilà, votre pop-up Bloom s’ouvre après un clic sur le bouton.

divi-ouverture-popup-bloom-bouton

A lire aussi : Divi – Comment harmoniser les hauteurs des colonnes

 

2 Commentaires

  1. Bonjour
    Merci pour ce tuto.
    J’ai réussi à associer popup bloom et bouton Divi, mais ça ne fonctionne pas avec le module Appel à l’action de Divi
    Y-a-t’il une astuce ?
    Merci par avance.

  2. Bonjour et merci pour ce tuto qui m’a bien aidé !

    Comment faire si on veut connecter à plusieurs boutons ?
    J’ai essayé de rentrer dans bloom : Nom1 ; Nom2
    donc intercaler un point virgule entre mes deux noms de boutons mais ça n’a pas fonctionné.

    Merci par avance si quelqu’un peut m’aider !

Laisser un commentaire

Please enter your comment!
Merci d'entrez votre prénom ici