Chroniser un pourcentage de popup par page est bien jusqu'à ce que vous en ayez besoin pour atterrir à un endroit exact Peut-être le voulez-vous dès que quelqu'un atteint votre bloc de prix, une ligne de témoignage, ou une bande d'appel à l'action, pas un vague 40 % vers le bas de la page Créateur de fenêtres contextuelles Master Addons gère cela avec le Sur défilement vers l'élément déclencheur. Vous donnez au popup un identifiant CSS avec un #: puis mettez ce même identifiant, sans le #: sur l’élément que vous souhaitez servir de déclencheur.
Voici la configuration complète dans le Master Addons Popup Builder, qui est gratuite avec Master Addons pour Elementor Si un déclencheur basé sur un pourcentage est tout ce dont vous avez besoin, le guide des options de déclenchement contextuel couvre celui-là.
Avant de commencer #
- 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 ()
- Une page avec l'élément que vous souhaitez utiliser comme déclencheur de défilement
- Élémenteur installé et actif
- Modules complémentaires principaux pour Elementor installés et actifs (guide d'installation)
Étape 1 : configurez la fenêtre contextuelle pour qu'elle s'ouvre sur le défilement jusqu'à l'élément #
Ouvrez votre popup dans Elementor et accédez au Paramètres contextuels MA panneau. Sous Paramètres, interrupteur Ouvrir Popup à Sur défilement vers l'élément. Un nouveau champ apparaît : Sélecteur d'éléments.
L'indice sous le champ indique ce qu'il veut, un sélecteur CSS pour l'élément qui déclenche la fenêtre contextuelle lors du défilement, comme #my-id ou .my-class.
Étape 2 : Entrez un sélecteur d'ID CSS (avec le signe #) #
Dans le Sélecteur d'éléments champ, tapez un ID CSS qui commence par #. Voilà #show-popup. Gardez le nom court et unique afin de pouvoir le réutiliser sur la page sans vous heurter à autre chose.
Le # fait un vrai travail : il indique au popup de surveiller un élément dont l'ID est show-popup. Publiez (ou mettez à jour) la fenêtre contextuelle pour l'enregistrer.
Étape 3 : Ajoutez le même identifiant à votre élément cible (sans le signe #) #
Maintenant, ouvrez la page où la fenêtre contextuelle doit se déclencher et modifiez-la dans Elementor Cliquez sur l'élément que vous voulez comme déclencheur, voici le bloc de section sur la page, et ouvrez son Avancé onglet.
Trouver le ID CSS mettez le champ dans l'onglet Avancé et tapez le même nom que celui que vous avez utilisé dans la fenêtre contextuelle, mais sans le #, donc juste show-popup. Cette petite différence est toute l’astuce :
- Sélecteur d'éléments contextuels :
#show-popup(avec le hachage) - ID CSS de l'élément :
show-popup(pas de hachage)
Le # fait partie du sélecteur CSS, ne fait pas partie de l'ID, c'est pourquoi il appartient au champ popup mais jamais au champ ID CSS de l'élément Mettez à jour la page pour la sauvegarder Une chose à regarder : ne réutilisez pas un ID qui est déjà câblé à un lien d'ancrage ou CSS personnalisé ailleurs, ou vous aurez des surprises.
Étape 4 : Aperçu et défilement vers l'élément #
Ouvrez la page sur le front-end et commencez à faire défiler Rien en haut La seconde l'élément portant le show-popup ID défile dans la vue, la fenêtre contextuelle s'ouvre sur la page.
Vous voulez que plusieurs points de défilement déclenchent la même popup ? donnez à chaque élément le même ID CSS, à show-popup« Et n’importe lequel d’entre eux le déclenchera ».
Dépannage #
- Popup ne s'ouvre jamais? Vérifiez le hachage. Les besoins du sélecteur d'éléments de la fenêtre contextuelle
#show-popup20, et les besoins en ID CSS de l'élémentshow-popupsans hachage. - Utilisé le # dans le champ ID CSS ? Sortez-le Le champ Elementor CSS ID veut uniquement le nom clair.
- Deux éléments avec le même identifiant qui agissent ? C'est bien pour le déclenchement, mais ne réutilisez pas un ID qui gère déjà les liens CSS ou ancre sur la page.
- Popup ne se présente pas du tout ? Assurez-vous que l'Activation de la popup est activée et que ses conditions d'affichage incluent la page avec l'élément déclencheur.
Foire aux questions #
Comment puis-je ouvrir une fenêtre contextuelle lors du défilement vers un élément spécifique dans Elementor ?
Définissez l'option Open Popup de la fenêtre contextuelle sur On Scroll to Element et entrez un ID CSS comme #show-popup dans le champ Sélecteur d'éléments Ajoutez ensuite le même ID, sans le #, au champ ID CSS de l'élément cible dans l'onglet Avancé de l'élément.
Pourquoi est-ce que j'ajoute le # dans la popup mais pas sur l'élément ?
Le champ Sélecteur d'éléments attend un sélecteur CSS, et # marque un sélecteur ID Le champ ID CSS de l'élémenteur n'attend que le nom ID Donc vous utilisez #show-popup dans la popup et show-popup sur l'élément.
Puis-je déclencher la popup à partir de plus d'un élément ?
Oui. Donnez à chaque élément le même ID CSS, et la fenêtre contextuelle se déclenche lorsque le visiteur fait défiler vers l'un d'entre eux. Ceci est pratique lorsque vous disposez de plusieurs sections qui devraient toutes déclencher la même offre.
Quelle est la différence entre On Scroll et On Scroll to Element ?
Sur Scroll tire après qu'un visiteur fait défiler un pourcentage défini de la page Sur Scroll to Element se déclenche lorsqu'un élément spécifique apparaît, ce qui est plus précis lorsque vous souhaitez que la fenêtre contextuelle soit liée à une section exacte.
Ai-je besoin d'Elementor Pro pour cela ?
Non. Le constructeur de fenêtres contextuelles Master Addons fonctionne avec la version gratuite d'Elementor, de sorte que le déclencheur On Scroll to Element et la méthode CSS ID fonctionnent sans Elementor Pro.
