Le mode Visuel

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.

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.

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.

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.

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 est activé, et chaque retouche affiche un message avec un bouton Annuler.

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.

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 : le brouillon composé par l'assistant s'ouvre directement en mode Visuel.
• Thèmes et apparence et directions artistiques : ce que tu vois à l'écran dépend de ces réglages.
• Référence des 18 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, sur GitHub.

Toutes les leçons du parcours