--- title: "Referencia de los 18 bloques" description: "Los 18 bloques del editor de Éclair uno a uno: función, campos exactos, buen uso y trampa que evitar, más los atajos de teclado y el pegado inteligente." url: "https://eclair.academy/es/documentacion/bloques" lang: "es" author: "Thierry Gustin" published: "2026-11-02" updated: "2026-11-02" --- # Referencia de los 18 bloques > **Lo esencial** — El editor de Éclair tiene 18 bloques: texto, subtítulo, lista, cita, imagen, recuadro, FAQ, tabla, botón, vídeo, código, separador, banner, puntos fuertes, equipo, últimos artículos, productos y formulario de contacto. Escribe «/» en una línea vacía para insertar uno. Un bloque incompleto, como una imagen sin elegir o un botón sin dirección, no se guarda. Éclair construye cada página con 18 bloques, desde el simple párrafo hasta el formulario de contacto. Esta referencia los repasa uno a uno, con las etiquetas exactas del editor: para qué sirve el bloque, qué campos ofrece, cómo usarlo bien y qué trampa evitar. Al final de la página: todos los atajos de teclado y el funcionamiento del pegado inteligente. ## ¿Cómo insertar y organizar un bloque? - En una línea vacía, escribe `/`: se abre el menú de los 18 bloques (17 mientras la tienda está cerrada), con un campo **Buscar un bloque…**. Las flechas arriba y abajo eligen, `Intro` inserta y `Esc` cierra. - El botón **+** a la izquierda de un bloque (**Añadir un bloque**) abre el mismo menú; el botón del final del contenido añade un bloque al final. - Cada bloque tiene su barra: **Subir**, **Bajar**, **Duplicar**, **Eliminar**. Tras eliminar un bloque, el mensaje **Bloque eliminado.** ofrece **Cancelar**. - El tirador **Mover** se arrastra y se suelta para reordenar los bloques. - Un bloque incompleto no se guarda: párrafo vacío, imagen sin elegir, botón sin texto o sin dirección, vídeo no reconocido, banner sin título. ![El menú «/» del editor, con su búsqueda y la lista de bloques](https://eclair.academy/media/2026/11/eclair-academy-editor-slash-es.webp) *El menú «/» muestra los bloques disponibles* ## Los 18 bloques de un vistazo La columna «Sirve para» recoge la descripción que muestra el menú de los 18 bloques. | Bloque | Sirve para | Campos principales | | --- | --- | --- | | Texto | Párrafo de texto | texto enriquecido | | Subtítulo | Título de sección (H2, H3, H4) | texto, nivel | | Lista | Con viñetas o numerada | elementos, estilo | | Cita | Una frase destacada | texto, autor | | Imagen | Desde la biblioteca de medios | imagen, texto alternativo, leyenda, enlace, tamaño | | Recuadro | Consejo, info, aviso | tipo, título, texto | | FAQ | Preguntas y respuestas (FAQPage) | título, preguntas, respuestas | | Tabla | Datos en filas y columnas | celdas, encabezados, leyenda | | Botón | Llamada a la acción | texto, dirección, estilo, alineación | | Vídeo | YouTube o Vimeo, sin cookies | enlace, leyenda | | Código | Fragmento de código fuente | código, lenguaje | | Separador | Línea de separación | ninguno | | Banner | Gran titular de bienvenida con botones | titular, frase gancho, dos botones, imagen | | Puntos fuertes | Cuadrícula de servicios o ventajas | título, puntos fuertes | | Equipo | Retratos, cargos y presentaciones | título, personas | | Últimos artículos | Lista automática de artículos | título, número, categoría | | Productos | Escaparate automático de la tienda | título, número, categoría | | Formulario de contacto | Formulario antispam integrado | título, texto del botón | ## Los bloques de texto ### Texto - **Sirve para**: escribir un párrafo. - **Campo**: el texto. Al seleccionar un fragmento aparece una barra: negrita, cursiva, enlace, código, resaltado y quitar enlace, además de ✨ para los retoques con IA si el asistente está activado. - **Buen uso**: una idea por párrafo, 120 palabras como máximo. Es el límite que comprueba el análisis GEO. - **Trampa**: más de 350 palabras de párrafos seguidos, sin subtítulo, imagen ni lista, hacen bajar la puntuación de diseño. ### Subtítulo - **Sirve para**: estructurar la página en partes. - **Campos**: el texto y el nivel, en el menú **Tamaño**: H2, H3 o H4. El ancla que usa el índice se crea automáticamente a partir del texto. - **Buen uso**: H2 para las partes principales, H3 por debajo; 12 palabras como máximo, sin emoji. Un subtítulo en forma de pregunta («¿Cómo…?») cuenta para la puntuación GEO. - **Trampa**: no crees un H1, porque el título de la página ya lo es. La puntuación de diseño señala los saltos de nivel (H2 y luego H4). El índice recoge los H2 y los H3. ### Lista - **Campos**: los elementos (`Intro` añade uno) y el estilo: **• Lista** (viñetas) o **1. Lista** (numerada). - **Buen uso**: numerada para pasos, con viñetas para elementos sin orden. Las listas y las tablas forman parte de los contenidos fáciles de extraer que valora el análisis GEO. - **Trampa**: las sublistas no existen. `Intro` en el último elemento vacío te saca de la lista; `Retroceso` en el único elemento vacío convierte la lista en un párrafo. ### Cita - **Campos**: la cita (texto enriquecido) y **Autor de la cita**. - **Buen uso**: un testimonio breve o la frase de un experto, siempre con su autor. - **Trampa**: sin autor, la cita pierde su valor de prueba. Para destacar un consejo, es mejor el recuadro. ### Recuadro - **Campos**: el tipo (💡 **Consejo**, ℹ️ **Bueno saberlo**, ⚠️ **Atención**, ✅ **Para recordar**, 📝 **Nota**), **Título del recuadro (opcional)** y el texto. - **Buen uso**: una información que no conviene pasar por alto. Sin título, Éclair muestra el nombre del tipo en el idioma de la página. - **Trampa**: el tipo propuesto por defecto es **Consejo**. Acuérdate de cambiarlo para una advertencia; si no, tu mensaje aparecerá con una bombilla. ### Código - **Campos**: el código (la tecla `Tab` inserta dos espacios) y **Lenguaje (opcional)**, que se añade como clase (`lang-php`…). - **Buen uso**: un comando, un fragmento de `.htaccess` o de configuración de Nginx. En el móvil, el bloque se desplaza en horizontal. - **Trampa**: Éclair no añade resaltado de sintaxis. El código tampoco cuenta en el número de palabras del análisis. ### Separador - **Campos**: ninguno. El bloque muestra una línea horizontal. - **Buen uso**: marcar una pausa entre dos partes que no necesitan título. - **Trampa**: no sustituye a un subtítulo. Ni el índice ni el análisis lo ven. ## Los bloques multimedia ### Imagen - **Campos**: la imagen (**Añadir una imagen**, o arrastra un archivo al bloque), **Texto alternativo (describe la imagen)**, **Leyenda (opcional)**, **Enlace (opcional)** y **Tamaño**: **Normal**, **Ancha** o **Pequeña**. El botón **Cambiar la imagen** abre la biblioteca de medios. - **Buen uso**: un texto alternativo que describa lo que se ve. Si lo dejas vacío, se usa el de la biblioteca de medios. Si está en uno de los dos primeros bloques de un contenido sin imagen destacada, la imagen se carga con prioridad; en el resto de posiciones, se carga en diferido. - **Trampa**: un bloque Imagen sin imagen no se guarda, y una imagen pegada desde Word o desde una página web no se importa. Súbela a la biblioteca de medios. ### Vídeo - **Campos**: **Enlace de YouTube o Vimeo** y **Leyenda (opcional)**. - **Buen uso**: el reproductor solo se carga al hacer clic, desde `youtube-nocookie.com` o desde Vimeo con `dnt=1`. No se instala ninguna cookie antes de ese clic y la página sigue siendo ligera. - **Direcciones reconocidas**: `youtube.com/watch?v=…`, `youtu.be/…`, `youtube.com/shorts/…`, `/embed/…` y `/live/…`, `vimeo.com/123456…` y `player.vimeo.com/video/…`. - **Trampa**: con otro servicio aparece **Enlace de vídeo no reconocido**, y el bloque no se guarda. ### Banner - **Campos**: **Titular**, **Frase gancho**, **Botón principal** y **Enlace del botón**, **Botón secundario** y **Enlace del botón secundario**, y después la imagen (**Añadir una imagen**, **Cambiar la imagen**, **Quitar la imagen**). - **Buen uso**: al principio de una página de inicio o de una página de venta. La puntuación de diseño espera un título de 8 palabras como máximo (6 en mayúsculas) y un botón de acción. La imagen del banner se carga con prioridad. - **Título de la página**: si el banner es el primer bloque y está marcada la opción **Ocultar el título (el título del primer banner pasa a ser el H1)**, su título pasa a ser el H1; si no, es un H2. - **Trampa**: un botón solo aparece si su texto y su enlace están rellenos. Con una dirección de arte que use la composición **Imagen a sangre** o **Editorial: imagen vertical**, el banner necesita una imagen. ## Los bloques de maquetación ### FAQ - **Campos**: **Título de la sección (opcional)**, «Preguntas frecuentes» por defecto, y después pares de **Pregunta** y **Respuesta**; **+ Añadir una pregunta**. - **Buen uso**: de 3 a 6 preguntas reales de tus clientes, con respuestas de 2 a 4 frases. Éclair genera los datos estructurados FAQPage y añade las FAQ al índice. - **Bueno saberlo**: Google ya no muestra resultados enriquecidos de FAQ desde el 7 de mayo de 2026, según el [registro de actualizaciones de Google Search Central](https://developers.google.com/search/updates). El análisis GEO de Éclair sigue valorando el bloque, porque las IA recogen mucho las preguntas y respuestas. - **Trampa**: el título de las FAQ ya es un H2, así que no añadas un subtítulo «FAQ» justo encima. Una pregunta sin respuesta se elimina al guardar. ### Tabla - **Campos**: las celdas (texto enriquecido), **+ Añadir una fila**, **+ Añadir una columna**, **Eliminar la última fila**, **Eliminar la última columna**, la casilla **Primera fila = encabezados** y **Leyenda (opcional)**. - **Buen uso**: comparar, cuantificar, resumir. El bloque admite 12 columnas y 200 filas; en el móvil, se desplaza en horizontal. - **Trampa**: cuantas más columnas, más tiene que desplazar la tabla quien la lee en el teléfono. Deja marcada la casilla de los encabezados, salvo si tu tabla de verdad no los tiene. ### Botón - **Campos**: **Texto del botón** (80 caracteres como máximo), **Dirección (URL)** con sugerencias de tus páginas, el estilo **Principal** o **Secundario**, la alineación **A la izquierda** o **Centrado**. - **Buen uso**: un verbo de acción («Pedir presupuesto») y, preferiblemente, un enlace a una de tus páginas. - **Trampa**: con más de 3 botones en una página, baja la puntuación de diseño. Sin texto o sin dirección, el botón no se guarda. ### Puntos fuertes - **Campos**: **Título de la sección (opcional)** y, para cada punto fuerte, un **Icono** (un emoji), un **Título** y un texto; **+ Añadir un punto fuerte**, 12 como máximo. - **Buen uso**: de 3 a 6 puntos fuertes, cada uno descrito con una frase concreta. Con una dirección de arte, los emojis se convierten en iconos dibujados o desaparecen, según el ajuste **Iconos de los puntos fuertes**. - **Trampa**: un emoji sin equivalente dibujado no se muestra en el modo de iconos dibujados. El análisis propone entonces ✓ 🚀 ⏱ 🛡 ⭐ ❤ 💡 📞 📍 🚚. ### Equipo - **Campos**: **Título de la sección (opcional)**, «Nuestro equipo» por defecto, y para cada persona: la foto (**Elegir la foto**, **Quitar la foto**), **Nombre y apellidos**, **Cargo**, **Presentación en una o dos frases** y **Enlace al perfil (LinkedIn…)**; **+ Añadir una persona**. - **Buen uso**: fotos reales y cargos precisos inspiran confianza. Sin foto, se muestran las iniciales en un círculo. - **Con el asistente IA**: «Añade a Léa Martin, directora artística, a la página del equipo con la foto adjunta» prepara el cambio, que previsualizas antes de aplicarlo. - **Trampa**: una persona sin nombre se ignora al guardar. ## Los bloques automáticos Tres de los 18 bloques se rellenan solos, a partir de tus contenidos y tus ajustes: tú solo eliges lo que muestran. ### Últimos artículos - **Campos**: **Título de la sección (opcional)**, «Últimos artículos» por defecto, el número de artículos (de 1 a 12, 3 por defecto) y la **Categoría** (**Todas las categorías** o una sola). - **Buen uso**: en la página de inicio de una web corporativa, para mostrar que el sitio está vivo. Un enlace «Ver todos los artículos» sigue a la lista. - **Trampa**: el bloque no se ve si el blog está desactivado o si no hay ningún artículo publicado. ### Productos - **Campos**: **Título de la sección (opcional)**, «Productos» por defecto, el número de productos (de 1 a 12, 4 por defecto) y la **Categoría** de productos. - **Buen uso**: destacar tus productos en la página de inicio o en una página temática. - **Trampa**: mientras la tienda esté cerrada, el bloque no aparece en el menú «/» y no se ve en el sitio («La tienda está cerrada: este bloque sigue oculto.»). ### Formulario de contacto - **Campos**: **Título de la sección (opcional)** y **Texto del botón (opcional)**, «Enviar» por defecto. - **Lo que ve el visitante**: los campos Nombre, Correo electrónico y Mensaje (5000 caracteres como máximo), y después un aviso de privacidad. - **Protección**: sin captcha, con un campo trampa invisible, un token, 5 mensajes por red cada 10 minutos y 100 al día para todo el sitio. - **Trampa**: el enlace a tu política de privacidad solo aparece si una página publicada tiene una de estas direcciones: `/confidentialite`, `/politique-de-confidentialite`, `/privacy`, `/privacy-policy` o `/politica-de-privacidad`. Los ajustes de recepción (dirección, conservación de los mensajes) se describen en [Formulario de contacto y mensajes](https://eclair.academy/es/rutas/principiante/formulario-contacto). ## Los atajos de teclado del editor En Mac, usa `Cmd` en lugar de `Ctrl`. ### En modo Bloques | Atajo | Efecto | | --- | --- | | `/` en una línea vacía | Abrir el menú de bloques | | `Ctrl+S` | Guardar | | `Ctrl+K` | Crear un enlace, con la búsqueda de tus páginas | | `Ctrl+B` y `Ctrl+I` | Negrita y cursiva | | `Intro` | Nuevo párrafo (en un texto, un subtítulo o una cita) | | `Mayús+Intro` | Salto de línea dentro del mismo bloque | | `Retroceso` al principio de un bloque | Unirlo al bloque de texto anterior, o eliminar un bloque vacío | | `↑` al principio de un bloque, `↓` al final | Pasar al bloque anterior o al siguiente | | `Intro` en el título | Ir al primer bloque | | `Tab` en un bloque Código | Insertar dos espacios | | `Ctrl+J` | Abrir o cerrar el asistente IA, si está activado | En el campo del enlace, `Intro` valida la dirección y `Esc` cancela. ### En modo Visual | Atajo | Efecto | | --- | --- | | `Ctrl+Z` | Deshacer, paso a paso (hasta 50 pasos) | | `Ctrl+S` | Guardar | | `Ctrl+B`, `Ctrl+I` | Negrita, cursiva (campos de texto enriquecido) | | `Ctrl+K` | Enlace (campos de texto enriquecido) | | `Intro` | Validar un campo de una línea; en un párrafo, crear el siguiente | | `Mayús+Intro` | Salto de línea dentro de un párrafo | | `Esc` | Salir del campo y, después, deseleccionar el bloque | | `Tab` y luego `Intro` | Usar la barra del bloque con el teclado | En modo Visual, el contenido pegado se inserta siempre como texto sin formato. El modo se explica en detalle en [El modo Visual](https://eclair.academy/es/rutas/intermedio/modo-visual). ![El modo Visual: un bloque seleccionado, su barra de herramientas y su formulario en el panel de la derecha](https://eclair.academy/media/2026/11/eclair-academy-visual-es.webp) *La barra del bloque en modo Visual* ## ¿Cómo funciona el pegado inteligente? Pega un texto copiado de Word, Google Docs o una página web dentro de un bloque Texto: Éclair lo divide en bloques limpios. Si el bloque Texto estaba vacío, se sustituye; en otros campos (una celda, una respuesta de FAQ), el texto se inserta en el campo activo. | Lo que pegas | Lo que obtienes | | --- | --- | | Títulos de nivel 1 a 6 | Subtítulos H2 a H4 (el nivel 1 pasa a H2, los niveles 5 y 6 pasan a H4) | | Párrafos | Bloques Texto | | Listas con viñetas o numeradas | Bloques Lista | | Citas | Bloques Cita | | Tablas | Bloques Tabla, con la fila de encabezados si la tabla la tiene | | Texto preformateado | Bloque Código | | Línea horizontal | Separador | | Negrita, cursiva, enlaces, código, resaltado, subíndice, superíndice, tachado | Se conservan | | Texto sin formato con líneas vacías | Un bloque Texto por párrafo; líneas que empiezan por `- `, `* ` o `• `: una lista; líneas que empiezan por `#`: un subtítulo | | Imágenes | Se ignoran: súbelas a la biblioteca de medios | Se eliminan los colores, las fuentes y los tamaños originales. Solo se conservan los enlaces en `https://`, `http://`, `mailto:`, `tel:`, `/` o `#`. Para una migración completa, el método está en [Migrar desde WordPress o Wix](https://eclair.academy/es/rutas/experto/migrar-wordpress). > **Escribe donde quieras, da formato aquí** — Redacta en tu procesador de textos habitual con estilos de título de verdad y pega todo en un bloque Texto vacío: los subtítulos, las listas y las tablas se crean de una vez, listos para el análisis SEO y GEO. ## Preguntas frecuentes sobre los bloques ### ¿Se pueden crear bloques propios? No. Éclair define y valida los 18 bloques, lo que garantiza un HTML limpio y seguro en cada página. Para cambiar su aspecto, usa el [CSS personalizado](https://eclair.academy/es/rutas/intermedio/css-personalizado); para ir más allá, las [plantillas del tema](https://eclair.academy/es/rutas/experto/personalizar-tema). ### ¿Por qué ha desaparecido un bloque al guardar? Al guardar, Éclair descarta cualquier bloque al que le falte lo imprescindible: un texto vacío, una imagen que nunca se eligió, un botón sin etiqueta o sin enlace, un vídeo de un servicio desconocido, un banner sin título. Completa el campo que falta, o recupera la versión anterior en el **Historial de versiones** del editor. ### ¿Por qué no aparece el bloque Productos en el menú «/»? Solo se ofrece cuando la tienda está abierta, en **Ajustes › Tienda** con **Tienda abierta**. Los pasos están en [Vender con la tienda ligera](https://eclair.academy/es/rutas/intermedio/tienda).