{"id":16823,"date":"2020-06-01T03:43:10","date_gmt":"2020-06-01T03:43:10","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-creer-un-mode-popup-de-connexion-wordpress-etape-par-etape\/"},"modified":"2020-06-01T03:43:10","modified_gmt":"2020-06-01T03:43:10","slug":"comment-creer-un-mode-popup-de-connexion-wordpress-etape-par-etape","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-creer-un-mode-popup-de-connexion-wordpress-etape-par-etape\/","title":{"rendered":"Comment cr\u00e9er un mode popup de connexion WordPress (\u00e9tape par \u00e9tape)"},"content":{"rendered":"

Voulez-vous ajouter une fen\u00eatre de connexion WordPress \u00e0 votre site? Une fen\u00eatre de connexion modale permet \u00e0 vos utilisateurs de se connecter rapidement \u00e0 votre site Web sans quitter la page qu’ils consultent. Cela am\u00e9liore l’exp\u00e9rience utilisateur et l’engagement sur votre site Web. Dans cet article, nous vous montrerons comment cr\u00e9er facilement un popup modal de connexion WordPress, \u00e9tape par \u00e9tape.<\/p>\n

\"<\/p>\n

<\/span>Pourquoi cr\u00e9er un mode popup de connexion WordPress?<\/span><\/h4>\n

Si vous g\u00e9rez une boutique en ligne, un site Web d’adh\u00e9sion ou vendez des cours en ligne, il est probable que les utilisateurs puissent s’inscrire et se connecter \u00e0 votre site Web.<\/p>\n

En r\u00e8gle g\u00e9n\u00e9rale, lorsque les utilisateurs cliquent sur le lien de connexion, ils sont redirig\u00e9s vers la page de connexion WordPress par d\u00e9faut ou une autre page de connexion personnalis\u00e9e sur leur site Web. Une fois les utilisateurs connect\u00e9s, ils sont redirig\u00e9s vers une autre page.<\/p>\n

Une fen\u00eatre contextuelle de connexion modale vous permet d’afficher le formulaire de connexion sans envoyer les utilisateurs vers une autre page. Une fois connect\u00e9, vous pouvez rediriger les utilisateurs vers la page souhait\u00e9e. <\/p>\n

Une fen\u00eatre contextuelle de connexion modale est plus rapide et am\u00e9liore l’exp\u00e9rience utilisateur sur votre site Web. Une exp\u00e9rience utilisateur plus rapide et plus fluide peut augmenter vos ventes et conversions. <\/p>\n

Cela dit, examinons comment cr\u00e9er facilement une fen\u00eatre contextuelle de connexion modale dans WordPress. Nous allons vous montrer deux fa\u00e7ons de le faire et vous pouvez choisir celle qui convient le mieux \u00e0 vos besoins. <\/p>\n

<\/span>M\u00e9thode 1. Cr\u00e9ez une fen\u00eatre contextuelle de connexion modale \u00e0 l’aide de la connexion CSH<\/span><\/h4>\n

Cette m\u00e9thode est plus simple et recommand\u00e9e pour la plupart des utilisateurs.<\/p>\n

La premi\u00e8re chose \u00e0 faire est d’installer et d’activer le plugin de connexion CSH. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d’installer un plugin WordPress.<\/p>\n

Apr\u00e8s l’activation, vous devez vous rendre sur Connexion modale<\/strong> dans votre zone d’administration WordPress et s\u00e9lectionnez un type pour le formulaire de connexion modale. <\/p>\n

\"S\u00e9lectionnez<\/p>\n

Apr\u00e8s avoir s\u00e9lectionn\u00e9 le type de bo\u00eete de connexion modale, vous pouvez faire d\u00e9filer vers le bas et g\u00e9rer les redirections de connexion \/ d\u00e9connexion pour le formulaire. Vous pouvez \u00e9galement autoriser les utilisateurs \u00e0 g\u00e9n\u00e9rer leurs propres mots de passe.<\/p>\n

\"Rediriger<\/p>\n

Ensuite, vous devez faire d\u00e9filer vers le bas pour modes<\/strong> section et s\u00e9lectionnez la mise en page, afficher les \u00e9tiquettes, la couleur d’arri\u00e8re-plan, la couleur du bouton, la couleur du lien et plus encore.<\/p>\n

\"Concevez<\/p>\n

En outre, vous pouvez ajouter un e-mail d’enregistrement, un objet d’e-mail, utiliser Google reCaptcha et plus encore. Ce plugin vous permet \u00e9galement d’ajouter une connexion sociale comme Facebook, Twitter et Google.<\/p>\n

\"Ajouter<\/p>\n

N’oubliez pas de sauvegarder vos modifications et de copier le shortcode situ\u00e9 en haut de cette page. Vous devrez cr\u00e9er une nouvelle page dans WordPress ou en modifier une existante pour ajouter le shortcode dans l’\u00e9diteur de contenu.<\/p>\n

\"Copier<\/p>\n

Vous pouvez \u00e9galement ajouter une connexion modale dans votre barre lat\u00e9rale WordPress. Allez \u00e0 Apparence \u00bbWidgets<\/strong> faites glisser et d\u00e9posez le Connexion CSH<\/strong> widget dans la barre lat\u00e9rale de votre site.<\/p>\n

\"Faites<\/p>\n

La connexion modale CSH peut \u00e9galement \u00eatre ajout\u00e9e dans les fichiers de mod\u00e8le de votre site Web. Une fois que vous l’avez ajout\u00e9 \u00e0 votre site, visitez simplement votre site WordPress pour voir le lien de connexion modal en action.<\/p>\n

\"Formulaire<\/p>\n

<\/span>M\u00e9thode 2. Cr\u00e9ez une fen\u00eatre contextuelle de connexion modale avec WPForms et OptinMonster<\/span><\/h4>\n

Pour cette m\u00e9thode, vous aurez besoin du plugin WPForms et d’OptinMontser. Si vous avez d\u00e9j\u00e0 ces deux plugins, cette m\u00e9thode est la meilleure solution pour vous.<\/p>\n

WPForms est le meilleur plugin de formulaire de contact WordPress. Vous aurez besoin au moins de votre plan Pro pour acc\u00e9der au plugin d’enregistrement d’utilisateur. <\/p>\n

OptinMonster est le meilleur plugin pop-up WordPress et logiciel de g\u00e9n\u00e9ration de leads sur le march\u00e9. Il vous aide \u00e0 convertir les visiteurs du site Web en abonn\u00e9s et en clients. Vous aurez besoin au moins du plan Pro pour acc\u00e9der \u00e0 la fonctionnalit\u00e9 MonsterLinks utilis\u00e9e dans cet article. <\/p>\n

Pr\u00eat? Commen\u00e7ons. <\/p>\n

<\/span>Utilisation de WPForms pour cr\u00e9er un formulaire de connexion utilisateur<\/span><\/h4>\n

Tout d’abord, vous devez installer et activer le plugin WPForms. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d’installer un plugin WordPress.<\/p>\n

Apr\u00e8s l’activation, vous devez vous rendre sur WPForms \u00bbPlugins<\/strong> pour installer et activer le Plugin d’enregistrement utilisateur<\/strong>.<\/p>\n

\"Page<\/p>\n

Apr\u00e8s avoir activ\u00e9 le plugin, vous devez vous rendre sur WPForms \u00bbAjouter un nouveau<\/strong> pour cr\u00e9er le formulaire de connexion utilisateur.<\/p>\n

\"Ajouter<\/p>\n

Une fois que le g\u00e9n\u00e9rateur WPForms d\u00e9marre, vous devez choisir celui pr\u00e9d\u00e9fini Formulaire de connexion utilisateur<\/strong> mod\u00e8le.<\/p>\n

\"S\u00e9lectionnez<\/p>\n

Ce mod\u00e8le de formulaire de connexion contient les champs de messagerie et de mot de passe qui fonctionneront de mani\u00e8re similaire au formulaire de connexion WordPress par d\u00e9faut. Vous pouvez faire glisser et d\u00e9poser tout champ suppl\u00e9mentaire du c\u00f4t\u00e9 gauche de l’\u00e9cran selon vos besoins.<\/p>\n

\"Mod\u00e8le<\/p>\n

Cliquez ensuite sur Mot de passe<\/strong> dans la section d’aper\u00e7u, et il affichera les options de champ sur le c\u00f4t\u00e9 gauche. Vous pouvez ajouter le code ci-dessous dans la zone de description de Mot de passe<\/strong> pour afficher des options telles que l’oubli du mot de passe et l’enregistrement de l’utilisateur.<\/p>\n

Can't remember your password? Click here. Don't have an account? Register here.\r\n<\/pre>\n
\"Ajouter<\/p>\n
Apr\u00e8s cela, vous devez cliquer sur le Sauvegarder<\/strong> puis cliquez sur le bouton Int\u00e9grer<\/strong> bouton.<\/p>\n
\"Enregistrer<\/p>\n
Une fen\u00eatre contextuelle s’ouvrira avec le code d’int\u00e9gration. Vous devez copier ce code et l’enregistrer pour une utilisation ult\u00e9rieure.<\/p>\n
\"Copiez<\/p>\n
Votre formulaire de connexion est pr\u00eat. Vous pouvez maintenant continuer et cr\u00e9er le popup modal.<\/p>\n
<\/span>Utilisation d’OptinMonster pour cr\u00e9er une fen\u00eatre contextuelle modale<\/span><\/h4>\n
Vous devrez d’abord installer et activer le plugin OptinMonster. Pour plus de d\u00e9tails, consultez notre guide \u00e9tape par \u00e9tape sur la fa\u00e7on d’installer un plugin WordPress.<\/p>\n
Apr\u00e8s l’activation, vous devez vous rendre sur OptinMonster<\/strong> dans la zone d’administration WordPress et cliquez sur Cr\u00e9er une nouvelle campagne<\/strong> bouton.<\/p>\n
\"Cr\u00e9er<\/p>\n
Votre tableau de bord OptinMonster s’ouvrira sur une nouvelle page Web.<\/p>\n
Une fois \u00e0 l’int\u00e9rieur, vous devez s\u00e9lectionner Fen\u00eatre contextuelle Lightbox<\/strong> comme type de campagne, vous pouvez donc ajouter votre formulaire de connexion dans la fen\u00eatre contextuelle.<\/p>\n
\"S\u00e9lectionnez<\/p>\n
Ensuite, vous devez s\u00e9lectionner le Toile<\/strong> mod\u00e8le de campagne qui est un mod\u00e8le vierge et vous permet d’ajouter des codes et des shortcodes personnalis\u00e9s.<\/p>\n
\"S\u00e9lectionnez<\/p>\n
Il vous demandera d’ajouter un nom \u00e0 votre lightbox et de s\u00e9lectionner le site Web o\u00f9 vous souhaitez charger cette popup.<\/p>\n
\"Ajouter<\/p>\n
Une fois que vous avez cliqu\u00e9 sur Commencez \u00e0 construire<\/strong> , vous serez redirig\u00e9 vers la page des param\u00e8tres de la campagne OptinMonster.<\/p>\n
De l\u00e0, vous devriez aller \u00e0 S’inscrire<\/strong> onglet et d\u00e9finir la largeur et la hauteur de la toile, ajoutez le code d’int\u00e9gration du formulaire de connexion Toile personnalis\u00e9e html<\/strong> champ, g\u00e9rer l’\u00e9cran et les effets sonores pour les fen\u00eatres pop-up modales, et plus encore.<\/p>\n
Remarque:<\/strong> Le code d’int\u00e9gration du formulaire de connexion doit \u00eatre le code que vous avez copi\u00e9 apr\u00e8s avoir cr\u00e9\u00e9 votre formulaire de connexion \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente.<\/p>\n
\"Ajouter<\/p>\n
Puisque vous cr\u00e9ez une fen\u00eatre contextuelle de connexion modale, vous devez aller dans l’onglet Param\u00e8tres et d\u00e9finir la valeur \u00ab0\u00bb sur Dur\u00e9e du cookie<\/strong> et Dur\u00e9e du cookie de r\u00e9ussite<\/strong>. Il montrera le formulaire \u00e0 tous les visiteurs chaque fois qu’ils cliquent sur votre lien.<\/p>\n
\"D\u00e9finir<\/p>\n
Ensuite, vous devriez visiter le R\u00e8gles d’affichage<\/strong> onglet et d\u00e9velopper MonsterLink<\/strong> pour changer le statut en actif.<\/p>\n
\"\u00c9tat<\/p>\n
Assurez-vous de cliquer sur le Sauvegarder<\/strong> dans le coin sup\u00e9rieur droit et acc\u00e9dez \u00e0 publier<\/strong> pour activer le statut.<\/p>\n
\"Enregistrer<\/p>\n
Vous pouvez maintenant ajouter cette fen\u00eatre de connexion modale \u00e0 vos pages ou articles WordPress.<\/p>\n
<\/span>Ajouter une connexion modale dans WordPress<\/span><\/h4>\n
Vous devez revenir \u00e0 OptinMonster<\/strong> dans votre zone d’administration WordPress, et il vous montrera la liste des campagnes. Si vous ne voyez pas votre nouvelle campagne de connexion modale, cliquez simplement sur le Mettre \u00e0 jour les campagnes<\/strong> bouton.<\/p>\n
\"Modifier<\/p>\n
Ensuite, vous devez modifier les param\u00e8tres de sortie de la campagne pour activer l’optin sur votre site et s\u00e9lectionner qui devrait voir la fen\u00eatre de connexion modale. Assurez-vous de cliquer sur le Enregistrer les param\u00e8tres<\/strong> bouton.<\/p>\n
\"Acheter<\/p>\n
Apr\u00e8s cela, vous devez revenir \u00e0 la page de pr\u00e9sentation de la campagne et copier le slug visible sous l’option en direct de la campagne. Ce slug unique peut \u00eatre utilis\u00e9 dans les shortcodes et le code pour afficher la connexion modale dans WordPress.<\/p>\n
\"Copier<\/p>\n
Vous pouvez ensuite cr\u00e9er une nouvelle page WordPress ou modifier une page existante et ajouter ce code avec votre slug de campagne unique.<\/p>\n
Login \/ Register\r\n<\/pre>\n
Vous pouvez \u00e9galement ajouter le code ci-dessus dans vos menus WordPress, barre lat\u00e9rale ou toute autre zone de votre site.<\/p>\n
Assurez-vous d’enregistrer vos modifications sur la page WordPress et visitez leur site pour voir la connexion modale en action.<\/p>\n
\"Connexion<\/p>\n
Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 apprendre \u00e0 cr\u00e9er une connexion modale dans WordPress. Vous pouvez \u00e9galement consulter notre liste compl\u00e8te des meilleurs plugins de page de connexion WordPress et concevoir facilement votre propre page de connexion. <\/p>\n
Si vous avez aim\u00e9 cet article, abonnez-vous \u00e0 notre cha\u00eene YouTube pour regarder des vid\u00e9os de didacticiel WordPress. Vous pouvez \u00e9galement nous trouver sur Twitter et Facebook.<\/p>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n