Comment créer un mode popup de connexion WordPress (étape par étape)

Voulez-vous ajouter une fenêtre de connexion WordPress à votre site? Une fenêtre de connexion modale permet à vos utilisateurs de se connecter rapidement à votre site Web sans quitter la page qu’ils consultent. Cela améliore l’expérience utilisateur et l’engagement sur votre site Web. Dans cet article, nous vous montrerons comment créer facilement un popup modal de connexion WordPress, étape par étape.

Pourquoi créer un mode popup de connexion WordPress?

Si vous gérez une boutique en ligne, un site Web d’adhésion ou vendez des cours en ligne, il est probable que les utilisateurs puissent s’inscrire et se connecter à votre site Web.

En règle générale, lorsque les utilisateurs cliquent sur le lien de connexion, ils sont redirigés vers la page de connexion WordPress par défaut ou une autre page de connexion personnalisée sur leur 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 vers une autre page. Une fois connecté, vous pouvez rediriger les utilisateurs vers la page souhaitée.

Une fenêtre contextuelle 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 fluide peut augmenter vos ventes et conversions.

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

Méthode 1. Créez 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 sur la façon d’installer un plugin WordPress.

Après l’activation, vous devez vous rendre sur Connexion modale dans votre zone d’administration WordPress et sélectionnez un type pour le formulaire de connexion modale.

Après avoir sélectionné le type de boîte de connexion modale, vous pouvez faire défiler vers le bas et gérer les redirections de connexion / déconnexion pour le formulaire. Vous pouvez également autoriser les utilisateurs à générer leurs propres mots de passe.

Ensuite, vous devez faire défiler vers le bas pour modes section et sélectionnez la mise en page, afficher les étiquettes, la couleur d’arrière-plan, la couleur du bouton, la couleur du lien et plus encore.

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 également d’ajouter une connexion sociale comme Facebook, Twitter et Google.

N’oubliez pas de sauvegarder vos modifications et de 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 shortcode dans l’éditeur de contenu.

Vous pouvez également ajouter une connexion modale dans votre barre latérale WordPress. Allez à Apparence »Widgets faites glisser et déposez le Connexion CSH widget dans la barre latérale de votre site.

La connexion modale CSH peut également être ajoutée dans les fichiers de modèle de votre site Web. Une fois que vous l’avez ajouté à votre site, visitez simplement votre site WordPress pour voir le lien de connexion modal en action.

Méthode 2. Créez 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, 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 votre plan Pro pour accéder au plugin d’enregistrement d’utilisateur.

OptinMonster est le meilleur plugin pop-up WordPress et 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 moins 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 sur la façon d’installer un plugin WordPress.

Après l’activation, vous devez vous rendre sur WPForms »Plugins pour installer et activer le Plugin d’enregistrement utilisateur.

Après avoir activé le plugin, vous devez vous rendre sur WPForms »Ajouter un nouveau pour créer le formulaire de connexion utilisateur.

Une fois que le générateur WPForms démarre, vous devez choisir celui prédéfini Formulaire de connexion utilisateur modèle.

Ce modèle de formulaire de connexion contient les champs de messagerie et de mot de passe qui fonctionneront de manière similaire au formulaire de connexion WordPress par défaut. Vous pouvez faire glisser et déposer tout champ supplémentaire du côté gauche de l’écran selon vos besoins.

Cliquez ensuite sur Mot de passe dans la section d’aperçu, et il affichera les options de champ sur le côté gauche. Vous pouvez ajouter le code ci-dessous dans la zone de description de Mot de passe pour afficher des options telles que l’oubli du mot de passe et l’enregistrement de l’utilisateur.

Can't remember your password? Click here. Don't have an account? Register here.

Après cela, vous devez cliquer sur le 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 l’enregistrer pour une utilisation ultérieure.

Votre formulaire de connexion est prêt. Vous pouvez maintenant continuer et créer le popup modal.

Utilisation d’OptinMonster pour créer une fenêtre contextuelle modale

Vous devrez d’abord installer et activer le plugin OptinMonster. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Après l’activation, vous devez vous rendre sur OptinMonster dans la zone d’administration 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 Fenêtre contextuelle Lightbox 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 des codes et des shortcodes personnalisés.

Il vous demandera d’ajouter un nom à votre lightbox et de sélectionner le site Web où vous souhaitez charger cette popup.

Une fois que vous avez cliqué sur Commencez à construire , vous serez redirigé vers la page des paramètres de la campagne OptinMonster.

De là, vous devriez aller à S’inscrire onglet et définir la largeur et la hauteur de la toile, ajoutez le code d’intégration du formulaire de connexion Toile personnalisée html champ, gérer l’écran et les effets sonores pour les fenêtres pop-up modales, et plus encore.

Remarque: Le code d’intégration du formulaire de connexion doit être le code que vous avez copié après avoir créé votre formulaire de connexion à l’étape précédente.

Puisque vous créez une fenêtre contextuelle de connexion modale, vous devez aller dans l’onglet Paramètres et définir la valeur «0» sur Durée du cookie et Durée du cookie de réussite. Il montrera le formulaire à tous les visiteurs chaque fois qu’ils cliquent sur votre lien.

Ensuite, vous devriez visiter le Règles d’affichage onglet et développer MonsterLink pour changer le statut en actif.

Assurez-vous de cliquer sur le Sauvegarder dans le coin supérieur droit et accédez à publier pour activer le statut.

Vous pouvez maintenant ajouter cette fenêtre de connexion modale à vos pages ou articles WordPress.

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 nouvelle campagne de connexion modale, cliquez simplement sur le Mettre à jour 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 devrait voir la fenêtre de connexion modale. Assurez-vous de cliquer sur le Enregistrer les paramètres bouton.

Après cela, vous devez revenir à la page de présentation de la campagne et copier le slug visible sous l’option en direct de la campagne. Ce slug unique peut être utilisé dans les shortcodes et le code pour afficher la connexion modale dans WordPress.

Vous pouvez ensuite créer une nouvelle page WordPress ou modifier une page existante et ajouter ce code avec votre slug de campagne unique.

Login / Register

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

Assurez-vous d’enregistrer vos modifications sur la page WordPress et visitez leur 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 à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.