{"id":815952,"date":"2022-06-11T01:11:47","date_gmt":"2022-06-11T01:11:47","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-add-a-dropdown-login-form-to-your-divi-header-2\/"},"modified":"2022-07-27T11:03:11","modified_gmt":"2022-07-27T11:03:11","slug":"how-to-add-a-dropdown-login-form-to-your-divi-header-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-ajouter-un-formulaire-douverture-de-session-a-votre-en-tete-divi\/","title":{"rendered":"Comment ajouter un formulaire d’ouverture de session \u00e0 votre en-t\u00eate Divi"},"content":{"rendered":"
Si vous cr\u00e9ez un site Web d’adh\u00e9sion, il est indispensable de r\u00e9fl\u00e9chir \u00e0 l’exp\u00e9rience de connexion. Bien s\u00fbr, vous pouvez autoriser les visiteurs \u00e0 utiliser la page de connexion par d\u00e9faut de WordPress, mais vous pouvez aussi leur faciliter la t\u00e2che en incluant un formulaire de connexion dans votre en-t\u00eate. Dans ce cas, vous voudrez d\u00e9clencher le formulaire de connexion au clic afin de gagner de la place dans votre en-t\u00eate. C’est exactement ce que nous allons vous montrer dans le tutoriel Divi d’aujourd’hui. Nous allons construire un en-t\u00eate global \u00e0 partir de z\u00e9ro et y inclure un formulaire de connexion d\u00e9roulant. Vous pourrez \u00e9galement t\u00e9l\u00e9charger gratuitement le fichier JSON !<\/p>\n
C’est parti !<\/p>\n
Avant de nous plonger dans le tutoriel, jetons un coup d’\u0153il rapide au r\u00e9sultat sur diff\u00e9rentes tailles d’\u00e9cran.<\/p>\n
<\/p>\n
<\/p>\n
Pour mettre la main sur le mod\u00e8le d’en-t\u00eate global gratuit, vous devez d’abord le t\u00e9l\u00e9charger \u00e0 l’aide du bouton ci-dessous. Pour avoir acc\u00e8s au t\u00e9l\u00e9chargement, vous devez vous inscrire \u00e0 notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonn\u00e9, vous recevrez encore plus d’avantages de Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous \u00eates d\u00e9j\u00e0 sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur t\u00e9l\u00e9charger. Vous ne serez pas \u00ab\u00a0r\u00e9inscrit\u00a0\u00bb et ne recevrez pas d’e-mails suppl\u00e9mentaires.<\/p>\n
\u00a0<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n Commencez par aller dans le Divi Theme Builder dans le backend de votre site WordPress. Une fois l\u00e0, cliquez sur \u00ab\u00a0Add Global Header\u00a0\u00bb.<\/p>\n Un menu d\u00e9roulant s’affiche. Pour commencer \u00e0 construire \u00e0 partir de z\u00e9ro, continuez en s\u00e9lectionnant \u00ab\u00a0Build Global Header\u00a0\u00bb.<\/p>\n Une fois dans l’\u00e9diteur de mod\u00e8le, vous remarquerez qu’une section est d\u00e9j\u00e0 pr\u00e9sente. Ouvrez les param\u00e8tres de la section et t\u00e9l\u00e9chargez une image d’arri\u00e8re-plan ou utilisez une couleur d’arri\u00e8re-plan.<\/p>\n Passez \u00e0 l’onglet de conception de la section et modifiez ensuite les rembourrages sup\u00e9rieur et inf\u00e9rieur.<\/p>\n Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante :<\/p>\n Sans encore ajouter de modules, ouvrez les param\u00e8tres de la ligne et modifiez les param\u00e8tres de dimensionnement comme suit :<\/p>\n Modifiez les valeurs d’espacement suivantes.<\/p>\n Pour aligner automatiquement les colonnes verticalement, nous allons ajouter les lignes de code CSS suivantes \u00e0 l’\u00e9l\u00e9ment principal de la ligne dans l’onglet avanc\u00e9 :<\/p>\n Il est temps d’ajouter des modules, en commen\u00e7ant par un module de suivi des m\u00e9dias sociaux dans la colonne 1. Ajoutez les r\u00e9seaux sociaux de votre choix.<\/p>\n Ensuite, changez la couleur d’arri\u00e8re-plan de chaque r\u00e9seau social individuellement en blanc.<\/p>\n Retournez dans les param\u00e8tres g\u00e9n\u00e9raux du module et modifiez la couleur de l’ic\u00f4ne dans l’onglet \u00ab\u00a0Design\u00a0\u00bb.<\/p>\n Appliquez certains param\u00e8tres de coins arrondis dans les param\u00e8tres de bordure suivants.<\/p>\n Dans la colonne 2, le seul module dont nous avons besoin est un module bouton. Ajoutez une copie de votre choix.<\/p>\n Modifiez ensuite l’alignement du module.<\/p>\n Ensuite, donnez un style au bouton.<\/p>\n Et compl\u00e9tez les param\u00e8tres du bouton en appliquant les valeurs de remplissage suivantes aux param\u00e8tres d’espacement :<\/p>\n Ajoutez une autre section juste en dessous de la pr\u00e9c\u00e9dente et utilisez la couleur de fond suivante pour celle-ci :<\/p>\n Supprimez tous les rembourrages sup\u00e9rieurs et inf\u00e9rieurs par d\u00e9faut dans l’onglet design suivant.<\/p>\n Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante :<\/p>\n Sans encore ajouter de modules, ouvrez les param\u00e8tres de la ligne et modifiez les param\u00e8tres de dimensionnement comme suit :<\/p>\n Modifiez \u00e9galement les valeurs de remplissage dans les param\u00e8tres d’espacement.<\/p>\n Ensuite, ouvrez les param\u00e8tres de la colonne 2 et appliquez une couleur de fond sur la tablette et le t\u00e9l\u00e9phone uniquement.<\/p>\n Nous ajoutons \u00e9galement des espaces en haut et en bas pour les \u00e9crans de petite taille.<\/p>\n Ensuite, nous allons ajouter un module de menu \u00e0 la ligne. S\u00e9lectionnez un menu de votre choix.<\/p>\n T\u00e9l\u00e9chargez un logo sur votre module de menu.<\/p>\n Supprimez ensuite la couleur d’arri\u00e8re-plan du menu.<\/p>\n Passez \u00e0 l’onglet Conception du module et d\u00e9finissez le style du texte du menu comme suit :<\/p>\n Modifiez \u00e9galement les param\u00e8tres du menu d\u00e9roulant.<\/p>\n Ensuite, modifiez la couleur des ic\u00f4nes dans les param\u00e8tres des ic\u00f4nes.<\/p>\n Et compl\u00e9tez les param\u00e8tres du module en appliquant les param\u00e8tres de dimensionnement suivants :<\/p>\n Maintenant que la base de notre en-t\u00eate a \u00e9t\u00e9 construite, nous pouvons nous concentrer sur la cr\u00e9ation du d\u00e9clencheur et du formulaire de connexion. La premi\u00e8re chose dont nous avons besoin est un module Blurb dans la colonne 2 de notre ligne. Ici, nous allons ajouter un titre.<\/p>\n Ensuite, nous allons s\u00e9lectionner une ic\u00f4ne.<\/p>\n Passez \u00e0 l’onglet \u00ab\u00a0Design\u00a0\u00bb du module et modifiez les param\u00e8tres de l’ic\u00f4ne comme suit :<\/p>\n Ensuite, donnez un style au texte du titre.<\/p>\n Nous supprimons \u00e9galement l’animation par d\u00e9faut de ce module dans les param\u00e8tres d’animation.<\/p>\n Nous allons ajouter une marge sup\u00e9rieure au titre de la brochure dans l’onglet avanc\u00e9.<\/p>\n Enfin, nous allons repositionner le module dans les param\u00e8tres de position.<\/p>\n Pour ajouter le formulaire de connexion, nous allons utiliser une nouvelle ligne sous la pr\u00e9c\u00e9dente, avec la structure de colonnes suivante :<\/p>\n Sans ajouter de modules, ouvrez les param\u00e8tres de la ligne et modifiez les param\u00e8tres de dimensionnement comme suit :<\/p>\n Modifiez \u00e9galement les valeurs de l’espacement.<\/p>\n Ajoutez un module de connexion \u00e0 la colonne 2. Assurez-vous que les cases de contenu sont vides.<\/p>\n Modifiez ensuite la couleur d’arri\u00e8re-plan.<\/p>\n Passez \u00e0 l’onglet Conception et d\u00e9finissez le style des champs.<\/p>\n Modifiez ensuite les param\u00e8tres des boutons comme suit :<\/p>\n Assurez-vous que la largeur est \u00e9galement de \u00ab\u00a0100%\u00a0\u00bb.<\/p>\n Appliquez une marge sup\u00e9rieure \u00e0 la case CSS du bouton de connexion dans l’onglet avanc\u00e9.<\/p>\n Et repositionnez le module en cons\u00e9quence :<\/p>\n Maintenant que nous avons tous les \u00e9l\u00e9ments dont nous avons besoin, nous pouvons nous concentrer sur la fonctionnalit\u00e9 de clic. Tout d’abord, ouvrez le module Blurb et ajoutez l’ID CSS suivant :<\/p>\n Ouvrez ensuite le module de connexion et appliquez l’ID CSS suivant :<\/p>\n Ensuite, ajoutez un module de code juste en dessous du module de connexion.<\/p>\n Pour cr\u00e9er la fonctionnalit\u00e9 de clic, nous allons utiliser du code CSS et JQuery. Pour pr\u00e9parer ce code, nous allons ajouter des balises de style (pour le code CSS) et des balises de script (pour le code JQuery).<\/p>\n Placez les lignes suivantes de code CSS entre les balises de style :<\/p>\n Et le code suivant entre les balises de script :<\/p>\n Maintenant que tout est en place, la seule chose qui reste \u00e0 faire est d’enregistrer toutes les modifications apport\u00e9es par le constructeur de th\u00e8me Divi et de voir le r\u00e9sultat !<\/p>\n Maintenant que nous avons suivi toutes les \u00e9tapes, jetons un dernier coup d’\u0153il au r\u00e9sultat sur diff\u00e9rentes tailles d’\u00e9cran.<\/p>\n Dans cet article, nous vous avons montr\u00e9 comment \u00eatre cr\u00e9atif avec votre en-t\u00eate lorsque vous cr\u00e9ez un site Web d’adh\u00e9sion. Plus pr\u00e9cis\u00e9ment, nous vous avons montr\u00e9 comment inclure un formulaire de connexion d\u00e9roulant qui permet \u00e0 vos visiteurs de se connecter \u00e0 leurs comptes sans avoir \u00e0 se rendre sur la page de connexion de WordPress. Vous avez \u00e9galement pu t\u00e9l\u00e9charger gratuitement le fichier JSON du mod\u00e8le d’en-t\u00eate ! Si vous avez des questions ou des suggestions, n’h\u00e9sitez pas \u00e0 laisser un commentaire dans la section commentaire ci-dessous.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" Si vous cr\u00e9ez un site Web d’adh\u00e9sion, il est indispensable de r\u00e9fl\u00e9chir \u00e0 l’exp\u00e9rience de connexion. Bien s\u00fbr, vous pouvez autoriser les visiteurs \u00e0 utiliser la page de connexion par d\u00e9faut de WordPress, mais vous pouvez aussi leur faciliter la t\u00e2che en incluant un formulaire de connexion dans votre en-t\u00eate. Dans ce cas, vous voudrez […]<\/p>\n","protected":false},"author":1,"featured_media":349178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1522],"tags":[],"class_list":["post-815952","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-en"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/815952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=815952"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/815952\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/349178"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=815952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=815952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=815952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}1. Cr\u00e9er un nouveau mod\u00e8le d’en-t\u00eate global<\/h2>\n
Allez sur Divi Theme Builder<\/h3>\n
<\/p>\n
Ajouter un nouvel en-t\u00eate global<\/h3>\n
<\/p>\n
2. Construire l’en-t\u00eate<\/h2>\n
Ajouter la section 1<\/h3>\n
Image d’arri\u00e8re-plan<\/h4>\n
<\/p>\n
Espacement<\/h4>\n
\n
<\/p>\n
Ajouter une rang\u00e9e \u00e0 la section<\/h3>\n
Structure des colonnes<\/h4>\n
<\/p>\n
Dimensionnement<\/h4>\n
\n
\n
<\/p>\n
Espacement<\/h4>\n
\n
<\/p>\n
CSS de l’\u00e9l\u00e9ment principal<\/h4>\n
display : flex ;\njustify-content : center ;\nalign-items : center ;<\/pre>\n
<\/p>\n
Ajouter le module de suivi des m\u00e9dias sociaux \u00e0 la colonne 1<\/h3>\n
Ajouter des r\u00e9seaux sociaux<\/h4>\n
<\/p>\n
Changez la couleur d’arri\u00e8re-plan de chaque r\u00e9seau social individuellement<\/h4>\n
\n
<\/p>\n
<\/p>\n
Param\u00e8tres de l’ic\u00f4ne<\/h4>\n
<\/p>\n
Bordure<\/h4>\n
<\/p>\n
Ajouter le module de bouton \u00e0 la colonne 2<\/h3>\n
Ajouter une copie<\/h4>\n
<\/p>\n
Alignement du bouton<\/h4>\n
<\/p>\n
Param\u00e8tres du bouton<\/h4>\n
\n
<\/p>\n
\n
<\/p>\n
Espacement<\/h4>\n
\n
<\/p>\n
Ajouter la section 2<\/h3>\n
Couleur de fond<\/h4>\n
\n
<\/p>\n
Espacement<\/h4>\n
\n
<\/p>\n
Ajouter la rang\u00e9e #1<\/h3>\n
Structure des colonnes<\/h4>\n
<\/p>\n
Dimensionnement<\/h4>\n
\n
\n
<\/p>\n
Espacement<\/h4>\n
\n
<\/p>\n
Param\u00e8tres de la colonne 2<\/h3>\n
Couleur de fond<\/h4>\n
\n
<\/p>\n
<\/p>\n
Espacement<\/h4>\n
\n
<\/p>\n
Ajouter un module de menu \u00e0 la colonne 1<\/h3>\n
S\u00e9lectionner le menu<\/h4>\n
<\/p>\n
T\u00e9l\u00e9charger le logo<\/h4>\n
<\/p>\n
Supprimer la couleur d’arri\u00e8re-plan<\/h4>\n
<\/p>\n
Param\u00e8tres du texte du menu<\/h4>\n
\n
<\/p>\n
Param\u00e8tres du menu d\u00e9roulant<\/h4>\n
\n
<\/p>\n
Param\u00e8tres des ic\u00f4nes<\/h4>\n
\n
<\/p>\n
Dimensionnement<\/h4>\n
\n
<\/p>\n
3. Ajout d’un formulaire de connexion et d’une fonctionnalit\u00e9 de clic<\/h2>\n
Ajouter le module Blurb \u00e0 la colonne 2<\/h3>\n
Ajouter un titre<\/h4>\n
<\/p>\n
S\u00e9lectionnez une ic\u00f4ne<\/h4>\n
<\/p>\n
Param\u00e8tres de l’ic\u00f4ne<\/h4>\n
\n
<\/p>\n
Param\u00e8tres du texte du titre<\/h4>\n
\n
<\/p>\n
Animation<\/h4>\n
\n
<\/p>\n
Titre de la brochure CSS<\/h4>\n
margin-top : 10px ;<\/pre>\n
<\/p>\n
Position<\/h4>\n
\n
<\/p>\n
Ajouter la rang\u00e9e n\u00b02 \u00e0 la section n\u00b02<\/h3>\n
Structure des colonnes<\/h4>\n
<\/p>\n
Dimensionnement<\/h4>\n
\n
<\/p>\n
Espacement<\/h4>\n
\n
<\/p>\n
Ajouter le module de connexion \u00e0 la colonne 2<\/h3>\n
Supprimer le contenu<\/h4>\n
<\/p>\n
Couleur d’arri\u00e8re-plan<\/h4>\n
\n
<\/p>\n
Param\u00e8tres des champs<\/h4>\n
\n
<\/p>\n
\n
<\/p>\n
Param\u00e8tres des boutons<\/h4>\n
\n
<\/p>\n
\n
<\/p>\n
Dimensionnement de<\/h4>\n
<\/p>\n
Bouton de connexion CSS<\/h4>\n
margin-top : 30px ;<\/pre>\n
<\/p>\n
Positionner<\/h4>\n
\n
<\/p>\n
Ajouter l’ID CSS au module Blurb dans la rang\u00e9e 1<\/h3>\n
\n
<\/p>\n
Ajoutez l’ID CSS au module de connexion dans la rang\u00e9e n\u00b0 2<\/h3>\n
<\/p>\n
Ajouter un module de code sous le module de connexion<\/h3>\n
<\/p>\n
Ajouter des balises de style et de script<\/h4>\n
<\/p>\n
Insertion du code CSS entre les balises de style<\/h4>\n
#divi-login-toggle {\ncursor : pointer \n}\n\n#divi-login-form {\nmargin-top : -20px ;\nvisibilit\u00e9 : cach\u00e9 ;\nopacit\u00e9 : 0 ;\n \n-webkit-transition : all 0.2s ease !important ;\n-moz-transition : all 0.2s ease !.important ;\n-o-transition : all 0.2s ease !.important ;\ntransition : all 0.2s ease !important ;\n}\n \n.show-login-form {\nvisibility : visible !important ;\nmargin-top : 0px !important ;\nopacit\u00e9 : 1 !important ;\n}<\/pre>\n
<\/p>\n
Insertion de JQuery entre les balises de script<\/h4>\n
jQuery(document).ready(function($){\n\nvar loginForm = $('#divi-login-form') ;\n\n$('#divi-login-toggle').click(function() {\n\nloginForm.toggleClass('show-login-form') ;\n\n}) ;\n}) ;<\/pre>\n
<\/p>\n
4. Enregistrer les modifications apport\u00e9es \u00e0 Divi Theme Builder<\/h2>\n
<\/p>\n
<\/p>\n
Pr\u00e9visualisation<\/h2>\n
Bureau<\/h3>\n
<\/p>\n
Mobile<\/h3>\n
<\/p>\n
R\u00e9flexions finales<\/h2>\n