• Qu’est-ce qu’une fenêtre contextuelle ?
• Rendre notre popup actif sur l’ensemble du site
• Comment obtenir le lien qui ouvre notre message contextuel ?
• Ajouter l’action d’ouverture d’une fenêtre contextuelle à un widget
• Récupérer le lien de la fenêtre pop-up dans l’inspecteur du navigateur
• Obtenir le lien interne de la fenêtre contextuelle à partir d’un widget
• Obtenir le lien interne de la fenêtre pop-up avec un plugin
• Configurer notre propre lien pour ouvrir une fenêtre contextuelle
• Comment appliquer le lien obtenu pour ouvrir la fenêtre pop-up ?
• Appliquer le lien au widget de l’éditeur de texte
• Appliquer un lien au texte d’un article avec l’éditeur Gutenberg
• Appliquer le lien dans le menu WordPress
• “Il ne fonctionne pas, ma fenêtre pop-up n’apparaît pas.
• Liens utiles

Qu’est-ce qu’une fenêtre contextuelle ?

Une fenêtre pop-up, un message pop-up ou un popup est une fenêtre qui apparaît (“pop up”) pendant que vous naviguez sur un site web. Elles sont utilisées pour de nombreuses raisons : offrir des réductions, des notifications, encourager l’inscription à une lettre d’information, promouvoir un contenu, etc. Cliquez ici pour voir un exemple de popup.

Mais nous n’allons pas en dire plus sur les popups car ce sujet ne porte pas sur la façon de les créer mais sur la façon de les ouvrir à l’aide d’un lien similaire à celui-ci :

%3DeyJpZCI6IjE4NDI1IiwidG9nZ2xlIjpmYWxzZX0%

Nous apprendrons également dans cette rubrique comment configurer notre fenêtre popup pour qu’elle ait un lien comme celui-ci : #enlace-popup

“link-popup” est un nom inventé par nous, nous verrons plus tard comment nous pouvons définir l’ID que nous voulons pour ouvrir notre popup.

Rendre notre popup actif sur l’ensemble du site

Une chose très importante à faire est d’établir la condition que notre fenêtre pop-up soit active sur l’ensemble du site. Imaginons que nous ajoutions le lien dans un article de blog ou dans notre menu principal, si nous n’avons pas cette condition d’affichage, dans certaines parties de notre site web, la fenêtre contextuelle peut ne pas être active et ne pas s’ouvrir. Voyons comment cela se passe.

1. Nous ouvrons le message pop-up avec Elementor.
2. Cliquez sur la petite flèche située juste à droite du bouton Actualiser > cliquez sur l’option Afficher les conditions dans le menu contextuel.
3. Une fenêtre pop-up s’ouvre avec plusieurs onglets sur le côté gauche, laissez l’onglet Conditions > cliquez sur le bouton Ajouter une condition et laissez la condition par défaut qui est Tous les sites.
4. Il ne nous reste plus qu’à enregistrer en cliquant sur le lien Enregistrer et fermer ou en cliquant sur le bouton Suivant puis sur le bouton Enregistrer et fermer.

Notre fenêtre pop-up sera désormais active sur l’ensemble de notre site web. Il n’est pas nécessaire de configurer les déclencheurs ou les règles avancées si vous n’en avez pas besoin.

Comment obtenir le lien qui ouvre notre message contextuel ?

Examinons trois façons d’obtenir le lien qui ouvre notre fenêtre contextuelle. Il faut 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 voulons.

Ajouter l’action d’ouverture d’une fenêtre contextuelle à un widget

Pour les deux premières méthodes, nous devons ajouter l’action d’ouverture de la fenêtre contextuelle à un widget Elementor. Nous pouvons utiliser n’importe quel widget qui possède un champ de lien, dans cet exemple nous allons utiliser le widget Bouton.

1. Cliquez sur le bouton pour le sélectionner.
2. Dans l’onglet Contenu, nous cliquons sur le bouton Etiquettes dynamiques de la propriété Lien > nous sélectionnons l’action Fenêtre pop-up.
3. Cliquez sur Popup Window > cliquez sur All et tapez le nom que vous avez donné à la fenêtre popup, une fois que vous avez commencé à taper, les résultats correspondants s’affichent, cliquez alors sur le nom de la fenêtre popup.
4. Enfin, cliquez sur le bouton Mettre à jour pour enregistrer vos modifications.

Une fois cette opération effectuée, le bouton se verra attribuer l’action d’ouvrir la fenêtre contextuelle et nous pourrons obtenir le lien par ce biais.

Obtenir le lien vers la fenêtre pop-up à partir de l’inspecteur du navigateur

Une fois que nous avons ajouté l’action d’ouvrir la fenêtre pop-up à un widget, dans ce cas un bouton, il nous suffit d’ouvrir la page où nous l’avons inséré dans le navigateur et de suivre les étapes suivantes :

1. Nous ouvrons la page où se trouve le bouton dans le navigateur (dans ce cas Google Chrome).
2. Cliquez avec le bouton droit de la souris sur le bouton > et cliquez sur Inspecter dans le menu contextuel.
3. Dans l’inspecteur, nous faisons un clic droit sur le lien qui inclut l’action d’ouverture, que nous pouvons distinguer parce qu’il commence par #elementor-action… > cliquer sur Editer l’attribut dans le menu contextuel.
4. Le lien est maintenant ombré, ce qui signifie qu’il est sélectionné et que nous pouvons le copier en appuyant sur CTRL+C ou en faisant un clic droit sur le lien > et en cliquant sur Copier dans le menu contextuel.

Nous avons maintenant l’URL qui déclenche l’action d’ouverture de la fenêtre contextuelle. Nous pouvons le coller dans un fichier texte, puis le copier-coller et l’utiliser où bon nous semble.

Obtenir le lien interne de la fenêtre contextuelle à partir d’un widget

Une autre façon d’obtenir le lien interne à partir de la fenêtre contextuelle est de copier le lien directement à partir du widget, dans ce cas à partir du bouton. Voyons comment procéder :

1. Cliquez avec le bouton droit de la souris sur le bouton > cliquez sur Copier l’adresse du lien
2. Nous utilisons le bloc-notes pour coller le lien avec CTRL+V
3. Nous sélectionnons et supprimons tout ce qui se trouve derrière #elementor-action…

Nous avons maintenant le lien qui ouvre la fenêtre contextuelle. Le bouton a déjà rempli sa fonction et nous pouvons le supprimer, ce qui n’aura aucune incidence puisque le lien est toujours le même pour cette fenêtre contextuelle.

Obtenir le lien interne de la fenêtre pop-up avec un plugin

Nous pouvons également installer le plugin gratuit Popup Trigger URL pour Elementor Pro que vous pouvez trouver dans le dépôt WordPress.

Ce plugin n’a qu’une seule fonctionnalité et c’est d’ajouter un bouton à droite de chaque modèle de popup qui, lorsqu’il est cliqué, affiche le lien qui ouvre la popup afin que vous puissiez le copier et l’utiliser où vous le souhaitez.

1. Installez le plugin Popup Trigger URL for Elementor Pro.
2. Allez dans Modèles > Messages pop-up.
3. Dans la liste des modèles, vous trouverez un bouton Afficher les URL à droite de chaque modèle, cliquez dessus et une fenêtre contextuelle apparaîtra avec tous les liens disponibles pour ce message contextuel.

Pour afficher la popup, nous n’avons besoin que de la première (Open), mais ce plugin en propose trois autres : Toggle, Close et Close (Don`t Show Again).

Configurer notre propre lien pour ouvrir une fenêtre contextuelle

Nous pouvons également personnaliser et raccourcir le lien de nos fenêtres contextuelles, pour ce faire, suivez ces étapes :

1. Nous ouvrons la fenêtre contextuelle dans le constructeur Elementor.
2. Accédez à la fenêtre contextuelle des paramètres en cliquant sur l’icône settings dans le coin inférieur gauche.
3. Dans l’onglet Avancé > Sélecteur Ouvrir par, créez un shortcode de lien d’activation d’ancre, exemple : a[href="#enlace-popup"]
4. Appliquez ce lien n’importe où sur votre site web en vous référant au lien déclencheur de l’ancre (exemple : #link-popup).

Le texte #enlace-popup est notre choix, nous pouvons mettre le nom que nous voulons, toujours sans espaces ou 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 ” Sitewide”.

Comment appliquer le lien obtenu pour ouvrir la fenêtre pop-up ?

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. Prenons quelques exemples.

Appliquer le lien au widget de l’éditeur de texte

1. Dans l’éditeur de texte, nous sélectionnons le texte auquel nous voulons appliquer le lien d’ouverture de la fenêtre contextuelle.
2. Cliquez sur l’outil Insérer/Modifier un lien (Ctrl+k).
3. Appuyez ensuite sur Ctrl+V pour coller le lien, sachant que vous aurez préalablement copié le lien avec Ctrl+C.
4. Il ne reste plus qu’à cliquer sur le bouton Mettre à jour et à tester le lien d’ouverture de notre popup.

Appliquer un lien au texte d’un article avec l’éditeur Gutenberg

Nous pouvons l’appliquer non seulement à un texte, mais aussi à un bouton ou à tout autre élément permettant l’ajout de liens.

1. Nous ouvrons une entrée dans l’éditeur Gutenberg et sélectionnons le texte auquel nous voulons appliquer le lien d’ouverture de la fenêtre contextuelle.
2. Cliquez sur l’outil Lien Ctrl+K.
3. Appuyez ensuite sur Ctrl+V pour coller le lien, sachant que vous aurez préalablement copié le lien avec Ctrl+C.
4. Il ne reste plus qu’à cliquer sur le bouton Mettre à jour et à tester le lien d’ouverture de notre popup.

Appliquer le lien dans le menu WordPress

1. Ouvrez le menu à partir de Apparence > Menus.
2. Cliquez sur le menu déroulant Liens personnalisés et collez avec Ctrl+V le lien interne de la fenêtre contextuelle et tapez un nom dans Texte du lien.
3. Enfin, nous cliquons sur le bouton de menu Enregistrer.

Vous savez maintenant comment appliquer le lien d’ouverture de la fenêtre contextuelle à n’importe quel endroit de votre site web.

“Il ne fonctionne pas, ma fenêtre pop-up n’apparaît pas.

• Vérifier si la fenêtre popup peut être déclenchée par le lien d’action dynamique d’Elementor. Si elle ne s’active pas, c’est qu’il y a un problème avec les paramètres de votre fenêtre contextuelle, et non avec l’URL d’activation.
• Assurez-vous que vous avez correctement configuré les“Conditions d’affichage” de la fenêtre pop-up. Dans le cas contraire, la fenêtre pop-up n’apparaîtra pas.
• Assurez-vous d’avoir copié correctement l’URL d’activation dans votre lien.
• Vérifiez s’il y a une erreur javascript qui peut être causée par d’autres plugins (voir Outils de développement > Console de votre navigateur).
• Si vous n’avez pas établi 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 détecte uniquement le lien dans la balise <a>.

Liens utiles

• Plugin Popup Trigger URL pour Elementor Pro.