fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

Créer un pop-up sur un site Divi

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).

Licence Divi
Formation WordPress
.

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.

popups for Divi

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.)

Changer la section en pop-up

 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.

Lien déclencheur du pop-up

À noter que le lien déclencheur doit se trouver sur la même page que la section pop-up.

Hostinger hébergement web

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.

popups for Divi
Code Promo Divi Supreme

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.

section 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).

lien bouton

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.

 

Paramétrage du plugin
Thinkific one month free

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

Vous serez peut-être également intéressé par ces articles …

Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Offrez-moi un café! Merci :)