Comment concevoir un formulaire de connexion popup créatif dans Divi

Un joli formulaire de connexion contribue à augmenter l'expérience utilisateur de votre site Web. L'idée de notre tutoriel d'aujourd'hui est de créer un formulaire de connexion à l'aide de Divi Builder, qui apparaîtra lorsque vous cliquerez sur le bouton de connexion sur la page d'accueil. La plupart du temps, lorsque nous cliquons sur le bouton de connexion, nous sommes redirigés vers la page de connexion, alors qu'un simple formulaire pop-up est beaucoup plus pratique et rafraîchissant. Alors aujourd'hui, nous allons apprendre à concevoir un formulaire de connexion pop-up créatif. Nous allons le créer à l'aide du module de connexion de Divi et de certains modules de boutons. Commençons donc sans tarder le tutoriel d'aujourd'hui.

Remarque : nous ne travaillerons qu'avec la conception frontale. Si quelqu'un a du mal à se connecter, par exemple, quelqu'un doit réinitialiser son mot de passe, nous devons passer à la page de connexion traditionnelle. Pour les personnes amoureuses des pages de connexion personnalisées, ce didacticiel convient parfaitement.

Aperçu

Voici l'aperçu du design d'aujourd'hui. On peut voir qu'un clic sur le bouton de connexion pousse les formulaires de connexion à apparaître, et lorsque l'on clique sur déconnexion, un pop-up d'avertissement avant la déconnexion.

Formulaire de connexion contextuel avec boutons de connexion/déconnexion

Pour vous lancer dans le design, vous devez d'abord vous rendre sur Divi

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Nous devons maintenant télécharger l'en-tête et le pied de page des packs de mise en page Crowdfunding de Divi à partir de cette page . Entrez votre identifiant de messagerie et cliquez sur télécharger.

Ensuite, vous verrez à nouveau une option de téléchargement et cliquez dessus. Maintenant, décompressez le fichier une fois le téléchargement terminé, revenez à Divi builder et cliquez sur l'option de portabilité.

Suivez maintenant la procédure suivante comme indiqué ci-dessous.

• Sélectionnez l'onglet d'importation dans la fenêtre contextuelle de portabilité.
• Téléchargez le fichier Json téléchargé à partir du dossier décompressé.
• Cliquez sur le bouton importer.
• Cliquez ensuite sur modifier pour apporter des modifications à l'en-tête.

Partie 1 : Création d'un bouton de connexion/déconnexion

Tout d'abord, ouvrez les calques afin que nous puissions voir facilement tous les éléments. Dans la rangée supérieure de la section d'en-tête, supprimez les modules de médias sociaux.

Création d'un bouton de connexion

Il y a déjà un bouton de connexion sur les rangées du haut 4ème colonne. Nous allons le modifier.

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

Ajoutez deux classes CSS personnalisées au bouton à partir de l'onglet avancé comme suit :

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

Bouton de déconnexion

Pour créer notre bouton de déconnexion, clonez le bouton de connexion existant dans la colonne 4. En outre, étiquetez-les pour une identification ultérieure.

Changez le texte du bouton cloné en "Déconnexion".

Modifiez l'icône du bouton dans l'onglet de conception comme indiqué ci-dessous.

Enfin, modifiez la classe CSS dans l'onglet avancé.

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

Partie 2 : Création d'une page contextuelle

Nous avons créé les boutons avec succès. Non, nous allons concevoir la section contextuelle qui fera office de formulaire. Pour créer cela, ajoutez une section régulière sous la section d'en-tête.

Section Ajout et paramètres

Donnons à la section un fond blanc.

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

Effectuez les ajustements suivants dans l'onglet Conception de la section.

• 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

Ajoutons une classe CSS à partir de l'onglet avancé.

• Classe CSS : et-popup-login

Ajoutez ensuite le code CSS suivant dans l'élément principal.

overscroll-behavior: contain;

Ensuite, faites quelques ajustements sur la visibilité et la position.

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

Ajout de lignes et paramètres

Ajoutons une ligne à une colonne à la nouvelle section.

Ouvrez les paramètres de ligne et effectuez les réglages 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

Nous utiliserons un module de présentation pour créer une icône de fermeture contextuelle.

Supprimez les textes du module des paramètres et ajoutez l'icône suivante.

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

Appliquez les paramètres suivants à partir de l'onglet Conception.

• 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

Ajoutez une classe CSS au module de présentation à partir de l'onglet avancé.

• Classe CSS : et-toggle-popup

Partie 4 : Création du formulaire

Notre formulaire de connexion a deux modèles, un pour se connecter et un autre pour se déconnecter. Il y aura donc deux modules de formulaire de connexion différents. Le premier apparaît lorsqu'un utilisateur est déconnecté et doit se connecter, et un autre est l'utilisateur est connecté et souhaite se déconnecter. Concept facile, remettons-nous au travail.

Création d'un formulaire de déconnexion

Ajoutons un module de connexion pour créer notre formulaire de déconnexion.

Ouvrez maintenant les paramètres du module de formulaire et modifiez-les dans l'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

Revenons maintenant à la section d'en-tête des calques. Ensuite, ouvrez les paramètres du bouton pour de la 4ème colonne de la 1ère ligne. Accédez à l'onglet Conception et ouvrez l'option de bouton. Ensuite, cliquez sur l'option à trois points et sélectionnez "copier le style du bouton".

Collez-le maintenant dans le formulaire de connexion que nous venons de créer.

Nous mettrons à jour le style des boutons de notre formulaire de connexion.

• Utiliser des styles personnalisés pour le bouton : OUI
• 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

Téléchargeons également les paramètres de dimensionnement.

• Largeur : 100 %
• Largeur maximale : 80 % (ordinateur de bureau), 90 % (tablette), 95 % (téléphone)
• Alignement du module : Centre

Passez maintenant à l'onglet avancé et ajoutez la classe CSS et le CSS personnalisé comme indiqué ci-dessous.

• Classe CSS : et-logged-out-form

Ajoutez le code suivant à la zone de description de connexion.

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

Ajoutez ensuite ce code dans la zone Formulaire de connexion.

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

Cela rend le formulaire de connexion quelque chose comme ça.

Création du formulaire "Connexion"

Nous en avons terminé avec le formulaire "Déconnecté" et créons maintenant le formulaire "Connexion" avec un contenu différent pour étendre l'expérience utilisateur. Pour ce faire, clonons le formulaire de connexion existant.

Maintenant, mettez à jour les noms de chaque formulaire. Ensuite, ouvrez le formulaire "Connecté" à partir du paramètre de texte ouvert de l'onglet Contenu. Ensuite, à partir de la zone de titre, vous aurez un menu déroulant sur le côté droit. Ouvrez-le et sélectionnez "Titre du site".

Ouvrez les paramètres de titre de site dynamique et mettez-les à jour comme suit.

• Avant : « Vous essayez de vous déconnecter de »
• Après : «. "

Modifiez maintenant les paramètres de description en fonction de votre choix, mais veuillez mettre la description en tant qu'en-tête 3.

Dans de nombreux formulaires de connexion à un site Web, nous avons vu un message personnalisé attaché au lien « déconnexion ». Nous allons personnaliser l'option de corps de texte à partir de l'onglet avancé pour le créer.

• 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

Accédez à l'onglet avancé et ajoutez une classe CSS et un CSS personnalisé.

• Classe CSS : et-logged-in-form

CSS personnalisé pour le formulaire de connexion :

display:none;

Partie 5 : Codes personnalisés

Nous devons ajouter un module de code pour ajouter des codes personnalisés. Ajoutons un module de code sous le dernier module de connexion.

Code CSS

Ajoutez le code CSS donné sur le module dans les balises de style .

/* 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;
}

Code JQuery

Assemblez maintenant le code JQuery suivant sur le module dans les balises de script .

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Résultat de conception

Voici donc le résultat de notre conception. Tout est en place et fonctionne parfaitement.

Derniers mots

Aujourd'hui, vous avez vu comment concevoir un formulaire de connexion personnalisé et créatif avec le module de connexion de Divi . De cette façon, vous pouvez faire correspondre l'esthétique du site Web sur un panneau de connexion personnalisé. J'espère que vous trouverez ce tutoriel utile, et si c'est le cas, un partage sera splendide !