Les éléments

Un élément s’ajoute par le bouton Ajouter un élément d’une colonne, qui ouvre la liste des éléments permis. Cette liste dépend de la grille : la colonne unique d’une grille à une colonne propose quinze éléments, les colonnes des autres grilles, plus étroites, six ou cinq.

Texte et médias

Texte

Un texte mis en forme dans l’éditeur habituel : intertitres et sur-titres, gras, liens, boutons, listes, et tout ce qu’on insère dans un texte — images, galeries, sliders, grilles d’adresses, articles. Voir Insérer dans un texte. Le champ s’affiche d’abord sous une barre grise, Cliquer pour initialiser TinyMCE : un clic dedans ouvre l’éditeur. C’est l’élément le plus courant, y compris pour un simple titre au-dessus d’un autre élément.

Image

Une image, à la largeur de la colonne, avec un liseré, 1 Mo au plus. Le site choisit lui-même la taille du fichier selon la largeur de la colonne. Son texte alternatif est celui de la médiathèque.

Si l’image a une légende, elle s’affiche dessous, en petits caractères italiques. C’est la Légende de la médiathèque, comme sous les photos d’un slider ou d’une galerie : rien à remplir dans le page builder. Pour l’écrire ou la changer, survoler l’image dans le champ, cliquer le crayon (Modifier), remplir Légende dans la colonne de droite, puis Mettre à jour l’image. Une image sans légende s’affiche seule.

Code

Un code d’intégration fourni par un autre site — une vidéo YouTube, une carte —, collé tel quel dans le champ Code. Une vidéo intégrée prend la largeur de la colonne, au format 16:9. Ne coller que du code venu d’une source sûre : il s’exécute tel quel dans la page.

Vidéo

Une vidéo de la médiathèque, .mp4 de 30 Mo au plus, avec ses commandes : c’est le visiteur qui lance la lecture. L’Image poster, 1 Mo au plus, s’affiche tant que la vidéo n’est pas lancée. À ne pas confondre avec la vidéo du bandeau, qui tourne seule, sans son.

Slider

Les photos choisies dans le champ Images, une à la fois, dans un cadre en largeur, avec des flèches. Chaque photo est montrée entière, avec sa légende dessous ; un clic l’agrandit. C’est le même slider que dans un texte : voir Insérer dans un texte.

Galerie

Les photos choisies dans le champ Images, en mosaïque sur trois colonnes, dans leurs proportions, avec leur légende. Un clic agrandit une photo, et fait défiler toute la galerie.

Les photos d’un slider ou d’une galerie ne sont pas limitées en poids, contrairement aux autres champs image : les réduire quand même avant de les déposer, voir le poids des images.

Mise en avant

Une carte blanche aux coins arrondis, légèrement ombrée : l’Image à gauche, sur un quart de la largeur, le Texte à droite, sur les trois quarts. Le texte s’écrit dans l’éditeur habituel, comme un élément Texte : intertitres, liens, boutons, listes.

C’est le texte qui donne sa hauteur à la carte. L’image, 1 Mo au plus, la remplit du haut en bas, recadrée autour de son centre : plus le texte est long, plus elle est étroite par rapport à sa hauteur. Choisir une photo dont le sujet est au milieu. Sur téléphone, elle passe au-dessus du texte, en largeur, au format 3:2 — recadrée elle aussi.

La carte reste blanche, et son texte sombre, sur toutes les lignes, même de couleur ou à photo. Sans image, le texte occupe toute la carte. Sans texte, rien ne s’affiche, même si une image est choisie : la carte n’aurait pas de hauteur. Les intertitres du texte comptent dans le sommaire de la page, comme ceux d’un Texte : voir Le niveau des titres.

Des contenus du site

Quatre éléments présentent des contenus choisis à la main, dans un champ en deux parties : chercher à gauche, cliquer pour ajouter à droite, glisser pour ranger. L’ordre du champ est l’ordre d’affichage. Leurs titres se rangent sous l’intertitre qui les précède : voir Le niveau des titres.

Mozaïque de contenus

Des adresses, événements, podcasts, pages ou mini-sites, en grille de tuiles, une grande et des petites. La disposition suit le nombre de contenus choisis : c’est la même grille que les adresses insérées dans un texte, voir Insérer dans un texte.

Articles de blog

Des articles, deux par rangée, chacun avec son image, son titre, le début de son texte et un lien Découvrir.

Contenu

Dans une colonne d’une grille à plusieurs colonnes seulement : des contenus de n’importe quel type — article, page, adresse, podcast, road trip, événement, mini-site —, chacun dans sa tuile, l’un sous l’autre, à la largeur de la colonne. Un contenu par colonne donne une rangée de tuiles : c’est ainsi que l’accueil aligne quatre épisodes du podcast.

Road trips

Un Sur titre, un Titre, et trois road trips au plus : leurs fiches à gauche, la carte de leurs itinéraires à droite, jusqu’au bord de l’écran, comme sur la page Road trips. Sur une ligne de couleur, le module occupe la bande d’un bord à l’autre, sans marge. Sur un téléphone, la carte passe en haut, et les fiches défilent dessous, du doigt, une à la fois, avec une pastille par road trip.

Des modules

FAQ

Un Sur titre, un Titre, puis les questions : chaque clic sur Ajouter une question ajoute une Question et sa Réponse. Sur le site, les réponses se déplient d’un clic sur leur question, la première déjà ouverte ; les couleurs suivent celles de la ligne. Le Titre range les questions sous lui dans le sommaire de la page : voir Le niveau des titres.

Instagram

Le fil Instagram du site, d’un bord à l’autre de l’écran. Rien à régler dans l’élément, qui ne contient qu’un message : voir Instagram. Pour le titre au-dessus, poser un élément Texte avant lui.

Régions

La liste des régions sur une bande crème, et leur carte à droite : un clic sur une région de la carte ouvre une bulle avec le début de son texte et un lien Découvrir. Rien à régler : le sur-titre et le titre, « Découvrir » et « Les régions du Québec », sont fixes, et chaque région y prend l’image et le premier texte de sa page — ou du mini-site auquel mène son adresse, quand elle n’a pas de page : voir Régions. Il sert sur l’accueil.

Sur un téléphone, le titre, puis les tuiles des régions, qui défilent du doigt avec des pastilles dessous, puis la carte. Pas de bulle : la tuile au centre est la région choisie, en couleur sur la carte, et toucher une région de la carte amène sa tuile au centre.

Région

La liste des contenus d’une région, puis ses articles. Un seul réglage : la région, à choisir dans Taxonomie. C’est lui qui fait d’une page celle de la région : un seul par page, voir La page d’une région. À ne pas confondre avec Régions, au pluriel, le module de l’accueil.

Catégorie de contenu

Le même, pour une catégorie : la liste de ses contenus, puis ses articles. Un seul réglage, la catégorie, à choisir dans Taxonomie. C’est lui qui fait d’une page celle de la catégorie : un seul par page, là aussi. Voir Le blog et ses catégories.

Ces deux éléments se remplissent seuls, à chaque affichage, à partir des fiches :

Le niveau des titres

Les titres d’une page forment un sommaire, que lisent les moteurs de recherche et les lecteurs d’écran : le titre du bandeau en tête, au niveau 1, puis les intertitres, chacun un niveau sous le titre qu’il détaille. Le site range lui-même dans ce sommaire les titres des tuiles, des fiches de road trip et des questions d’une FAQ, d’après ce qui les précède dans la page. Rien ne change à l’œil : une tuile a le même aspect à tous les niveaux.

Les titres d’une liste ne descendent jamais sous le niveau 3. Une FAQ ou des Road trips qui ont leur Titre rangent sous lui leurs questions ou leurs fiches ; sans titre, celles-ci suivent le tableau, comme les tuiles.

Pour ranger une liste sous un titre, poser juste avant elle un élément Texte avec un intertitre : placer le curseur sur la ligne, puis choisir Titre 2 dans la liste Paragraphe de la barre d’outils. Un intertitre plus haut dans la page suffit au sommaire, mais juste avant la liste, il dit aussi au lecteur de quoi elle parle.

Le niveau ne se voit pas sur la page. Pour relire le sommaire, une extension de navigateur comme HeadingsMap, pour Chrome et Firefox, l’affiche en arbre et signale les marches sautées.

D’un bord à l’autre de l’écran

Tous les éléments restent dans la colonne centrale du site, sauf trois, qui vont jusqu’aux bords de l’écran : Instagram, Road trips et Régions. C’est pour cela qu’ils ne sont proposés que dans une grille à une colonne. Dans la même colonne, les éléments qui les précèdent ou les suivent restent au centre.