---
title: "Le mode Visuel"
description: "Le mode Visuel d'Éclair affiche ta page avec son vrai thème. Écris sur place, change une image, déplace un bloc et vérifie le rendu mobile avant de publier."
url: "https://eclair.academy/parcours/intermediaire/mode-visuel"
lang: "fr"
author: "Thierry Gustin"
published: "2026-11-02"
updated: "2026-11-02"
---

# Le mode Visuel

> **L’essentiel** — Le mode Visuel affiche ta page avec le vrai thème du site et te laisse la modifier sur place. Tu cliques sur un texte pour l'écrire, sur une image pour la changer, et une barre déplace, duplique ou supprime chaque bloc. Il n'existe que dans l'administration, et tes pages publiques restent identiques à l'octet près.

Le **mode Visuel** de l'éditeur affiche ta page exactement comme tes visiteurs la verront, avec ton thème, et te laisse la modifier sur place. Tu écris dans les titres, tu changes une image d'un clic, tu réorganises les blocs et tu contrôles le rendu sur téléphone. Cette leçon t'apprend à t'en servir sans rien casser, sur la page d'accueil d'Atelier Nova.

> **Avant de commencer** — Durée : 20 minutes. Prérequis : savoir créer, enregistrer et publier un contenu avec les blocs ([écrire ton premier article](https://eclair.academy/parcours/debutant/premier-article)) et avoir quelques images dans la [médiathèque](https://eclair.academy/parcours/debutant/images-mediatheque). Ouvre une page déjà en ligne, par exemple ta page d'accueil, pour suivre la leçon.

## Ce que tu sauras faire

### 🎨 Modifier une page telle qu'elle s'affiche

Écrire, remplacer une image et réorganiser les blocs dans le rendu final.

### 🎯 Vérifier le rendu mobile

Passer de 390 px à 768 px puis à la pleine largeur en un clic.

### 🛡 Travailler sans risque

Annuler jusqu'à 50 étapes et retrouver une ancienne version si besoin.

## Blocs ou Visuel, quelle différence ?

L'éditeur d'Éclair propose deux vues du même contenu. En mode **Blocs**, tu vois une colonne de formulaires empilés : un paragraphe, un intertitre, une image, une FAQ. En mode Visuel, tu vois la page finale, avec les couleurs, les polices et la mise en page de ton thème ou de ta direction artistique. Passer de l'un à l'autre ne change rien au contenu : il est simplement affiché autrement.

|  | Mode Blocs | Mode Visuel |
| --- | --- | --- |
| Ce que tu vois | Les blocs sous forme de formulaires | La page avec ton thème |
| Idéal pour | Écrire un long texte, structurer un article | Retoucher une page d'accueil, une bannière, des atouts |
| Collage | Collage intelligent depuis Word ou Google Docs | Texte brut |
| Largeur | Colonne d'édition | 390 px, 768 px ou pleine largeur |

![L'éditeur en mode Blocs : le titre de l'article puis ses blocs empilés les uns sous les autres](https://eclair.academy/media/2026/11/eclair-academy-editor-fr.webp)
*Le mode Blocs, une colonne de formulaires*

## Comment passer en mode Visuel ?

1. Ouvre **Contenus**, puis la page à retoucher. Pour Atelier Nova, c'est la page d'accueil.
2. En haut de l'éditeur, clique sur **Visuel**, à côté de **Blocs**. La page apparaît avec ton thème après un court chargement.
3. Le panneau de droite reste disponible : il affiche le formulaire du bloc choisi, puis les onglets **Document**, **SEO** et **Analyse**.
4. Pour revenir aux formulaires, clique sur **Blocs**.

Ton choix est retenu : la prochaine fois que tu ouvres un contenu dans ce navigateur, l'éditeur démarre dans le dernier mode utilisé. Le mode Visuel fonctionne pour les pages, les articles et les fiches produit.

## Écrire directement sur la page

Clique sur un titre, un paragraphe, une question de FAQ ou le texte d'un bouton, puis tape. Les raccourcis habituels fonctionnent : `Ctrl+B` pour le gras, `Ctrl+I` pour l'italique et `Ctrl+K` pour un lien, qui ouvre la recherche de pages de l'éditeur.

- `Entrée` valide un champ d'une ligne, comme le titre d'une bannière.
- Dans un paragraphe, `Entrée` crée le paragraphe suivant et `Maj+Entrée` fait un simple retour à la ligne.
- `Ctrl+S` enregistre, même quand le curseur est dans la page.
- Le collage se fait en texte brut, sans mise en forme.

Exemple : la bannière d'Atelier Nova annonçait « Bienvenue dans notre atelier de céramique au cœur de Lyon ». Un clic sur le titre, et tu le remplaces par « Cours de céramique à Lyon », plus court et plus clair. Le Score Design préfère d'ailleurs un titre de bannière de 8 mots au plus.

> **Coller un long texte** — Pour importer un texte mis en forme depuis Word ou Google Docs, repasse en mode Blocs : le collage intelligent y convertit titres, listes et tableaux en blocs propres. Reviens ensuite en mode Visuel pour les finitions.

## Organiser les blocs avec la barre d'outils

Un clic sur un bloc l'entoure et fait apparaître sa barre d'outils. Survole chaque bouton pour lire son nom.

| Bouton | Nom | Effet |
| --- | --- | --- |
| ↑ et ↓ | Monter, Descendre | Déplace le bloc d'un cran |
| ⧉ | Dupliquer | Crée une copie juste en dessous |
| ✕ | Supprimer | Retire le bloc de la page |
| +↑ et +↓ | Ajouter un bloc au-dessus, en dessous | Ouvre la liste des blocs à insérer |
| ✨ | Retoucher avec l'IA | Améliore, corrige, raccourcit, développe, simplifie, change le ton ou traduit le texte |

La barre se manie aussi au clavier : `Tab` pour passer d'un bouton à l'autre, puis `Entrée`. Le bouton ✨ n'apparaît que si l'[assistant IA](https://eclair.academy/parcours/ia-mcp/assistant-ia) est activé, et chaque retouche affiche un message avec un bouton **Annuler**.

![Le mode Visuel : la page avec son thème, le bloc Atouts sélectionné, sa barre d'outils et son formulaire à droite](https://eclair.academy/media/2026/11/eclair-academy-visual-fr.webp)
*Un bloc sélectionné, sa barre d'outils et le panneau de réglages*

## Changer une image et régler un bloc

Clique sur une image pour en choisir une autre dans la médiathèque. Cela fonctionne pour la bannière, le bloc image, les portraits du bloc équipe et l'image à la une d'un article. Pense au texte alternatif : l'analyse SEO signale chaque image qui n'en a pas.

Ce qui ne s'écrit pas sur la page se règle dans le panneau de droite, qui montre le formulaire du bloc sélectionné : l'adresse d'un bouton, le nombre d'articles d'un bloc « Derniers articles », une nouvelle question de FAQ. Sur la page d'Atelier Nova, le bouton « Réserver un cours » se modifie ainsi : son texte sur la page, son lien dans le panneau.

Un bloc invisible sur le site public, comme une image pas encore choisie ou un bloc Produits alors que la boutique est fermée, apparaît comme un cadre pointillé. Sélectionne-le et complète-le depuis le panneau.

## Vérifier le rendu sur mobile et tablette

Trois boutons, en haut de l'éditeur, changent la largeur de l'aperçu : 📱 **Mobile** (390 px), ▭ **Tablette** (768 px) et 🖥 **Ordinateur** (pleine largeur). Une bonne partie de tes visiteurs arrive sur téléphone : fais ce contrôle avant chaque publication. En 390 px, vérifie que :

- le titre de la bannière reste lisible, sur trois lignes au plus ;
- les boutons ne se chevauchent pas et se touchent facilement du doigt ;
- les tableaux défilent horizontalement sans déborder de la page ;
- les images importantes restent visibles et bien cadrées.

## Annuler et enregistrer : comment rester serein ?

`Ctrl+Z` (`Cmd+Z` sur Mac) annule tes modifications étape par étape, jusqu'à 50 étapes. Tout le reste passe par l'éditeur habituel : enregistrement avec `Ctrl+S`, brouillon local de secours si ton navigateur se ferme, analyse SEO et GEO en direct.

> **Une page publiée se met à jour à l'enregistrement** — Sur un contenu déjà en ligne, **Enregistrer** et **Mettre à jour** modifient le site public tout de suite. En cas de doute, clique d'abord sur **Aperçu**. Et si tu regrettes un changement, l'**Historique des versions** de l'onglet Document garde les 20 dernières versions.

## Ce que le mode Visuel ne fait pas

- Les liens, boutons et formulaires de la page ne réagissent pas pendant l'édition : un clic sélectionne le bloc. Pour tester un lien, utilise **Aperçu** ou **Voir**.
- L'en-tête, le menu et le pied de page s'affichent, mais ils se modifient ailleurs : dans **Menus** et dans **Réglages › Apparence**.
- Il ne vit que dans l'aperçu de l'administration : connexion et droit d'écrire requis, page jamais mise en cache ni indexée. Tes pages publiques ne chargent aucun code en plus.

## À retenir

- Le mode Visuel montre ta page avec son thème ; le contenu est le même qu'en mode Blocs.
- Un clic sur un bloc ouvre sa barre : déplacer, dupliquer, supprimer, ajouter, retoucher avec l'IA.
- Les liens et options d'un bloc se règlent dans le panneau de droite.
- Contrôle chaque page en 390 px et en 768 px avant de la publier.
- `Ctrl+Z` annule 50 étapes, l'historique garde 20 versions enregistrées.

## Pour aller plus loin

- [Créer une page avec l'IA](https://eclair.academy/parcours/ia-mcp/creer-page-ia) : le brouillon composé par l'assistant s'ouvre directement en mode Visuel.
- [Thèmes et apparence](https://eclair.academy/parcours/intermediaire/themes-apparence) et [directions artistiques](https://eclair.academy/parcours/intermediaire/directions-artistiques) : ce que tu vois à l'écran dépend de ces réglages.
- [Référence des 18 blocs](https://eclair.academy/documentation/blocs) : les champs de chaque bloc, ceux que tu retrouves dans le panneau de droite.
- Source officielle : la [section Mode Visuel du guide d'Éclair](https://github.com/Jacckisback/eclair-cms/blob/main/docs/GUIDE.md#mode-visuel), sur GitHub.

## Questions fréquentes

### Le mode Visuel modifie-t-il le code de mes pages publiques ?

Non. Il n'existe que dans l'aperçu de l'administration, réservé aux personnes connectées qui ont le droit d'écrire. Le site public reste identique et garde toute sa vitesse.

### Pourquoi mon bouton ne s'ouvre-t-il pas quand je clique dessus ?

Pendant l'édition, un clic sélectionne le bloc au lieu de suivre le lien. Modifie l'adresse du bouton dans le panneau de droite, puis teste-la avec **Aperçu**.

### Peut-on utiliser le mode Visuel sur un article ou une fiche produit ?

Oui, l'éditeur est le même pour les pages, les articles et les produits. Sur un article, un clic sur l'image à la une permet aussi de la remplacer.

### Combien d'étapes puis-je annuler ?

Jusqu'à 50 avec `Ctrl+Z`. Au-delà, ou après avoir fermé l'éditeur, ouvre l'historique des versions de l'onglet Document : il garde les 20 dernières versions enregistrées.