El modo Visual

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.

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.

¿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.

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.

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 está activado, y cada retoque muestra un mensaje con un botón Cancelar.

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.

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: el borrador que compone el asistente se abre directamente en modo Visual.
• Temas y apariencia y direcciones de arte: lo que ves en pantalla depende de estos ajustes.
• Referencia de los 18 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, en GitHub.

Todas las lecciones de la ruta