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

Free Elementor n'inclut pas de générateur de popup. Le Popup Builder est une fonctionnalité Elementor Pro. Pour obtenir des popups sans payer pour Pro, installez le gratuit Créateur de fenêtres contextuelles Master Addons« , concevez la fenêtre contextuelle à l'intérieur de l'éditeur Elementor normal, définissez-la pour qu'elle s'ouvre sur le chargement de la page et publiez » Ce chemin est gratuit, il fonctionne sur la version gratuite d'Elementor et prend environ cinq minutes.

Ce guide parcourt le tout, avec des captures d'écran prises sur Elementor 4.2.4 et Master Addons 3.2. Il couvre également les parties ignorées par la plupart des didacticiels : quels déclencheurs sont en fait gratuits, comment conserver une fenêtre contextuelle sur chaque page lorsque le ciblage de page est une fonctionnalité Pro et l'API JavaScript qui la remplace elementorProFrontend.modules.popup.showPopup lorsque vous n'avez pas de Pro.

Est-ce que Elementor free a un popup builder ?

Le propre constructeur de popups de No. Elementor est livré avec Elementor Pro uniquement Installer Elementor gratuit et il n'y a aucun élément Popups nulle part dans le menu, et le elementor/popup/show événement n'existe pas sur la page.

Vous avez trois issues :

Master Addons est l'option couverte ici car la popup est construite dans le même canevas Elementor que vous utilisez déjà, il n'y a donc pas de deuxième éditeur à apprendre C'est un plugin gratuit sur WordPress.org qui fonctionne plus de 30 000 sites2, et le Popup Builder est livré avec le téléchargement gratuit.

Si vous préférez comparer plusieurs outils en premier, nous conservons un résumé séparé du meilleurs plugins popup builder pour WordPress.

Ce que le générateur de popup gratuit vous offre réellement

La division ci-dessous a été vérifiée par contrôle dans le plugin, afin que vous puissiez voir où la version gratuite s'arrête avant de commencer à construire.

Ainsi, la version gratuite vous offre une véritable fenêtre contextuelle avec un véritable contrôle de conception. Ce qu’il ne vous donne pas, c’est la variété des déclencheurs et le ciblage au niveau de la page. Les deux ont des solutions de contournement et les deux sont couvertes ci-dessous.

Comment ajouter une fenêtre contextuelle dans Elementor gratuitement, étape par étape

Étape 1 : Installez les modules complémentaires Elementor et Master

Depuis le tableau de bord WordPress, rendez-vous sur Plugins → Ajouter un plugin, recherche de Élémenteur[traduction], installez-le et activez-le Puis recherchez Modules complémentaires principaux pour Elementor et faites de même. Elementor Pro n’est à aucun moment nécessaire.

Le lien Get Elementor Pro dans cette capture d'écran est le cadeau qu'il s'agit de la construction gratuite Tout ci-dessous a été fait exactement sur cette configuration Notes d'installation complètes en direct dans le docs d'installation.

Étape 2 : Ouvrir les modules complémentaires principaux → Popup Builder

L'activation du plugin ajoute un Additions maîtres élément de la barre latérale WordPress. Ouvrez-le et cliquez Créateur Popup.

Cette liste est plus utile qu'elle n'en a l'air Chaque ligne affiche la condition d'affichage de la popup, qu'elle soit Active ou Inactive, et le shortcode que vous pouvez utiliser pour la déposer sur une seule page Gardez cette colonne de shortcode à l'esprit, elle résout le problème de ciblage de page gratuit plus tard.

Étape 3 : Nommez la fenêtre contextuelle et activez l'activation du commutateur

Cliquez Ajouter Nouveau Popup. Une petite boîte de dialogue s'ouvre avec deux champs.

Donnez-lui un nom que vous reconnaîtrez dans six mois, puis tournez-vous Activation on. Une fenêtre contextuelle laissée inactive ne se rend jamais sur le front-end, même si vous la publiez et même si vous la placez par shortcode. C'est la raison la plus courante pour laquelle une fenêtre contextuelle terminée n'affiche rien.

Étape 4 : Définissez l'endroit où la fenêtre contextuelle apparaît

Passer au Conditions onglet dans la même boîte de dialogue.

Sur la version gratuite, vous obtenez une règle : Inclure → Site entier. Les autres règles (Page avant, Singulier, Archive, Search, 404), le type Exclure et le bouton Ajouter une condition sont Pro. Si vous souhaitez que la fenêtre contextuelle soit sur une seule page et que vous restez libre, passez devant la page méthode shortcode.

Maintenant, cliquez Modifier avec Elementor.

Étape 5 : Partez d'un modèle ou d'une toile vierge

L'éditeur s'ouvre avec un cadre contextuel vide Dans la zone de dépôt, il y a un bouton violet Master Addons à côté des propres boutons d'ajout d'Elementor Cliquez dessus pour ouvrir la bibliothèque de modèles contextuels.

Il y a 25 modèles popup là-dedans, tous disponibles sur le plugin gratuit, couvrant les ventes, les lancements de produits, les offres saisonnières, à venir et à propos des pages Passez une carte et cliquez Insérer pour l'importer. Tout importe comme éléments Elementor normaux, vous pouvez donc réécrire le texte et échanger les couleurs immédiatement.

La même idée de bibliothèque s'exécute sur le plugin Si vous voulez des pages et des sections prêtes à l'emploi aussi, c'est le Bibliothèque de modèles Master Addons.

Étape 6 : Concevez la fenêtre contextuelle

Préférez construire les vôtres ? faites glisser les widgets sur le canevas comme vous le feriez sur n'importe quelle page. En-tête, éditeur de texte et bouton couvrent une option d'inscription typique.

Quelques choses qui valent la peine d'être faites ici :

• Gardez la copie à une promesse Un titre, une ligne de texte de support, un bouton.
• Vérifiez les vues de la tablette et du mobile avec les icônes de l'appareil en haut. Une fenêtre contextuelle de 640 px convient parfaitement à un ordinateur portable et est à l'étroit sur un téléphone.
• Pour la capture d'e-mails, déposez un widget de formulaire à partir du plugin de formulaire que vous exécutez déjà. Le formulaire de contact 7 et le MC4WP fonctionnent tous deux dans la fenêtre contextuelle.
• Tous les 80+ Widgets Master Addons sont également disponibles dans la fenêtre contextuelle, donc les minuteries de compte à rebours et les tables de tarification fonctionnent de la même manière que sur une page.

Étape 7 : Choisissez le déclencheur

Cliquez Paramètres contextuels MA dans la barre d'outils supérieure C'est la quatrième icône à partir de la gauche, celle qui ressemble à un document avec un engrenage Les tutoriels plus anciens pointent vers un engrenage dans le coin inférieur gauche, où il vivait avant l'élémenteur 4.

Sept déclencheurs sont répertoriés. Sur Page Charger est-ce le libre, et Retard après chargement de la page (sec) accepte n'importe quoi de 0 à 60 par pas de 0,1 Deux à trois secondes est un point de départ judicieux Le tir agace instantanément les gens sur des connexions lentes, et tout ce qui dépasse dix secondes manque généralement complètement au visiteur.

En dessous, Afficher à nouveau le retard contrôle combien de temps attendre avant de montrer à nouveau la popup à quelqu'un qui l'a fermée Gratuit vous donne Pas de retard, 1, 3 et 5 minutes Pro étend cela aux heures, jours, un mois, et Ne pas afficher à nouveau.

Désactiver le défilement de page est gratuit et par défaut Yes, ce qui verrouille la page derrière la fenêtre contextuelle.

Étape 8 : Définissez la mise en page, la position et l'animation

Ouvrir le Disposition section dans le même panneau Tout cela est gratuit.

Afficher sous bascule la popup entre trois formes :

• Popup Modal: la boîte centrée que la plupart des gens entendent par popup.
• Barre de notification: une bande épinglée en haut de la page, idéale pour les annonces et les offres d'expédition.
• Plein écran: reprend la fenêtre d'affichage, le meilleur pour une seule offre forte.

Les mises en page modales obtiennent alors neuf positions, du Centre Centre au Bas à Droite, et environ 70 animations d'entrée Fade In à 400 ms est la valeur par défaut sûre Le référence des paramètres contextuels répertorie chaque contrôle si vous souhaitez la carte complète.

Étape 9 : Publiez-le et testez-le sur le front-end

Frapper Publier(en anglais), ouvrez ensuite votre site dans une fenêtre privée Voici le démarrage de la popup deux secondes après le chargement de la page, sur Elementor gratuit avec uniquement le plugin gratuit Master Addons actif.

Testez dans une fenêtre privée plutôt que dans l'aperçu de l'éditeur L'éditeur supprime délibérément les popups, et un onglet normal du navigateur peut vous servir une page mise en cache.

Afficher une fenêtre contextuelle sur une seule page, gratuitement

Les conditions d'affichage au niveau de la page sont Pro. Le shortcode est gratuit et atteint le même résultat dans l'autre sens.

Chaque popup de la liste Popup Builder contient un shortcode comme . Collez-le dans une page, une publication, une zone de widget ou un widget Shortcode dans Elementor, et cette fenêtre contextuelle se charge sur cette seule page. Le placer de cette façon ignore complètement les conditions d'affichage.

Deux règles à savoir :

• Le popup doit être publié et son Activation toggle doit être activé Une popup inactive ne rend rien, shortcode ou non.
• Le shortcode ne génère aucun balisage visible à l'endroit où vous le collez. La fenêtre contextuelle est imprimée dans le pied de page et s'ouvre en fonction de son déclencheur.

Ainsi, une fenêtre contextuelle gratuite spécifique à une page ressemble à ceci : laissez la condition sur l'ensemble du site et déposez le shortcode sur la seule page qui devrait l'avoir.

Les sept déclencheurs contextuels et lesquels vous obtenez gratuitement

Exit Intent est de nature uniquement sur ordinateur de bureau Les téléphones n'ont pas de curseur pour quitter la fenêtre, il n'y a donc rien à détecter par le déclencheur. Testez-le sur un navigateur de bureau avant de déposer un bug.

Le déclencheur gratuit On Page Load a le sien configuration doc si vous voulez la version courte.

Comment déclencher une fenêtre contextuelle Elementor sur un bouton cliquez

C'est le déclencheur le plus demandé après le chargement de la page, et c'est celui que les gens essaient le plus souvent de simuler avec JavaScript Avec Master Addons Pro c'est un champ de texte.

1. Concevez et enregistrez la fenêtre contextuelle comme d'habitude.
2. Dans Paramètres contextuels MA, réglé Ouvrir Popup à Sur Cliquez.
3. Dans Ouvrir par sélecteur(en), tapez le sélecteur comprenant le point, par exemple .open-newsletter-popup.
4. Modifier le bouton qui doit l'ouvrir Aller à Classes avancées → CSS et type open-newsletter-popup, cette fois sans le point.
5. Mettez à jour les deux, puis testez sur le frontal.

Le désaccord de points aux étapes 3 et 4 provoque la plupart du déclencheur de clics d'“my ne fait rien pour les rapports de” que nous voyons Le champ de déclenchement prend un sélecteur CSS, le champ Élémenteur prend un nom de classe.

Le sélecteur ne se limite pas aux boutons Tout élément que vous pouvez donner à une classe fonctionne : un conteneur, un en-tête, une icône, une image Vous pouvez également cibler un lien existant avec un sélecteur d'attributs tel que a[href="#pricing-popup"]. Il y a un lien de parenté Widget Déclencheur Popup pour placer les actions de fermeture et de redirection à l'intérieur de la popup elle-même.

Sans Pro, quatre lignes de JavaScript font le même travail Ce code est dans la section suivante.

L'événement elementor/popup/show, et ce qui le remplace sans Pro

elementorProFrontend.modules.popup.showPopup et le elementor/popup/show les événements appartiennent tous deux à Elementor Pro. Le module contextuel s'enregistre sur le elementorProFrontend objet, donc sur une installation gratuite cet objet est indéfini et l'événement ne se déclenche jamais Aucun extrait ne le ramène, car le code qui l'émettrait est dans le plugin Pro.

Le plugin gratuit Master Addons fournit sa propre API qui couvre le même sol.

Master Addons expose un global appelé JltmaPopups sur toute page où une popup est présente Voici le mapping : X. Dans le cadre de la mise en place de la carte, on peut également utiliser la carte (en anglais)

Chaque popup est imprimé avec l'identifiant DOM jltma-popup-id-<post ID>. L'ID de poste est le numéro dans le shortcode sur l'écran de liste Popup Builder Pour ouvrir le popup 441 à partir de votre propre code :

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

Pour connecter cela en un clic, qui est le remplaçant gratuit du déclencheur En clic :

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

Et de le refermer :

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

Trois choses à regarder:

• getLocalStorage() retours false jusqu'à ce que la fenêtre contextuelle soit initialisée sur la page, ce qui se produit sur DOM ready Exécutez votre code à l'intérieur jQuery(function ($) { ... }) et vous allez bien.
• Le popup doit être sur la page pour que tout cela fonctionne Soit sa condition inclut la page, soit vous l'avez placée avec le shortcode.
• Le script est volontairement ignoré dans l'éditeur Elementor, alors testez sur le front-end.

Pourquoi elementor/popup/show tire deux fois

Sur Elementor Pro, le handler exécuté deux fois signifie presque toujours qu'il a été lié deux fois : une fois elementor/frontend/init et encore dans un extrait ou un fichier de thème, ou une fois par instance de popup lorsque plusieurs sont présents Gardez-le avec un drapeau, ou liez avec .off('elementor/popup/show').on(...) avant de reliure. Elementor's own documentation des événements contextuels répertorie la signature complète de l'événement.

L'équivalent Master Addons n'a pas d'événement de document à double liaison, donc le problème ne se reporte pas Vous appelez openPopup() directement au moment où vous voulez que la popup soit ouverte.

Pourquoi votre popup Elementor ne s'affiche pas

Par ordre approximatif de fréquence à laquelle chacun s’avère en être la cause :

1. L'activation est désactivée. Ouvrez Master Addons → Popup Builder et cochez la colonne Statut Inactif signifie que rien ne rend nulle part, shortcode inclus.
2. Le popup est toujours un brouillon. Enregistrer le design dans Elementor n'est pas la même chose que publier la fenêtre contextuelle.
3. Vous testez dans l'aperçu de l'éditeur. Les popups y sont supprimés par conception Utilisez une fenêtre privée.
4. Cache. Purger le plugin de mise en cache et le CDN, puis recharger dans une fenêtre privée Une page HTML mise en cache ne contiendra pas de popup nouvellement publiée.
5. Afficher à nouveau Retard déjà tiré. Une fois que vous fermez la fenêtre contextuelle, le plugin stocke un horodatage dans le stockage du navigateur Effacer les données du site ou changer de navigateur lors de tests répétés.
6. Désadaptation de points sur un sélecteur de clics. Le champ de déclenchement veut .my-class, le champ Classes CSS de l'élémenteur veut my-class.
7. Exit intention sur un téléphone. Il n'y a pas de curseur, donc rien ne s'allume Bureau seulement.

Additions principales contre popups Elementor Pro

Si les popups sont la seule fonctionnalité Pro que vous souhaitez, le constructeur gratuit Master Addons plus un shortcode le couvre Si vous souhaitez quitter l'intention ou cliquer sur déclencheurs sans écrire JavaScript, comparez le Prix Master Addons contre un renouvellement Elementor Pro, puisque la licence Master Addons apporte également le Constructeur de thèmes et Constructeur de widgets avec.

Questions fréquemment posées

Lecture connexe

• Créateur de fenêtres contextuelles Master Addons, la page de fonctionnalités avec chaque paramètre répertorié
• Meilleurs plugins popup builder pour WordPress: si vous souhaitez comparer les outils
• Paramètres et options de la fenêtre contextuelle: la référence de contrôle complète
• Modules complémentaires principaux sur WordPress.orgforum de téléchargement et d'assistance