Rejoignez notre liste et recevez les dernières nouveautés. Abonnez-vous pour ne manquer aucune mise à jour.
Table des matières
Vidéo pas à pas
Qu’est-ce qu’une fenêtre contextuelle ou un popup ?
Une fenêtre contextuelle, un message contextuel ou, en anglais, un popup est une fenêtre qui apparaît (« émerge ») pendant que vous naviguez sur un site web. Ils sont utilisés pour de nombreuses raisons : offrir des réductions, des notifications, encourager l’inscription à une newsletter, promouvoir du contenu, etc.
Mais nous n’allons pas nous étendre davantage sur les popups, car ce sujet ne traite pas de leur création, mais de la manière de les ouvrir via un lien similaire à celui-ci :
Nous apprendrons également dans ce sujet comment configurer notre fenêtre contextuelle pour qu’elle ait un lien comme celui-ci : #lien-popup
« lien-popup » est un nom inventé par nous ; nous verrons plus tard comment établir l’ID que nous souhaitons pour ouvrir notre popup.
Rendre notre popup actif sur l’ensemble du site web
Une chose très importante que nous devons faire est d’établir la condition que notre fenêtre contextuelle soit active sur Tout le site. Imaginez que nous ajoutions le lien dans un article de blog ou dans notre menu principal ; si nous n’avons pas cette condition d’affichage, le popup pourrait ne pas être actif et ne pas s’ouvrir dans certaines parties de notre site web. Voyons comment procéder.
Ouvrez le message contextuel avec Elementor.
Cliquez sur la petite flèche située juste à droite du bouton Mettre à jour > cliquez sur l’option Conditions d’affichage du menu contextuel.
Une fenêtre contextuelle s’ouvrira avec plusieurs onglets sur la gauche, laissez celui qui est Conditions > cliquez sur le bouton Ajouter une condition et laissez la condition par défaut qui est Tout le site.
Il ne nous reste plus qu’à enregistrer en cliquant sur le lien Enregistrer et fermer ou sur le bouton Suivant, puis sur le bouton Enregistrer et fermer.
Maintenant, notre fenêtre contextuelle sera active sur l’ensemble de notre site web. Il n’est pas nécessaire de configurer des déclencheurs ou des règles avancées si vous n’en avez pas besoin.
Comment obtenir le lien qui ouvre notre message contextuel
Nous allons voir trois façons d’obtenir le lien qui ouvre notre popup. Nous devons savoir que chaque popup a son propre lien et que celui-ci ne varie pas, donc une fois que nous l’avons obtenu, nous pouvons l’utiliser n’importe où sur notre site web, autant de fois que nous le souhaitons.
Ajouter l’action d’ouverture de fenêtre contextuelle à un widget
Pour les deux premières méthodes, nous devons ajouter l’action d’ouverture du popup à un widget Elementor. Nous pouvons utiliser n’importe quel widget disposant du champ de lien ; dans cet exemple, nous allons le faire avec le widget Bouton.
Cliquez sur le bouton pour le sélectionner.
Dans l’onglet Contenu, cliquez sur le bouton Balises dynamiques de la propriété Lien > sélectionnez l’action Fenêtre contextuelle.
Cliquez sur Fenêtre contextuelle > cliquez sur Tout et saisissez le nom que vous avez donné au popup ; une fois que vous commencez à taper, des résultats correspondants s’afficheront, cliquez maintenant sur le nom du popup.
Enfin, cliquez sur le bouton Mettre à jour pour enregistrer les modifications.
Une fois cela fait, le bouton aura l’action d’ouvrir le popup et vous pourrez obtenir le lien via celui-ci.
Obtenir le lien de la fenêtre contextuelle depuis l’inspecteur du navigateur
Une fois que nous avons ajouté l’action d’ouvrir la fenêtre contextuelle à un widget, dans ce cas un bouton, il suffit d’ouvrir la page où nous l’avons inséré dans le navigateur et de suivre ces étapes :
Ouvrez la page où se trouve le bouton dans le navigateur (dans ce cas, Google Chrome).
Faites un clic droit sur le bouton > cliquez sur Inspecter dans le menu contextuel.
Depuis l’Inspecteur, faites un clic droit sur le lien qui inclut l’action d’ouverture, nous pouvons le distinguer car il commence par #elementor-action… > cliquez sur Modifier l’attribut dans le menu contextuel.
Maintenant, le lien s’affichera en surbrillance, ce qui signifie qu’il est sélectionné et vous pouvez le copier en appuyant sur CTRL+C ou en faisant un clic droit dessus > cliquez sur Copier dans le menu contextuel.
Nous avons maintenant l’URL qui déclenche l’action d’ouverture du popup. Nous pouvons la coller dans un fichier texte pour ensuite la copier-coller et l’utiliser où nous voulons.
Obtenir le lien interne de la fenêtre contextuelle depuis un widget
Une autre façon d’obtenir le lien interne de la fenêtre contextuelle est de copier le lien directement depuis le widget, dans ce cas depuis le bouton. Voyons comment faire :
Faites un clic droit sur le bouton > cliquez sur Copier l’adresse du lien
Utilisez le bloc-notes pour coller le lien avec CTRL+V
Sélectionnez et supprimez tout ce qui se trouve après #elementor-action…
Et voilà, nous avons le lien qui ouvre le popup. Le bouton a déjà rempli sa fonction et nous pouvons le supprimer, cela n’aura aucune incidence car le lien est toujours le même pour ce popup.
Obtenir le lien interne de la fenêtre contextuelle avec un plugin
Ce plugin a une seule fonctionnalité : ajouter un bouton à droite de chaque modèle de fenêtre contextuelle qui, une fois cliqué, affiche le lien qui ouvre le popup afin que vous puissiez le copier et l’utiliser où vous voulez.
Dans la liste des modèles, vous trouverez le bouton Afficher les URL à droite de chacun d’eux ; cliquez dessus et un popup s’affichera avec tous les liens disponibles pour ce message contextuel.
Pour afficher le popup, nous n’avons besoin que du premier (Ouvrir), mais ce plugin en fournit également trois autres : Basculer, Fermer et Fermer (Ne plus afficher).
Configurer notre propre lien pour ouvrir un popup
Nous pouvons également personnaliser et raccourcir le lien de nos popups, pour cela suivez ces étapes :
Ouvrez le popup dans le constructeur Elementor.
Allez dans les réglages de la fenêtre contextuelle en cliquant sur l’icône des réglages dans le coin inférieur gauche.
Dans l’onglet Avancé > Ouvrir par sélecteur, créez un code court de lien d’activation d’ancre, exemple : a[href="#enlace-popup"]
Appliquez ce lien n’importe où sur votre site web en le liant au lien d’activation d’ancre (exemple : #lien-popup)
Le texte #lien-popup est à notre choix, nous pouvons établir le nom que nous voulons toujours sans espaces ni caractères spéciaux et de préférence en minuscules. N’oubliez pas de définir les conditions d’affichage de la fenêtre contextuelle sur Tout le site.
Comment appliquer le lien obtenu pour ouvrir la fenêtre contextuelle
Une fois que nous avons le lien, nous pouvons l’appliquer à n’importe quel lien créé avec Elementor, Gutenberg ou même dans le menu de notre site web. Voyons quelques exemples.
Appliquer le lien au widget Éditeur de texte
Dans l’Éditeur de texte, sélectionnez le texte auquel vous souhaitez appliquer le lien d’ouverture du popup.
Cliquez sur l’outil Insérer/Modifier un lien (Ctrl+k).
Ensuite, appuyez sur Ctrl+V pour coller le lien, en tenant compte du fait que nous aurons préalablement copié le lien avec Ctrl+C.
Il ne reste plus qu’à cliquer sur le bouton Mettre à jour et à tester notre lien d’ouverture de popup.
Appliquer le lien au texte d’un article avec l’éditeur Gutenberg
Nous pouvons l’appliquer non seulement à un texte, mais aussi à un bouton ou à tout élément qui permet d’ajouter des liens.
Ouvrez un article dans l’Éditeur Gutenberg, sélectionnez le texte auquel vous souhaitez appliquer le lien d’ouverture du popup.
Cliquez sur l’outil Lien Ctrl+K.
Ensuite, appuyez sur Ctrl+V pour coller le lien, en tenant compte du fait que nous aurons préalablement copié le lien avec Ctrl+C.
Il ne reste plus qu’à cliquer sur le bouton Mettre à jour et à tester notre lien d’ouverture de popup.
Appliquer le lien dans le menu WordPress
Ouvrez le menu depuis Apparence > Menus.
Cliquez sur le menu déroulant Liens personnalisés et collez avec Ctrl+V le lien interne du popup et saisissez un nom dans Texte du lien.
Enfin, cliquez sur le bouton Enregistrer le menu.
Vous savez maintenant comment appliquer le lien d’ouverture d’une fenêtre contextuelle n’importe où sur votre site web.
« Ça ne marche pas, ma fenêtre contextuelle n’apparaît pas »
Vérifiez si la fenêtre contextuelle peut être activée via le lien d’action dynamique d’Elementor. Si elle ne s’active pas, c’est qu’il y a un problème dans la configuration de votre fenêtre contextuelle, et non dans l’URL d’activation.
Assurez-vous d’avoir correctement configuré les « Conditions d’affichage » de la fenêtre contextuelle. Sinon, votre fenêtre contextuelle n’apparaîtra pas.
Assurez-vous d’avoir correctement copié l’URL d’activation dans votre lien.
Vérifiez s’il y a une erreur JavaScript qui pourrait être causée par d’autres extensions (consultez les Outils de développement > Console de votre navigateur).
Si vous n’avez pas configuré votre propre lien, l’URL d’activation ne fonctionne qu’avec la balise <a>. Pour activer le déclencheur d’ouverture, Elementor utilise un code JavaScript qui ne détecte le lien que dans la balise <a>.
des réglages dans le coin inférieur gauche.
