---
title: "Thème blog : la page d'accueil du blog"
description: "Réglez l'apparence de la page du blog : thème prédéfini, ordre de tri, grille d'articles, rendu des images et espacements."
url: https://docs.vivlab.com/sections/blogs-themes-list
---

# Thème blog

Cette page contrôle l'apparence de la **page du blog**, c'est-à-dire la liste des [articles](https://docs.vivlab.com/sections/blogs-articles.md) que voient vos visiteurs en arrivant sur le blog. Vous y choisissez le thème prédéfini, l'ordre des articles, les couleurs, la grille et le rendu des images. L'**Aperçu** à droite montre le rendu en direct, en vue **Ordinateur** ou **Mobile**, et applique vos réglages avant même l'enregistrement.

Venez ici après avoir activé votre blog dans les [Paramètres](https://docs.vivlab.com/sections/blogs-settings.md), puis chaque fois que vous changez de thème ou que vous adaptez la grille au rythme de vos publications.

Vos modifications sont enregistrées en une seule fois avec **Enregistrer** en haut de la page, ou annulées avec **Annuler**.

## Général

Cette section pose les bases du thème : le gabarit prédéfini, l'ordre des articles et les couleurs de la page.

Sélectionnez un **Choix du thème** pour appliquer un gabarit cohérent : outre le thème par défaut, trois thèmes nommés sont proposés (Classique, Magazine et Typographique). Le thème Magazine met en avant le premier article de la liste dans un grand bloc au-dessus de la grille.

Réglez **Trier par** pour choisir l'ordre d'affichage : laissez « Par défaut », ou affichez d'abord les articles récemment mis à jour (« Date de mise à jour (récent) ») ou récemment créés (« Date de création (récent) »).

Définissez l'**Arrière-plan** de la page, puis la **Couleur du titre** et la **Couleur de la description** pour garder un contraste lisible. Le titre et la description affichés en haut de la liste sont ceux renseignés dans les [Paramètres](https://docs.vivlab.com/sections/blogs-settings.md).

## Grille

La grille définit comment vos articles sont disposés sur la page. Une seule colonne donne un fil de lecture vertical, quatre ou cinq colonnes un mur d'articles dense.

Réglez le **Nombre de colonnes** (de 1 à 5, 3 par défaut). Ajustez l'**Espace entre les colonnes** et l'**Espace entre les lignes** (de 0 à 20, 6 par défaut) pour aérer ou resserrer la grille. Définissez le **Nombre d'articles par page** (de 10 à 100, 20 par défaut) pour contrôler la pagination.

<DocsScreenshot name="blogs-themes-list-grid" alt="Une grille de trois colonnes et vingt articles par page." :width="316" :height="358" />

## Média

Cette section pilote le rendu des images : les vignettes des articles et la bannière de l'article mis en avant.

Choisissez le **Ratio de l'image** (du portrait 5:8 au paysage 8:5, 4:3 par défaut) pour que toutes les vignettes adoptent la même proportion. Le **Ratio de la bannière** va du carré 1:1 aux bandeaux très allongés (jusqu'à 7:1, 16:9 par défaut) et s'applique à l'image de l'article mis en avant par le thème Magazine.

Réglez l'**Arrondi des images** (de 0 à 24 pixels) pour adoucir les angles des vignettes et de la bannière. Activez **Contenir la bannière** ou **Contenir les images** pour afficher les visuels entiers, sans recadrage.

::: tip
L'article mis en avant est simplement le premier de la liste : changez **Trier par** pour choisir quel article occupe la bannière du thème Magazine.
:::

## Espacement de la grille

Cette section ajuste les marges intérieures autour de la grille d'articles. Elles déterminent l'espace entre les bords de la page et le premier article.

Utilisez **Côtés** pour appliquer la même marge sur les quatre côtés en un seul réglage. Utilisez **Côté haut**, **Côté droite**, **Côté bas** et **Côté gauche** pour ajuster chaque côté indépendamment.

## Espacement des textes

Cette section ajuste les marges autour des informations de chaque article (titre, extrait, date). Elles déterminent l'espace entre l'image et le texte qui l'accompagne.

Réglez **Côté haut**, **Côté droite**, **Côté bas** et **Côté gauche** pour donner plus ou moins d'air aux textes selon la densité de votre grille.

La présentation de chaque article ouvert depuis cette liste se règle de son côté dans le [Thème article](https://docs.vivlab.com/sections/blogs-themes-article.md).
