Comment ouvrir une fenêtre contextuelle sur un clic de bouton à l'aide d'Elementor ? [2022]

Vous vous demandez à quel point votre site Web apparaîtra attrayant pour les visiteurs si une fenêtre contextuelle s'ouvre sur un clic de bouton ? Si vous voulez un tel bouton interactif qui ouvre une fenêtre contextuelle, il existe de nombreuses façons dans le constructeur de sites Web le plus populaire, Elementor . Aujourd'hui, nous allons vous montrer comment vous pouvez facilement créer une superbe fenêtre contextuelle en cliquant sur un bouton sans codage.

5 meilleurs cas d'utilisation du bouton avec la fenêtre contextuelle modale Elementor

Jetons un coup d'œil aux avantages dont vous profiterez en ouvrant une fenêtre contextuelle modale Elementor en cliquant sur un bouton avant de commencer le didacticiel. Fondamentalement, ce type de popup modal interactif est utilisé pour les campagnes de marketing de site Web . En dehors de ceux-ci, il existe également de nombreux cas d'utilisation polyvalents pour ouvrir une fenêtre contextuelle en cliquant sur un bouton. Voici les 5 meilleurs cas d'utilisation de popup modal.

1. Pour capturer des prospects pour les entreprises

Pour gérer votre entreprise en douceur et accélérer la croissance de votre entreprise, vous avez besoin de prospects. En entretenant des prospects, vous pouvez les convertir en clients réguliers. Et un site Web est le meilleur moyen de capturer des prospects. Si vous ouvrez une fenêtre contextuelle en cliquant sur un bouton, vous pouvez facilement collecter les noms, numéros de téléphone, e-mails et autres détails des prospects .

2. Collecte de l'abonnement par e-mail

Habituellement, si vous ajoutez un bouton de base pour collecter les abonnements par e-mail, vos utilisateurs seront redirigés vers une nouvelle page Web. Au lieu de cela, vous pouvez faire en sorte qu'une fenêtre contextuelle s'ouvre sur un clic de bouton, vos utilisateurs n'auront alors pas à quitter la page Web actuelle. Cette pratique augmente étonnamment votre abonnement aux e-mails compter en douceur.

3. Promotions marketing et ventes

Lorsque vous exécutez des promotions marketing sur votre site Web, une fenêtre contextuelle s'ouvre sur un clic de bouton peut donner à votre site un aspect interactif et augmenter les ventes . Vous pouvez ajouter des images, des formulaires, des coupons de réduction spéciaux, etc. sur une seule fenêtre contextuelle d'Elementor. Sans rendre votre site Web indésirable avec les sections de promotion, vous pouvez le remplacer par une fenêtre contextuelle qui s'ouvre en un clic.

4. Partager des annonces passionnantes

Si vous prévoyez d' annoncer une grande sortie ou d'autres annonces et promotions passionnantes, une fenêtre contextuelle s'ouvre sur un clic de bouton peut être le meilleur moyen. Cela donnera à votre site Web un look époustouflant et vous pourrez décorer le site Web avec des confettis virtuels et d'autres décorations festives. De plus, si vous envisagez d'annoncer une grande nouvelle "à venir", la fenêtre contextuelle qui s'ouvre sur un clic de bouton peut vous aider à créer le buzz .

5. Utiliser comme verrou de contenu

Lorsque vous avez un site Web polyvalent, il peut être nécessaire de fournir des restrictions sur le contenu en fonction de l'âge, de l'adhésion, de l'abonnement et bien d'autres. Si vous fournissez directement du contenu restreint directement sur une section de site Web, cela diminuera certainement votre nombre de clics par action. Au lieu de cela, vous pouvez créer une fenêtre contextuelle attrayante qui s'ouvre instantanément en cliquant sur un bouton.

Pourquoi Elementor est-il la meilleure plateforme pour créer un popup sur un bouton ?

Dans les sites Web, il existe plusieurs façons de créer une fenêtre contextuelle qui s'ouvre sur un clic de bouton dans WordPress. Une façon de le faire est de coder sur mesure ou d'embaucher des experts. Si vous n'êtes pas féru de technologie, l'élaboration de codes ou l'embauche d'experts peut vous coûter une fortune. Mais lorsque vous utilisez Elementor - le constructeur de sites Web WordPress le plus populaire, vous pouvez le faire sans codage .

Pour créer une popup qui s'ouvre sur un clic de bouton, vous pouvez le faire simplement par glisser-déposer , aucun codage nécessaire. De plus, avec l'aide du constructeur Elementor Popup, la création d'une fenêtre contextuelle s'ouvre sur un clic de bouton est si simple que vous pouvez la créer vous-même. Elementor offre des options de personnalisation et de personnalisation illimitées. Ainsi, en alignant cela sur la valeur de la marque de votre site Web, vous pouvez créer n'importe quel type de popup qui s'ouvre instantanément sur un clic de bouton.

Tutoriel sans code : comment ouvrir une fenêtre contextuelle modale Elementor en cliquant sur un bouton ?

Passons maintenant au didacticiel et commençons à ouvrir une fenêtre contextuelle en cliquant sur un bouton. Avant de commencer à créer une fenêtre contextuelle Elementor, tout ce dont vous avez besoin est de 5 minutes de concentration et suivez ce didacticiel facile étape par étape.

Étape 1 : Commencez avec Elementor PRO

Si vous envisagez de créer une fenêtre contextuelle modale qui s'ouvre sur un clic de bouton à l'aide d'Elementor, vous devez alors obtenir Elementor PRO . Avec la fonctionnalité exclusive d'Elementor PRO, Elementor Popup Builder , vous pouvez créer instantanément des popups qui s'ouvrent en un clic. Elementor est livré avec des plans tarifaires polyvalents, à partir de 49 $ . Après avoir obtenu le plugin Elementor PRO, installez-le et activez-le sur votre site Web WordPress.

Étape 2 : créer un modèle à l'aide du constructeur de fenêtres contextuelles Elementor

Il est maintenant temps de créer un modèle pour que la fenêtre contextuelle s'ouvre sur un clic de bouton. Pour cela, rendez-vous sur votre tableau de bord WordPress, allez dans Templates → Popup . En cliquant sur l'onglet, il vous amènera instantanément au générateur de popup Elementor. Cliquez ensuite sur le bouton 'Ajouter un nouveau popup' . Une fenêtre contextuelle apparaîtra. Le type de modèle est automatiquement sélectionné en tant que popup. Vous pouvez donner un nom de modèle si vous le souhaitez, puis cliquer sur le bouton "Créer un modèle" .

Ensuite, vous serez redirigé vers la bibliothèque de modèles Elementor . Il existe plus de 100 collections contextuelles disponibles dans des catégories polyvalentes. En fonction des exigences de votre site Web WordPress, sélectionnez un modèle de popup Elementor approprié. Cliquez sur le modèle pour obtenir un bref aperçu. Cliquez ensuite sur le bouton "Insérer" pour que la fenêtre contextuelle modale s'ouvre sur un clic de bouton.

Étape 3 : Configurez et personnalisez le modèle de popup

Après cela, le panneau de l'éditeur Elementor s'ouvrira avec toutes les options de configuration sur le côté gauche. À partir de là, vous pouvez facilement personnaliser la fenêtre contextuelle qui s'ouvre en un clic de bouton. Vous pouvez conserver la fenêtre contextuelle modale avec Boxed ou Full Width . De même, vous pouvez configurer la hauteur de la fenêtre contextuelle modale, l'espacement des colonnes, la position des colonnes, l'alignement vertical, le débordement, les balises HTML, etc. Différents types de largeur offrent différents types de configuration.

Pour personnaliser le contenu de la fenêtre contextuelle modale, cliquez simplement sur le texte, l'image ou les boutons. Instantanément, le panneau d'édition sera ouvert sur la gauche. Vous pouvez facilement modifier le contenu de la fenêtre contextuelle, la famille de polices, etc. Ajoutez également plusieurs sections de sortie d'e-mail, la hauteur des boutons, la largeur, la couleur, le texte et bien d'autres. Une option est disponible pour définir des actions après l'envoi, gérer les soumissions, ajouter un contenu d'e-mail personnalisé, l'e-mail du destinataire, l'identifiant de l'e-mail de l'expéditeur, etc. Après avoir effectué toutes les modifications, cliquez sur le bouton "Publier" .

Étape 4 : Configurer les conditions et les déclencheurs

Vous pouvez utiliser la fenêtre contextuelle qui s'ouvre en un clic pour l'ensemble du site Web WordPress ou des pages sélectives. Vous pouvez également inclure ou exclure la fenêtre contextuelle Elementor des pages sélectionnées. Toutes ces configurations sont disponibles dans l'onglet 'Condition' .

Depuis l'onglet 'Triggers' , vous devez définir quand vous voulez que la popup s'ouvre sur un clic de bouton. Comme nous voulons prévisualiser la fenêtre contextuelle en cliquant sur le bouton, basculez pour activer 'On Click' . À partir de "Règles avancées", vous pouvez configurer des conditions comme à qui afficher la fenêtre contextuelle, afficher à l'arrivée du formulaire, et bien d'autres. Cliquez ensuite sur le bouton 'Enregistrer et fermer' . C'est avec quelle facilité vous pouvez créer un modèle de popup Elementor. Revenez ensuite au tableau de bord WordPress.

Étape 4 : Ajoutez un bouton Elementor là où vous en aviez besoin

Maintenant, ouvrez une page où vous souhaitez définir une fenêtre contextuelle qui s'ouvre sur un clic de bouton. Si vous souhaitez créer une nouvelle page, accédez à Pages → Ajouter nouveau . pour ce tutoriel, nous allons connecter le popup modal avec le bouton Elementor. Faites glisser et déposez le bouton Elementor sur votre page.

Personnalisez l'apparence du bouton, le texte, etc. pour l'adapter à la couleur de la marque de votre site Web. L'étape suivante consiste à lier le bouton au modal contextuel. Pour ce faire, cliquez sur le 'Type dynamique' dans le champ 'Lien' , choisissez Popup dans Actions . Ensuite, cliquez sur l'icône "Paramètres" à côté de la fenêtre contextuelle et sélectionnez le modèle de fenêtre contextuelle précédemment créé. C'est ça!

Le dernier coup d'œil de la fenêtre contextuelle s'ouvre sur le clic du bouton Elementor

C'est avec quelle facilité vous pouvez créer une fenêtre contextuelle qui s'ouvre sur un clic de bouton. Après avoir effectué d'autres personnalisations, publiez la page. Passons maintenant à l'aperçu pour voir comment une fenêtre contextuelle s'ouvre sur un clic de bouton.

Si vous souhaitez utiliser le même bouton pour différentes pages, copiez et collez le bouton sur une nouvelle page Web. En outre, vous pouvez copier le shortcode du modèle contextuel Elementor et l'utiliser partout où vous souhaitez ajouter une fenêtre contextuelle qui s'ouvre en un clic de bouton.

Bonus pour les addons essentiels pour les utilisateurs d'Elementor

Essential Addons For Elementor est la bibliothèque Elementor la plus puissante avec plus d' un million d'utilisateurs actifs et plus de 85 widgets uniques. Et son widget Creative Button est doté d'une conception plus polyvalente et d'une utilisation polyvalente pour ses clients. Si vous utilisez le widget de bouton Essential Addons, alors de la même manière que le bouton Elementor, vous pouvez faire en sorte qu'une fenêtre contextuelle s'ouvre facilement sur un clic de bouton.

Elementor a facilité le développement de sites Web. Comme la fenêtre contextuelle s'ouvre sur un clic de bouton, vous pouvez créer des fonctionnalités plus étonnantes et polyvalentes sur votre site Web WordPress. Voici la fin de ce tutoriel. Si vous avez trouvé ce tutoriel utile, n'oubliez pas de le partager avec d'autres.

Faites-nous savoir comment vous créez une fenêtre contextuelle qui s'ouvre sur un clic de bouton en utilisant Elementor dans notre communauté Facebook . Aussi, abonnez-vous à notre blog pour rester à jour sur ce genre de tutoriels, trucs et astuces.