Comment ajouter gratuitement une fenêtre contextuelle dans Elementor (aucun élément Pro requis)

Vous pouvez ajouter des popups dans Elementor sans payer pour Elementor Pro. Free Elementor n'est pas livré avec un popup builder, mais Pro n'est pas le seul moyen d'en obtenir un Le gratuit Modules complémentaires principaux pour Elementor le plugin comprend un module complet Créateur Popup100+ modèles prêts à l'emploi et cinq types de déclencheurs. Tout cela se trouve dans le plugin gratuit, sans minuterie d'essai ni filigrane.

Vous avez besoin de deux choses : Elementor gratuit, et le plugin gratuit Master Addons du répertoire WordPress La configuration d'une première popup prend environ dix minutes Ce guide couvre la construction d'une, le choix du moment où elle se déclenche, et le choix des pages qui la montrent, ainsi que les questions qui reviennent le plus souvent : est-ce que Elementor free a un popup builder, ce que le elementor/popup/show event le fait réellement et comment ouvrir une fenêtre contextuelle à partir d'un clic de bouton sans écrire JavaScript.

Avez-vous besoin d'Elementor Pro pour créer des popups ?

Réponse courte : non. Popup Builder d'Elementor Pro est une fonctionnalité payante, mais ce n'est pas le seul moyen d'ajouter des popups dans Elementor.

Voici ce que chaque option vous donne réellement :

Donc, si les popups étaient la seule raison pour laquelle vous regardiez Elementor Pro, vous pouvez rester sur Elementor gratuit, installer Master Addons et les construire avec le même éditeur glisser-déposer Si vous possédez déjà Pro, les deux courent côte à côte sans entrer en conflit.

Cela vaut la peine d'être précis sur le mot “free” ici Le Popup Builder n'est pas un essai et non une version réduite d'un module payant Master Addons vend une version Pro, mais Pro couvre d'autres choses : des widgets supplémentaires et le Widget Builder complet Les popups se trouvent en dehors de ça.

Qu'est-ce que Master Addons Popup Builder ?

Master Addons est un plugin Elementor tout-en-un utilisé par plus de 30 000 sites actifs Il est livré avec plus de 80 widgets, un Constructeur de thèmes, une bibliothèque de modèles, a Constructeur de widgets& un gratuit Créateur Popup. Le Popup Builder n'est pas un achat séparé Installez le plugin et il est là.

Vous concevez visuellement des popups à l'intérieur de l'éditeur Elementor, puis contrôlez quand ils apparaissent (déclencheurs) et où ils apparaissent (conditions d'affichage).Pas de code, pas de plugin supplémentaire, pas de licence Pro.

Pourquoi les gens choisissent le générateur de pop-up gratuit Master Addons

• Popup Builder gratuit fourni dans le plugin Aucune mise à niveau requise.
• Même expérience de conception par glisser-déposer que vous connaissez déjà chez Elementor.
• Plus de 100 modèles contextuels prédéfinis prêts à être importés en un clic.
• Cinq types de déclencheurs : On Click, Page Load, Exit Intent, On Scroll, After Inactivity.
• Conditions d'affichage pour tout type de publication, de page, de catégorie ou de publication personnalisée.
• Fonctionne sur Elementor gratuit, l'hébergement WordPress gratuit et les dernières versions d'Elementor.

Quels types de popups pouvez-vous créer ?

• Popups de génération de leads et d'adhésion par e-mail
• Promotions WooCommerce, bannières de vente et offres d'abandon de panier
• Popups vidéo lightbox (YouTube, Vimeo, auto-hébergé)
• Boîtes à lumière de galerie d'images
• Barres d'annonce et bannières supérieures
• Popups de formulaire de connexion et d'inscription
• Consentement aux cookies et avis RGPD
• Rétroaction, NPS et popups d'enquête
• Popups modaux pour les termes, les détails de prix ou les informations sur le produit

Les 5 déclencheurs Popup dans Master Addons

1. Déclencheur de défilement

La fenêtre contextuelle tire après le visiteur fait défiler un pourcentage défini de la page. Bon lorsque vous souhaitez qu'une mise à niveau de contenu ou une option d'adhésion par e-mail apparaisse après que le lecteur a réellement lu quelque chose, pas sur le chargement de la page lorsqu'il n'a pas décidé de rester.

2. Déclencheur de chargement de page

Le popup apparaît après un délai que vous avez défini, mesuré en secondes. Convient aux messages de bienvenue, aux offres limitées dans le temps et à tout ce que tout le monde devrait voir. Regardez la valeur du délai. Tout ce qui est inférieur à 2 secondes a tendance à ennuyer les gens sur des connexions lentes.

3. déclencheur d'intention de sortie

La popup détecte quand le curseur se déplace vers l'onglet du navigateur ou le bouton de fermeture et déclenche un message final C'est ce que les gens recherchent en tant que “popup d'intention de sortie d'Elementor“, et c'est dans le plugin gratuit Master Addons Une mise en garde avant de construire une campagne autour de lui : l'intention de sortie est un comportement de bureau Un téléphone n'a pas de curseur à suivre, alors donnez aux visiteurs mobiles un déclencheur de défilement ou d'inactivité à la place.

4. Sur Déclencheur de clic

La popup s'ouvre uniquement lorsqu'un visiteur clique sur un bouton, une image ou un lien spécifique C'est le moyen le plus simple de créer un modal clic-à-ouverture sans toucher au code, et c'est le remplacement gratuit du elementor/popup/show Événement JavaScript couvert dans la section suivante.

5. après déclenchement de l'inactivité

Le popup réengage un visiteur qui a arrêté de faire défiler ou de déplacer le curseur pendant une durée définie. Bon pour récupérer l'attention sans tirer sur la première vue, qui est le moyen le plus rapide de perdre un lecteur.

Comment utiliser l'événement elementor/popup/show (et l'alternative gratuite)

Elementor Pro expose un événement JavaScript appelé elementor/popup/show. Les développeurs l'utilisent pour déclencher une fenêtre contextuelle à partir du code : déclenchez une fenêtre contextuelle après une soumission de formulaire personnalisée, une réponse AJAX ou un bouton qui se trouve en dehors de l'éditeur Elementor.

Le modèle de base dans Elementor Pro ressemble à ceci :

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

Si vous êtes sur Elementor gratuit, vous n'avez pas accès à elementorProFrontend.modules.popup.showPopup. Vous n'en avez pas non plus besoin pour la plupart des cas d'utilisation Les modules complémentaires principaux Sur Cliquez trigger gère nativement les plus courants :

• Cliquez sur un bouton n'importe où sur la page, la fenêtre contextuelle s'ouvre Définissez le sélecteur de déclenchement sur une classe CSS ou un identifiant et tout élément correspondant ouvre la fenêtre contextuelle.
• Cliquez sur une image, une icône ou un lien texte, la fenêtre contextuelle s'ouvre. La même logique de sélection s'applique à n'importe quel élément.
• Ouvrez une fenêtre contextuelle après une soumission de formulaire Combinez l'action de redirection ou de remerciement du formulaire avec un bouton caché doté du sélecteur de fenêtre contextuelle.

L'approche du sélecteur est hors de propos lorsque la décision se produit au moment de l'exécution, comme ouvrir une fenêtre contextuelle uniquement si un appel AJAX revient avec une valeur particulière. Pour cela, demandez à votre script de cliquer sur un élément caché qui transporte la classe de déclenchement et laissez le sélecteur faire le reste.

Si vous souhaitez écouter les événements popup-show depuis votre propre code (analytique, logique personnalisée), lier à l'événement global le popup se déclenche quand il s'ouvre Le nom exact de l'événement est dans le Documentation des addons principaux pour la version que vous exécutez.

Comment déclencher une fenêtre contextuelle d'élémenteur sur un bouton Cliquez (gratuit)

Une des demandes les plus courantes, voici donc la configuration exacte :

1. Créez la fenêtre contextuelle dans Master Addons, Popup Builder et concevez-la.
2. Dans les paramètres de la popup, basculez le déclencheur sur Sur Cliquez.
3. Entrez un sélecteur CSS dans le champ de déclenchement, par exemple .open-signup-popup.
4. Accédez à la page ou au modèle avec le bouton Modifier le widget du bouton Classes avancées CSS champ et ajouter open-signup-popup (pas de point, juste le nom de la classe).
5. Enregistrez les deux. Chaque bouton de cette classe ouvre désormais la fenêtre contextuelle, n'importe où sur le site.

Le même sélecteur fonctionne sur une ligne, une colonne, un en-tête, une icône ou tout élément auquel vous pouvez donner une classe. C'est ainsi que vous obtenez un comportement identique elementor/popup/show sans écrire une ligne de JavaScript Une chose à regarder : si vous utilisez un sélecteur d'ID comme #open-popup(traduction), assurez-vous qu'aucun autre élément de la page ne partage l'ID, sinon le tir s'effectue à partir du mauvais élément.

Modèles contextuels d'élémenteur gratuits : plus de 100 modèles prêts à être importés

Le plugin est livré avec une bibliothèque de modèles contextuels couvrant les opt-ins de newsletter, les bannières de vente, les promotions WooCommerce, les offres d'intention de sortie, les boîtes à lumière vidéo, les avis de cookies et les formulaires de connexion. Chaque modèle importe en un clic et est entièrement modifiable dans Elementor. Si vous préférez partir d'un design proche de votre objectif final, c'est plus rapide que de construire à partir de zéro.

La bibliothèque complète vit à l'intérieur de l'éditeur et fait partie de la bibliothèque plus large Bibliothèque de modèles Master Addons à côté des modèles de page et de section.

Étape par étape : Comment ajouter une fenêtre contextuelle dans Elementor à l'aide de modules complémentaires principaux

Étape 1 : Installez et activez les modules complémentaires principaux

1. Ouvrez le tableau de bord WordPress, les plugins, ajoutez un nouveau.
2. Recherchez “Master Addons pour Elementor”.
3. Cliquez Installez maintenant, alors Activer.
4. Un nouveau Additions maîtres l'élément apparaît dans la barre latérale WordPress.

Si l'élément de la barre latérale n'apparaît pas tout de suite, actualisez fortement l'administrateur (Ctrl+Shift+R /Cmd+Shift+R).Certains plugins de mise en cache s'accrochent à l'ancien menu d'administration pendant une minute.

Étape 2 : Ouvrez le Popup Builder

1. Aller à Additions principales, constructeur de pop-up.
2. Cliquez Ajouter Nouveau Popup.
3. Donnez au popup un nom descriptif (par exemple, Newsletter, Articles de blog).
4. Cliquez Modifier avec Elementor.

Étape 3 : Choisissez un modèle ou commencez à gratter

1. Cliquez sur l'icône Bibliothèque de modèles Master Addons dans l'éditeur Elementor.
2. Parcourir la catégorie popup et les conceptions d'aperçu.
3. Cliquez Insérer sur n'importe quel modèle pour l'importer dans le canevas.
4. Ou sautez la bibliothèque et faites glisser les widgets sur un canevas vierge.

Étape 4 : Concevez le contenu Popup

1. Glissez dans les widgets Elementor : Heading, Text Editor, Button, Image, Form.
2. Pour la capture d'e-mails, utilisez un widget Form et connectez-le à votre service de messagerie.
3. Ajoutez un compte à rebours, une icône ou une vidéo à l'aide des widgets Core Elementor ou Master Addons.
4. Ajustez les polices, les couleurs, le remplissage et l'espacement dans les onglets Style et Advanced.
5. Aperçu sur mobile et tablet view pour confirmer la mise en page fonctionne toujours.

Étape 5 : Configurez le déclencheur Popup

1. Cliquez sur l'icône d'engrenage en bas à gauche de l'éditeur pour l'ouvrir Paramètres.
2. Ouvrir le Déclencheur onglet.
3. Choisissez l'un des cinq déclencheurs : sur le clic, le chargement de la page, l'intention de sortie, sur le défilement, après l'inactivité.
4. Remplissez les paramètres spécifiques au déclencheur : pourcentage de défilement, secondes de retard, sélecteur de clic ou durée d'inactivité.

Étape 6 : Définissez les conditions d'affichage (là où la fenêtre contextuelle s'affiche)

Les conditions d'affichage décident quelles pages affichent réellement la popup La plupart des problèmes de popup commencent ici Une popup sans règle d'affichage n'apparaît jamais du tout, c'est donc la première chose à vérifier quand elle semble bien dans l'éditeur mais rien ne s'affiche au front-end.

1. Ouvrir le Conditions d'affichage onglet dans les paramètres contextuels.
2. Choisir un Inclure règle : site entier, pages spécifiques, publications spécifiques, catégories, balises ou type de publication personnalisé.
3. Ajouter un Exclure règle pour tout ce que vous voulez sauter (par exemple, exclure la page de paiement d'une fenêtre contextuelle sur tout le site, sinon cela harcèle les personnes qui se sont déjà converties).
4. Sauvegarder les conditions avant de publier.

Pour modifier les conditions d'affichage plus tard, rouvrez la fenêtre contextuelle, cliquez sur l'icône de vitesse, accédez à Conditions d'affichage, modifiez les règles et mettez à jour La conception et le déclencheur restent les mêmes. Seuls les changements de ciblage.

Étape 7 : Publier et tester

1. Cliquez Publier ou Mise à jour en bas à gauche de l'éditeur.
2. Ouvrez la page qui doit afficher la fenêtre contextuelle dans une fenêtre de navigateur normale (et non l'aperçu de l'éditeur).
3. Déclenchez la fenêtre contextuelle de la façon dont vous l'avez configurée : cliquez sur le bouton, faites défiler, attendez ou déplacez-vous vers l'onglet de fermeture.
4. Vérifiez le comportement réactif sur un vrai téléphone L'aperçu de l'éditeur est proche mais pas exact.
5. Surveiller les soumissions de formulaires et les taux de conversion pour la première semaine.

Pourquoi une Popup ne se présente pas

Si la popup fonctionne dans l'éditeur mais n'apparaît jamais sur le site, c'est presque toujours l'une de ces cinq, dans l'ordre approximatif de la fréquence à laquelle elle s'avère en être la cause :

1. Aucune condition d'affichage n'est définie Une popup sans règle d'inclusion ne correspond à aucune page, donc elle ne rend jamais nulle part Conditions d'affichage ouvertes et ajoutez-en une.
2. La popup est toujours une ébauche Sauvegarder le design n'est pas la même chose que le publier Vérifiez le statut en bas à gauche de l'éditeur.
3. Un cache dessert l'ancienne page Purgez le plugin de mise en cache et le CDN, puis testez à nouveau dans une fenêtre privée.
4. Le sélecteur de clics ne correspond pas Pour On Click, le champ de déclenchement prend .my-class avec le point, tandis que le champ Classes CSS du bouton prend my-class sans cela. Le mélange de ces deux comptes pour la plupart des rapports que nous voyons.
5. Vous testez l'intention de sortie sur un téléphone Il n'y a pas de curseur pour quitter la fenêtre, donc rien ne se déclenche Testez celui-là sur un navigateur de bureau.

Master Addons contre Elementor Pro Popup Builder

Master Addons n'est pas le seul moyen gratuit de le faire Les plugins popup autonomes tels que Popup Maker ont des niveaux gratuits aussi, et si les popups sont la seule chose dont vous avez besoin, ils valent le détour Ils rendent compte des conversions plus en détail que n'importe quel addon Elementor Le commerce est que vous concevez dans leur interface au lieu de celle d'Elementor, et vous exécutez un plugin qui fait un travail Master Addons a plus de sens quand vous voulez que la popup soit construite avec le même éditeur, widgets, et styles que le reste du site.

Peser d'autres options aussi ? comparez les outils supérieurs côte à côte dans notre tour d'horizon du meilleurs plugins popup builder pour WordPress.

Pour qui cette configuration fonctionne le mieux

• Freelances et développeurs web qui ne veulent pas acheter Pro juste pour les popups.
• Les propriétaires de magasins WooCommerce exécutent des bannières de vente et des offres de récupération de chariots.
• Blogueurs et créateurs de contenu capturant les abonnés par e-mail.
• Agences gérant de nombreux sites clients avec des budgets serrés.
• Startups et petites entreprises validant les offres avant de payer pour des outils premium.

Foire aux questions