skip to Main Content

JetPopup ou Elementor Popup Builder: Lequel choisissez-vous?

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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

Elementor

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 tJetPopupsotalement 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.

JetPopup

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”.

Popup Builder
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.

creation de popup

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

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é.

popups library

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.

popup settings

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.”

add new popup

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.

popup elements

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.

popup action button

edit popup action button

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.

popup general settings

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

popup builder editing

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

publish popup

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

popup settings

front page of a popup

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.

Positionnement

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.

Effets d'animation

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.

jet popup 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.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

bibliothèque de modèles d’Elementor

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.

jet popups presets library

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 BuilderJetPopup
Prix45 $15 $
Modèles100+100+
Déclencheurs6 déclencheurs, 7 règles avancées5 événements ouverts avec des paramètres supplémentaires
Animatio36 types13 types
Tutorielsdocumentationdocumentation, 9 tutoriels vidéo

JetPopup vs Popup Builder

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!

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
1 Partages
Partagez1
Tweetez
Enregistrer