Comprendre la grille de mise en page des sites Web par l'exemple et avec Divi

Suite à une demande d'un abonné, j'ai créé 2 vidéos pour reprendre ces concepts à partir de zéro :

• La première vidéo ci-dessus explique les fondamentaux de la grille de mise en page des sites Web : des blocs qui s'empilent, qui contiennent eux-mêmes des blocs, et du contenu.

• La seconde vidéo ci-dessous va plus loin en appliquant ces concepts dans Divi.

Les bases de la première vidéo, et l'application avec Divi dans la deuxième, vous aideront à aborder plus sereinement la création de pages Web.

Dans la seconde vidéo ci-dessous, j'explique notamment avec Divi :

• Sections

• Rangées

• Relation entre sections et rangées

• Marges externes et marges internes

• Marges négatives

• Comment récupérer sa mise en page après une mauvaise manip de glisser/déposer de marge

• Et comme d'habitude, des conseils plus généraux

Lorsque vous naviguez sur internet, est-ce que vous voyez la grille invisible qui structure les sites web aujourd'hui ? Je vous ai préparé trois exemples pour vous expliquer tout ça. Le premier exemple, c'est un exemple visuel que je vous ai dessiné dans Photoshop, un exemple tout à plat pour partir sur quelque chose de tout simple. Ensuite, on continuera sur un site web réel, dans lequel je vais vous montrer comment s'applique ce que l'on aura vu avant sur l'exemple simple. Et puis pour terminer, je vous expliquerai, lorsqu'on crée un site web, donc qu'on le crée avec du code ou un outil comme Divi, comment s'appliquent ces histoires de grille et de blocs.

Cela va servir à tout le monde, je pense que c'est intéressant pour n'importe quel internaute, et la partie finale servira beaucoup pour les gens qui construisent des sites web avec Divi. Divi, ce que vous voyez ici, c'est un outil qui permet de créer des sites web sans connaissances en programmation, simplement en apprenant comment fonctionne cette grille et toutes ces histoires. Si vous voulez en savoir plus sur ce qu'est Divi, vous pouvez vous rendre sur mon site web Netologiste.com (maintenant ideoforge.com), dans « Qu'est-ce que Divi ».

Donc on démarre ici. Je vous ai dessiné un site web tout simple. Pour l'instant, vous voyez une grille avec ce qui ressemble un peu à des blocs de contenu : du texte, des images, du texte sur des images, puis du texte sur un fond un peu blanc sur des images, etc. On va commencer par le début. Ça, c'est un navigateur, donc c'est un navigateur web. Vous savez ce que c'est : on peut regarder un site web avec un ordinateur, un grand écran, un téléphone ou une tablette, etc. Ici, on va prendre l'exemple du navigateur sur un grand écran, ça va être plus facile à expliquer.

Voici un navigateur. Je vais supprimer la grille pour le moment. Un navigateur vide, et le site web va s'afficher dans la partie qui est ici, que j'ai coloriée en vert. Voilà, c'est là où le site web va s'afficher. Je triche un peu, parce qu'il y a d'autres informations sur le site web, notamment ici l'URL du site web, ici le titre de la page et le logo de la page. Nous, on va s'intéresser au contenu, c'est-à-dire à la partie en vert. Tous les sites web sont composés de blocs comme ceci. Alors parfois ils sont invisibles et on ne voit pas la séparation entre les blocs, mais ils sont bien là.

Ces blocs, on peut les appeler des sections. Ces sections nous servent à organiser et séparer l'information, en programmation mais aussi de manière visuelle. Par exemple, ici je vous ai mis une section bleue, une section orange et une violette. Rien qu'avec ça, on voit qu'on a déjà structuré notre page web en trois parties différentes. Les sections prennent toute la largeur du navigateur, c'est-à-dire depuis sa gauche jusqu'à sa droite. Mais ensuite, notre contenu, on n'est pas obligé de l'étendre sur toute la largeur, puisqu'il y a des écrans très grands et ce serait complètement illisible.

C'est pour ça que la plupart des sites web vont choisir de prendre quelque chose qui se trouve au milieu, qui mesure entre 1000 et 1200 pixels. On ne va pas s'attarder sur ces chiffres. On prend simplement ces mesures-là parce que ça correspond à peu près à la moyenne de ce que tous les écrans peuvent voir. Bref, ici on va mettre le contenu de notre site web au milieu, dans ce cadre que je viens de dessiner, même si nos sections font toute la largeur. Pour bien qu'on s'y retrouve, j'ai dessiné cette grille. Elle dépasse en haut et à gauche, mais ne vous en souciez pas.

Pour montrer, ici on a notre première section toute bleue, et puis ces deux lignes, ça va être le contenu de notre site web, qui va se trouver entre cette ligne à gauche et celle à droite. On va garder la même ligne, on va toutes les aligner dans chaque section pour que ça donne une apparence homogène. Par exemple, si je vous montre sur ce site web, ici vous reconnaissez des sections. On a une section avec un fond blanc, qui va être le logo et le menu. Ensuite, on a une section avec cette image et le titre. Là, on a une section avec un fond gris, et puis du contenu ici.

Une section avec un fond blanc et une vidéo, une autre section avec un fond blanc. Là, ça peut être deux sections différentes ou la même : comme elles ont toutes les deux un fond blanc et qu'il n'y a pas de séparation visuelle, l'internaute ne sait pas si c'est une ou deux, peu importe. Et puis là, une dernière section avec un fond violet, puis enfin la vraie dernière avec un fond bleu, la plus foncée. Vous avez remarqué quelque chose : c'est que la ligne qu'on a ici à gauche, on la retrouve dans le site web, mais de manière invisible. Vous voyez que le texte commence ici, le logo ici.

Ensuite, si on descend, vous voyez que le texte reste sur le même axe. Là, on va se retrouver sur cette ligne, exactement au même endroit, et ici aussi. Lorsqu'il y a des choses centrées, parfois il n'y a pas de séparation visuelle, donc on ne voit pas forcément la ligne, mais inconsciemment, le cerveau l'aperçoit, il sait que le site est bien structuré. Si je vais sur des sites connus, au hasard, ici on reconnaît bien une première section, une deuxième, une troisième, une quatrième, etc. Puis surtout, on voit bien la ligne, ici aussi, parce qu'on nous la représente de manière visuelle, avec le fond de la page en gris et puis tout leur contenu sur un fond blanc.

Donc on voit bien la ligne à gauche et à droite. Puis si on en prend un deuxième, c'est la même chose : on voit bien cette ligne à gauche et à droite. Maintenant, on a une page web un petit peu structurée de manière visuelle, on peut y ajouter du contenu. Là, je ne vous explique pas comment créer la page web, je vous explique simplement comment elle est structurée. On peut donc ajouter du contenu à notre page web, par exemple un titre, un texte ici, une image, et puis encore un autre contenu. On voit bien que le texte est toujours aligné : il ne dépasse jamais de notre ligne à gauche et de notre ligne à droite.

Alors pourquoi il n'est pas complètement collé ? C'est parce que si on met par exemple un fond ici, seulement à l'intérieur, ça va faire très bizarre qu'ils soient collés. Les marges, c'est donc simplement pour que ce soit plus lisible. Dans certains cas, ça va être collé à gauche, puis dans d'autres non, ça dépend surtout de ce que vous avez en fond. C'est un détail.

Ici, on la sent très présente, la grille. Si j'enlève la grille et qu'on ne regarde que la première section bleue, on ne saurait pas qu'il y a une ligne ici. Mais mon contenu, dans tous les cas, si jamais j'en mettais plus, s'arrêterait toujours à la ligne de gauche et à celle de droite, pour qu'on soit bien alignés tout au long du site.

Ensuite, il y a des exceptions. On ne va pas s'attarder sur les exceptions, mais parfois on va déstructurer un site pour ajouter du rythme. Par exemple, ceux-ci pourraient se retrouver comme ça, tout à gauche, et puis ça tout à droite. Ça se fait quand on veut alterner, faire des designs complexes, etc., et ça n'apporte pas grand-chose à votre site web. C'est simplement l'exception qui confirme la règle. Une fois qu'on maîtrise bien toutes les histoires de structure, on peut s'amuser à déstructurer un petit peu, mais ça n'apportera pas grand-chose. Le mieux, c'est d'apprendre à structurer de manière simple et correcte.

Une chose intéressante, je vais remettre le design comme il était avant : volontairement, je ne fais pas coller le texte à gauche et à droite, et ça, c'est un effet de design. C'est pour que le texte ne soit pas trop large. Vous voyez, c'est beaucoup plus beau comme ça. On laisse toujours des espaces vides sur un site web. Par exemple, ce que j'ai fait ici est trop chargé, il faudrait l'améliorer un peu en termes de design. Mais on va rester sur notre histoire de structure. Maintenant qu'on a vu ce que sont les sections (ici on a une section bleue, une section jaune, une violette), on va voir ce que sont les rangées.

Les rangées, c'est le nom donné dans Divi à ce qu'il y a à l'intérieur des sections. Par exemple, ici je vous mets la rangée en rouge. On a une section, qui est en fait un container, comme une boîte qui contient une rangée ou plusieurs. Ici on a une section en bleu et une rangée en rouge. Ici au milieu, dans la deuxième section, jaune, on a une image qui prend toute la largeur de la rangée, mais pas de la section. Et si on enlève les couleurs d'exemple, ça rendrait ceci, puisque les couleurs, je les ai mises simplement pour que vous puissiez différencier visuellement. Sinon, souvent, on va les mettre en blanc ou en gris.

Ça rendrait donc ceci : en fait, on ne verrait plus vraiment les sections, on ne verrait que les rangées. Ensuite, on va faire quelque chose d'intéressant avec la troisième section, en bas. Si je fais ceci, je lui applique une image de fond sur la section. En revanche, si je fais ceci, j'applique mon image de fond sur la rangée. Vous voyez la différence : ce sont simplement deux types de containers. Ce qui fait toute la largeur du navigateur, ce sont les sections, et ce qui fait la largeur du site, ce sont les rangées. Et les rangées peuvent contenir des colonnes : par exemple, ici on a deux colonnes.

Ici, je peux colorier un petit peu la deuxième colonne. Là, on a une section avec une image de fond, qui contient une rangée, qui elle-même est composée de deux colonnes : colonne 1, colonne 2. Sur la deuxième colonne, on a appliqué un fond blanc un peu transparent, qui laisse voir le fond de la section. Et je pourrais avoir un fond sur ma section, puis sur ma rangée aussi : par exemple, je vais rajouter des arbres en fond de la rangée. Maintenant, on voit que la section a un fond, la rangée a un fond, et puis la deuxième colonne de la rangée a un fond. Évidemment, c'est trop, on va éviter de superposer deux images comme ça, mais c'est pour vous montrer avec l'exemple.

J'espère que c'est clair maintenant, la différence entre une section et une rangée, et on va aller voir ça tout de suite dans un site web réel. Ça, c'est une page web, une page web normale, avec du texte qui se sélectionne, des liens pour naviguer, etc. C'est le site qu'on construit dans ma formation Divi, qu'on construit ensemble. Ici, lorsque j'active le Visual Builder, je vois des boutons bleus, verts et gris, et puis aussi des lignes bleues, des lignes vertes et des lignes grises. Vous devinez tout de suite que tout ce qui est en bleu correspond à nos sections, et ce qui est en vert, à nos rangées.

Lorsqu'on passe la souris sur les boutons de Divi, on voit bien les réglages de la section et les réglages de la rangée. Ici, on reproduit complètement ce qu'on a vu dans notre exemple : c'est une grille. Les sections s'empilent les unes après les autres, elles contiennent des rangées qui peuvent avoir une, deux, trois, quatre, cinq colonnes, et puis ensuite, dans les colonnes, on met du contenu : ça peut être du texte, des images, des vidéos. Et puis on peut appliquer des couleurs de fond ou des images de fond, tout ce qui existe : on peut les appliquer à nos sections, à nos rangées, à nos colonnes, et même à nos modules. Ici, je pourrais mettre un petit fond en plus comme ça.

On va voir tout ça lundi. Pour obtenir la suite de cette vidéo, je vous invite à vous rendre sur le site Netologiste.com, et puis vous défilez un peu, et ici vous mettez votre petit nom, votre adresse email, et je vous envoie gratuitement la suite de cette vidéo ainsi que plein d'autres choses, gratuites et sans engagement. Je vous remercie de votre attention. Si vous avez appris quelque chose, ce serait sympa de cliquer sur le pouce en l'air, et puis pourquoi pas de vous abonner à cette chaîne. À bientôt !