L'onglet Layout du style découpe la page en sections, de haut en bas. Vous les activez, vous leur donnez une position de module et une largeur sur la grille. C'est là que se décide la structure du site ; le reste n'est que du contenu déposé dedans.
Le groupe Général
Il vaut pour toute la page.
Largeur maximale du site. Vide, la valeur de Corpus s'applique : 1140 px. Une valeur comme 1320px élargit tout le site.
Gouttière et Gouttière de grille sont deux espaces différents, et c'est la première chose à comprendre :
- la gouttière sépare le contenu du bord de la fenêtre ;
- la gouttière de grille sépare les colonnes entre elles.
Les régler avec la même valeur est un choix, pas une obligation.
Conteneur. Oui : le contenu de la section est contraint à la largeur maximale. Non : il occupe toute la largeur de la fenêtre. C'est ce qui permet une bande de couleur ou une image de fond d'un bord à l'autre, avec un texte qui reste, lui, dans la colonne de lecture.
Les sept sections
| Section | Ce qu'elle contient |
|---|---|
| Barre d'information | Une bande fine tout en haut, deux côtés : réseaux sociaux, téléphone, horaires. |
| En-tête | Trois emplacements : En-tête 1, le logo, En-tête 2. |
| Navigation | Deux emplacements, Nav 1 et Nav 2, et le logo s'il y descend. |
| Sections hautes | Quatre rangées libres, entre la navigation et le contenu. |
| Contenu | Le composant, deux rangées à lui, et zéro, une ou deux colonnes latérales. |
| Sections basses | Quatre rangées libres, sous le contenu. |
| Pied de page | Une rangée, et les mentions. |
Chaque section porte les mêmes réglages : activée ou non, Conteneur (avec la valeur Utiliser le global qui reprend le réglage général), une image de fond, et pour l'en-tête et la navigation, épinglée en haut de l'écran au défilement.
La barre d'information
La bande fine au-dessus de l'en-tête. Deux positions, topbar-left et topbar-right : les réseaux sociaux d'un côté, le téléphone, le courriel ou les horaires de l'autre. Remplissez-les avec des modules HTML personnalisé.
Deux positions et non une seule : vous décidez ce qui va de chaque côté, au lieu de dépendre de l'ordre de publication. Un côté vide ne décale pas l'autre.
La barre ne s'affiche que si l'un des deux côtés a un module publié.
Elle est fine par ses marges, jamais par sa taille de texte. Corpus ne descend jamais sous 16 px, ici comme ailleurs : un numéro de téléphone illisible n'est pas un détail de style. Si la bande vous paraît haute, réduisez ce que vous y mettez, pas la lisibilité.
Le thème et le fond d'une zone
La barre d'information, l'en-tête, la navigation, le pied de page et les deux rangées de contenu portent chacun deux listes.
Thème de la zone : Automatique, Toujours sombre, Toujours clair. « Toujours sombre » impose les couleurs sombres à cette zone seule, quel que soit le reste du site et quel que soit le choix du visiteur. Une barre d'information ou un pied sombre au-dessus d'un contenu clair sont les deux motifs les plus courants du web.
Tout suit : les fonds, les filets, les cadres, les cartes, jusqu'aux contrôles de formulaire. Et le contraste reste garanti, puisque ce sont exactement les couleurs du thème sombre, vérifiées sur les 360 teintes.
Fond de la zone : Automatique, Neutre, Teinté. Les mêmes valeurs que pour une bande : le fond neutre ne bouge jamais, le fond teinté dérive de la teinte du site. Les deux listes se combinent : une navigation toujours sombre et teintée prend la version sombre du fond teinté.
Les trois rangées hautes : largeur et alignement du contenu
La barre d'information, l'en-tête et la navigation se règlent autrement que les sections hautes et basses. Ce sont des rangées, et chacune porte deux ou trois emplacements :
| Rangée | Emplacements, de gauche à droite |
|---|---|
| Barre d'information | Info 1, Info 2 |
| En-tête | En-tête 1, le logo, En-tête 2 |
| Navigation | Nav 1, le logo, Nav 2 |
Le logo n'apparaît que dans une seule des deux dernières : voir Où vit le logo, plus bas.
Un emplacement est une boîte
C'est la seule idée à retenir, et tout le reste en découle. Un emplacement n'est pas un point de la rangée, c'est une boîte. Elle a une largeur, et ce qui est dedans s'aligne dedans. Deux réglages, donc, et non un.
Largeur : la part de la rangée que la boîte occupe, en douzièmes. Automatique lui donne la place que son contenu demande, et les emplacements se répartissent d'un bord à l'autre de la rangée.
Alignement du contenu : Gauche, Centre ou Droite, à l'intérieur de la boîte.
Tant que la largeur est automatique, l'alignement ne se voit pas. La boîte épouse son contenu : il n'y a aucune place libre dedans, donc rien à déplacer. L'alignement prend effet dès que vous donnez une largeur. C'est la question la plus fréquente sur ces deux réglages, et ce n'est pas un défaut.
Une exception, et elle est automatique : si une rangée ne porte qu'un seul emplacement, sa boîte s'étire toute seule sur la rangée entière et l'alignement fonctionne sans que vous ayez à régler de largeur. Une barre de navigation qui ne porte que son menu se centre donc d'un seul réglage.
Le logo au milieu de la page
C'est la disposition que ces deux réglages servent avant tout. Elle se monte avec trois largeurs égales :
| Emplacement | Largeur | Alignement |
|---|---|---|
| Nav 1 | 4 | Droite |
| Logo | 4 | Centre |
| Nav 2 | 4 | Gauche |
Le logo tombe au milieu de la page parce que les trois parts sont symétriques, non parce qu'une règle le centre. Changez une seule des trois et il se décale : c'est de l'arithmétique, et c'est ce qui rend le résultat prévisible.
Le même montage vaut dans l'en-tête, avec En-tête 1 et En-tête 2.
Deux menus différents, jamais un menu coupé en deux. Pour « menu, logo, menu », publiez deux modules Menu distincts, l'un en Nav 1, l'autre en Nav 2, chacun sur son propre menu Joomla. Corpus ne découpe pas une liste de liens en deux moitiés : il afficherait des entrées dans un ordre que personne n'a choisi.
Ce que la largeur ne fait pas
Elle ne change jamais l'ordre. Une largeur change la taille des boîtes, pas leur suite. Pour placer le logo avant ou après les emplacements de sa rangée, c'est le réglage Place dans la rangée qu'il faut, décrit juste après.
Sous 48 rem, tout retombe en une colonne
Des parts en douzièmes n'ont aucun sens sur un téléphone. La rangée s'empile, les largeurs ne s'appliquent plus, et le logo remonte en tête : une marque qu'on découvrirait après le bouton de menu serait une marque perdue.
Seul le dessin remonte. L'ordre au clavier ne change pas : le lien d'accueil garde la place que votre réglage lui donne.
Un paragraphe dans l'en-tête
Un module de texte posé dans En-tête 1 ou En-tête 2 (la rangée haute de l'en-tête, hors logo) prend un dessin d'en-tête tout seul : un paragraphe en petit, d'un texte doux. Les liens n'y sont pas soulignés, et prennent la couleur d'accent et le soulignement au survol. Les icônes prennent la couleur d'accent. C'est la place d'un téléphone, d'un courriel ou d'une adresse.
Les menus (les listes) et les champs de recherche ne sont pas touchés.
Masquer la zone de gauche sur téléphone ne se fait pas d'office : Corpus ne retire jamais une information sans que vous l'ayez décidé. Pour le faire, saisissez desktop-only dans le champ Classe de module (onglet Avancé) du module. Il disparaît alors sous 48 rem de large.
Où vit le logo
Le logo, c'est le nom du site ou son image, et le lien vers l'accueil. Il porte deux réglages, dans le groupe Logo de l'onglet Layout.
Rangée : Dans l'en-tête (par défaut) ou Dans la barre de navigation. Le second choix est ce qui permet un menu de chaque côté du logo.
Place dans la rangée : Avant les deux emplacements, Entre les deux (par défaut), Après les deux. C'est ce réglage, et lui seul, qui sépare les trois dispositions courantes :
| Place | Ce que vous obtenez dans la navigation |
|---|---|
| Avant | Logo, Nav 1, Nav 2 |
| Entre les deux | Nav 1, Logo, Nav 2 |
| Après | Nav 1, Nav 2, Logo |
Le logo n'est rendu qu'une fois, quel que soit le choix : un seul lien d'accueil dans la page, un seul nom de site.
Il ne peut pas se perdre. Si vous demandez la barre de navigation alors que la navigation est éteinte, il revient dans l'en-tête.
Le prix du logo au centre de la barre. Quand un menu le précède, le lien d'accueil n'est plus le premier élément atteint au clavier. C'est le propre de cette mise en page, pas un défaut de Corpus ; sachez-le avant de la choisir, et gardez un lien d'accueil dans votre menu si votre public l'utilise au clavier.
Le cas de l'en-tête vide
Un en-tête activé dont aucun emplacement ne porte rien ne s'ouvre pas. Sans cela, il ne resterait qu'une bande de couleur haute de ses marges, sous laquelle rien ne s'explique. Le réglage En-tête activé dit ce que vous voulez ; ce comportement dit ce qu'il y a.
C'est le cas dès que vous descendez le logo dans la navigation sans rien publier en En-tête 1 ni en En-tête 2.
Les sections et les colonnes : position, largeur, classe
Les sections hautes et basses, les colonnes latérales et le pied de page ne sont pas des rangées à emplacements : chacune est une bande unique, et elle se règle avec trois champs.
Position. Laquelle des positions de module cette bande affiche. Le champ propose la liste ; voir Les positions de module.
Largeur. En douzièmes de la grille. Un module sur 8 et le suivant sur 4 se partagent la rangée en deux tiers / un tiers. La valeur auto laisse la place se répartir toute seule.
Le compte doit tomber juste. Douze douzièmes par rangée. Si vous mettez
8et6, la seconde colonne passe à la ligne : ce n'est pas un défaut, c'est la grille qui fait ce qu'on lui demande.
Classes. Trois groupes de choix, et ce sont des boutons radio : une bande n'a qu'un fond, qu'un thème et qu'un mode d'affichage.
- Fond : Neutre (
section--alt) ne bouge jamais quelle que soit la teinte du site ; Teinté (section--tint) en dérive. - Thème : Toujours sombre (
section--dark) ou Toujours clair (section--light), comme pour les zones décrites plus haut. - Affichage : Cachée sur téléphone (
desktop-only) ou Réservée au téléphone (mobile-only). Voir Les positions, § Cacher un contenu sur téléphone, et lisez la réserve qui s'y trouve avant de vous en servir.
Les trois groupes sont indépendants et se combinent librement. Le nom de la classe apparaît en infobulle au survol de son intitulé.
Monter une page d'atterrissage
Une landing page est une page unique qui se parcourt en défilant : plusieurs sections empilées, et une navigation qui suit. Corpus la monte avec ses bandes de modules ordinaires : il n'y a pas de positions spéciales à apprendre.
Les trois réglages
- Sur l'élément de menu, onglet Affichage de la page, champ Classe de la page : écrivez
landing. C'est ce mot qui déclenche la navigation d'ancres. Une page d'atterrissage se décide page par page, jamais pour tout le site.
- Nommez vos bandes. Theme Customizer, onglet Layout, chaque bande a un champ Identifiant. C'est lui qui devient l'ancre :
nos-missionsdonne#nos-missions.
- Donnez un titre à chaque bande : le champ Titre, juste en dessous. Ce titre devient l'intitulé du lien dans la navigation.
Ce que vous obtenez
Une colonne de points contre le bord droit de l'écran, un par section. Le point de la section où l'on se trouve est plein et plus gros ; au survol ou au clavier, le nom de la section se déplie à côté.
Elle disparaît sous 62 rem de large : sur téléphone, la marge n'existe plus et la navigation se retirerait sur le contenu. On parcourt la page en défilant, ce qui est le geste naturel sur ce format.
Une bande sans titre est ignorée. Ce n'est pas un oubli : le titre est l'intitulé du lien. Sans lui, un lecteur d'écran annoncerait « lien, dièse top-a », ce qui ne renseigne personne. Le template ne fabrique pas un nom à partir de rien.
Une section plus courte qu'un dixième de l'écran ne s'active jamais. Le repérage se fait sur la bande centrale de l'écran ; une bande très courte peut la traverser sans jamais l'occuper. C'est une limite connue.
Une page faite seulement de bandes. Vous pouvez éteindre la section Contenu dans le style de la page d'atterrissage : les bandes portent alors tout le contenu. Corpus les range, de la première section haute à la dernière section basse, dans la zone principale de la page. Le lien d'évitement « Aller au contenu principal » y mène, et les messages de Joomla s'affichent au-dessus de la première bande.
Les tampons qui vont avec
La famille Hero de la liste des tampons contient cinq ouvertures de page : visuel à gauche, à droite, centré avec ou sans visuel, et texte avec colonne latérale. Les familles Grille, Images, FAQ et Appel fournissent le reste des sections. Voir Écrire dans Corpus, § Les blocs.
La section Contenu, ses rangées et ses colonnes
Deux colonnes latérales, chacune avec sa position, son côté et sa largeur. Elles s'effacent seules quand aucun module n'y est publié : une colonne vide ne prend pas de place, le contenu s'élargit.
Le côté se lit par rapport au contenu : la colonne 1 se pose à gauche, la colonne 2 à droite, et l'une comme l'autre se déplace de l'autre côté sans que la seconde bouge. Rien n'interdit donc de les mettre toutes les deux du même côté, ce qui était le seul choix possible avant la version 2.0.5.
Sur petit écran les colonnes s'empilent sous le contenu, quel que soit leur côté : le téléphone n'a pas de gauche, et l'article passe en premier.
C'est pour cela qu'il ne faut pas raisonner en « largeur d'écran » quand on règle une page. Le composant s'adapte à la place que les colonnes lui laissent.
Et deux rangées à elle : la rangée haute et la rangée basse du contenu, positions main-top et main-bottom. C'est ce qui les distingue d'une section haute ou basse, et c'est tout leur intérêt :
Une section prend toute la largeur de la page. Une rangée de contenu reste dans la colonne du composant, au-dessus ou au-dessous de lui, quelles que soient les colonnes latérales publiées. Un bandeau d'alerte, un rappel, un formulaire de réinscription se posent là et restent alignés sur l'article.
Elles portent leur propre titre, avec son niveau et une description, comme les sections. Un détail qui compte : cette rangée vit dans le contenu, sous le titre du composant. Un h2 y est presque toujours juste, et un h1 presque toujours faux : le composant en produit déjà un, et il n'en faut qu'un par page.
Elles se désactivent avec la section Contenu : une rangée du contenu n'existe pas sans contenu.
Ces deux positions sont celles de Cassiopeia, au même endroit et avec le même sens. Un site qui migre depuis Cassiopeia y retrouve ses modules sans rien republier.
Le bas du pied de page
La rangée basse du pied porte deux éléments que le template écrit lui-même, et tous deux se masquent et se réécrivent. Groupe Pied de page de l'onglet Layout.
Bouton « Paramètres d'affichage ». Un interrupteur, et un champ de libellé. Laissez le libellé vide pour garder la traduction, qui suit la langue de la page.
Le masquer est sans danger, et c'est voulu : le réglage clair / sombre reste atteignable par le bouton flottant, contre le bord de l'écran, qui ne se masque pas. Un site qui perdrait les deux enfermerait le visiteur dans le thème que vous avez choisi, et ce n'est pas un choix à lui imposer.
Mention de propriété. Un interrupteur, et un champ de texte.
Laissé vide, il rend © année + nom du site, le nom venant de la configuration globale de Joomla. Rempli, il rend votre texte, avec deux marques remplacées au passage :
| Marque | Remplacée par |
|---|---|
{annee} | L'année en cours |
{site} | Le nom du site de la configuration globale |
Elles s'écrivent ainsi dans toutes les langues : un site multilingue n'en a qu'un jeu.
Le signe © n'est pas ajouté à un texte personnalisé. Écrivez-le si vous le voulez. Et préférez
{annee}à l'année en chiffres : un pied écrit en dur est périmé au 1er janvier.
Les modules d'une colonne sont encadrés
Les deux colonnes latérales rendent leurs modules avec le cadre de Corpus. Les sections hautes et basses, non : leurs modules sortent nus, à vous de choisir leur style dans le module lui-même. Voir Les modules de contenu.
Le titre d'un module peut être un h1
Dans un module, le champ Balise de l'en-tête (onglet Avancé) choisit le niveau du titre. Un titre de module en h1 prend la taille d'un h1, comme sur une page d'accueil dont le titre est porté par un module. Les niveaux h2 à h6 gardent la taille d'un h4 : les colonnes latérales des sites existants ne changent donc pas.
Ne posez qu'un seul h1 par page. Si le titre de l'article en porte déjà un, gardez h2 ou plus pour vos modules.
Un piège de valeur par défaut
Si votre site a été monté avec une version de Corpus antérieure à la 1.44, vérifiez la largeur maximale : la valeur héritée pouvait être 1420px au lieu de la valeur vide attendue. Un style déjà enregistré garde ce qu'il avait ; vider le champ le remet dans le rang.
À jour pour Corpus 2.1.704.