Comprendre la logique

Dans tous les schémas du guide, chaque niveau garde sa couleur :

• Ligne la bande
• Grille le découpage en colonnes
• Colonne une case de la grille
• Élément ce qui s’affiche

Du plus grand au plus petit

Une page contient des lignes, une ligne des grilles, une grille des colonnes, une colonne des éléments. On construit toujours dans cet ordre, en partant de la bande pour finir par le contenu.

1. Une page, c’est une pile de lignes

Une ligne est une bande horizontale qui court d’un bord à l’autre de l’écran. Les lignes s’empilent de haut en bas, dans l’ordre où elles sont rangées dans le back-office. Chacune a sa couleur de fond et ses marges, l’espace qui la sépare de ses voisines : c’est ce qui découpe la page en sections, que l’œil distingue d’un coup.

2. Dans une ligne, une ou plusieurs grilles

Une grille découpe la ligne en colonnes. Une ligne peut en contenir plusieurs, l’une sous l’autre : un titre sur toute la largeur, puis trois colonnes dessous, le tout sur le même fond. C’est tout l’intérêt de la grille : changer de découpage sans changer de fond.

Le fond de la ligne court d’un bord à l’autre de l’écran, mais les grilles restent dans la colonne centrale du site, large de 1 200 pixels au plus. Trois éléments seulement en sortent, voir Les éléments.

3. Une grille, ce sont des colonnes

Le découpage se choisit dans une liste qui le dessine : une, deux, trois ou quatre colonnes égales, ou deux colonnes inégales. Une colonne n’a aucun réglage : c’est une case, qui attend des éléments. Laissée vide, elle garde sa place, et fait un blanc voulu. Les dix dispositions sont dessinées dans Lignes et grilles.

4. Dans une colonne, des éléments

L’élément est ce que le lecteur voit vraiment : un texte, une image, une vidéo, une sélection d’adresses, une FAQ… Dans une colonne, les éléments se suivent de haut en bas, dans l’ordre du back-office, séparés par un petit espace. Il y en a seize sortes, voir Les éléments.

Les quatre niveaux, emboîtés

Mis ensemble, cela donne des boîtes dans des boîtes. Voici une ligne complète : un titre sur toute la largeur, puis une image à côté d’un texte et d’une vidéo.

Chaque niveau a ses réglages, et un réglage vaut pour tout ce que la boîte contient : le fond d’une ligne est derrière toutes ses grilles, la disposition d’une grille découpe toutes ses colonnes.

Dans le back-office

L’onglet Page builder range les mêmes niveaux de la même façon. Chaque ligne, chaque grille, chaque élément y est un bloc : un cadre avec un en-tête gris, qui porte son numéro et son nom. Les blocs du niveau suivant se rangent à l’intérieur, en retrait. Voici la ligne du schéma précédent, telle qu’on la construit.

Trois repères pour ne pas se perdre :

• Le bouton bleu dit à quel niveau on se trouve. Il ajoute toujours un bloc du niveau où il est posé.
• Le retrait dit qui contient quoi. Un bloc rangé dans un autre, plus à droite, en fait partie : il le suit s’il est déplacé, disparaît s’il est supprimé.
• Les numéros repartent à 1 à chaque niveau. « 2 Grille » est la deuxième grille de sa ligne, « 1 Texte » le premier élément de sa colonne. Ils donnent l’ordre dans la liste, rien d’autre.

À l’écran, sur la page d’une région :

Exemple : la page d’accueil

L’accueil, tel qu’il est construit le 24 septembre 2026. Les numéros relient chaque bande du site à sa ligne dans le back-office.

À lire, ligne par ligne :

1. Une ligne rouge, un seul élément. Road trips affiche ses fiches à gauche et la carte des itinéraires à droite, jusqu’au bord de l’écran. La couleur principale change avec les saisons : rouge en automne.
2. Une ligne crème, deux éléments à la suite dans la même colonne : un Texte, qui porte le sur-titre et le titre, puis la Mozaïque de contenus.
3. Une ligne blanche, deux grilles. La première, à deux colonnes alignées en bas, met le titre à gauche et le lien vers le podcast à droite, sur la même ligne de base. La seconde, à quatre colonnes, porte un épisode dans chacune : un petit Texte, puis l’épisode, choisi dans un élément Contenu. Ses grandes marges l’isolent de ses voisines, blanches comme elle.
4. Les régions : un élément sans réglage, qui construit seul la liste et la carte.
5. Instagram : un Texte pour le titre, puis le fil, d’un bord à l’autre.