Souhaitez vous créer un formulaire de connexion popup dans Divi avec des boutons de connexion/déconnexion ?

La création d’un formulaire de connexion popup dans Divi peut être un moyen efficace d’améliorer 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 fenêtre 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.

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. 

À l’aide du module Login Divi et de quelques modules Bouton, nous allons créer une expérience de connexion popup 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.

Commençons!

Aperçu

Voici un bref aperçu de la conception que nous allons créer 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.

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.

Importer le modèle d’en-tête du pack « Crowdfunding Layout Pack dans le constructeur Divi

Pour commencer, téléchargez gratuitement l’en-tête et le pied de page du Crowdfunding Layout Pack de Divi . Pour cela, rendez-vous sur l’article du blog .

formulaire de connexion divi popup avec boutons de connexion/déconnexion

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

formulaire de connexion divi popup avec boutons de connexion/déconnexion

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

Pour importer le fichier dans l’éditeur de thème, procédez comme suit :

  1. Accédez à Divi > Theme Builder.
  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. Cliquer sur Import Divi Theme Builder Templates.
  6. Cliquez sur l’icône de modification pour modifier l’en-tête importé.
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Création du formulaire de connexion popup dans Divi

Partie 1 : Création des boutons de connexion et de déconnexion

Une fois dans l’éditeur de mise en page 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 Social Media Follow à côté du bouton Connexion dans la colonne 3.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Lire aussi : Divi : Comparaison des différents types de dégradés

Création du bouton de connexion

Pour créer notre bouton de connexion, ouvrez les paramètres du module Bouton dans la colonne 3 de la rangée supérieure.

Mettez à jour les éléments suivants sous l’onglet conception :

  • Button Icon : icône de verrouillage (voir capture d’écran)
  • Button Icon Placement : Left
  • Only Show Icon On Hover for Button : NO
  • Padding : 0,5em(Top et Bottom), 2em(Left), 0,7em(Right)
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Sous l’onglet Advanced, attribuez au bouton deux classes CSS personnalisées comme suit :

  • CSS Class : et-toggle-popup et-popup-login-button
formulaire de connexion divi popup avec boutons de connexion/déconnexion

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.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Pour aider à distinguer les deux boutons, vous pouvez mettre à jour l’étiquette de chacun respectivement. Ensuite, ouvrez les paramètres du module Bouton en double dans la colonne 3.

Modifiez le texte du bouton pour lire « Logout ».

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Mettez à jour les éléments suivants sous l’onglet conception :

  • Button Icon : icône de déverrouillage (voir capture d’écran)
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Sous l’onglet Advanced, mettez à jour le bouton Classes CSS comme suit :

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

La première classe restera la même mais la deuxième classe sera différente.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

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 notre popup contenant le ou les formulaires de connexion.

Sous la section d’en-tête, ajoutez une nouvelle section régulière.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Insérez ensuite une ligne à une colonne à l’intérieur de la section.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Paramètres de section

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

Sous l’onglet Content, donnez à la section une couleur d’arrière-plan blanche :

  • Background : #ffffff
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Sous l’onglet Design, mettez à jour les éléments suivants :

  • Width : 100 %
  • Max Width : 800px(Desktop), 80%(Tablet), 100% (Phone)
  • Section Alignment : Centre
  • Height : auto(Desktop et Tablet), 100%(Phone)
  • Max Height : 100 %
  • Padding : 0px(Top et Bottom)
formulaire de connexion divi popup avec boutons de connexion/déconnexion
  • Rounded Corners : 10px
  • Box Shadow : voir capture d’écran
  • Box Shadow Vertical Position : 0px
  • Blur Strenght : 100pixels
  • Spread Strenght : 50px
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Sous l’onglet Advanced, mettez à jour les éléments suivants :

Ajoutez une classe CSS personnalisée.

  • CSS Class : et-popup-login

Ajoutez un extrait de CSS personnalisé à l’élément principal :

overscroll-behavior: contain;

Mettez à jour les options Visibilité et  Position.

  • Horizontal Overflow : Hidden
  • Vertical Overflow : auto
  • Position : Fixed
  • Location : Centre Centre
  • Z Index : 999999
formulaire de connexion divi popup avec boutons de connexion/déconnexion

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 :

  • Use Custom Gutter Width : OUI
  • Gutter Width : 1
  • Width : 100 %
  • Max Width : 100 %
  • Padding : 0px(Top), 5vh(Bottom)
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Partie 3 : Création de l’icône de fermeture du popup

Pour créer l’icône de fermeture de la fenêtre contextuelle qui fermera/cachera la fenêtre contextuelle au clic, nous allons utiliser un module Blurb.

Ajoutez un nouveau module Blurb à la ligne.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Ouvrez le paramètre du module et supprimez le texte du titre et du corps.

Ajoutez ensuite l’icône comme suit :

  • Use Icon : YES
  • Icon : icône « x » (voir capture d’écran)
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Sous l’onglet Design, mettez à jour les éléments suivants :

  • Icon Color : #004e43
  • Image/Icon Alignment : centré
  • Use Icon Font Size : OUI
  • Icon Font Size : 50 px
  • Width : 50 pixels
  • Module Alignment : à droite
  • Height : 50 pixels
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Sous l’onglet Advanced, ajoutez une classe CSS au module Blurb comme suit :

  • CSS Class : et-toggle-popup
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Partie 4 : Création des formulaires de connexion « Logged In » et « Logged Out »

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 « Logged Out »

Pour créer le formulaire de connexion « Logged Out », ajoutez un nouveau module Login sous l’icône du module Blurb à l’intérieur de la ligne.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Ouvrez les paramètres du module et modifier les paramètres suivants :

Onglet Content

  • Redirect To The Current Page : YES
  • Use Background Color : NO
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Onglet Design

  • Fields Background Color : rgba(0,78,67,0.05)
  • Field Focus Background COlor : rgba (0,78,67,0,15)
  • Text Alignment : Centré
  • Text Color : Dark
formulaire de connexion divi popup avec boutons de connexion/déconnexion
  • Title Font : Poppins
  • Title Font Weight : semi-gras
  • Text Color : #000000
  • Title Line Height : 1,3 em
  • Body Font : Work Sans
formulaire de connexion divi popup avec boutons de connexion/déconnexion

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.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Collez ensuite les styles du bouton dans le groupe d’options de bouton dans les paramètres de connexion sous l’onglet de Design.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Ensuite, mettez à jour les styles de bouton pour le formulaire de connexion comme suit :

  • Button
    • Text Color : #ffffff
    • Background : #004e43
    • Background (Hover): #00683c
    • Border Width : 0 pixel
    • Padding : 15px(Top et Bottom)
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Ensuite, mettez à jour les options de dimensionnement comme suit :

  • Width : 100 %
  • Max Width : 80%(Desktop), 90%(Tablet), 95%(Phone)
  • Module Alignment : Centre
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Onglet Advanced

Sous l’onglet Advanced, mettez à jour la classe CSS et le CSS personnalisé comme suit :

  • CSS Class : 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 garantira que le module Login couvre toute la largeur de la ligne/colonne, même sur ordinateur de bureau.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Création du formulaire « Logged In »

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

Pour créer le formulaire de connexion « Logged Out », dupliquez le formulaire de connexion existant.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Ensuite, mettez à jour l’étiquette pour chacun des formulaires de connexion respectivement.

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

formulaire de connexion divi popup avec boutons de connexion/déconnexion

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

  • Before : « You are attempting to log out of Elegant Themes »
  • After : « . « 

Cela créera une belle notification dynamique pour les utilisateurs qui tentent de se déconnecter du site.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Ajoutez ensuite l’en-tête H3 suivant au corps :

<h3>Are you sure?</h3>
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Si vous avez déjà vu le contenu du module Login lorsque vous êtes connecté, vous savez qu’il existe 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 Link sous l’option Body Text.
  • Link Font : Work Sans
  • Link Font Weight : Semi Bold
  • Font Style : TT
  • Link Text Alignment : centré
  • Link Text Color : #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.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Sous l’onglet Advanced, mettez à jour la classe CSS et le CSS personnalisé comme suit :

  • CSS Class : et-logged-in-form

CSS personnalisé pour le formulaire de connexion :

display:none;
formulaire de connexion divi popup avec boutons de connexion/déconnexion

Partie 5 : Ajout du code personnalisé

Pour ajouter le CSS et JQuery personnalisés nécessaires à la fonctionnalité du formulaire de connexion contextuel, créez un nouveau module Code sous le dernier module Login.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Le CSS

Ouvrez les paramètres du module 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 « connected » qui est intégrée à WordPress afin de masquer/afficher les boutons de connexion/déconnexion correspondants et les formulaires de connexion « Logged In »/ »Logged Out » chaque fois que l’utilisateur est connecté ou déconnecté.

formulaire de connexion divi popup avec boutons de connexion/déconnexion

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 »).

formulaire de connexion divi popup avec boutons de connexion/déconnexion

Consulter également : Divi : Comment utiliser les paramètres de masque d’arrière-plan et les options de transformation de motif

C’est fait !

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 popup affiche un contenu « d’avertissement » différent chaque fois que l’utilisateur tente de se déconnecter.

Télécharger DIVI maintenant !!!

Conclusion.

Espérons que la création de ce formulaire de connexion popup 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.

Nous espérons également que ce tutoriel vous inspirera pour vos prochains projets Divi. Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.

Vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet.

N’hésitez pas à consulter également notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.