# Voir vos réglages dans l’aperçu du design

L’aperçu du design montre sur une seule page chaque bloc qui porte un style du produit. Cet article vous apprend à régler un style pour tout le site, à fixer la taille de base de vos pages et à vérifier le mode sombre.

## Avant de commencer

- L’aperçu est réservé aux administrateurs du site.
- L’aperçu montre des blocs témoins, un exemple de chaque bloc stylé, et non vos pages. Il sert à juger l’apparence du site entier.
- Vos réglages ne sont enregistrés qu’à votre clic sur **Appliquer ce design à tout le site**, dans le catalogue de design.

## Ouvrir l’aperçu

1. Dans le menu de l’administration, ouvrez **Apparence** puis **Aperçu**. L’éditeur s’ouvre sur la page **Aperçu du design**.
2. Pour parcourir ses sections, faites défiler la page. Pour aller à l’une d’elles, ouvrez la vue en liste.

La page est reconstruite à chaque ouverture. Elle ne se publie pas, n’a pas d’adresse et ne devient jamais une page du site.

## Parcourir les sections

Chaque section montre les blocs qui portent un style du produit. Les exemples sont ceux d’un site de services quelconque, pour que vous regardiez l’allure et non le texte.

| Section | Blocs témoins |
| --- | --- |
| **Typographie** | Les six niveaux de titre, un surtitre, un paragraphe, un lien, une signature, une liste à puces et une liste numérotée. |
| **Boutons** | Les boutons principal, secondaire et tertiaire. |
| **Cartes** | Trois cartes au style **Carte** : Conseil, Réalisation et Suivi. |
| **Fil d’Ariane** | Un fil d’Ariane à trois niveaux, la page lue en dernier. |
| **Accordéon** | Un accordéon de trois questions, la première ouverte. |
| **Formulaires** | Des champs texte, e-mail et message, une liste déroulante, des boutons radio, des cases à cocher, un interrupteur, les boutons d’étape et le bouton d’envoi. |
| **Onglets** | Une barre d’onglets et ses panneaux. |
| **Médias** | Une image et sa légende, un slider de trois diapositives et un carrousel de trois cartes. |
| **Icônes** | Un téléphone, une enveloppe, un repère de lieu et une horloge. |
| **Tableaux** | Un **Tableau de WordPress** et un **Tableau avancé**. |
| **Séparateur** | Des séparateurs debout entre deux colonnes et couchés entre deux rangées. |
| **Lecteur de PDF** | Une page factice. |
| **Navigation** | Un **Menu** et son sous-menu, un **Sommaire** et une **Liste des pages**. |
| **Sélecteurs** | Le **Sélecteur de langue**, la **Suggestion de langue** et les sélecteurs **Apparence et animations**. |

Les phrases en italique présentent les blocs et ne se règlent pas. Chaque section porte le style **Section** et fait 1 280 px de large au plus.

## Régler un style depuis un bloc témoin

Un bloc témoin porte le même style que les blocs de vos pages. Quand vous appliquez le design, un style modifié ici change sur tous les blocs du site qui le portent.

1. Cliquez sur un bloc témoin, par exemple une carte de la section **Cartes**.
2. Dans la colonne de droite, ouvrez l’onglet **Styles** et changez un réglage, par exemple la bordure. Les trois cartes et celles du carrousel suivent.
3. Au-dessus de la page, cliquez sur **Ouvrir le catalogue de design**.
4. En bas du catalogue, cliquez sur **Appliquer ce design à tout le site** puis sur **Oui, appliquer**. Le style **Carte** reçoit votre réglage.

![L’avis au-dessus de l’aperçu du design et son bouton Ouvrir le catalogue de design.](https://static.lovelyrender.com/uploads/2026/10/1021-doc-design-avis.png)

Ici, vous voyez sur tous les composants l’effet d’un réglage commun. Un arrondi confortable sur un bouton peut être trop marqué sur un champ de formulaire.

Vous choisissez une palette, une typographie ou un composant dans la barre latérale du catalogue. [Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/) le détaille.

## Régler la taille de base de la page

Toutes les tailles de texte livrées sont en rem : elles se calculent sur la taille de la page. Changer cette taille fait grandir ou rétrécir tout le texte du site dans les mêmes proportions.

La taille de la page est portée par le style **Page** du bloc **Corps de page**, celui qui enveloppe tous les blocs témoins. Par défaut, elle vaut `1rem`.

![Le bloc Corps de page sélectionné dans l’aperçu : sa description, puis l’onglet Styles avec le style Page et son crayon.](https://static.lovelyrender.com/uploads/2026/10/1023-doc-design-corps.png)

| Réglage du visiteur | Taille de base `1rem` | Taille de base fixe, par exemple `16px` |
| --- | --- | --- |
| Zoom du navigateur | Tout grossit. | Tout grossit. |
| Taille de texte par défaut du navigateur | Le texte suit. | Sans effet. |
| Taille du texte du téléphone | Firefox sur Android agrandit. Safari sur iPhone et Chrome sur Android, non. | Même effet. |

`1rem` vaut 16 px pour presque tous les visiteurs. Une personne qui a demandé à son navigateur d’écrire plus grand voit votre site plus grand.

### Fixer la taille de base

Une taille fixe garde votre mise en page telle que vous l’avez dessinée, par exemple un grand titre qui doit tenir sur une ligne.

1. Dans la vue en liste, sélectionnez **Corps de page**.
2. Dans l’onglet **Styles**, panneau **Typographie**, cliquez sur le **+** de **Taille du texte**. Créez une taille de `16` `px`. Si elle existe déjà, choisissez-la dans la liste.
3. Sur la ligne du style **Page**, cliquez sur le crayon **Mettre à jour**. Laissez le groupe **Typographie** coché puis cliquez sur **Oui, mettre à jour**.
4. Dans le catalogue de design, cliquez sur **Appliquer ce design à tout le site** puis sur **Oui, appliquer**.

Pour revenir à `1rem`, cliquez sur la corbeille **Supprimer** de la ligne du style **Page** puis sur **Oui, réinitialiser**. Appliquez ensuite le design.

**Remarque :** Une taille en px posée sur un bloc ne suit jamais la taille de texte du navigateur. Pour que tout le texte réagisse de la même façon, préférez les tailles de l’échelle.

## Passer l’aperçu en mode sombre

1. Dans la barre d’outils de l’éditeur, cliquez sur le bouton **Aperçu en mode sombre**, à côté du bouton d’aperçu par appareil. Toute la page passe en sombre.
2. Pour revenir au clair, cliquez sur le même bouton, devenu **Aperçu en mode clair**.

Chaque mode montre la page d’un visiteur qui l’a choisi. Le réglage de votre ordinateur n’y joue aucun rôle. Le mode sombre reste choisi d’une visite à l’autre sur ce navigateur.

![La carte Conseil de l’aperçu en mode clair : son titre, son texte et son bouton Voir le détail sur un fond clair.](https://static.lovelyrender.com/uploads/2026/10/151-design-carte-clair.png)

![La même carte en mode sombre : le fond vert très foncé, le texte clair et le bouton Voir le détail dans un vert plus vif.](https://static.lovelyrender.com/uploads/2026/10/152-design-carte-sombre.png)

Un bloc dont la couleur n’a pas de valeur sombre garde la même couleur dans les deux modes. Sur un site réglé sur **Clair** ou **Sombre**, le bouton n’apparaît pas : la page reste dans ce mode.

## Connaître les limites de l’aperçu

- Vous ne pouvez ni ajouter, ni retirer, ni déplacer de bloc témoin.
- Les images sont des exemples, le lecteur de PDF affiche une page factice et la liste des pages montre cinq entrées d’exemple.
- Les blocs sans style du produit n’y figurent pas, par exemple une liste de contenus ou une modale.
- Vous voyez un seul état à la fois, survol, focus ou actif, en choisissant son onglet dans l’onglet **Styles**.
- La page n’a ni onglet de référencement ni onglet de langue.

**Attention :** Si vous quittez la page sans appliquer le design, vos réglages sont perdus. Le navigateur vous prévient.

## Voir aussi

- [Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)
- [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)