Comment créer un formulaire de connexion contextuel avec des boutons de connexion/déconnexion dans Divi

La création d'un formulaire de connexion contextuel dans Divi peut être un moyen efficace de booster la conception et l'expérience utilisateur de connexion et de déconnexion de votre site. L'idée est de créer un formulaire de connexion qui s'affiche dans une boîte contextuelle chaque fois que 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, il permet aux développeurs Web de créer une conception personnalisée du formulaire de connexion (au moins sur le front-end initial) qui peut être une alternative rafraîchissante à l'expérience de connexion WordPress traditionnelle.

Dans ce tutoriel, nous allons créer un formulaire de connexion contextuel avec des boutons de connexion et de déconnexion personnalisés dans Divi. En utilisant le module de connexion Divi et quelques modules de boutons, nous créerons une expérience de connexion contextuelle transparente sur le front-end en permettant aux utilisateurs de se connecter et de se déconnecter sans être redirigés vers une autre page.

Certes, cette solution est limitée à la conception du formulaire de connexion frontal, ce qui signifie que toute erreur qui se produit (ou si l'utilisateur doit réinitialiser un mot de passe) redirigera vers la conception de formulaire/page de connexion WordPress traditionnelle trouvée dans "wp-login .php". Cependant, pour ceux qui recherchent une conception de connexion personnalisée sur le front-end sans avoir à utiliser de plugin, cela peut être la solution pour vous.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Remarquez comment le bouton de connexion et les boutons de déconnexion changent respectivement. Et, une fois que l'utilisateur se connecte, il reste sur la page en cours. De plus, le formulaire de connexion contextuel affiche un contenu « d'avertissement » différent chaque fois que l'utilisateur tente de se déconnecter.

Téléchargez le modèle GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord télécharger le fichier en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Comment télécharger le modèle GRATUIT

Pour télécharger le modèle, accédez au Divi Theme Builder 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.

Accédez à l'onglet d'importation, téléchargez le fichier JSON que vous avez pu télécharger dans cet article et cliquez sur « Importer des modèles 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 de Divi Theme Builder dès que vous souhaitez que le modèle soit activé.

Pour modifier les éléments du modèle d'en-tête, commencez par ouvrir le modèle.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Bien que vous puissiez ajouter ce formulaire de connexion contextuel et des boutons de connexion/déconnexion personnalisés à n'importe quel en-tête personnalisé, nous allons utiliser un en-tête prédéfini pour accélérer le processus et démarrer rapidement la conception.

Si vous ne l'avez pas encore fait, installez et activez le thème Divi.

Importer un modèle d'en-tête de financement participatif dans le générateur de thèmes

Pour commencer, téléchargez l'en-tête et le pied de page gratuits pour le pack de mise en page Crowdfunding de Divi. Pour ce faire, rendez-vous sur l'article du blog.

Entrez ensuite votre email pour télécharger le fichier zip.

Après cela, décompressez le fichier afin qu'il soit prêt à être importé.

Pour importer le fichier dans le générateur de thème, procédez comme suit :

1. Accédez à Divi > Générateur de thèmes.
2. Cliquez sur l'icône de portabilité.
3. Dans la fenêtre contextuelle Portabilité, sélectionnez l'onglet d'importation.
4. Choisissez le fichier décompressé précédemment téléchargé à importer.
5. Cliquez sur le bouton Importer.
6. Cliquez sur l'icône de modification pour modifier l'en-tête importé.

Création du 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 disposition d'en-tête global, ouvrez la vue des couches afin de pouvoir voir facilement tous les éléments.

Dans la rangée supérieure de la section d'en-tête, supprimez le module de suivi des médias sociaux à côté du bouton 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 boutons dans la colonne 3 de la rangée supérieure.

Mettez à jour les éléments suivants sous l'onglet Conception :

• Icône du bouton : icône de verrouillage (voir capture d'écran)
• Emplacement de l'icône du bouton : à gauche
• Afficher uniquement l'icône au survol pour le bouton : NON
• Rembourrage : 0,5 em en haut, 0,5 em en bas, 2 em à gauche, 0,7 em à droite

Sous l'onglet Avancé, donnez 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 aider à distinguer les deux boutons, vous pouvez mettre à jour l'étiquette de chacun respectivement. Ensuite, ouvrez les paramètres du module de bouton en double dans la colonne 3.

Changez le texte du bouton pour lire "Déconnexion".

Mettez à jour les éléments suivants sous l'onglet Conception :

• Icône du bouton : icône de déverrouillage (voir capture d'écran)

Sous l'onglet Avancé, mettez à jour le bouton Classes CSS comme suit :

• Classe CSS : et-toggle-popup et-popup-logout-button

La première classe restera la même mais la deuxième classe 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 nous servira de popup 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 ligne à une colonne à l'intérieur de la section.

Paramètres de section

Avant de mettre à jour la ligne, ouvrez les paramètres de la section.

Sous l'onglet Contenu, attribuez à la section une couleur de fond blanche :

• Couleur d'arrière-plan : #ffffff

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Largeur : 100 %
• Largeur maximale : 800 px (ordinateur de bureau), 80 % (tablette), 100 % (téléphone)
• Alignement de la section : Centre
• Hauteur : auto (ordinateur de bureau et tablette), 100 % (téléphone)
• Hauteur maximale : 100 %
• Remplissage : 0px en haut, 0px en bas

• Coins arrondis : 10px
• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 0px
• Force de flou d'ombre de boîte : 100px
• Force de propagation de l'ombre de la boîte: 50px

Sous l'onglet Avancé, 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 de visibilité et de position.

• Débordement horizontal : masqué
• Débordement vertical : automatique
• Poste : fixe
• Lieu : Centre Centre
• Indice Z : 999999

Paramètres de ligne

Une fois les paramètres de section en place, ouvrez les paramètres de la ligne et mettez à jour les paramètres de conception suivants :

• Utiliser une largeur de gouttière personnalisée : OUI
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %
• Rembourrage : 0px en haut, 5vh en bas

Partie 3 : Création de l'icône Fermer la fenêtre contextuelle

Pour créer l'icône Fermer la fenêtre contextuelle qui fermera / masquera la fenêtre contextuelle au clic, nous allons utiliser un module de présentation.

Ajoutez un nouveau module de présentation à la ligne.

Ouvrez le paramètre du module de présentation et supprimez le titre et le corps du texte.

Ajoutez ensuite l'icône comme suit :

• Utiliser l'icône : OUI
• Icône : icône « x » (voir capture d'écran)

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Couleur de l'icône : #004e43
• Alignement 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 de présentation 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 une conception 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 chaque fois que l'utilisateur sera "déconnecté". Le second sera le formulaire de connexion qui s'affichera chaque fois que l'utilisateur sera « connecté ».

Création du formulaire "Déconnecté"

Pour créer le formulaire de connexion « Déconnecté », ajoutez un nouveau module de formulaire de connexion sous l'icône du module de présentation à l'intérieur de la ligne.

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 Conception

• Couleur d'arrière-plan des champs : rgba(0,78,67,0,05)
• Couleur d'arrière-plan de la mise au point des champs : 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-gras
• Couleur du texte du titre : #000000
• Hauteur de la ligne de titre : 1,3 em
• 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 du 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
• Remplissage des boutons : 15 pixels en haut, 15 pixels en bas

Mettez ensuite à jour les options de dimensionnement comme suit :

• Largeur : 100 %
• Largeur maximale : 80 % (ordinateur de 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 connexion :

width: 100% !important;
float: none !important;

CSS personnalisé pour le formulaire de connexion :

width: 100% !important;
padding: 0px !important;

Cela garantira que le module de formulaire de connexion s'étend sur toute la largeur de la ligne/colonne, même sur le bureau.

Création du formulaire « Connexion »

Maintenant que la version « Déconnecté » du formulaire est terminée, nous devons créer la version « Déconnecté » qui aura un contenu et un style différents pour maximiser l'expérience utilisateur.

Pour créer le formulaire de connexion « Déconnecté », dupliquez le formulaire de connexion existant.

Mettez ensuite à jour l'étiquette de chacun des formulaires de connexion respectivement.

Ouvrez les paramètres du duplicata (le formulaire « Connecté ») et ajoutez le titre du site en tant que contenu dynamique au titre du module de formulaire de connexion.

Ensuite, ouvrez les paramètres du contenu dynamique du titre du site et mettez à jour le contenu avant et après comme suit :

• Avant : « Vous essayez 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 l'en-tête H3 suivant au corps :

<h3>Are you sure?</h3>

Si vous avez déjà vu le contenu du module de formulaire de connexion lorsque vous êtes connecté, vous savez qu'il y a un message personnalisé qui inclut un lien de "déconnexion" personnalisé. Pour que ce lien ressemble à un bouton, nous devons personnaliser les paramètres de police/texte du lien du corps comme suit :

• Sélectionnez l'onglet du lien sous les options du corps du texte.
• Police du lien : Work Sans
• Poids de la police du lien : semi-gras
• Style de police de lien : TT
• Alignement du texte du lien : centre
• Couleur du texte du lien : #ffffff

REMARQUE : vous ne pourrez pas prévisualiser ces résultats tant que vous n'aurez pas affiché le formulaire sur une page en direct.

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 les CSS et JQuery personnalisés nécessaires à la fonctionnalité du formulaire de connexion contextuel, 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 à envelopper le CSS dans les balises de style nécessaires.

/* hide popup section */
.et-popup-login {
  display: none;
}

/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}

/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}

/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}

/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}

/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}

/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}

/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}

/* show hidden elements in visual builder */
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;
}

Notez que le CSS utilise la classe « connecté » intégrée à WordPress afin de masquer/afficher les boutons de connexion/déconnexion correspondants et les formulaires de connexion « connecté »/« déconnecté » chaque fois que l'utilisateur est connecté ou déconnecté.

Le JQuery

Sous la balise de style de fin, collez le JQuery suivant en veillant à envelopper le code 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 bascule simplement la section contextuelle chaque fois que l'utilisateur clique sur l'un des trois éléments avec la classe "et-toggle-popup" (les boutons de connexion et de déconnexion plus l'icône de présentation "x").

C'est ça!

N'oubliez pas d'enregistrer les modifications que vous avez apportées au modèle dans le Générateur de thèmes. Une fois enregistré, vous pouvez afficher les résultats sur une page en direct.

Résultat final

Voici les résultats finaux sur ordinateur, tablette et téléphone.

Remarquez comment le bouton de connexion et le bouton de déconnexion changent. Et, une fois que l'utilisateur se connecte, l'utilisateur reste sur la page en cours. De plus, le formulaire de connexion contextuel affiche un contenu « d'avertissement » différent chaque fois que l'utilisateur tente de se déconnecter.

Dernières pensées

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 à ajuster la conception 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 vous entendre dans les commentaires.

À votre santé!