Les premiers popups ont été créés à partir du scénario imaginé par Ethan Zukerman pour l’hébergement de sa page Web sur Tripod au début des années 90. Ses utilisateurs se plaignant du nombre d’annonces qu’il a placées sur le site Web, il a donc décidé de placer les bannières sur une page distincte qui s’ouvrait lorsqu’un utilisateur accédait à la page.
Ce petit morceau de code n’était toujours pas un véritable popup comme on le voit actuellement sur tous les sites Web, mais c’est là que tout a commencé. Sur les pages Web modernes, les fenêtres contextuelles sont utilisées à des fins différentes, pas seulement pour les publicités. Les formulaires de contact, les avertissements de politique de confidentialité et les suggestions d’abonnement sont également souvent présentés sous forme de fenêtres contextuelles.
Il y a deux choses qui dérangent les utilisateurs en ce qui concerne les popups: quand ils vous sautent dessus quand vous ne les voulez pas; et lorsque son apparence diffère complètement du style du site Web. Ces deux problèmes apparaissent lorsque vous utilisez des plugins qui ne semblent pas être de la plus haute qualité.
Le plus gros problème de la plupart des plugins que les développeurs débutants utilisent pour la création de pop ups est le manque de contrôle sur le message résultant. Cependant, vous pourriez éviter tous ces problèmes si vous utilisez Elementor pour créer un site Web.
Deux plugins géniaux, créés spécialement pour Elementor Page Builder, vous aident à créer des fenêtres contextuelles de tous les types, formes et styles dont vous avez besoin – Elementor Popup Builder et JetPopup. Comme ils sont tous deux faits de la même chair qu’était Elementor, la seule question à se poser est de savoir lequel de ces plugins choisir. Pour vous aider à prendre cette décision, je vais faire un examen approfondi des deux et vous pouvez comparer leurs avantages et leurs inconvénients. Alors allons-y !
Téléchargement et installation
Ce n’est pas le critère le plus important lorsque vous choisissez le plugin à utiliser, mais pour l’essayer, vous devez d’abord l’obtenir. C’est pourquoi je vais commencer dès le début et décrire le processus pour l’obtenir – la tarification, les efforts nécessaires et la simplicité du processus d’installation.
Popup Builder
Ce plugin a été créé par l’équipe d’Elementor. On pourrait donc l’appeler son véritable «enfant». Il s’agit de la dernière mise à jour d’Elementor, lancée en janvier 2019 pour répondre aux besoins des clients. Cependant, il n’est pas disponible pour les utilisateurs de la version gratuite d’Elementor.
Popup Builder est inclus dans le plan d’abonnement professionnel. Donc, pour avoir la possibilité de créer des popups, il faut d’abord avoir Elementor Pro. Le plan tarifaire le plus simple qui vous permet d’utiliser toute la variété des fonctionnalités d’Elementor pour un seul site Web coûte 49 $ par an. Ainsi, dès les premières étapes (achat d’Elementor Pro), voici l’algorithme permettant d’obtenir Popup Builder:
- Achetez Pro Elementor Page Builder.
- Allez sur votre compte personnel et téléchargez le plugin.
- Accédez au tableau de bord de votre site Web, Plugins > Add new, cliquez sur le bouton“Upload plugin” et choisissez le fichier .zip approprié.
- Lorsque l’installation est terminée, activez le plugin avec votre clé de licence.
- Voilà le Popup Builder se trouve dans Templates > Popups tab.
C’est un peu long chemin, mais avec Popup Builder, vous obtenez également une énorme collection d’éléments différents d’Elementor, tels que des widgets, des modèles et d’autres outils supplémentaires.
Popup Builder
JetPopup
La “famille” de Jet plugins compte déjà plus de 10 articles et JetPopup en fait partie. Il a été soigneusement créé spécifiquement pour Elementor et augmente le nombre de ses outils disponibles. Ce plugin est t
otalement compatible avec les versions gratuites et payantes. Vous n’avez donc pas besoin de faire d’achats supplémentaires. JetPopup coûte 15 $ et une fois que vous l’avez obtenu, vous pouvez l’utiliser pour un seul site Web. Si vous en avez besoin pour plus d’un projet, vous pouvez acheter le plug-in sous la licence du développeur (il vous en coûtera 45 $) et l’utiliser pour cinq sites Web. L’algorithme d’obtention du plugin est un peu plus simple:
- Achetez le plugin sur le marketplace de TemplateMonster. Il sera téléchargé sur votre ordinateur.
- Accédez au tableau de bord de votre site Web, Plugins > Add new, cliquez sur le bouton “Upload plugin” et choisissez le fichier .zip approprié.
- Lorsque l’installation est terminée, activez le plugin.
- Voila! Lorsque vous ouvrez le menu de personnalisation Elementor (en cliquant sur le bouton «Edit with Elementor»), vous trouverez la section JetPopup dans le menu de gauche du widget.
Création de popup
Maintenant, quand les outils sont là et prêts, je peux essayer de créer une popup avec les deux plugins et voir à quel point la fonctionnalité est simple et compréhensible. Ensuite, je vais créer une fenêtre contextuelle de base et jeter un coup d’œil sur les options de personnalisation de Popup Builder et de JetPopup.
Popup Builder
Dans Pro Elementor les fenêtres contextuelles sont faites séparément des pages du site. Pour modifier l’apparence du site Web, ouvrez la page à personnaliser, cliquez sur le bouton “Edit with Elementor” et faites des changements. Mais pour créer (et ensuite éditer) des popups vous devez aller à Templates > Popups et taper sur le bouton “Add new popup”.
Essayer Popup Builder Maintenant
Dans la fenêtre ouverte, vous devez choisir le modèle que vous allez créer (oui, vous pouvez créer des modèles non seulement pour les fenêtres contextuelles, mais également pour les pages et autres éléments) et donnez lui un nom.
Après avoir appuyé sur le bouton “Create template” vous serez redirigé vers le menu de personnalisation Elementor. Il est plus facile de personnaliser un élément existant en le construisant à partir de zéro. Il vous sera donc tout d’abord proposé de choisir un modèle approprié.
J’ai choisi l’un des modèles affichés en haut de la liste de la bibliothèque. Juste après le choix, vous atterrissez sur le champ de travail Elementor auquel vous êtes probablement habitué. Les options de personnalisation sont placées dans la barre latérale sur le côté gauche de l’écran. Vous avez trois onglets ici.
L’onglet “Settings” vous permet de changer la mise en page du popup, changer le nom du modèle et faire l’aperçu. Sur l’onglet “Style” vous pouvez personnaliser la conception – changer les couleurs, les polices, les images et les bordures. L’onglet “Advanced” a aussi un ensemble de curseurs supplémentaires; par exemple, ils empêchent la fermeture du popup par la touche ESC.
Comme vous pouvez le constater – rien d’inattendu, si vous avez déjà utilisé Elementor, vous ne rencontrerez aucun problème avec ce plugin. Voici une vidéo détaillée qui explique comment créer une fenêtre contextuelle à l’aide de Popup Builder:
JetPopup
Ce plugin ajoute également un nouvel onglet à votre tableau de bord du thème WordPress et avec son aide, les popups sont également créés séparément des pages. Les popups prêts à l'emploi sont également stockés dans un onglet nommé “Popup library.” Pour créer un nouveau popup, vous pouvez soit appuyer sur le bouton “Add” sur le modèle prédéfini ou allez à JetPopup > Add new popup, donnez un nom au modèle et appuyez sur “Edit with Elementor.”
Le champ de travail est légèrement différent de la norme car vous créez maintenant une fenêtre plus petite. Dans le menu de gauche, vous pouvez ajouter n’importe quel type d’élément à votre popup.
Le plugin JetPopup ajoute au menu du widget un seul élément – bouton d’action contextuel. Cela permet de définir le type d’action qui se produira lorsque l’utilisateur appuiera sur le bouton.
Il n’est pas vraiment évident d’ouvrir les paramètres de la fenêtre contextuelle. Vous devez cliquer sur le bouton de maintenance en bas du menu. Le menu des paramètres est assez similaire à celui de Popup Builder, mais il n’y a que deux onglets de personnalisation. “General Settings” vous permet de définir un effet d’animation, de renommer le modèle ou de définir les conditions. Sur l’onglet “Style” vous pouvez modifier les mises en page, les couleurs, les images, les polices et les bordures.
JetPopup a une fonctionnalité un peu moins évidente mais le compense avec des tutoriels vidéo détaillés et utiles.
Déclencheurs
Pour être utiles et ne pas gêner les visiteurs, les popups doivent apparaître au bon moment. Les conditions dans lesquelles le popup est affiché sont appelées «déclencheurs». Plus les conditions disponibles sont détaillées, plus le plugin de popup est flexible. La précision est très importante si vous ne voulez pas que votre utilisateur quitte le site après l’affichage de la fenêtre contextuelle du formulaire d’abonnement.
Popup Builder
Ce plugin vous aide à définir les conditions nécessaires juste après la personnalisation de la fenêtre contextuelle. Lorsque vous appuyez sur le bouton “Publish” vous voyez la fenêtre dans laquelle vous pouvez définir des conditions (sur quelles pages cette fenêtre contextuelle sera affichée), des déclencheurs (lorsque la fenêtre contextuelle sera affichée) et des règles avancées.
Popup Builder a six déclencheurs, tels que l’affichage sur un défilement et un clic, et sept règles avancées, telles que l’affichage après un nombre défini de sessions ou l’affichage sur certains appareils. Les déclencheurs et les règles avancées ont des commutateurs simples à curseur et il sera très rapide de définir tous les paramètres souhaités.
JetPopup
Tous les déclencheurs, conditions et événements d’ouverture sont regroupés dans les paramètres. Après avoir cliqué sur le bouton de maintenance, vous ouvrez les onglets de paramètres et pouvez définir les déclencheurs immédiatement. Vous pouvez définir le pourcentage de la page après le défilement, le menu contextuel à afficher ou le nombre de secondes après lequel l’utilisateur verra le message.
La fenêtre ne peut être affichée qu’une fois ou à chaque fois que l’utilisateur effectue certaines actions (je ne le recommande pas vivement – cela ne fera pas le bonheur des utilisateurs). Vous pouvez également choisir très précisément les publications ou les pages où cette fenêtre contextuelle en béton sera affichée. En général, ce plugin est assez flexible et permet d’afficher des popups avec une grande précision.
Positionnement
Les utilisateurs ne seront certainement pas en mesure d’éviter les fenêtres qui sautent directement au centre de l’écran, mais ils détournent l’attention des visiteurs du site Web et peuvent être vraiment ennuyeux. Toutes les fenêtres contextuelles ne doivent pas être placées au centre, un ruban étroit en haut sera moins visible, mais peut être beaucoup plus efficace. Cela signifie que vous avez besoin de contrôler la position de la fenêtre et de pouvoir vous déplacer sur l’écran.
Popup Builder et JetPopup divisent l’écran en neuf secteurs et vous permettent de placer votre popup dans n’importe lequel d’entre eux. Le positionnement est défini le long des échelles gauche-droite et haut-bas. Ce n’est pas très flexible, mais c’est assez pour un popup.
Effets d’animation
La façon dont la fenêtre glisse (ou roule ou saute) sur la page est très importante. Si la fenêtre se déplace trop vite ou trop lentement, cela ne sera pas efficace. Les rebonds, les chatouilles et les tremblements doivent également être utilisés avec une grande précision. Les effets d’animation rendent le site plus dynamique, mais ils peuvent également gâcher toute l’impression.
Popup Builder a 36 types d’animation d’entrée, y compris différents types de glissement, de déploiement, de zoom, de rebond et de rotation dans différentes directions. Tout cela, ainsi que la durée de l’animation, se trouvent dans la section « Layout » de l’onglet Settings.
Il existe 13 types d’animation dans le plugin JetPopup, y compris les fondus, le retournement vertical, différentes diapositives, le rebondissement et le zoom. Vous les trouverez dans la section “Settings” de l’onglet Settings.
Modèles
Dans certains cas, vous souhaitez créer une fenêtre contextuelle avec une structure spécifique et savoir exactement à quoi elle devrait ressembler. Mais c’est une occasion plutôt rare; beaucoup plus souvent, vous n’avez aucune idée des éléments que votre popup doit contenir. C’est là que les modèles sont utiles. Même si vous n’utilisez aucun des échantillons pré-configurés, leur traitement peut vous donner un bon aperçu. Et, bien sûr, personnaliser un élément prêt à l'emploi est beaucoup plus rapide et facile que de le construire à partir de zéro.
Popup Builder a ajouté une catégorie à la bibliothèque de modèles d’Elementor. Comme je vous l’ai déjà dit, vous pouvez le voir dès le début du nouveau processus de création d’une fenêtre contextuelle. L’assortiment de modèles de popup est suffisamment grand; il y a plus de 100 articles. Dans le coin supérieur gauche, un outil de tri par catégorie déroulant vous permet d’accélérer votre recherche. Les catégories sont compréhensibles et il ne faudra pas beaucoup de temps pour trouver le popup dont vous avez besoin.
JetPopup possède également une énorme bibliothèque de modèles. Tous sont stockés dans l’onglet Bibliothèque contextuelle et disposent de fonctionnalités pratiques telles que le bouton de prévisualisation et le compteur d’utilisation. Il y a plus d’options de tri, la liste pourrait être configurée pour afficher un type spécifique de modèles et être ensuite placés dans un ordre quelconque; par exemple, en fonction de la date de création. Je ne peux pas vous dire le nombre exact de modèles disponibles, mais il y en a certainement plus de 100.
Tableau de comparaison
| Elementor Popup Builder | JetPopup | |
| Prix | 45 $ | 15 $ |
| Modèles | 100+ | 100+ |
| Déclencheurs | 6 déclencheurs, 7 règles avancées | 5 événements ouverts avec des paramètres supplémentaires |
| Animatio | 36 types | 13 types |
| Tutoriels | documentation | documentation, 9 tutoriels vidéo |
Conclusion
Je ne peux pas dire lequel de ces deux plugins est le meilleur; c’est trop compliqué de les juger. Chaque cas et chaque personne a ses propres exigences pour le choix des plugins. Je suppose que vous devriez le définir vous-même – lequel de ces deux sera le mieux pour vous? Je vous souhaite bonne chance pour ajouter un popup impressionnant à votre site web!
