La création d’un formulaire de connexion popup dans Divi peut être un moyen efficace d’améliorer le design et l’expérience utilisateur lors de la connexion et de la déconnexion de votre site. L’idée est de créer un formulaire de connexion qui s’affiche dans une fenêtre contextuelle lorsque l’utilisateur clique sur un bouton de connexion dans l’en-tête de la page. C’est plus pratique que de rediriger l’utilisateur vers une page de connexion personnalisée. De plus, cela permet aux développeurs web de créer un design personnalisé du formulaire de connexion (au moins sur le front-end initial) qui peut être une alternative rafraîchissante à l’expérience de connexion traditionnelle de WordPress.
Dans ce tutoriel, nous allons créer un formulaire de connexion popup avec des boutons de connexion et de déconnexion personnalisés dans Divi. En utilisant le module de connexion de Divi et quelques modules de boutons, nous allons créer une expérience de connexion par popup transparente sur le front-end en permettant aux utilisateurs de se connecter et de se déconnecter sans être redirigés vers une page différente.
Cette solution est limitée à la conception du formulaire de connexion frontale, ce qui signifie que toute erreur qui se produit (ou si l’utilisateur a besoin de réinitialiser un mot de passe) sera redirigé vers le formulaire de connexion traditionnel de WordPress / la conception de la page trouvée à « wp-login.php ». Cependant, pour ceux qui recherchent un design de connexion personnalisé sur le front-end sans avoir à utiliser un plugin, alors ceci peut être la solution pour vous.
C’est parti !
Coup d’oeil rapide
Voici un aperçu du design que nous allons créer dans ce tutoriel.
Remarquez comment les boutons de connexion et de déconnexion changent respectivement. Et, une fois que l’utilisateur se connecte, il reste sur la page actuelle. De plus, le formulaire de connexion popup affiche un contenu « d’avertissement » différent lorsque l’utilisateur tente de se déconnecter.
Téléchargez le modèle GRATUITEMENT
Pour mettre la main sur les modèles de ce tutoriel, vous devez d’abord télécharger le fichier à l’aide du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily à l’aide du formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus d’astuces Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous êtes déjà sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur télécharger. Vous ne serez pas « réinscrit » et ne recevrez pas d’e-mails supplémentaires.
Comment télécharger le modèle GRATUIT
Pour télécharger le modèle, accédez au créateur de thème Divi dans le backend de votre site Web WordPress.
Ensuite, dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l’icône.
Naviguez vers l’onglet d’importation, téléchargez le fichier JSON que vous avez pu télécharger dans cet article et cliquez sur » Importer les modèles de Divi Theme Builder « .
Une fois que vous avez téléchargé le fichier, vous remarquerez un nouvel en-tête et un nouveau pied de page globaux dans votre modèle de site Web par défaut. Enregistrez les modifications apportées par Divi Theme Builder dès que vous souhaitez activer le modèle.
Pour modifier les éléments du modèle d’en-tête, commencez par ouvrir le modèle.
Passons au tutoriel, d’accord ?
Ce dont vous avez besoin pour commencer
Bien que vous puissiez ajouter ce formulaire de connexion popup et ces boutons de connexion/déconnexion personnalisés à n’importe quel en-tête personnalisé, nous allons utiliser un en-tête préfabriqué pour accélérer le processus et prendre un bon départ dans la conception.
Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
Importer le modèle d’en-tête Crowdfunding dans le Créateur de Thème
Pour commencer, téléchargez l’en-tête et le pied de page gratuits du pack de mise en page Crowdfunding de Divi. Pour ce faire, rendez-vous sur l’article du blog.
Saisissez ensuite votre adresse électronique pour télécharger le fichier zip.
Après cela, décompressez le fichier pour qu’il soit prêt à être importé.
Pour importer le fichier dans le constructeur de thème, suivez ces étapes :
- Naviguez vers Divi > Theme Builder.
- Cliquez sur l’icône de portabilité.
- Dans la fenêtre contextuelle de la portabilité, sélectionnez l’onglet d’importation.
- Choisissez le fichier dézippé précédemment téléchargé à importer.
- Cliquez sur le bouton Importer.
- Cliquez sur l’icône d’édition pour modifier l’en-tête importé.
Création d’un formulaire de connexion contextuel avec des boutons de connexion/déconnexion personnalisés dans Divi
Partie 1 : Création des boutons de connexion et de déconnexion
Une fois dans l’éditeur de mise en page de l’en-tête global, ouvrez la vue des couches pour pouvoir voir tous les éléments facilement.
Dans la rangée supérieure de la section de l’en-tête, supprimez le module de suivi des médias sociaux à côté du bouton de connexion dans la colonne 3.
Création du bouton de connexion
Pour créer notre bouton de connexion, ouvrez les paramètres du module de bouton dans la colonne 3 de la rangée supérieure.
Mettez à jour les éléments suivants sous l’onglet « Design » :
- Icône du bouton : icône de verrouillage (voir capture d’écran)
- Placement de l’icône du bouton : Gauche
- Afficher l’icône au survol du bouton uniquement : NON
- Rembourrage : 0.5em haut, 0.5em bas, 2em gauche, 0.7em droite
Dans l’onglet Avancé, attribuez au bouton deux classes CSS personnalisées comme suit :
- Classe CSS : et-toggle-popup et-popup-login-button
Création du bouton de déconnexion
Pour créer notre bouton de déconnexion, dupliquez le bouton de connexion existant dans la colonne 3.
Pour mieux distinguer les deux boutons, vous pouvez mettre à jour le libellé de chacun d’eux. Ensuite, ouvrez les paramètres du module du bouton dupliqué dans la colonne 3.
Changez le texte du bouton en « Déconnexion ».
Mettez à jour les éléments suivants sous l’onglet « Design » :
- Icône du bouton : icône de déverrouillage (voir la capture d’écran)
Sous l’onglet Avancé, mettez à jour les classes CSS du bouton comme suit :
- Classe CSS : et-toggle-popup et-popup-logout-button
La première classe restera la même, mais la deuxième sera différente.
Partie 2 : création de la section Popup
Une fois les boutons terminés, nous sommes prêts à créer la section popup qui servira de fenêtre contextuelle contenant le(s) formulaire(s) de connexion.
Sous la section d’en-tête, ajoutez une nouvelle section régulière.
Insérez ensuite une rangée d’une colonne à l’intérieur de la section.
Paramètres de la section
Avant de mettre à jour la ligne, ouvrez les paramètres de la section.
Sous l’onglet « Contenu », donnez à la section une couleur de fond blanche :
- Background Color : #ffffff
Sous l’onglet design, mettez à jour les éléments suivants :
- Largeur : 100
- Largeur maximale : 800px (ordinateur de bureau), 80% (tablette), 100% (téléphone)
- Alignement de la section : Centre
- Hauteur : auto (ordinateur et tablette), 100% (téléphone)
- Hauteur maximale : 100
- Rembourrage : 0px haut, 0px bas
- Coins arrondis : 10px
- Ombre de la boîte : voir la capture d’écran
- Position verticale de l’ombre de la boîte : 0px
- Force du flou de l’ombre de la boîte : 100px
- Force d’étalement de l’ombre de la boîte : 50px
Sous l’onglet Advanced, mettez à jour les éléments suivants :
Ajoutez une classe CSS personnalisée.
- Classe CSS : et-popup-login
Ajoutez un extrait de CSS personnalisé à l’élément principal :
overscroll-behavior : contain ;
Mettez à jour les options Visibilité et Position.
- Débordement horizontal : hidden
- Débordement vertical : auto
- Position : Fixe
- Emplacement : Centre Centre
- Index Z : 999999
Paramètres de la rangée
Une fois que les paramètres de la section sont en place, ouvrez les paramètres de la rangée et mettez à jour les paramètres de conception suivants :
- Utiliser une largeur de gouttière personnalisée : OUI
- Largeur de la gouttière : 1
- Largeur : 100
- Largeur maximale : 100
- Rembourrage : 0px haut, 5vh bas
Partie 3 : Création de l’icône de fermeture de la fenêtre pop-up
Pour créer l’icône de fermeture de la fenêtre pop-up qui fermera/masquera la fenêtre pop-up en cas de clic, nous allons utiliser un module blurb.
Ajoutez un nouveau module blurb à la ligne.
Ouvrez les paramètres du module de présentation et supprimez les textes Title et Body.
Ajoutez ensuite l’icône comme suit :
- Utiliser l’icône : OUI
- Icône : icône « x » (voir capture d’écran)
Sous l’onglet design, mettez à jour les éléments suivants :
- Icon Color : #004e43
- Alignement de l’image/icône : Centré
- Utiliser la taille de la police de l’icône : OUI
- Taille de la police de l’icône : 50px
- Largeur : 50px
- Alignement du module : Droite
- Hauteur : 50px
Sous l’onglet Avancé, ajoutez une classe CSS au texte d’accompagnement comme suit :
- Classe CSS : et-toggle-popup
Partie 4 : Création des formulaires de connexion « déconnecté » et « connecté »
Afin d’avoir un contenu et un design différents pour le formulaire de connexion lors de la connexion et de la déconnexion, nous allons créer deux modules de formulaire de connexion différents. Le premier sera le formulaire de connexion qui s’affichera lorsque l’utilisateur est « déconnecté ». Le second sera le formulaire de connexion qui s’affichera lorsque l’utilisateur sera « connecté ».
Création du formulaire « Déconnexion
Pour créer le formulaire de connexion « Déconnecté », ajoutez un nouveau module de formulaire de connexion sous l’icône du module blurb dans la rangée.
Ouvrez les paramètres du module de connexion et mettez à jour les éléments suivants :
Onglet Contenu
- Rediriger vers la page actuelle : OUI
- Utiliser la couleur d’arrière-plan : NON
Onglet Design
- Couleur d’arrière-plan des champs : rgba(0,78,67,0.05)
- Couleur d’arrière-plan des champs Focus : rgba(0,78,67,0.15)
- Alignement du texte : Centre
- Couleur du texte : foncé
- Police du titre : Poppins
- Poids de la police du titre : Semi-bold
- Couleur du texte du titre : #000000
- Hauteur de la ligne de titre : 1.3em
- Police du corps : Work Sans
Pour mettre à jour les styles de bouton, copiez les styles de bouton du bouton de connexion que nous avons créé dans la troisième colonne de la ligne de la section En-tête.
Collez ensuite les styles de bouton dans le groupe d’options de bouton dans les paramètres de connexion sous l’onglet Conception.
Mettez ensuite à jour les styles de bouton pour le formulaire de connexion comme suit :
- Couleur du texte du bouton : #ffffff
- Couleur d’arrière-plan du bouton : #004e43
- Couleur d’arrière-plan du bouton (survol) : #00683c
- Largeur de la bordure du bouton : 0px
- Rembourrage du bouton : 15px en haut, 15px en bas
Mettez ensuite à jour les options de dimensionnement comme suit :
- Largeur : 100
- Largeur maximale : 80% (bureau), 90% (tablette), 95% (téléphone)
- Alignement du module : Centre
Onglet Avancé
Sous l’onglet Avancé, mettez à jour la classe CSS et le CSS personnalisé comme suit :
- Classe CSS : et-logged-out-form
CSS personnalisé pour la description de la connexion :
width : 100% !important ; float : none !important ;
CSS personnalisé pour le formulaire de connexion :
width : 100% !important ; padding : 0px !important ;
Cela permet de s’assurer que le module de formulaire de connexion s’étend sur toute la largeur de la ligne/colonne, même sur un ordinateur de bureau.
Création du formulaire de connexion
Maintenant que la version « déconnectée » du formulaire est terminée, nous devons créer la version « connectée » qui aura un contenu et un style différents pour optimiser l’expérience de l’utilisateur.
Pour créer le formulaire de connexion « Logged Out », dupliquez le formulaire de connexion existant.
Mettez ensuite à jour l’étiquette de chacun des formulaires de connexion.
Ouvrez les paramètres du duplicata (le formulaire « Logged In ») et ajoutez le titre du site comme contenu dynamique au titre du module du formulaire de connexion.
Ouvrez ensuite les paramètres du contenu dynamique du titre du site et mettez à jour le contenu avant et après comme suit :
- Avant : « Vous tentez de vous déconnecter de «
- Après : « . «
Cela créera une belle notification dynamique pour les utilisateurs qui tentent de se déconnecter du site.
Ajoutez ensuite le titre H3 suivant au corps du texte :
Are you sure?
Si vous avez déjà vu le contenu du module de formulaire de connexion lorsqu’il est connecté, vous savez qu’il y a un message personnalisé qui inclut un lien personnalisé « déconnexion ». Pour donner à ce lien l’apparence d’un bouton, nous devons personnaliser les paramètres de police/texte du lien de corps comme suit :
- Sélectionnez l’onglet lien sous les options de texte du corps.
- Police du lien : Work Sans
- Poids de la police du lien : Semi Bold
- Style de la police du lien : TT
- Alignement du texte du lien : central
- Couleur du texte du lien : #ffffff
REMARQUE : vous ne pourrez pas avoir un aperçu de ces résultats avant d’avoir affiché le formulaire sur une page active.
Sous l’onglet Avancé, mettez à jour la classe CSS et le CSS personnalisé comme suit :
- Classe CSS : et-logged-in-form
CSS personnalisé pour le formulaire de connexion :
display:none ;
Partie 5 : ajout du code personnalisé
Pour ajouter le CSS et le JQuery personnalisés nécessaires à la fonctionnalité du formulaire de connexion popup, créez un nouveau module de code sous le dernier module de formulaire de connexion.
Le CSS
Ouvrez les paramètres du module de code et collez le CSS suivant dans la zone de code, en veillant à entourer le CSS des balises de style nécessaires.
/* cacher la section popup */
.et-popup-login {
display : none ;
}
/* cacher le bouton de connexion lorsque vous êtes connecté */
.logged-in .et-popup-login-button {
display : none !important ;
}
/* cacher le bouton de déconnexion lors de la déconnexion */
.et-popup-logout-button {
display : none !important ;
}
/* afficher le bouton de déconnexion en cas de connexion */
.logged-in .et-popup-logout-button {
display : inline-block !important ;
}
/* cacher le formulaire de déconnexion lors de la connexion */
.logged-in .et-logged-out-form {
display : none !important ;
}
/* cacher le formulaire de connexion lors de la déconnexion */
.et-logged-in-form {
display : none !important ;
}
/* afficher le formulaire de connexion lors de la connexion */
.logged-in .et-logged-in-form {
display : block !important ;
}
/* style du lien de déconnexion dans le formulaire de connexion */
.et-logged-in-form a {
display : block ;
padding : 15px 1em ;
border-radius : 8px ;
background : #004e43 ;
largeur maximale : 400px ;
margin : 20px auto 0px ;
}
.et-toggle-popup {
curseur : pointeur ;
}
/* afficher les éléments cachés dans le constructeur visuel */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
display : block !important ;
}
body.et-fb .et-popup-login-button {
display : inline-block !important ;
}
Remarquez que la feuille de style CSS utilise la classe « logged-in » intégrée à WordPress afin de masquer/afficher les boutons de connexion/de déconnexion correspondants et les formulaires de connexion « logged in »/ »logged out » lorsque l’utilisateur est connecté ou déconnecté.
Le JQuery
Sous la balise de style de fin, collez le code JQuery suivant en veillant à l’insérer dans les balises de script nécessaires.
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault() ;
$(".et-popup-login").fadeToggle(500) ;
}) ;
}) ;
})(jQuery) ;
Cet extrait fait simplement basculer la section popup lorsque l’utilisateur clique sur l’un des trois éléments de la classe « et-toggle-popup » (les boutons de connexion et de déconnexion, plus l’icône « x »).
Voilà, c’est fait !
N’oubliez pas d’enregistrer les modifications que vous avez apportées au modèle dans le Créateur de thème. Une fois enregistrées, vous pouvez visualiser les résultats sur une page en direct.
Résultat final
Voici les résultats finaux sur le bureau, la tablette et le téléphone.
Remarquez comment le bouton de connexion et le bouton de déconnexion changent. Et, une fois que l’utilisateur se connecte, il reste sur la page actuelle. De plus, le formulaire de connexion contextuel affiche un contenu « d’avertissement » différent chaque fois que l’utilisateur tente de se déconnecter.
Réflexions finales
Nous espérons que la création de ce formulaire de connexion contextuel et des boutons de connexion/déconnexion personnalisés vous donnera un aperçu de la façon d’utiliser le formulaire de connexion de Divi de manière créative. N’hésitez pas à adapter le design et le contenu de chaque formulaire de connexion (ou boutons) pour créer une expérience de connexion unique sur votre propre site Web.
J’ai hâte de lire vos commentaires.
À la vôtre !
