Si vous êtes débutant et que vous n’avez aucune connaissance du Html ou du Css, construire un site sur Webflow est un peu compliqué ! Le langage HTML consiste à construire la structure de votre page et le CSS concerne le design, on vulgarise volontairement pour pas que vous ne fuyez dès les premières lignes !

‍

Webflow vous propose donc plusieurs Blocks pour construire votre page :

• Section

• Container

• DivBlock

‍

Dans cet article on vous explique comment les différencier et les utiliser !

‍

Section

‍

On pourrait comparer les Sections aux chapitres d’un livre, les sections servent à organiser le contenu de votre page.

‍

‍

Par défaut lorsque vous ajoutez une section, elle prend 100% de la largeur disponible. Si vous en ajoutez une autre elle se placera en dessous et ainsi de suite. Notez bien qu’il vous est impossible de mettre une section dans une autre, contrairement à d’autres éléments.

‍

Pour ajouter du contenu dans votre section il vous faut ajouter un “Container”, il vous permet de garder votre contenu organisé et centré dans votre section.

‍

Important : Par défaut la taille de la section est définie par la taille du contenu à l’intérieur.

‍

Container

‍

Le “Container” est le parfait compagnon de votre “Section”.

‍

Lorsque vous placez votre “Container” dans votre Section, il se placera par défaut au milieu et ne prendra pas toute la largeur disponible. Les éléments que vous placerez à l’intérieur se restreindront à lui.

‍

Lorsque vous placez des éléments à l’intérieur d’un container qui n’ont pas de largeur fixe définie, ces éléments s’adapteront sans problème à n’importe quelle taille d’écran. Votre contenu sera donc “responsive”.

‍

Vous allez me dire, mais comment je fais pour que mon “Container” soit plus large ?

C’est très simple :

1. Vous créez votre classe. Exemple : “Container-large
2. Et vous définissez la largeur maximum de votre container. Exemple : “1440px”
3. Si vos éléments sont trop proches du bord, ajoutez simplement du “padding” sur la gauche et la droite.

‍

Bonne pratique UI : Ne définissez pas une largeur max trop élevée car sur grand écran votre contenu ne sera pas agréable à regarder, votre contenu doit être centré au milieu. Les visiteurs de votre site web doivent être en mesure de lire sans tourner la tête de droite à gauche.

‍

‍

Div Block

‍

Un Div Block peut-être n’importe quoi (Section, Container, une ligne, un cercle, etc…).

‍

Vous pouvez tout à fait organiser votre contenu simplement en utilisant des DivBlocks.

‍

Un Div Block permet de regrouper plusieurs contenus (par exemple un texte, une image, une vidéo ou autres). En créant plusieurs div blocks, vous pouvez par conséquent délimiter différents types de contenus.

‍

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

‍

Structurer votre page

‍

Comme nous l’avons dit précédemment, vous êtes libres de structurer comme vous le souhaitez.

‍

Mais on vous conseille fortement de vous intéresser à la méthode Finsweet client first qui reste pour nous la meilleure façon de structurer vos pages sur Webflow à l’heure d’aujourd’hui.