Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Les 4 Div Block indispensable pour vos sections Webflow

Thibaut Legrand
Thibaut Legrand
June 16, 2022
4 div block Webflow les uns dans les autres, Section, page-padding, container, et padding vertical

Tables des matières

Construire dans Webflow pour la première fois n’est pas chose évidente. Avoir des bases en HTML et CSS vous aidera grandement, mais tout le monde ne connaît pas forcément ces langages. Le langage HTML va consister à construire la structure de votre page et le CSS va concerner le design, le style de vos éléments dans cette même page.

Aujourd’hui, nous allons vous présenter la structure que chacune de vos sections doit avoir pour développer un site ou une page web proprement sur Webflow.

Qu’est-ce qu’un Div ?

Avant de rentrer dans le vif du sujet, nous allons tenter de vous expliquer simplement et rapidement ce que représente un div. Un div ou division est un élément HTML qui va contenir du contenu. Un div permet de regrouper plusieurs contenus (par exemple un texte, une image, une vidéo ou autres) dans un conteneur. En créant plusieurs div, vous pouvez par conséquent délimiter différents types de contenus.

Un div peut être mis en forme de différentes manières (grâce au CSS) pour agencer son contenu.

Il faut aussi noter que l’on peut insérer plusieurs div dans un div (créer des empilements de div) pour contenir et regrouper des éléments.

La structure de div à respecter pour ses sections dans Webflow

Dans Webflow, nous pouvons ajouter des div facilement dans notre projet. Pour chacune de nos sections Webflow, nous pouvons ajouter un empilement de 4 div block qui vous seront toujours utile.

PS : Nous vous conseillons fortement de cloner le projet “Client-First” de Finsweet avant de commencer votre projet. Certaines classes étant déjà créées, cela vous fera gagner du temps dans le développement de vos sections.

1. Div Block : Section

Ce premier div block est essentiel car c’est celui qui va contenir l’ensemble des éléments de votre section. Une fois que vous l’avez inséré dans votre projet, vous pouvez lui donner une classe. Par exemple : section-home-header. On peut ensuite donner un style spécifique, par exemple une couleur de fond.

div section home header webflow

2. Div Block : Page Padding

Nous allons ensuite ajouter un div block qui aura pour but de donner du padding à notre section pour éviter que les éléments à l’intérieur de notre section ne soient collés au bord. A l’intérieur du div de notre section, on ajoute donc un nouveau div avec une classe que l’on nommera “page-padding”. Ensuite, nous définissons dans le style manager une valeur pour le padding.

div page padding avec padding droit et gauche de 2.5rem

3. Div Block : Container

Ensuite, nous allons créer un nouvel empilement. Nous allons insérer un nouveau div pour insérer notre contenu dans un conteneur. Cela va permettre de garder le contenu aligné au centre et dans un même espace même si l’on est sur grand écran.

On ajoute donc un div que l’on nomme par exemple : “container-large”. Ensuite, on vient lui ajouter une mise en forme avec une margin droite et gauche en auto pour centrer le div, puis une width de 100% pour prendre toute la largeur du div et enfin une max-width de 80 rem pour garder le contenu dans un même espace.

Pourquoi utiliser des REM au lieu des pixels ?

div container max width 80 rem et margin auto

Exemple concret de l’intérêt d’un container sur un site web :

exemple du site de digidop avec des container

4. Div Block : Padding Vertical

Après notre container, nous allons ajouter un nouveau div block qui gérera l’espacement vertical de mon contenu à l’intérieur de ma section. Un peu comme le page padding, le padding vertical va vous permettre d’aérer votre section en laissant un “vide” avant de passer à la section précédente ou suivante.

Nous allons donc une nouvelle fois ajouter un div que l’on mettra en forme. Nous allons nommer notre div padding-vertical. Si vous n’avez pas cloné le style guide client first de base, vous allez ajouter un padding à droite et à gauche de 0 rem.

div padding vertical padding droit et gauche de 0 rem

Vous allez ensuite ajouter une combo class, par exemple : “padding-custom1” et définir une valeur pour le padding du haut et celui du bas.

div padding vertical avec combo padding custom padding top 5 rem et padding bottom 10 remu

Après avoir suivi cet empilement de div block, vous pouvez ajouter de nouveaux éléments HTML de Webflow pour agencer votre section.

exemple de structure d'une section développée sur webflow

Vous pouvez maintenant ajouter cet empilement de div à chaque fois que vous créez une nouvelle section pour avoir une structure optimisée.

Si vous avez besoin de refaire votre site Webflow, notre agence experte peut vous aider !

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions