---
title: "El modo Visual"
description: "El modo Visual de Éclair muestra tu página con su tema real. Escribe ahí mismo, cambia una imagen, mueve un bloque y revisa el móvil antes de publicar."
url: "https://eclair.academy/es/rutas/intermedio/modo-visual"
lang: "es"
author: "Thierry Gustin"
published: "2026-11-02"
updated: "2026-11-02"
---

# El modo Visual

> **Lo esencial** — El modo Visual muestra tu página con el tema real del sitio y te deja editarla ahí mismo. Haces clic en un texto para escribirlo o en una imagen para cambiarla, y una barra mueve, duplica o elimina cada bloque. Solo existe en el panel de administración: tus páginas públicas siguen idénticas hasta el último byte.

El **modo Visual** del editor muestra tu página exactamente como la verán tus visitantes, con tu tema, y te deja editarla ahí mismo. Escribes en los títulos, cambias una imagen con un clic, reorganizas los bloques y compruebas cómo se ve en el móvil. Esta lección te enseña a usarlo sin romper nada, con la página de inicio de Atelier Nova.

> **Antes de empezar** — Duración: 20 minutos. Requisitos previos: saber crear, guardar y publicar un contenido con los bloques ([escribir tu primer artículo](https://eclair.academy/es/rutas/principiante/primer-articulo)) y tener algunas imágenes en la [biblioteca de medios](https://eclair.academy/es/rutas/principiante/imagenes-mediateca). Abre una página ya publicada, por ejemplo tu página de inicio, para seguir la lección.

## Lo que sabrás hacer

### 🎨 Editar una página tal como se ve

Escribir, sustituir una imagen y reorganizar los bloques sobre el resultado final.

### 🎯 Comprobar la versión móvil

Pasar de 390 px a 768 px y después al ancho completo con un clic.

### 🛡 Trabajar sin riesgos

Deshacer hasta 50 pasos y recuperar una versión anterior si hace falta.

## Bloques o Visual: ¿qué diferencia hay?

El editor de Éclair ofrece dos vistas del mismo contenido. En el modo **Bloques** ves una columna de formularios apilados: un párrafo, un subtítulo, una imagen, unas FAQ. En el modo Visual ves la página final, con los colores, las fuentes y la maquetación de tu tema o de tu dirección de arte. Pasar de uno a otro no cambia nada del contenido: simplemente se muestra de otra forma.

|  | Modo Bloques | Modo Visual |
| --- | --- | --- |
| Lo que ves | Los bloques en forma de formularios | La página con tu tema |
| Ideal para | Escribir un texto largo, estructurar un artículo | Retocar una página de inicio, un banner o un bloque de puntos fuertes |
| Pegado | Pegado inteligente desde Word o Google Docs | Texto sin formato |
| Ancho | Columna de edición | 390 px, 768 px o ancho completo |

![El editor en modo Bloques: el título del artículo y, debajo, sus bloques apilados uno tras otro](https://eclair.academy/media/2026/11/eclair-academy-editor-es.webp)
*El modo Bloques, una columna de formularios*

## ¿Cómo se pasa al modo Visual?

1. Abre **Contenidos** y después la página que quieres retocar. En el caso de Atelier Nova, es la página de inicio.
2. En la parte superior del editor, haz clic en **Visual**, junto a **Bloques**. Tras una breve carga, la página aparece con tu tema.
3. El panel de la derecha sigue disponible: muestra el formulario del bloque elegido y, a continuación, las pestañas **Documento**, **SEO** y **Análisis**.
4. Para volver a los formularios, haz clic en **Bloques**.

Tu elección se recuerda: la próxima vez que abras un contenido en este navegador, el editor arrancará en el último modo que usaste. El modo Visual funciona con las páginas, los artículos y las fichas de producto.

## Escribir directamente en la página

Haz clic en un título, un párrafo, una pregunta de las FAQ o el texto de un botón, y escribe. Los atajos de siempre funcionan: `Ctrl+B` para la negrita, `Ctrl+I` para la cursiva y `Ctrl+K` para un enlace, que abre el buscador de páginas del editor.

- `Intro` valida un campo de una sola línea, como el título de un banner.
- En un párrafo, `Intro` crea el párrafo siguiente y `Mayús+Intro` hace un simple salto de línea.
- `Ctrl+S` guarda, incluso con el cursor dentro de la página.
- Lo que pegas se inserta como texto sin formato.

Un ejemplo: el banner de Atelier Nova decía «Bienvenidos a nuestro taller de cerámica en pleno corazón de Lyon». Un clic en el título y lo sustituyes por «Clases de cerámica en Lyon», más corto y más claro. Además, la puntuación de diseño prefiere un título de banner de 8 palabras como máximo.

> **Pegar un texto largo** — Para importar un texto con formato desde Word o Google Docs, vuelve al modo Bloques: allí el pegado inteligente convierte títulos, listas y tablas en bloques limpios. Después regresa al modo Visual para los últimos retoques.

## Organizar los bloques con la barra de herramientas

Un clic en un bloque lo enmarca y muestra su barra de herramientas. Pasa el ratón por encima de cada botón para leer su nombre.

| Botón | Nombre | Efecto |
| --- | --- | --- |
| ↑ y ↓ | Subir, Bajar | Mueve el bloque una posición |
| ⧉ | Duplicar | Crea una copia justo debajo |
| ✕ | Eliminar | Quita el bloque de la página |
| +↑ y +↓ | Añadir un bloque encima, debajo | Abre la lista de bloques que puedes insertar |
| ✨ | Retocar con IA | Mejora, corrige, acorta, desarrolla, simplifica, cambia el tono o traduce el texto |

La barra también se maneja con el teclado: `Tab` para pasar de un botón a otro y luego `Intro`. El botón ✨ solo aparece si el [asistente IA](https://eclair.academy/es/rutas/ia-mcp/asistente-ia) está activado, y cada retoque muestra un mensaje con un botón **Cancelar**.

![El modo Visual: la página con su tema, el bloque Puntos fuertes seleccionado, su barra y su formulario a la derecha](https://eclair.academy/media/2026/11/eclair-academy-visual-es.webp)
*Un bloque seleccionado, su barra de herramientas y el panel de ajustes*

## Cambiar una imagen y ajustar un bloque

Haz clic en una imagen para elegir otra en la biblioteca de medios. Funciona con el banner, el bloque de imagen, los retratos del bloque de equipo y la imagen destacada de un artículo. No olvides el texto alternativo: el análisis SEO señala cada imagen que no lo tiene.

Lo que no se escribe en la página se ajusta en el panel de la derecha, que muestra el formulario del bloque seleccionado: el enlace de un botón, el número de artículos de un bloque «Últimos artículos», una nueva pregunta de las FAQ. En la página de Atelier Nova, el botón «Reservar una clase» se edita así: su texto, en la página; su enlace, en el panel.

Un bloque invisible en el sitio público, como una imagen aún sin elegir o un bloque Productos con la tienda cerrada, aparece como un marco punteado. Selecciónalo y complétalo desde el panel.

## Comprobar cómo se ve en móvil y en tableta

Tres botones, en la parte superior del editor, cambian el ancho de la vista previa: 📱 **Móvil** (390 px), ▭ **Tableta** (768 px) y 🖥 **Ordenador** (ancho completo). Buena parte de tus visitantes llega desde el móvil: haz esta comprobación antes de cada publicación. A 390 px, revisa que:

- el título del banner se lee bien, en tres líneas como máximo;
- los botones no se solapan y se pulsan fácilmente con el dedo;
- las tablas se desplazan en horizontal sin salirse de la página;
- las imágenes importantes siguen visibles y bien encuadradas.

## Deshacer y guardar: ¿cómo trabajar con tranquilidad?

`Ctrl+Z` (`Cmd+Z` en Mac) deshace tus cambios paso a paso, hasta 50 pasos. Todo lo demás pasa por el editor de siempre: guardado con `Ctrl+S`, borrador local de respaldo si se cierra el navegador y análisis SEO y GEO en directo.

> **Una página publicada se actualiza al guardar** — En un contenido ya publicado, **Guardar** y **Actualizar** modifican el sitio público al instante. Si tienes dudas, haz clic antes en **Vista previa**. Y si te arrepientes de un cambio, el **Historial de versiones** de la pestaña Documento conserva las 20 últimas versiones.

## Lo que el modo Visual no hace

- Los enlaces, botones y formularios de la página no reaccionan mientras editas: un clic selecciona el bloque. Para probar un enlace, usa **Vista previa** o **Ver**.
- La cabecera, el menú y el pie de página se muestran, pero se editan en otro sitio: en **Menús** y en **Ajustes › Apariencia**.
- Solo existe en la vista previa del panel: exige haber iniciado sesión y tener permiso de escritura, y la página nunca se guarda en caché ni se indexa. Tus páginas públicas no cargan ni una línea de código más.

## Para recordar

- El modo Visual muestra tu página con su tema; el contenido es el mismo que en el modo Bloques.
- Un clic en un bloque abre su barra: mover, duplicar, eliminar, añadir, retocar con IA.
- Los enlaces y las opciones de un bloque se ajustan en el panel de la derecha.
- Comprueba cada página a 390 px y a 768 px antes de publicarla.
- `Ctrl+Z` deshace 50 pasos y el historial conserva las 20 últimas versiones guardadas.

## Para saber más

- [Crear una página con IA](https://eclair.academy/es/rutas/ia-mcp/crear-pagina-ia): el borrador que compone el asistente se abre directamente en modo Visual.
- [Temas y apariencia](https://eclair.academy/es/rutas/intermedio/temas-apariencia) y [direcciones de arte](https://eclair.academy/es/rutas/intermedio/direcciones-artisticas): lo que ves en pantalla depende de estos ajustes.
- [Referencia de los 18 bloques](https://eclair.academy/es/documentacion/bloques): los campos de cada bloque, los mismos que encuentras en el panel de la derecha.
- Fuente oficial: la [sección Modo Visual de la guía de Éclair](https://github.com/Jacckisback/eclair-cms/blob/main/docs/GUIDE.es.md#modo-visual), en GitHub.

## Preguntas frecuentes

### ¿El modo Visual modifica el código de mis páginas públicas?

No. Solo existe en la vista previa del panel, reservada a quienes han iniciado sesión y tienen permiso de escritura. El sitio público sigue idéntico y conserva toda su velocidad.

### ¿Por qué no se abre mi botón cuando hago clic en él?

Mientras editas, un clic selecciona el bloque en lugar de seguir el enlace. Cambia el enlace del botón en el panel de la derecha y pruébalo con **Vista previa**.

### ¿Se puede usar el modo Visual en un artículo o en una ficha de producto?

Sí, el editor es el mismo para las páginas, los artículos y los productos. En un artículo, un clic en la imagen destacada también te permite sustituirla.

### ¿Cuántos pasos puedo deshacer?

Hasta 50 con `Ctrl+Z`. Más allá, o después de cerrar el editor, abre el historial de versiones de la pestaña Documento: conserva las 20 últimas versiones guardadas.