Vous souhaitez optimiser votre projet Webflow ? Vous pouvez commencer par respecter l'empilement de ces 4 div pour chacune de vos sections !
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.
2. Div Block : Padding-global (Ex : 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 “padding-global”. Ensuite, nous définissons dans le style manager une valeur pour le padding.
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 ?
Exemple concret de l’intérêt d’un container sur un site web :
4. Div Block : Padding Vertical (Maintenant Padding Section)
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.
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.
Après avoir suivi cet empilement de div block, vous pouvez ajouter de nouveaux éléments HTML de Webflow pour agencer votre section.
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 !
.jpg)
