Lignes et grilles
Tout ce qui se règle sur une ligne — les marges, la couleur de fond — et sur une grille : la disposition des colonnes, leur couleur de fond, leur alignement. Et ce que devient une grille sur un téléphone.
La ligne
Le bloc d’une ligne a trois onglets, juste sous son en-tête :
| Onglet | Ce qu’on y trouve |
|---|---|
| Contenu | Les grilles de la ligne, et le bouton Ajouter une grille. |
| Marges | Marge du haut et Marge du bas. |
| Fond | Couleur de fond, puis Image de fond quand la couleur choisie est image. |
Les marges
La marge est l’espace entre le bord de la bande et ce qu’elle contient. Trois réglages, en haut comme en bas :
L’espace est pris à l’intérieur de la bande : il a sa couleur de fond. Entre deux lignes, les espaces s’ajoutent : la marge du bas de l’une, puis la marge du haut de la suivante. Une ligne neuve n’a pas de marge : Aucune, en haut comme en bas.
Une ligne dont le fond n’est pas blanc — une couleur ou une photo — garde toujours 50 pixels en haut et en bas, quelles que soient ses marges : Aucune comme Grande y donnent le même espace. Les marges ne se règlent que sur une ligne blanche.
Blanche et sans marge du haut, elle colle au bandeau. Lui donner une Marge du haut Grande.
La couleur de fond
Six couleurs, et une photo. Dans le back-office, la liste montre une pastille devant chaque couleur :
- Blancle fond de la page
- Crèmeà peine teinté
- Crème 2un peu plus soutenu
- Noirun violet très sombre
- Bleubleu roi
- Couleur principalechange avec les saisons
Sur Noir, Bleu et Couleur principale, le texte passe en blanc de lui-même. La Couleur principale est celle de la saison en cours : vert au printemps, orange en été, rouge en automne, bleu en hiver — voir Saisonnalité.
C’est tout le texte, boutons exceptés : intertitres, sur-titres et liens y perdent la couleur de la saison, qui s’y lit mal ou se confond avec le fond.
La couleur de l’hiver est exactement le Bleu. Deux lignes qui se suivent, l’une Bleu, l’autre Couleur principale, forment alors une seule bande pendant trois mois.
Une photo en fond
Le dernier choix de la liste, image, n’a pas de pastille : il fait paraître juste dessous le champ Image de fond, et son bouton Ajouter image. La photo choisie couvre alors toute la ligne, sous un léger voile sombre, comme le bandeau du haut de la page. Comme partout, elle ne doit pas dépasser 1 Mo.
Sur la photo, tout le texte passe en blanc : intertitres et sur-titres, qui perdent la couleur de la saison, liens, puces, légendes, et le texte des tuiles d’article et de magazine. Seuls les boutons gardent leurs couleurs. Ce qui a son propre fond clair les garde aussi : fiches des road trips, barre de filtres, liste du module Régions, carte d’une mise en avant.
Elle est recadrée pour remplir la ligne, autour de son centre. Plus la ligne est haute, plus on en perd sur les côtés : sur téléphone, où les colonnes s’empilent, il n’en reste parfois qu’une bande verticale. Préférer une photo dont le sujet est au milieu.
Le voile est plus sombre au centre de la ligne que sur ses bords. Un ciel blanc, de la neige, un mur clair derrière le texte le rendent illisible : choisir une photo assez sombre, ou calme, là où le texte se pose. Les tuiles d’article n’ont pas de fond : leur résumé et leur lien Découvrir se posent eux aussi sur la photo.
Tant qu’aucune image n’est choisie — ou si elle a été supprimée de la médiathèque —, la ligne s’affiche comme une ligne blanche. Et revenir à une couleur suffit à retirer la photo du site.
La grille
Le bloc d’une grille commence par la liste Grille, qui choisit la disposition des colonnes, puis, dès qu’il y a plusieurs colonnes, les listes Alignement et Affichage sur smartphone. Dessous, une zone par colonne, avec son bouton Ajouter un élément, puis la couleur de fond de chaque colonne.
Les dix dispositions
La liste dessine chaque disposition avec des tirets, entre crochets : un crochet par colonne, plus ou moins long selon sa largeur.
[------------]Une colonne, toute la largeurZone : Une colonne. La disposition d’une grille neuve.[------][------]Deux moitiésZones : Colonne de gauche, Colonne de droite.[----][----][----]Trois tiersZones : Colonne de gauche, Colonne centrale, Colonne de droite.[---][---][---][---]Quatre quartsZones : Colonne 1 à Colonne 4.[----][--------]Un tiers, deux tiersZones : Colonne de gauche, Colonne de droite.[--------][----]Deux tiers, un tiersZones : Colonne de gauche, Colonne de droite.[---][---------]Un quart, trois quartsZones : Colonne de gauche, Colonne de droite.[---------][---]Trois quarts, un quartZones : Colonne de gauche, Colonne de droite.[-----][-------]Cinq douzièmes, sept douzièmesPresque des moitiés, la droite un peu plus large.[-------][-----]Sept douzièmes, cinq douzièmesPresque des moitiés, la gauche un peu plus large.
Une colonne qu’on ne remplit pas reste vide, en blanc : c’est ce qui
permet de décaler un texte, en laissant par exemple la colonne étroite
d’un [----][--------] sans rien. La grille, elle, n’apparaît que
si l’une de ses colonnes au moins a quelque chose à montrer.
Les colonnes étroites n’acceptent pas tous les éléments : les grilles à plusieurs colonnes en proposent six, celles à quatre colonnes cinq. Voir Les éléments.
La couleur de fond d’une colonne
Sous les zones des colonnes, une liste Couleur de fond par colonne, alignée sous la sienne : les six couleurs de la ligne, avec leurs pastilles, sans la photo. Elle est vide par défaut : une colonne sans couleur n’a pas de fond, et la liste le montre par une pastille en damier, devant Sélectionner. La croix au bout de la liste la vide de nouveau. Une grille à une colonne n’en a pas.
La colonne devient une carte : sa couleur, des coins arrondis et 30 pixels de marge intérieure. Une Image y va d’un bord à l’autre, sans marge : collée en haut de la carte si elle en est le premier élément, en bas si elle en est le dernier. Sa légende, si elle en a une, reste dans la marge, alignée sur le texte de la carte ; en dernier élément, c’est la légende qui finit la carte, à 30 pixels du bas.
Le texte suit la couleur de la carte, pas celle de la ligne : blanc sur Noir, Bleu et Couleur principale, comme sur une ligne de ces couleurs ; sombre sur Blanc, Crème et Crème 2, même sur une photo ou une ligne foncée. Les boutons aussi.
Pas de carte non plus pour une colonne de la couleur de sa ligne — Blanc sur une ligne blanche, où rien ne la distinguerait —, ni pour une colonne vide.
Changer de disposition
Chaque disposition a ses propres zones. Changer la liste Grille d’une grille déjà remplie ne supprime rien, mais n’emporte pas non plus les éléments d’une zone à l’autre :
| On passe de… | Les éléments |
|---|---|
| deux colonnes à deux colonnes — moitiés, tiers, quarts, douzièmes | Restent en place. Les six dispositions à deux colonnes partagent les mêmes zones : la colonne de gauche reste celle de gauche. |
| une colonne à plusieurs, deux à trois, trois à quatre… | Disparaissent de l’écran, et les nouvelles zones sont vides. Ils ne sont pas effacés : revenir à la disposition d’avant les fait réapparaître. |
Mieux vaut régler la liste Grille avant de remplir les colonnes. Pour passer d’une colonne à deux sur une grille déjà remplie, ajouter plutôt une nouvelle grille, y recréer les éléments — un texte se copie et se colle —, puis supprimer l’ancienne.
L’alignement
Quand les colonnes n’ont pas la même hauteur — une image haute à côté d’un texte court —, l’alignement dit où se place la plus courte. Il ne s’affiche pas pour une grille à une colonne.
Une colonne sans couleur de fond n’a ni fond ni bordure : Égal ne s’y distingue pas de Haut. Avec une couleur, il donne aux cartes d’une grille la même hauteur ; avec Haut, chacune a celle de son contenu.
Sur un téléphone
Sous 768 pixels de large, chaque colonne prend toute la largeur de l’écran, et les colonnes s’empilent dans leur ordre : la colonne de gauche en premier — sauf réglage contraire, voir ci-dessous. L’image posée à gauche d’un texte arrive donc au-dessus de lui. Les lignes, leurs fonds et leurs marges ne changent pas.
Affichage sur smartphone
La liste Affichage sur smartphone, à côté de Alignement, choisit ce que devient une grille de plusieurs colonnes sous 768 pixels. Une grille à une colonne ne la montre pas : elle n’a rien à changer.
| Choix | Sur un téléphone |
|---|---|
| Normal | Les colonnes s’empilent, comme décrit plus haut. C’est le choix d’une grille neuve, et celui des grilles enregistrées avant que la liste n’existe. |
| Slider | Chaque colonne devient une diapositive : on les fait défiler du doigt, à l’horizontale, la suivante dépassant au bord de l’écran. Dessous, une pastille par colonne, qui y mène. La grille va d’un bord de l’écran à l’autre. Les colonnes vides sont passées ; s’il n’en reste qu’une, elle s’affiche seule, sans slider. |
| Ne pas afficher | La grille disparaît. Si toutes les grilles d’une ligne sont dans ce cas, la ligne disparaît avec elles, fond et marges compris. |
Sur un ordinateur, les trois choix donnent la même chose : les colonnes côte à côte.
Des colonnes de même nature, qui se lisent dans n’importe quel ordre : quatre tuiles de podcast, trois cartes. Pas un texte et son image, qu’il faut voir ensemble. Et Ne pas afficher ne retire rien du site : la grille reste lisible sur un ordinateur, et les moteurs de recherche la voient toujours.
La largeur
Sur un grand écran, les grilles restent dans la colonne centrale du site, 1 200 pixels au plus ; sur un écran plus étroit, elles en prennent toute la largeur, moins 30 pixels de chaque côté.