{"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":"
\n

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

Aper\u00e7u de<\/h2>\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

Bureau<\/h3>\n

\"dropdown<\/p>\n

Mobile<\/h3>\n

\"dropdown<\/p>\n

T\u00e9l\u00e9chargez gratuitement le mod\u00e8le d’en-t\u00eate global<\/h2>\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

\n
\n
\n
\n
\n
\n

Vous vous \u00eates inscrit avec succ\u00e8s. Veuillez v\u00e9rifier votre adresse e-mail pour confirmer votre abonnement et avoir acc\u00e8s aux packs hebdomadaires gratuits de mises en page Divi !<\/h2>\n<\/div>\n<\/div>\n

\u00a0<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

1. Cr\u00e9er un nouveau mod\u00e8le d’en-t\u00eate global<\/h2>\n

Allez sur Divi Theme Builder<\/h3>\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

\"dropdown<\/p>\n

Ajouter un nouvel en-t\u00eate global<\/h3>\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

\"dropdown<\/p>\n

2. Construire l’en-t\u00eate<\/h2>\n

Ajouter la section 1<\/h3>\n

Image d’arri\u00e8re-plan<\/h4>\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

\"dropdown<\/p>\n

Espacement<\/h4>\n

Passez \u00e0 l’onglet de conception de la section et modifiez ensuite les rembourrages sup\u00e9rieur et inf\u00e9rieur.<\/p>\n

    \n
  • Rembourrage sup\u00e9rieur : 10px<\/li>\n
  • Rembourrage inf\u00e9rieur : 10px<\/li>\n<\/ul>\n

    \"dropdown<\/p>\n

    Ajouter une rang\u00e9e \u00e0 la section<\/h3>\n

    Structure des colonnes<\/h4>\n

    Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante :<\/p>\n

    \"dropdown<\/p>\n

    Dimensionnement<\/h4>\n

    Sans encore ajouter de modules, ouvrez les param\u00e8tres de la ligne et modifiez les param\u00e8tres de dimensionnement comme suit :<\/p>\n

      \n
    • Utiliser une largeur de goutti\u00e8re personnalis\u00e9e : Oui<\/li>\n
    • Largeur de la goutti\u00e8re : 1<\/li>\n
    • \u00c9galiser les hauteurs des colonnes : Oui<\/li>\n
    • Largeur :\n
        \n
      • Bureau : 80%<\/li>\n
      • Tablette et t\u00e9l\u00e9phone : 95<\/li>\n<\/ul>\n<\/li>\n
      • Largeur maximale : 2580px<\/li>\n<\/ul>\n

        \"dropdown<\/p>\n

        Espacement<\/h4>\n

        Modifiez les valeurs d’espacement suivantes.<\/p>\n

          \n
        • Rembourrage sup\u00e9rieur : 0px<\/li>\n
        • Rembourrage en bas : 0px<\/li>\n
        • Rembourrage \u00e0 gauche : 1%<\/li>\n
        • Rembourrage \u00e0 droite : 1%<\/li>\n<\/ul>\n

          \"dropdown<\/p>\n

          CSS de l’\u00e9l\u00e9ment principal<\/h4>\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

          display : flex ;\njustify-content : center ;\nalign-items : center ;<\/pre>\n
          \"dropdown<\/p>\n
          Ajouter le module de suivi des m\u00e9dias sociaux \u00e0 la colonne 1<\/h3>\n
          Ajouter des r\u00e9seaux sociaux<\/h4>\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
          \"dropdown<\/p>\n
          Changez la couleur d’arri\u00e8re-plan de chaque r\u00e9seau social individuellement<\/h4>\n
          Ensuite, changez la couleur d’arri\u00e8re-plan de chaque r\u00e9seau social individuellement en blanc.<\/p>\n
            \n
          • Couleur d’arri\u00e8re-plan : #ffffff<\/li>\n<\/ul>\n
            \"dropdown<\/p>\n
            \"dropdown<\/p>\n
            Param\u00e8tres de l’ic\u00f4ne<\/h4>\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
            \"dropdown<\/p>\n
            Bordure<\/h4>\n
            Appliquez certains param\u00e8tres de coins arrondis dans les param\u00e8tres de bordure suivants.<\/p>\n
            \"dropdown<\/p>\n
            Ajouter le module de bouton \u00e0 la colonne 2<\/h3>\n
            Ajouter une copie<\/h4>\n
            Dans la colonne 2, le seul module dont nous avons besoin est un module bouton. Ajoutez une copie de votre choix.<\/p>\n
            \"dropdown<\/p>\n
            Alignement du bouton<\/h4>\n
            Modifiez ensuite l’alignement du module.<\/p>\n
            \"dropdown<\/p>\n
            Param\u00e8tres du bouton<\/h4>\n
            Ensuite, donnez un style au bouton.<\/p>\n
              \n
            • Utiliser des styles personnalis\u00e9s pour le bouton : Oui<\/li>\n
            • Taille du texte du bouton : 12px<\/li>\n
            • Couleur du texte du bouton : #ffffff<\/li>\n
            • Couleur d’arri\u00e8re-plan du bouton : #ff4700<\/li>\n
            • Largeur de la bordure du bouton : 0px<\/li>\n
            • Rayon de la bordure du bouton : 0px<\/li>\n
            • Espacement des lettres du bouton : 2px<\/li>\n<\/ul>\n
              \"dropdown<\/p>\n
                \n
              • Police du bouton : Prata<\/li>\n
              • Style de police du bouton : Majuscule<\/li>\n<\/ul>\n
                \"dropdown<\/p>\n
                Espacement<\/h4>\n
                Et compl\u00e9tez les param\u00e8tres du bouton en appliquant les valeurs de remplissage suivantes aux param\u00e8tres d’espacement :<\/p>\n
                  \n
                • Top Padding : 16px<\/li>\n
                • Rembourrage inf\u00e9rieur : 16px<\/li>\n
                • Rembourrage gauche : 24px<\/li>\n
                • Remplacement \u00e0 droite : 24px<\/li>\n<\/ul>\n
                  \"dropdown<\/p>\n
                  Ajouter la section 2<\/h3>\n
                  Couleur de fond<\/h4>\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
                    \n
                  • Couleur de fond : #fff4ef<\/li>\n<\/ul>\n
                    \"dropdown<\/p>\n
                    Espacement<\/h4>\n
                    Supprimez tous les rembourrages sup\u00e9rieurs et inf\u00e9rieurs par d\u00e9faut dans l’onglet design suivant.<\/p>\n
                      \n
                    • Rembourrage sup\u00e9rieur : 0px<\/li>\n
                    • Rembourrage inf\u00e9rieur : 0px<\/li>\n<\/ul>\n
                      \"dropdown<\/p>\n
                      Ajouter la rang\u00e9e #1<\/h3>\n
                      Structure des colonnes<\/h4>\n
                      Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante :<\/p>\n
                      \"dropdown<\/p>\n
                      Dimensionnement<\/h4>\n
                      Sans encore ajouter de modules, ouvrez les param\u00e8tres de la ligne et modifiez les param\u00e8tres de dimensionnement comme suit :<\/p>\n
                        \n
                      • Egaliser les hauteurs des colonnes : Oui<\/li>\n
                      • Largeur :\n
                          \n
                        • Bureau : 80%<\/li>\n
                        • Tablette et t\u00e9l\u00e9phone : 95<\/li>\n<\/ul>\n<\/li>\n
                        • Largeur maximale : 2580px<\/li>\n<\/ul>\n
                          \"dropdown<\/p>\n
                          Espacement<\/h4>\n
                          Modifiez \u00e9galement les valeurs de remplissage dans les param\u00e8tres d’espacement.<\/p>\n
                            \n
                          • Rembourrage en haut : 5px<\/li>\n
                          • Rembourrage en bas : 5px<\/li>\n
                          • Rembourrage \u00e0 gauche : 2%<\/li>\n
                          • Remplissage \u00e0 droite : 2%<\/li>\n<\/ul>\n
                            \"dropdown<\/p>\n
                            Param\u00e8tres de la colonne 2<\/h3>\n
                            Couleur de fond<\/h4>\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
                              \n
                            • Bureau : \/<\/li>\n
                            • Tablette et t\u00e9l\u00e9phone : #f2e8e3<\/li>\n<\/ul>\n
                              \"dropdown<\/p>\n
                              \"dropdown<\/p>\n
                              Espacement<\/h4>\n
                              Nous ajoutons \u00e9galement des espaces en haut et en bas pour les \u00e9crans de petite taille.<\/p>\n
                                \n
                              • Rembourrage sup\u00e9rieur :<\/li>\n
                              • Rembourrage inf\u00e9rieur :<\/li>\n<\/ul>\n
                                \"dropdown<\/p>\n
                                Ajouter un module de menu \u00e0 la colonne 1<\/h3>\n
                                S\u00e9lectionner le menu<\/h4>\n
                                Ensuite, nous allons ajouter un module de menu \u00e0 la ligne. S\u00e9lectionnez un menu de votre choix.<\/p>\n
                                \"dropdown<\/p>\n
                                T\u00e9l\u00e9charger le logo<\/h4>\n
                                T\u00e9l\u00e9chargez un logo sur votre module de menu.<\/p>\n
                                \"dropdown<\/p>\n
                                Supprimer la couleur d’arri\u00e8re-plan<\/h4>\n
                                Supprimez ensuite la couleur d’arri\u00e8re-plan du menu.<\/p>\n
                                \"dropdown<\/p>\n
                                Param\u00e8tres du texte du menu<\/h4>\n
                                Passez \u00e0 l’onglet Conception du module et d\u00e9finissez le style du texte du menu comme suit :<\/p>\n
                                  \n
                                • Police du menu : Prata<\/li>\n
                                • Couleur du texte du menu : #111821<\/li>\n
                                • Taille du texte du menu : 18px<\/li>\n
                                • Hauteur de la ligne de menu : 1.4em<\/li>\n
                                • Alignement du texte : Droite<\/li>\n<\/ul>\n
                                  \"dropdown<\/p>\n
                                  Param\u00e8tres du menu d\u00e9roulant<\/h4>\n
                                  Modifiez \u00e9galement les param\u00e8tres du menu d\u00e9roulant.<\/p>\n
                                    \n
                                  • Couleur d’arri\u00e8re-plan du menu d\u00e9roulant : #fff4ef<\/li>\n
                                  • Couleur de la ligne du menu d\u00e9roulant : #191919<\/li>\n
                                  • Couleur du texte du menu d\u00e9roulant : #191919<\/li>\n
                                  • Couleur d’arri\u00e8re-plan du menu mobile : #fff4ef<\/li>\n
                                  • Couleur du texte du menu mobile : #191919<\/li>\n<\/ul>\n
                                    \"dropdown<\/p>\n
                                    Param\u00e8tres des ic\u00f4nes<\/h4>\n
                                    Ensuite, modifiez la couleur des ic\u00f4nes dans les param\u00e8tres des ic\u00f4nes.<\/p>\n
                                      \n
                                    • Couleur de l’ic\u00f4ne du panier d’achat : #191919<\/li>\n
                                    • Couleur de l’ic\u00f4ne de recherche : #191919<\/li>\n
                                    • Ic\u00f4ne de menu Hamburger Couleur : #191919<\/li>\n<\/ul>\n
                                      \"dropdown<\/p>\n
                                      Dimensionnement<\/h4>\n
                                      Et compl\u00e9tez les param\u00e8tres du module en appliquant les param\u00e8tres de dimensionnement suivants :<\/p>\n
                                        \n
                                      • Largeur maximale du logo : 50px<\/li>\n
                                      • Largeur maximale : 100<\/li>\n<\/ul>\n
                                        \"dropdown<\/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
                                        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
                                        \"dropdown<\/p>\n
                                        S\u00e9lectionnez une ic\u00f4ne<\/h4>\n
                                        Ensuite, nous allons s\u00e9lectionner une ic\u00f4ne.<\/p>\n
                                        \"dropdown<\/p>\n
                                        Param\u00e8tres de l’ic\u00f4ne<\/h4>\n
                                        Passez \u00e0 l’onglet \u00ab\u00a0Design\u00a0\u00bb du module et modifiez les param\u00e8tres de l’ic\u00f4ne comme suit :<\/p>\n
                                          \n
                                        • Couleur de l’ic\u00f4ne : #ffffff<\/li>\n
                                        • Ic\u00f4ne en forme de cercle : Oui<\/li>\n
                                        • Couleur du cercle : #ff4700<\/li>\n
                                        • Placement de l’image\/ic\u00f4ne : Gauche<\/li>\n<\/ul>\n
                                          \"dropdown<\/p>\n
                                          Param\u00e8tres du texte du titre<\/h4>\n
                                          Ensuite, donnez un style au texte du titre.<\/p>\n
                                            \n
                                          • Police du titre : Lato<\/li>\n
                                          • Poids de la police du titre : Heavy<\/li>\n
                                          • Style de la police du titre : Majuscules<\/li>\n
                                          • Taille du texte du titre : 12px<\/li>\n
                                          • Espacement des lettres du titre : 3px<\/li>\n<\/ul>\n
                                            \"dropdown<\/p>\n
                                            Animation<\/h4>\n
                                            Nous supprimons \u00e9galement l’animation par d\u00e9faut de ce module dans les param\u00e8tres d’animation.<\/p>\n
                                              \n
                                            • Animation des images\/ic\u00f4nes : Pas d’animation<\/li>\n<\/ul>\n
                                              \"dropdown<\/p>\n
                                              Titre de la brochure CSS<\/h4>\n
                                              Nous allons ajouter une marge sup\u00e9rieure au titre de la brochure dans l’onglet avanc\u00e9.<\/p>\n
                                              margin-top : 10px ;<\/pre>\n
                                              \"dropdown<\/p>\n
                                              Position<\/h4>\n
                                              Enfin, nous allons repositionner le module dans les param\u00e8tres de position.<\/p>\n
                                                \n
                                              • Position : Absolue<\/li>\n
                                              • Position : Centre<\/li>\n<\/ul>\n
                                                \"dropdown<\/p>\n
                                                Ajouter la rang\u00e9e n\u00b02 \u00e0 la section n\u00b02<\/h3>\n
                                                Structure des colonnes<\/h4>\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
                                                \"dropdown<\/p>\n
                                                Dimensionnement<\/h4>\n
                                                Sans ajouter de modules, ouvrez les param\u00e8tres de la ligne et modifiez les param\u00e8tres de dimensionnement comme suit :<\/p>\n
                                                  \n
                                                • Egaliser les hauteurs des colonnes : Oui<\/li>\n
                                                • Largeur maximale : 2580px<\/li>\n<\/ul>\n
                                                  \"dropdown<\/p>\n
                                                  Espacement<\/h4>\n
                                                  Modifiez \u00e9galement les valeurs de l’espacement.<\/p>\n
                                                    \n
                                                  • Rembourrage en haut : 0px<\/li>\n
                                                  • Rembourrage en bas : 0px<\/li>\n
                                                  • Rembourrage \u00e0 gauche : 2%<\/li>\n
                                                  • Rembourrage \u00e0 droite : 2%<\/li>\n<\/ul>\n
                                                    \"dropdown<\/p>\n
                                                    Ajouter le module de connexion \u00e0 la colonne 2<\/h3>\n
                                                    Supprimer le contenu<\/h4>\n
                                                    Ajoutez un module de connexion \u00e0 la colonne 2. Assurez-vous que les cases de contenu sont vides.<\/p>\n
                                                    \"dropdown<\/p>\n
                                                    Couleur d’arri\u00e8re-plan<\/h4>\n
                                                    Modifiez ensuite la couleur d’arri\u00e8re-plan.<\/p>\n
                                                      \n
                                                    • Couleur de fond : #ff4700<\/li>\n<\/ul>\n
                                                      \"dropdown<\/p>\n
                                                      Param\u00e8tres des champs<\/h4>\n
                                                      Passez \u00e0 l’onglet Conception et d\u00e9finissez le style des champs.<\/p>\n
                                                        \n
                                                      • Couleur d’arri\u00e8re-plan des champs : rgba(0,0,0,0)<\/li>\n
                                                      • Couleur du texte des champs : rgba(255,255,255,0.73)<\/li>\n
                                                      • Rembourrage gauche des champs : 0px<\/li>\n
                                                      • Fields Right Padding : 0px<\/li>\n
                                                      • Police Fields : Lato<\/li>\n
                                                      • Taille du texte des champs : 16px<\/li>\n<\/ul>\n
                                                        \"dropdown<\/p>\n
                                                          \n
                                                        • Hauteur des lignes des champs : 1.8em<\/li>\n
                                                        • Tous les coins : 0px<\/li>\n
                                                        • Fields Bottom Border Width (largeur de la bordure inf\u00e9rieure des champs) : 1px<\/li>\n
                                                        • Fields Bottom Border Color : #ffffff<\/li>\n<\/ul>\n
                                                          \"dropdown<\/p>\n
                                                          Param\u00e8tres des boutons<\/h4>\n
                                                          Modifiez ensuite les param\u00e8tres des boutons comme suit :<\/p>\n
                                                            \n
                                                          • Utiliser des styles personnalis\u00e9s pour le bouton : Oui<\/li>\n
                                                          • Taille du texte du bouton : 12px<\/li>\n
                                                          • Couleur du texte du bouton : #ffffff<\/li>\n
                                                          • Couleur d’arri\u00e8re-plan du bouton : #141414<\/li>\n
                                                          • Largeur de la bordure du bouton : 0px<\/li>\n
                                                          • Rayon de la bordure du bouton : 0px<\/li>\n
                                                          • Espacement des lettres du bouton : 2px<\/li>\n
                                                          • Police du bouton : Prata<\/li>\n<\/ul>\n
                                                            \"dropdown<\/p>\n
                                                              \n
                                                            • Style de police du bouton : Majuscule<\/li>\n
                                                            • Rembourrage en haut du bouton : 16px<\/li>\n
                                                            • Remplissage du bouton en bas : 16px<\/li>\n<\/ul>\n
                                                              \"dropdown<\/p>\n
                                                              Dimensionnement de<\/h4>\n
                                                              Assurez-vous que la largeur est \u00e9galement de \u00ab\u00a0100%\u00a0\u00bb.<\/p>\n
                                                              \"dropdown<\/p>\n
                                                              Bouton de connexion CSS<\/h4>\n
                                                              Appliquez une marge sup\u00e9rieure \u00e0 la case CSS du bouton de connexion dans l’onglet avanc\u00e9.<\/p>\n
                                                              margin-top : 30px ;<\/pre>\n
                                                              \"dropdown<\/p>\n
                                                              Positionner<\/h4>\n
                                                              Et repositionnez le module en cons\u00e9quence :<\/p>\n
                                                                \n
                                                              • Position : Absolue<\/li>\n
                                                              • Emplacement : En haut \u00e0 droite<\/li>\n
                                                              • D\u00e9calage vertical : 1px<\/li>\n<\/ul>\n
                                                                \"dropdown<\/p>\n
                                                                Ajouter l’ID CSS au module Blurb dans la rang\u00e9e 1<\/h3>\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
                                                                  \n
                                                                • CSS ID : divi-login-toggle<\/li>\n<\/ul>\n
                                                                  \"dropdown<\/p>\n
                                                                  Ajoutez l’ID CSS au module de connexion dans la rang\u00e9e n\u00b0 2<\/h3>\n
                                                                  Ouvrez ensuite le module de connexion et appliquez l’ID CSS suivant :<\/p>\n
                                                                  \"dropdown<\/p>\n
                                                                  Ajouter un module de code sous le module de connexion<\/h3>\n
                                                                  Ensuite, ajoutez un module de code juste en dessous du module de connexion.<\/p>\n
                                                                  \"dropdown<\/p>\n
                                                                  Ajouter des balises de style et de script<\/h4>\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
                                                                  \"dropdown<\/p>\n
                                                                  Insertion du code CSS entre les balises de style<\/h4>\n
                                                                  Placez les lignes suivantes de code CSS entre les balises de style :<\/p>\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
                                                                  \"dropdown<\/p>\n
                                                                  Insertion de JQuery entre les balises de script<\/h4>\n
                                                                  Et le code suivant entre les balises de script :<\/p>\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
                                                                  \"dropdown<\/p>\n
                                                                  4. Enregistrer les modifications apport\u00e9es \u00e0 Divi Theme Builder<\/h2>\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
                                                                  \"dropdown<\/p>\n
                                                                  \"dropdown<\/p>\n
                                                                  Pr\u00e9visualisation<\/h2>\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
                                                                  Bureau<\/h3>\n
                                                                  \"dropdown<\/p>\n
                                                                  Mobile<\/h3>\n
                                                                  \"dropdown<\/p>\n
                                                                  R\u00e9flexions finales<\/h2>\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}]}}