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

 

Divi – Comment ouvrir une pop-up Bloom en cliquant sur un bouton ?
5 (100%) 2 votes
Recevez votre guide GRATUIT pour trouver un sujet de blog rentable!
Placeholder Placeholder

encart-ET