Comment créer un modal de connexion WordPress Login (étape par étape)

Souhaitez-vous ajouter un modal de connexion WordPress sur votre site? Une fenêtre contextuelle de connexion modale permet à vos utilisateurs de se connecter rapidement à votre site Web sans quitter la page affichée. Cela améliore l'expérience utilisateur et l'engagement sur votre site Web. Dans cet article, nous allons vous montrer comment créer facilement un modal de connexion WordPress - étape par étape.

Pourquoi créer un modal de connexion WordPress Login?

Si vous exploitez une boutique en ligne, un site Web réservé aux membres ou vendez des cours en ligne, vous autorisez probablement les utilisateurs à s'inscrire et à se connecter à votre site Web..

Normalement, lorsque les utilisateurs cliquent sur le lien de connexion, ils accèdent à la page de connexion par défaut de WordPress ou à une autre page de connexion personnalisée de votre site Web. Une fois les utilisateurs connectés, ils sont redirigés vers une autre page..

Une fenêtre contextuelle de connexion modale vous permet d’afficher le formulaire de connexion sans envoyer les utilisateurs à une autre page. Une fois connecté, vous pouvez rediriger les utilisateurs vers la page de votre choix..

Une popup de connexion modale est plus rapide et améliore l'expérience utilisateur sur votre site web. Une expérience utilisateur plus rapide et plus raffinée peut augmenter vos ventes et vos conversions.

Cela étant dit, examinons comment créer facilement une fenêtre contextuelle de connexion modale dans WordPress. Nous allons vous montrer deux méthodes pour le faire, et vous pouvez choisir celle qui correspond le mieux à vos besoins..

Méthode 1. Créer une fenêtre contextuelle de connexion modale à l'aide de la connexion CSH

Cette méthode est plus simple et recommandée pour la plupart des utilisateurs..

La première chose à faire est d’installer et d’activer le plugin de connexion CSH. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, vous devez aller à Connexion modale page dans votre zone d'administration WordPress et sélectionnez un type de formulaire de connexion modal.

Après avoir sélectionné le type de zone de connexion modale, vous pouvez faire défiler et gérer les redirections de connexion / déconnexion pour le formulaire. Vous pouvez également permettre aux utilisateurs de générer leurs propres mots de passe..

Ensuite, vous devez faire défiler jusqu’à la modes section et sélectionnez la disposition, les étiquettes d'affichage, la couleur d'arrière-plan, la couleur du bouton, la couleur du lien, etc..

En outre, vous pouvez ajouter un e-mail d'inscription, l'objet de l'e-mail, utiliser Google reCaptcha, etc. Ce plugin vous permet également d’ajouter un identifiant social comme Facebook, Twitter et Google..

Veillez à enregistrer les modifications et à copier le shortcode situé en haut de cette page. Vous devrez créer une nouvelle page dans WordPress ou en modifier une existante pour ajouter le code court dans l'éditeur de contenu..

Vous pouvez également ajouter la connexion modale dans votre barre latérale WordPress. Il suffit d'aller à Apparence »Widgets glisser et déposer le Login CSH widget dans la barre latérale de votre site.

La connexion modale CSH peut également être ajoutée aux fichiers de modèle de vos sites Web. Une fois que vous l'avez ajouté sur votre site, il vous suffit de visiter votre site WordPress pour voir le lien de connexion modal en action..

Méthode 2. Créer une fenêtre contextuelle de connexion modale avec WPForms et OptinMonster

Pour cette méthode, vous aurez besoin du plugin WPForms et d’OptinMontser. Si vous avez déjà ces deux plugins, alors cette méthode est la meilleure solution pour vous.

WPForms est le meilleur plugin de formulaire de contact WordPress. Vous aurez besoin au moins de leur forfait Pro pour accéder au module d’enregistrement de l’utilisateur..

OptinMonster est le meilleur logiciel de génération de leads sur le marché. Il vous aide à convertir les visiteurs du site Web en abonnés et en clients. Vous aurez besoin au minimum du plan Pro pour accéder à la fonctionnalité MonsterLinks utilisée dans cet article..

Prêt? Commençons.

Utilisation de WPForms pour créer un formulaire de connexion utilisateur

Tout d’abord, vous devez installer et activer le plugin WPForms. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, vous devez aller à WPForms »Compléments page à installer et activer le Enregistrement de l'utilisateur.

Après avoir activé l'addon, vous devez aller à WPForms »Ajouter un nouveau page pour créer le formulaire de connexion de l'utilisateur.

Une fois le générateur WPForms lancé, vous devez choisir le logiciel pré-construit. Formulaire de connexion utilisateur modèle.

Ce modèle de formulaire de connexion contient les champs adresse e-mail et mot de passe qui fonctionneront de la même manière que le formulaire de connexion WordPress par défaut. Vous pouvez glisser et déposer des champs supplémentaires à partir de la gauche de l'écran si nécessaire.

Ensuite, cliquez sur le Mot de passe champ dans la section de prévisualisation, et il affichera les options de champ sur le côté gauche. Vous pouvez ajouter le code donné ci-dessous dans la case de description de Mot de passe champ pour afficher des options telles que oublier le mot de passe et l'enregistrement de l'utilisateur.

 Vous ne vous souvenez plus de votre mot de passe? Cliquez ici. Vous n'avez pas de compte? Inscrivez-vous ici. 

Après cela, vous devez cliquer sur le bouton sauvegarder puis cliquez sur le bouton Intégrer bouton.

Une fenêtre contextuelle s'ouvrira avec le code d'intégration. Vous devez copier ce code et le sauvegarder pour l'utiliser plus tard.

Votre formulaire de connexion est prêt. Maintenant vous pouvez aller de l'avant et créer le popup modal.

Utiliser OptinMonster pour créer un pop-up modal

Vous devez d’abord installer et activer le plugin OptinMonster. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, vous devez aller à OptinMonster dans la zone d'administration de WordPress et cliquez sur Créer une nouvelle campagne bouton.

Votre tableau de bord OptinMonster s'ouvrira sur une nouvelle page Web.

Une fois à l'intérieur, vous devez sélectionner Lightbox Popup comme type de campagne, vous pouvez donc ajouter votre formulaire de connexion dans la fenêtre contextuelle.

Ensuite, vous devez sélectionner le Toile modèle de campagne qui est un modèle vierge et vous permet d'ajouter un code personnalisé et des codes courts.

Il vous demandera d'ajouter un nom à votre lightbox et de sélectionner le site Web sur lequel vous souhaitez charger cette fenêtre contextuelle..

Une fois que vous cliquez sur le Commencer la construction bouton, vous serez redirigé vers la page de configuration de la campagne OptinMonster.

De là, vous devez aller à Optin onglet et définir la largeur et la hauteur de la toile, ajouter le code d'intégration du formulaire de connexion dans Toile HTML personnalisée champ, gérer l'affichage et les effets sonores pour les fenêtres contextuelles modales, etc..

Remarque: Le code incorporé du formulaire de connexion doit être le code que vous avez copié après la création de votre formulaire de connexion à l'étape précédente..

Comme vous créez une fenêtre contextuelle de connexion modale, vous devez accéder à l'onglet Configuration et définir la valeur "0" pour Durée du cookie et Durée du cookie de réussite. Il affichera le formulaire à tous les visiteurs chaque fois qu'ils cliquent sur votre lien..

Ensuite, vous devez visiter le Règles d'affichage onglet et développez MonsterLink changer le statut en actif.

Assurez-vous de cliquer sur le sauvegarder bouton en haut à droite et aller à Publier section pour rendre le statut actif.

Maintenant, vous pouvez ajouter cette popup de connexion modale dans vos pages WordPress ou vos publications..

Ajouter une connexion modale dans WordPress

Vous devez revenir à OptinMonster dans votre zone d'administration WordPress, et il vous montrera la liste des campagnes. Si vous ne voyez pas votre campagne récemment créée pour la connexion modale, cliquez simplement sur le bouton Actualiser les campagnes bouton.

Ensuite, vous devez modifier les paramètres de sortie de la campagne pour activer l'optin sur votre site et sélectionner qui doit voir la fenêtre contextuelle de connexion modale. Assurez-vous de cliquer sur le Enregistrer les paramètres bouton.

Ensuite, vous devez revenir à la page d'aperçu des campagnes et copier le slug visible sous l'option en direct de la campagne. Ce slug unique peut être utilisé dans les codes courts et le code pour afficher la connexion modale dans WordPress.

Ensuite, vous pouvez créer une nouvelle page WordPress ou en modifier une existante et ajouter ce code avec votre slug de campagne unique..

 Connexion / S'inscrire 

Vous pouvez également ajouter le code ci-dessus dans vos menus WordPress, la barre latérale ou toute autre zone de votre site..

Assurez-vous d’enregistrer les modifications apportées à la page WordPress et visitez votre site pour voir la connexion modale en action..

Nous espérons que cet article vous a aidé à apprendre à créer une connexion modale dans WordPress. Vous pouvez également consulter notre liste complète des meilleurs plugins de page de connexion WordPress et concevoir facilement votre propre page de connexion..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.