Personnaliser la mise en page

La mise en page d’une page est composée de rangées, chacune divisée en colonnes. Chaque rangée dispose d’un panneau de réglages, accessible depuis l’éditeur de mise en page. Ces réglages permettent de contrôler la largeur du contenu, les espaces, la couleur de fond et le comportement visuel de la rangée.

Réglages d’une rangée

Pour ouvrir les réglages d’une rangée, cliquez sur l’icône de paramètres de la rangée, dans l’éditeur de mise en page.

1. Largeur du contenu

Contrôle la largeur maximale du contenu de la rangée sur les grands écrans.

Largeur automatique : la largeur est limitée à une valeur confortable pour la lecture. C’est le réglage qui convient dans la majorité des cas.
Pleine largeur : le contenu occupe toute la largeur de l’écran. Utile pour les images de fond et les blocs qui occupent beaucoup de place.
Largeur réduite : le contenu est plus étroit. Convient aux textes longs placés sur une seule colonne.

2. Couleur de fond

Applique une couleur de fond à la rangée, choisie dans la palette du site. L’option Atténuer la couleur produit une variante plus claire et moins saturée. L’option La couleur prend toute la largeur étend la couleur jusqu’aux bords de l’écran, même si le contenu reste dans la largeur définie.

3. Espacement interne

Ajoute de l’espace à l’intérieur de la rangée, entre ses bords et son contenu. Quand une couleur de fond est définie, cet espacement l’étend vers le haut et vers le bas. Quatre intensités sont disponibles : aucune, petite, moyenne, grande.

4. Marges

Ajoute de l’espace en dehors de la rangée, au-dessus et en dessous. Quatre intensités sont disponibles : aucune, petite, moyenne, grande. Utile pour augmenter la séparation avec les rangées voisines.

5. Autres options

L’option Centrer verticalement le contenu aligne au centre le contenu de toutes les colonnes d’une même rangée. Ce réglage est utile quand les colonnes n’ont pas la même hauteur.

Colonnes disponibles

Quand vous ajoutez une rangée, l’éditeur propose plusieurs configurations de colonnes. La largeur de chaque colonne s’exprime en fraction de la rangée.

1. Une colonne (1/1): La colonne occupe toute la rangée. Convient aux textes d’introduction, aux titres et aux blocs qui prennent toute la largeur.
2. Deux colonnes (1/2 + 1/2, 1/3 + 2/3, 2/3 + 1/3): Deux colonnes de largeur égale ou inégale. Les colonnes égales présentent deux contenus de même importance. Les colonnes inégales placent une colonne étroite à côté d’une colonne large : convient pour un texte court à côté d’un contenu plus développé, ou pour une mise en page avec une image et un texte.
3. Trois colonnes (1/3 + 1/3 + 1/3): Trois colonnes égales. Convient pour présenter des services, des arguments ou des contacts côte à côte.
4. Quatre colonnes: Configurations à quatre colonnes (1/4 + 1/2 + 1/4, ou 1/4 × 4) et à six colonnes (1/6 × 6), pour des mises en page plus denses.

Personnaliser une colonne

En plus des réglages de rangée, chaque colonne peut être personnalisée indépendamment avec le bloc Paramétrage de colonne. Pour que ce bloc soit actif, il doit être placé en première position dans sa colonne.

1. Couleur de fond: Applique une couleur à toute la colonne, choisie dans la palette du site. L’option Atténuer la couleur produit une variante plus claire, pour un rendu plus discret.
2. Espacement interne: Ajoute de l’espace à l’intérieur de la colonne, entre ses bords et son contenu. Quand une couleur de fond est définie, cet espacement l’étend. Quatre intensités sont disponibles (aucune, petite, moyenne, grande), réglables séparément en haut et en bas.