{"id":813552,"date":"2022-06-11T14:56:28","date_gmt":"2022-06-11T14:56:28","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-design-a-fluid-hero-section-in-divi-2\/"},"modified":"2022-06-11T14:58:37","modified_gmt":"2022-06-11T14:58:37","slug":"how-to-design-a-fluid-hero-section-in-divi-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-concevoir-une-section-heroique-fluide-dans-divi\/","title":{"rendered":"Comment concevoir une section h\u00e9ro\u00efque fluide dans Divi"},"content":{"rendered":"
\n

La section h\u00e9ros d’un site Web est l’un des meilleurs candidats pour le design fluide. Contrairement au responsive design traditionnel qui s’adapte \u00e0 diff\u00e9rents points de rupture, le fluid design s’adapte de mani\u00e8re transparente \u00e0 la fen\u00eatre du navigateur et maintient la coh\u00e9rence du design sur tous les appareils. Apr\u00e8s tout, la section du h\u00e9ros est la premi\u00e8re chose que les utilisateurs voient sur un site Web.<\/p>\n

Vous avez peut-\u00eatre vu la conception fluide d\u00e9montr\u00e9e dans des tutoriels pr\u00e9c\u00e9dents sur la typographie fluide, les modules fluides et\/ou les boutons fluides. Dans ce tutoriel, nous allons vous montrer comment cr\u00e9er une section de h\u00e9ros fluide enti\u00e8re dans Divi. La cl\u00e9 pour cr\u00e9er ce design fluide est d’ajouter une taille de police racine fluide \u00e0 chacun des modules utilis\u00e9s, puis d’incorporer l’unit\u00e9 de longueur em (qui est relative \u00e0 la taille de police racine du corps) dans tous les param\u00e8tres du module.<\/p>\n

C’est parti !<\/p>\n

Coup d’\u0153il rapide<\/h2>\n

Voici un aper\u00e7u du design que nous allons cr\u00e9er dans ce tutoriel.<\/p>\n

\"divi-fluid-hero-section-design\"<\/p>\n

Remarquez comment la conception fluide s’adapte en douceur \u00e0 la largeur de la fen\u00eatre du navigateur.<\/p>\n

T\u00e9l\u00e9chargez la mise en page gratuitement<\/h2>\n

Pour mettre la main sur le design de ce tutoriel, 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 \u00e0 l’aide du formulaire ci-dessous. En tant que nouvel abonn\u00e9, vous recevrez encore plus d’astuces 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 obtenir l’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

Pour importer la mise en page de la section dans votre biblioth\u00e8que Divi, acc\u00e9dez \u00e0 la biblioth\u00e8que Divi.<\/p>\n

Cliquez sur le bouton Importer.<\/p>\n

Dans la fen\u00eatre contextuelle de portabilit\u00e9, s\u00e9lectionnez l’onglet d’importation et choisissez le fichier \u00e0 t\u00e9l\u00e9charger depuis votre ordinateur.<\/p>\n

Cliquez ensuite sur le bouton d’importation.<\/p>\n

\"divi<\/p>\n

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.<\/p>\n

Passons au tutoriel, voulez-vous ?<\/p>\n

Ce dont vous avez besoin pour commencer<\/h2>\n

\"expanding<\/p>\n

Pour commencer, vous devez effectuer les op\u00e9rations suivantes :<\/p>\n

    \n
  1. Si vous ne l’avez pas encore fait, installez et activez le th\u00e8me Divi.<\/li>\n
  2. Cr\u00e9ez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).<\/li>\n
  3. Choisissez l’option \u00ab\u00a0Build From Scratch\u00a0\u00bb.<\/li>\n<\/ol>\n

    Apr\u00e8s cela, vous aurez une toile vierge pour commencer \u00e0 concevoir dans Divi.<\/p>\n

    Comment concevoir une section h\u00e9ro\u00efque fluide dans Divi<\/h2>\n

    \"divi-fluid-hero-section-design\"<\/p>\n

    Pour construire la section du h\u00e9ros fluide, nous allons ajouter une taille de police racine fluide \u00e0 chacun des trois modules. Ces modules constitueront le titre, le sous-titre et le bouton. Nous allons ensuite utiliser l’unit\u00e9 de longueur em dans les param\u00e8tres de conception des modules pour nous assurer que les \u00e9l\u00e9ments de conception sont relatifs \u00e0 la taille de police racine fluide. Nous allons ensuite positionner l’image sur le c\u00f4t\u00e9 gauche de la page avec une position et un d\u00e9calage absolus. Le r\u00e9sultat sera une section de h\u00e9ros fluide qui s’adapte parfaitement \u00e0 la largeur de la fen\u00eatre d’affichage, de sorte que la conception est coh\u00e9rente sur tous les appareils.<\/p>\n

    Param\u00e8tres de la section<\/h3>\n

    Pour commencer, nous allons mettre \u00e0 jour les param\u00e8tres de conception existants pour la section. Ouvrez les param\u00e8tres de la section et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

      \n
    • Couleur d’arri\u00e8re-plan d\u00e9grad\u00e9 \u00e0 gauche : #ff2000<\/li>\n
    • Couleur du d\u00e9grad\u00e9 d’arri\u00e8re-plan \u00e0 droite : #121212<\/li>\n
    • Direction du d\u00e9grad\u00e9 : 45deg<\/li>\n
    • Position de d\u00e9part : 30%<\/li>\n
    • Position finale : 0%<\/li>\n<\/ul>\n

      \"divi-fluid-hero-section-design\"<\/p>\n

      Sous l’onglet design, mettez \u00e0 jour le padding :<\/p>\n

        \n
      • Padding : 0px haut, 0px bas<\/li>\n<\/ul>\n

        \"divi-fluid-hero-section-design\"<\/p>\n

        Cr\u00e9er une rang\u00e9e<\/h3>\n

        Ensuite, ajoutez une rang\u00e9e d’une colonne \u00e0 la section.<\/p>\n

        \"divi-fluid-hero-section-design\"<\/p>\n

        Param\u00e8tres de la rang\u00e9e<\/h4>\n

        Ouvrez les param\u00e8tres de la rang\u00e9e et mettez \u00e0 jour les \u00e9l\u00e9ments suivants sous l’onglet Conception :<\/p>\n

          \n
        • Largeur de la goutti\u00e8re : 1<\/li>\n
        • Largeur : 100<\/li>\n
        • Largeur maximale : 1700px<\/li>\n
        • Hauteur minimale : 100vh (ordinateur de bureau), aucune (tablette et t\u00e9l\u00e9phone)<\/li>\n
        • Padding : 0px haut, 0px bas<\/li>\n<\/ul>\n

          \"divi-fluid-hero-section-design\"<\/p>\n

          Cr\u00e9er un texte d’en-t\u00eate fluide avec une bordure<\/h3>\n

          Maintenant que la section et la ligne sont termin\u00e9es, nous pouvons ajouter le texte d’en-t\u00eate fluide \u00e0 la section du h\u00e9ros. Nous allons \u00e9galement ajouter une bordure fluide au module de texte pour cr\u00e9er un \u00e9l\u00e9ment de design cr\u00e9atif.<\/p>\n

          Ajouter le module de texte<\/h4>\n

          Pour cr\u00e9er le texte d’en-t\u00eate et la bordure, ajoutez un nouveau module de texte \u00e0 la colonne.<\/p>\n

          \"divi-fluid-hero-section-design\"<\/p>\n

          Param\u00e8tres du texte<\/h4>\n

          Sous l’onglet contenu, mettez \u00e0 jour le contenu du corps avec le HTML suivant :<\/p>\n

          Conception de la page plein \u00e9cran fluide.<\/span><\/h1>\n

          \"divi-fluid-hero-section-design\"<\/p>\n

          Pour rendre les \u00e9l\u00e9ments de conception fluides, nous devons d’abord ajouter une taille de police racine fluide au module \u00e0 l’aide de la fonction CSS Clamp(). Sous l’onglet avanc\u00e9, passez le snippet CSS suivant :<\/p>\n

          font-size : clamp(32px, 4.1vw, 70px) ;<\/pre>\n
          \"divi-fluid-hero-section-design\"<\/p>\n
          La taille de police de la racine fluide \u00e9tant en place, nous sommes pr\u00eats \u00e0 mettre \u00e0 jour les param\u00e8tres de conception. Il est important d’utiliser l’unit\u00e9 de longueur em partout, car celle-ci est relative \u00e0 la taille de la police racine de l’\u00e9l\u00e9ment.<\/p>\n
          Sous l’onglet Conception, mettez \u00e0 jour les param\u00e8tres de conception du texte d’en-t\u00eate suivants :<\/p>\n
            \n
          • Type d’en-t\u00eate : H1<\/li>\n
          • Police de l’en-t\u00eate : Montserrat<\/li>\n
          • Poids de la police d’en-t\u00eate : lourd<\/li>\n
          • Couleur du texte de l’en-t\u00eate : #ffffff<\/li>\n
          • Taille du texte de l’en-t\u00eate : 1em<\/li>\n
          • Espacement des lettres de l’en-t\u00eate : 0.1em<\/li>\n
          • Hauteur des lignes de l’en-t\u00eate : 1,2em<\/li>\n<\/ul>\n
            \"divi-fluid-hero-section-design\"<\/p>\n
            Mettez \u00e9galement \u00e0 jour le remplissage des modules comme suit :<\/p>\n
              \n
            • Padding : 1em (haut, bas, gauche, droite)<\/li>\n<\/ul>\n
              \"divi-fluid-hero-section-design\"<\/p>\n
              Pour cr\u00e9er le design de la bordure fluide, mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n
                \n
              • Largeur de la bordure : 1em<\/li>\n
              • Couleur de la bordure : #ffffff<\/li>\n
              • Couleur de la bordure inf\u00e9rieure : transparent<\/li>\n
              • Couleur de la bordure gauche : transparent<\/li>\n<\/ul>\n
                \"divi-fluid-hero-section-design\"<\/p>\n
                Cr\u00e9ation de la bordure d’accentuation<\/h3>\n
                Pour cr\u00e9er la bordure d’accent, nous pouvons dupliquer le module de texte existant.<\/p>\n
                \"divi-fluid-hero-section-design\"<\/p>\n
                Retirez le contenu du corps existant et mettez \u00e0 jour les param\u00e8tres de conception comme suit :<\/p>\n
                  \n
                • Largeur maximale : 6.5em<\/li>\n
                • Hauteur : 3.25em<\/li>\n
                • Largeur de la bordure : 0.5em<\/li>\n
                • Couleur de la bordure : #ff2000<\/li>\n<\/ul>\n
                  N’oubliez pas que la m\u00eame taille de police racine fluide est incluse dans ce module dupliqu\u00e9. Nous pouvons donc utiliser l’unit\u00e9 de longueur em pour ajuster la taille et la largeur de la bordure. Cela permettra de s’assurer que le design s’adaptera au design du module de texte de l’en-t\u00eate.<\/p>\n
                  \"divi-fluid-hero-section-design\"<\/p>\n
                  Pour positionner la bordure d’accentuation, ajoutez une position absolue dont le d\u00e9calage est \u00e9gal \u00e0 la largeur de la bordure dans le module de texte de l’en-t\u00eate (1em). Sous l’onglet avanc\u00e9, mettez \u00e0 jour les options de position suivantes :<\/p>\n
                    \n
                  • Position : Absolue<\/li>\n
                  • Emplacement : haut et droite<\/li>\n
                  • D\u00e9calage vertical : 1em<\/li>\n
                  • D\u00e9calage horizontal : 1em<\/li>\n<\/ul>\n
                    \"divi-fluid-hero-section-design\"<\/p>\n
                    Cr\u00e9ation du corps de texte du sous-titre fluide<\/h3>\n
                    Sous le texte de l’en-t\u00eate, nous allons ajouter le corps du texte du sous-titre fluide. Comme ce texte est plus petit, nous allons ajouter une taille de police de racine fluide plus petite.<\/p>\n
                    Ajouter un nouveau module de texte<\/h4>\n
                    Pour cr\u00e9er le texte du sous-titre, ajoutez un nouveau module de texte sous le module de texte de l’en-t\u00eate existant.<\/p>\n
                    \"divi-fluid-hero-section-design\"<\/p>\n
                    Vous pouvez ajouter quelques phrases de texte de remplissage comme suit :<\/p>\n
                      \n
                    • Contenu du corps : Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/li>\n<\/ul>\n
                      \"divi-fluid-hero-section-design\"<\/p>\n
                      Ajout de la taille de police de la racine fluide<\/h4>\n
                      Ensuite, nous devons ajouter une nouvelle taille de police fluide qui convient mieux aux petits textes. Dans l’onglet avanc\u00e9, collez le fragment CSS suivant sous l’\u00e9l\u00e9ment principal :<\/p>\n
                      font-size : clamp(14px, 1.4vw, 24px) ;<\/pre>\n
                      \"divi-fluid-hero-section-design\"<\/p>\n
                      Param\u00e8tres de conception du texte<\/h4>\n
                      Sous l’onglet Conception, mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n
                        \n
                      • Poids de la police du texte : Semi-bold<\/li>\n
                      • Couleur du texte : #ffffff<\/li>\n
                      • Taille du texte : 1em<\/li>\n
                      • Hauteur de la ligne de texte : 1.6em<\/li>\n<\/ul>\n
                        \"divi-fluid-hero-section-design\"<\/p>\n
                        Mettez ensuite \u00e0 jour la taille et l’espacement comme suit :<\/p>\n
                          \n
                        • Largeur maximale : 19em<\/li>\n
                        • Marge : 2em en bas, auto \u00e0 gauche, 5em \u00e0 droite<\/li>\n<\/ul>\n
                          \"divi-fluid-hero-section-design\"<\/p>\n
                          Cr\u00e9er le bouton fluide<\/h3>\n
                          Pour cr\u00e9er le bouton fluide, ajoutez un nouveau module de bouton sous le module de texte du sous-titre.<\/p>\n
                          \"divi-fluid-hero-section-design\"<\/p>\n
                          Mettez ensuite \u00e0 jour le texte du bouton pour qu’il devienne \u00ab\u00a0Essai gratuit de 7 jours\u00a0\u00bb.<\/p>\n
                          \"divi-fluid-hero-section-design\"<\/p>\n
                          Ajout d’une taille de police fluide pour les racines<\/h4>\n
                          Ensuite, nous devons ajouter une nouvelle taille de police fluide adapt\u00e9e \u00e0 un bouton. Dans l’onglet \u00ab\u00a0Avanc\u00e9\u00a0\u00bb, collez l’extrait CSS suivant sous l’\u00e9l\u00e9ment principal :<\/p>\n
                          font-size : clamp(20px, 2.35vw, 40px) ;<\/pre>\n
                          \"divi-fluid-hero-section-design\"<\/p>\n
                          Param\u00e8tres de conception du bouton<\/h4>\n
                          Sous l’onglet design, mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n
                          \"divi-fluid-hero-section-design\"<\/p>\n
                            \n
                          • Couleur du texte du bouton : #ff2000<\/li>\n
                          • Arri\u00e8re-plan du bouton d\u00e9grad\u00e9 \u00e0 gauche : transparent<\/li>\n
                          • Couleur d’arri\u00e8re-plan du bouton d\u00e9grad\u00e9 \u00e0 droite : #ffffff<\/li>\n
                          • Direction du d\u00e9grad\u00e9 : 45deg<\/li>\n
                          • Position de d\u00e9part : 25<\/li>\n
                          • Position finale : 0%<\/li>\n
                          • Largeur de la bordure du bouton : 0px<\/li>\n
                          • Rayon de la bordure du bouton : 0px<\/li>\n
                          • Police du bouton : Montserrat<\/li>\n
                          • Poids de la police du bouton : lourd<\/li>\n
                          • Style de la police du bouton : Italique<\/li>\n
                          • Ic\u00f4ne de bouton : fl\u00e8che triangulaire droite (voir capture d’\u00e9cran)<\/li>\n
                          • Placement de l’ic\u00f4ne du bouton : Gauche<\/li>\n<\/ul>\n
                            \"divi-fluid-hero-section-design\"<\/p>\n
                              \n
                            • Marge : 8em droite<\/li>\n
                            • Rembourrage : 0.2em haut, 0.2em bas, 1.5em gauche, 1em droite<\/li>\n<\/ul>\n
                              \"divi-fluid-hero-section-design\"<\/p>\n
                              Cr\u00e9ation d’une image pour la section h\u00e9ros<\/h3>\n
                              Avec tout le contenu de la section h\u00e9ros sur la droite de la page, nous sommes pr\u00eats \u00e0 ajouter l’image de la section h\u00e9ros sur le c\u00f4t\u00e9 gauche. Pour ce faire, ajoutez d’abord un module image sous le bouton.<\/p>\n
                              \"divi-fluid-hero-section-design\"<\/p>\n
                              Ouvrez les param\u00e8tres de l’image et t\u00e9l\u00e9chargez une image.<\/p>\n
                              \"divi-fluid-hero-section-design\"<\/p>\n
                              Param\u00e8tres de conception de l’image<\/h4>\n
                              Sous l’onglet Conception, mettez \u00e0 jour les param\u00e8tres suivants :<\/p>\n
                                \n
                              • Alignement de l’image : Gauche (ordinateur de bureau et tablette), Centre (t\u00e9l\u00e9phone)<\/li>\n
                              • Largeur maximale : 48 % (ordinateur de bureau et tablette), 70 % (t\u00e9l\u00e9phone)<\/li>\n
                              • Rembourrage : 4% \u00e0 gauche<\/li>\n<\/ul>\n
                                \"divi-fluid-hero-section-design\"<\/p>\n
                                Enfin, donnez \u00e0 l’image une position absolue avec un d\u00e9calage utilisant l’unit\u00e9 de longueur vmin comme suit :<\/p>\n
                                  \n
                                • Position : Absolue (ordinateur de bureau et tablette), Relative (t\u00e9l\u00e9phone)<\/li>\n
                                • Emplacement : En haut \u00e0 gauche (ordinateur de bureau et tablette)<\/li>\n
                                • D\u00e9calage vertical : 30vmin (ordinateur de bureau et tablette), 0px (t\u00e9l\u00e9phone)<\/li>\n<\/ul>\n
                                  \"divi-fluid-hero-section-design\"<\/p>\n
                                  R\u00e9sultat final<\/h2>\n
                                  Voici le r\u00e9sultat final sur une page en direct.<\/p>\n
                                  \"divi-fluid-hero-section-design\"<\/p>\n
                                  Voici comment le design fluide s’adapte en douceur \u00e0 la largeur de la fen\u00eatre du navigateur.<\/p>\n
                                  Prise en charge par les navigateurs<\/h2>\n
                                  La fonction CSS clamp() (utilis\u00e9e pour la taille de police fluide dans ce tutoriel) est \u00e9tonnamment bien prise en charge par tous les principaux navigateurs, \u00e0 l’exception d’IE. Il existe un bogue bizarre dans Safari, qui ne permet pas une mise \u00e0 l’\u00e9chelle dynamique lors du r\u00e9glage de la fen\u00eatre du navigateur, mais qui s’affiche correctement au chargement de la page. Pour r\u00e9soudre ce probl\u00e8me, il suffit apparemment de donner \u00e0 chacun des modules une hauteur minimale de 0vw.<\/p>\n
                                  R\u00e9flexions finales<\/h2>\n
                                  L’ajout d’un design fluide \u00e0 une section de h\u00e9ros peut \u00eatre un moyen pratique de s’assurer que la section au-dessus du pli est parfaitement coh\u00e9rente sur toutes les tailles de navigateur, sans avoir \u00e0 mettre \u00e0 jour le design \u00e0 des points de rupture sp\u00e9cifiques ou \u00e0 utiliser des requ\u00eates m\u00e9dia.<\/p>\n
                                  N’oubliez pas de consulter nos autres articles sur la conception fluide, notamment comment cr\u00e9er une typographie fluide, des modules fluides et des boutons fluides.<\/p>\n
                                  J’ai h\u00e2te de lire vos commentaires.<\/p>\n
                                  \u00c0 la v\u00f4tre !<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                                  La section h\u00e9ros d’un site Web est l’un des meilleurs candidats pour le design fluide. Contrairement au responsive design traditionnel qui s’adapte \u00e0 diff\u00e9rents points de rupture, le fluid design s’adapte de mani\u00e8re transparente \u00e0 la fen\u00eatre du navigateur et maintient la coh\u00e9rence du design sur tous les appareils. Apr\u00e8s tout, la section du h\u00e9ros […]<\/p>\n","protected":false},"author":1,"featured_media":349204,"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-813552","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\/813552","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=813552"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/813552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/349204"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=813552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=813552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=813552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}