Concevoir les pages de votre site Web : structure des contenus

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

Dans cette vidéo, je montre comment une page Web est structurée : des sections empilées, qui contiennent des rangées, elles-mêmes découpées en colonnes. D'abord sur un schéma, puis sur un site réel, et enfin dans Divi.

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 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 va se rendre sur un site web réel dans lequel je vais vous montrer comment et où s’appliquent ces grilles. On aura vu avant la pelade en exemple simple. Et puis pour terminer, je vous expliquerai lorsqu’on crée un site web, qu’on le crée avec du code ou un outil comme ici Divi, comment s’appliquent ces histoires de grilles 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.

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, le bouton, si vous voulez en savoir plus sur ce qu’est Divi, vous pouvez vous rendre sur mon site web netologiste.com (maintenant ideoforge.com), page Qu’est-ce que Divi ?.

Donc, on démarre ici. Je vous ai dessiné un site web tout simple. Donc, 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. Donc, on va commencer avec 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, comme c’est le plus grand, ça va être plus facile à expliquer. Donc, voici un navigateur.

Je vais supprimer la grille pour le moment. Un navigateur vide, donc le site web va s’afficher dans la partie qui est ici. Donc, je l’ai colorée en vert. Voilà, c’est là où le site web va s’afficher. Donc, 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, ou le logo de la page. Nous, on va s’intéresser au contenu.

Ici, dans cette partie, 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à.

Donc, ces blocs, on peut les appeler des sections. Ces sections, elles nous servent à organiser et séparer l’information. Que ce soit 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, elles 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, puisque sur les écrans très grands, ce serait complètement illisible. Donc, c’est pour ça que la plupart des sites web vont choisir de prendre quelque chose qui se trouve au milieu comme ça, qu’ils mesurent entre 1000 et 1200 pixels. Là, on va pas tellement, on 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. Donc, 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. On va mettre le contenu ici, pour bien qu’on s’y retrouve. Pour bien qu’on s’y retrouve, j’ai dessiné, vous voyez, cette grille-là. Ça dépasse en haut et à gauche, mais ça, ne vous en souciez pas. Donc, pour montrer, ici, on a notre première section tout bleue, et puis ces deux lignes, ça va être le contenu de notre site web qui va se trouver ici entre cette ligne à gauche et à droite, et on va garder la même ligne, on va tout 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 : en premier, on a une section avec un fond blanc qui va être le logo, le menu, ensuite, on a une section avec cette image, le titre, etc. 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, donc là ça peut être deux sections différentes, ou la même, comme les deux ont toutes les deux un fond blanc, et qu’il 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 du bio, la plus foncée. Là, vous remarquez quelque chose, c’est que la ligne qu’on a ici à gauche, on la retrouve dans ce site web, mais de manière invisible. Elle est ici. Vous voyez que le texte, il commence ici, le logo ici. Ensuite, si on descend, vous voyez, avec ma souris, je vais la laisser sur le même axe : là on va se retrouver sur cette ligne, exactement au même endroit, et ici aussi. Donc, 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 ça du riz, mais inconsciemment, en fait, 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, et ici, parce qu’ils l’ont représentée de manière visuelle, avec le fond de la page en gris, et puis tout leur contenu, 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.

Donc, maintenant, on a une page web, un petit peu structurée de manière visuelle, on peut y ajouter du contenu. Donc, là, je vous explique pas comment créer la page web, je vous explique simplement comment elle est structurée. Donc, on peut ajouter du contenu à notre page web, par exemple un titre, un texte ici, une image, et puis en dessous un autre contenu. Donc, on voit bien que le texte, il est toujours aligné, il dépasse jamais de notre ligne à gauche.

Et puis 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 dans l’intérieur, ça va faire très bizarre, qu’il soit collé. Donc, en fait, les marges, c’est 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. Ça, c’est un détail.

Ici, on a centré le contenu, c’est-à-dire que si j’enlève la grille, et qu’on regardait que la première section bleue, hop, on ne saurait pas que il y a une ligne ici, mais mon contenu, dans tous les cas, si jamais j’en mettais plus comme ça, ils s’arrêteraient bien 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. Alors, on va pas s’attarder sur les exceptions, mais ce qu’on fait, c’est que là, on a créé une structure depuis tout à l’heure ; ce qu’on fait maintenant, c’est que 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 alors à tout, pour ça se fait quand on veut alterner les designs complexes, etc. Et ça, ça va pas apporter grand-chose à votre site web.

Et puis 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. Ça n’apportera pas grand-chose. Le mieux, c’est d’apprendre à structurer de manière simple et correcte. Autre chose intéressante : je vais remettre le design comme il était avant.

C’est que 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 soit pas trop large, en fait, vous voyez, c’est beaucoup plus beau comme ça, on laisse toujours les espaces vides sur un site web. Par exemple, ce que j’ai fait ici, c’est trop chargé, il faudrait l’améliorer un peu, en termes de design, mais on va rester sur notre histoire de structures.

Donc, maintenant, qu’on a vu ce que c’était que les sections, ici on a une section bleue, une section jaune, une violette, on va voir ce que sont les rangées. Donc, les rangées, c’est le nom donné dans Divi à ce qu’il y a à l’intérieur. Donc, par exemple, ici je vous mets la rangée en rouge. Donc, on a une section qui est en fait un container, comme une boîte qui contient une rangée ou plusieurs dedans. Ici, on a une section en bleu, et une rangée en rouge. Ici, au milieu, la deuxième section jaune, on a une image qui prend toute la largeur de la rangée, mais pas de la section.

Si on enlève les couleurs, par 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. Donc, ça rendrait 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, c’est que la troisième section, en violet, 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. Donc, vous voyez la différence, c’est 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, elles peuvent contenir des colonnes. Ou par exemple, ici, on a deux colonnes mandat. Ici, je peux colorier un petit peu la deuxième colonne. Donc, 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. Et sur la deuxième colonne, on affiche, 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, par exemple, je vais rajouter des arbres en fond de la rangée.

Donc, 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, un fond. Donc, là, évidemment, c’est too much, c’est trop, on va éviter de superposer deux images comme ça. Mais c’est pour vous montrer avec l’exemple. Donc, 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.

Donc, ça, c’est une page web, c’est une page web normale avec du texte qui se sélectionne, des liens pour naviguer le long extrême, c’est le site qu’on construit dans ma formation Divi, qu’on construit ensemble. Donc, ici, lorsque j’active le Divi Builder, je vois des boutons bleu, vert, et gris, et puis aussi, vous voyez des lignes bleues, des lignes vertes, et puis des lignes grises. Donc, ici, vous devinez tout de suite que le bleu, tout ce qui est en bleu, ça correspond à nos sections, et ce qui est en vert aux rangées.

Donc, lorsqu’on passe la souris sur les boutons de Divi, on voit bien les réglages de la section et réglage de la rangée. Donc, ici, on reproduit complètement ce qu’on a vu dans notre exemple. C’est une grille, en fait, 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 rangées, dans les colonnes, on va ranger du contenu. Ça peut être du texte, des images, des vidéos. Et puis on peut appliquer les couleurs de fond ou des images de fond, tout ce qui existe, on peut appliquer des couleurs ou les images de fond à nos sections, à nos rangées, à nos colonnes, et même à nos modules. Ici, je pourrais mettre un petit fond en plus comme ça.

Donc, on va voir tout ça lundi. Pour obtenir la suite de cette vidéo, je vous invite à vous rendre sur le site netologiste.com (maintenant ideoforge.com), et puis vous défilez un peu, et ici, vous mettez votre petit nom, votre adresse email, et je vous laisse, je vais vous envoyer gratuitement la suite de cette vidéo, ainsi que plein d’autres choses.

Note : l’inscription par email mentionnée dans la vidéo n’existe plus. Pour aller plus loin avec Divi, voir la formation Découvrir Divi.

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.