Comment concevoir un formulaire de connexion en ligne pour un en-tête global personnalisé dans Divi

La création d'un formulaire de connexion en ligne pour votre en-tête peut être un formidable atout pour l'expérience utilisateur. Ils sont parfaits pour les sites d'adhésion et les magasins en ligne, car ils permettent aux utilisateurs de se connecter très facilement à tout moment ou sur n'importe quelle page du site. Dans ce tutoriel, nous allons vous montrer comment concevoir un formulaire de connexion en ligne pour un utilisateur d'en-tête personnalisé le Divi Theme Builder. Pour ce faire, nous allons créer un en-tête global réactif simple, puis concevoir un formulaire de connexion en ligne compact en haut à droite de l'en-tête à l'aide du module de connexion de Divi. La construction nécessite un peu de CSS personnalisé, mais une fois que tout est en place, il sera facile de personnaliser le formulaire de connexion en ligne pour qu'il corresponde facilement à n'importe quelle conception d'en-tête à l'aide des options de conception intégrées de Divi.

Commençons!

Aperçu

Voici un aperçu rapide de l'en-tête personnalisé avec le formulaire de connexion en ligne que nous construirons dans ce didacticiel.

Et voici le formulaire de connexion en ligne sur l'écran de la tablette et du téléphone.

Voici le message et le lien « déconnexion » qui s'afficheront lorsque les utilisateurs seront connectés.

Téléchargez GRATUITEMENT la mise en page de l'en-tête du formulaire de connexion en ligne

Pour mettre la main sur la mise en page de ce tutoriel, vous devrez d'abord la télécharger à l'aide du 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 abonné et ne recevrez pas 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 !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et ajoutez l'un des fichiers json dans le générateur de thème Divi à l'aide de l'option Portabilité du générateur de thème.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Si vous ne l'avez pas encore fait, installez et activez le thème Divi. C'est à peu près tout ce dont vous avez besoin pour commencer. Nous allons créer une nouvelle mise en page de modèle d'en-tête à partir de zéro avec Divi Theme Builder.

Ajout d'un nouvel en-tête global

Pour faire avancer les choses, nous devons créer un nouvel en-tête global pour notre site Web. Pour ce faire, accédez au tableau de bord WordPress et accédez à Divi > Theme Builder.

Sur le modèle de site Web par défaut, cliquez sur « Ajouter un en-tête global », puis sur « Créer un en-tête global ».

Sélectionnez ensuite l'option Construire à partir de zéro.

Concevoir le Divi Global Header avec un formulaire de connexion en ligne

Personnalisation de la section

À partir de l'éditeur de disposition d'en-tête global, vous pourrez créer l'en-tête personnalisé de votre site à partir de zéro. Pour commencer, ouvrez les paramètres de la section régulière et mettez à jour les éléments suivants :

• Couleur d'arrière-plan du dégradé de gauche :
• Dégradé d'arrière-plan à droite :
• Direction du dégradé: 48deg
• Rembourrage : 10 pixels en haut, 10 pixels en bas, 20 pixels à gauche, 20 pixels à droite

Afin de rendre notre en-tête personnalisé plus réactif, nous ajouterons le CSS personnalisé suivant à l'élément principal de la section.

display:flex;
justify-content:center;
align-items:center;

Ajout du logo d'en-tête à la première ligne

Maintenant que la section est prête, nous pouvons ajouter la première ligne.

Ajouter une rangée

Ajoutez une ligne à une colonne à la section.

Ajouter un module d'image avec une image de logo

Dans la ligne à une colonne, ajoutez un module d'image. Ce sera l'endroit où nous ajouterons le logo pour l'en-tête.

Mettre à jour l'image et la marge du module Image

Mettez à jour les paramètres de l'image comme suit :

• Image : [ajouter le logo (environ 64 pixels sur 64 pixels)]

• Marge : 20px à droite

Mettre à jour les paramètres de ligne

Avant d'aller plus loin, ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :

• Utiliser une largeur de gouttière personnalisée : OUI
• Largeur de gouttière : 1
• Largeur : 25 %
• Alignement des lignes : à gauche
• Remplissage : 0px en haut, 0px en bas

Ajout du formulaire de connexion en ligne à la deuxième ligne

Ajouter une rangée

Maintenant que la première ligne est prête, vous remarquerez dans l'éditeur que la première ligne occupera 25% de la section de gauche. Ce sera essentiellement la ligne désignée pour le logo de notre en-tête. Nous devons créer une ligne de section pour le formulaire de connexion en ligne et le menu sur le côté droit.

Ajoutez une deuxième ligne avec une structure à une colonne à la section.

Ajouter un formulaire de connexion

À l'intérieur de la ligne à une colonne, ajoutez un module de connexion.

Supprimer le contenu par défaut

Sous les paramètres de connexion, supprimez le faux titre et le contenu du corps.

Ajouter une classe personnalisée de formulaire de connexion et CSS

Avant d'aller trop loin dans la conception du formulaire de connexion en ligne, ajoutons d'abord les classes CSS et CSS personnalisées au module de connexion. Cela nous permettra de mettre en place la structure de base en ligne du formulaire avant de mettre les dernières touches de conception au formulaire avec les options intégrées de Divi.

Sous l'onglet Avancé, ajoutez la classe CSS suivante :

• Classe CSS : header-login-form

Ajoutez le CSS personnalisé suivant à la zone CSS de description de connexion :

margin-bottom: 0px !important

Ajoutez ensuite le CSS personnalisé suivant dans la zone CSS du formulaire de connexion :

width: 100%;

Ajoutez le CSS personnalisé suivant à la zone CSS des champs de connexion :

padding: 5px 4% !important

Ajouter un CSS personnalisé aux paramètres de mise en page de l'en-tête

Puisque nous avons ajouté notre classe CSS personnalisée au module de formulaire de connexion, nous pouvons ajouter notre CSS personnalisé qui ne ciblera ce formulaire de connexion particulier.

Ouvrez le paramètre de mise en page de l'en-tête et ajoutez le CSS personnalisé suivant :

.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}

Ce CSS rendra les champs de connexion et le bouton affichés en ligne (horizontalement), masquera le "mot de passe oublié ?" lien, et ajoutez une petite marge entre les champs.

Paramètres de ligne

Avant de mettre la touche finale au formulaire de connexion en ligne, mettons à jour les paramètres de ligne comme suit :

• Utiliser une largeur de gouttière personnalisée : OUI
• Largeur de gouttière : 1
• Alignement des lignes : à droite
• Remplissage : 0px en haut, 0px en bas

Paramètres de conception de formulaire de connexion

Nous sommes maintenant prêts à mettre à jour les paramètres du formulaire de connexion. Ouvrez les paramètres du module de formulaire de connexion et mettez à jour les éléments suivants :

• Utiliser la couleur d'arrière-plan : NON

Texte de champ et de lien

• Arrière-plan des champs : Couleur : rgba(255,255,255,0.2)
• Couleur du texte des champs : #ffffff
• Police des champs : Lato
• Taille du texte des champs : 14 px
• Alignement du texte : à droite
• Police du lien : Lato
• Style de police du lien : Souligné
• Couleur du texte du lien : #ff3190

Conception de bouton

• Taille du texte du bouton : 15 px
• Couleur d'arrière-plan du bouton : #ff3190
• Largeur de la bordure du bouton : 0px
• Police des boutons : Lato
• Remplissage des boutons : 2 pixels en haut, 2 pixels en bas
• Marge : 15px en bas
• Remplissage : 0px en haut, 0px en bas, 0px à gauche, 0px à droite

Ajout du menu à la deuxième rangée

Module de menus

Avec notre formulaire de connexion en ligne en place, nous pouvons ajouter le menu directement en dessous.

Ajoutez un module de menu sous le module de formulaire de connexion.

Paramètres du module de menus

Mettez à jour les paramètres du menu comme suit :

• Couleur d'arrière-plan : rgba(0,0,0,0)
• Police du menu : Lato
• Poids de la police du menu : gras
• Couleur du texte du menu : #ffffff
• Taille du texte du menu : 16px
• Alignement du texte : à droite
• Couleur d'arrière-plan du menu déroulant : #ffffff
• Couleur de la ligne du menu déroulant : rgba(0,0,0,0)
• Couleur du texte du menu déroulant : #000000
• Couleur d'arrière-plan du menu mobile : #ffffff
• Couleur du texte du menu mobile : #000000
• Couleur de l'icône du panier d'achat : #ffffff
• Couleur de l'icône de recherche : #ffffff
• Couleur de l'icône du menu Hamburger : #ffffff

Enregistrement de l'en-tête du formulaire de connexion en ligne

Assurez-vous d'enregistrer la mise en page avant de quitter l'éditeur de mise en page d'en-tête.

Ensuite, enregistrez également les paramètres du générateur de thème.

Résultats finaux

C'est ça!

Voyons maintenant le résultat final. Pour voir le résultat final, il suffit de visiter une page de votre site Web.

Voici l'en-tête sur l'affichage du bureau.

Voici l'en-tête du formulaire de connexion en ligne sur l'écran de la tablette.

Et voici le formulaire de connexion en ligne sur l'écran du téléphone. Notez également le menu mobile.

Et voici ce que l'utilisateur verra une fois connecté.

Dernières pensées

Cet en-tête global personnalisé avec un formulaire de connexion en ligne sera certainement utile pour tout site d'adhésion ou boutique en ligne. Avec juste un peu de CSS personnalisé, nous avons pu convertir le module de connexion de Divi en un élégant formulaire de connexion en ligne qui s'intégrera parfaitement dans l'en-tête de n'importe quel site Web. J'espère que cela vous sera utile pour votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!