Parfois, vous ne voulez pas qu'une popup se charge d'elle-même Vous voulez qu'elle s'ouvre uniquement lorsque quelqu'un clique sur un bouton ou un lien Le Créateur de fenêtres contextuelles Master Addons fait cela avec le Sur Cliquez déclencheur et un sélecteur d'ID CSS Vous définissez l'ID sur la fenêtre contextuelle, puis ajoutez le même ID à n'importe quel élément Élémenteur, et cliquer sur cet élément ouvre la fenêtre contextuelle.
Qu'est-ce qu'une fenêtre contextuelle en clic dans Elementor ? #
Une fenêtre contextuelle en clic dans Elementor est une fenêtre contextuelle qui reste cachée jusqu'à ce qu'un visiteur clique sur un élément spécifique : un bouton, un lien, une image ou une icône spécifique (« icon »), au lieu d'apparaître tout seul lorsque la page se charge Créateur de fenêtres contextuelles Master Addons en construit un avec le Sur Cliquez déclencheur : vous donnez un CSS au popup Sélecteur ID tels que #sale-popup(, puis ajoutez ce même ID) (sans le #) au champ ID CSS de tout élément Elementor. Étant donné que la correspondance est effectuée uniquement sur l'ID, une fenêtre contextuelle peut être déclenchée à partir d'autant d'éléments que vous le souhaitez. (il n'a besoin d'aucune licence Elementor Pro ni d'aucun JavaScript personnalisé, bien que le déclencheur On Click nécessite Master Addons Pro. Les fenêtres contextuelles en clic conviennent au contenu intentionnel comme les détails de tarification, les démos vidéo, les formulaires de connexion et les codes de coupon, où une fenêtre contextuelle automatique interromprait plutôt que d'aider. Parcourir le reste du Widgets et extensions Master Addons pour voir ce que vous pouvez mettre d'autre à l'intérieur d'un.
Avant de commencer #
Trois choses doivent être en place avant de configurer une fenêtre contextuelle en clic : une fenêtre contextuelle déjà intégrée au Master Addons Popup Builder, Elementor installé et actif, et Master Addons for Elementor installé et actif. L'ensemble de la configuration prend ensuite deux champs et environ une minute.
- Une fenêtre contextuelle déjà intégrée au Master Addons Popup Builder (voir le guide des paramètres contextuels pour en créer un ()
- Élémenteur installé et actif
- Modules complémentaires principaux pour Elementor installés et actifs (guide d'installation)
Étape 1 : Définissez la fenêtre contextuelle sur Ouvrir sur Cliquez #
Ouvrez votre popup dans Elementor et accédez au Paramètres contextuels MA panneau. Sous Paramètres, change Ouvrir Popup à Sur Cliquez. Un nouveau champ apparaît : Ouvrir par sélecteur.
Dans ce champ, tapez un ID CSS avec le signe #, par exemple #sale-popup. C'est le sélecteur qui déclenche la popup Gardez le nom simple et unique donc il est facile à réutiliser.
Étape 2 : Ajoutez l'ID CSS à un élément élément élémentaire #
Maintenant, allez à la page où vous voulez le déclencheur et modifiez-le dans Elementor Choisissez n'importe quel élément, un bouton fonctionne bien, et ouvrez son Avancé onglet. Trouver le ID CSS champ et entrez le même nom, mais sans le signe # cette fois, donc sale-popup.
Cette différence fait trébucher les gens : l'Open By Selector de la fenêtre contextuelle est utilisée #sale-popup(traduction), tandis que l'ID CSS de l'élément utilise sale-popup. Le # fait partie de la syntaxe du sélecteur, pas de l'ID.
Étape 3 : Aperçu et clic #
Mettez à jour la page, puis prévisualisez-la sur le front-end Vous verrez votre bouton (ici il est étiqueté “Click to Open Popup”) assis dans la mise en page, sans popup en vue pour l'instant.
Cliquez sur le bouton, et la fenêtre contextuelle s'ouvre tout de suite Le même déclencheur fonctionne sur autant d'éléments que vous le souhaitez, donnez simplement à chacun le même ID CSS.
Dépannage #
- Rien ne se passe sur clic ? Assurez-vous que les identifiants correspondent :
#sale-popupdans le popup's Open By Selector, etsale-popup(no #) dans l'ID CSS de l'élément. - Popup pas actif? Vérifiez que le popup Activation est allumé et ses conditions d'affichage incluent la page avec le bouton.
- Utilisé le # dans le champ ID CSS ? Supprimez-le. L'identifiant Elementor CSS prend uniquement le nom clair.
Foire aux questions #
Comment puis-je ouvrir une fenêtre contextuelle Master Addons en cliquant ?
Dans le panneau Paramètres de la fenêtre contextuelle MA, définissez Ouvrir Popup sur On Click et entrez un ID CSS comme #sale-popup dans le champ Ouvrir par sélecteur, ajoutez ensuite le même ID, sans le #, au champ ID CSS d'un élément dans l'onglet Avancé d'Elementor.
Pourquoi est-ce que j'ajoute le # à un endroit mais pas à l'autre ?
Le champ Ouvrir par sélecteur s'attend à un sélecteur CSS, et # marque un sélecteur d'ID Le champ ID CSS de l'élémenteur s'attend uniquement au nom de l'ID Donc vous utilisez #sale-popup dans la popup et sale-popup sur l'élément.
Puis-je déclencher la fenêtre contextuelle à partir de plus d'un bouton ?
Oui. Donnez à chaque bouton ou élément le même identifiant CSS, puis chacun ouvre la même fenêtre contextuelle en cliquant. Vous pouvez mélanger des boutons, des liens et d'autres éléments.
Puis-je ouvrir une fenêtre contextuelle à partir d'un lien texte au lieu d'un bouton ?
Oui. Tout élément avec l'ID CSS correspondant fonctionne, y compris un lien, une image ou une icône. Ajoutez l'ID dans l'onglet Avancé de cet élément et cela devient un déclencheur.
Ai-je besoin d'Elementor Pro pour une fenêtre contextuelle en clic ?
Non. Le constructeur de fenêtres contextuelles Master Addons fonctionne avec la version gratuite d'Elementor, de sorte que le déclencheur On Click et la méthode CSS ID fonctionnent sans Elementor Pro. Le déclencheur On Click lui-même a besoin de Master Addons Pro, puisque le plugin gratuit ouvre chaque fenêtre contextuelle sur le chargement de la page.
