domingo, 30 Ago 2026

Recursos y herramientas exclusivas para expertos en diseño y desarrollo web

Explorar
BiblioWeb

Biblioweb.es

Todo sobre tecnología web

  • Inicio
  • Categorías
    • Desarrollo Web y Plugins
    • IA & Automatización web
    • Ciberseguridad y Seguridad Web
    • Plugins de WordPress
    • Solución errores web
    • Hosting & Rendimiento Web
  • WordPress
    • Todo sobre WordPress
    • Plugins de WordPress
    • Desarrollo Web y Plugins
    • IA y Automatización web
    • WooCommerce
    • Hosting y Rendimiento Web
    • Ciberseguridad y Seguridad Web
    • Solución de errores web
    • Tiendas online y Funnels
  • Sobre Plugins
    • Yoast Seo
    • Woocommerce
    • Rank Math SEO
    • AI Engine
    • WP Rocket
    • WPCode
    • WP Translate Master
    • CartBounty
    • WP SEO Pro
  • Herramientas
    • Generador de Contraseñas
    • Generador de Código QR
    • Contador de Palabras
    • Formateador JSON
    • Compresor de Vídeo para Web
    • Generador de Firmas de Email
    • Conversor Imagenes a WebP
    • Comprobador de Correos Electrónicos
  • Biblioteca plugins
  • Español ✓
  • English
  • 🇨🇳 中文(简体)
  • Français
  • Deutsch
  • Italiano
Historial
  • Worpdress
  • Plugins wordpress
  • Crear pagina web
  • Woocommerce
  • Trucos wordpress
  • Ver todo
BiblioWebBiblioWeb
Redimensionador de fuentesAa
  • Historial de Noticias
Buscar
  • Inicio
  • Categorias
    • Desarrollo Web y Plugins
    • IA & Automatización web
    • Ciberseguridad y Seguridad Web
    • Plugins de WordPress
    • Woocommerce
    • Hosting & Rendimiento Web
    • Solución de problemas y errores web
    • Tiendas online & Embudos de Ventas (Funnels)
  • WordPress
    • Todo sobre WordPress
    • Plugins de WordPress
    • Desarrollo Web y Plugins
    • IA y Automatización web
    • WooCommerce
    • Hosting y Rendimiento Web
    • Ciberseguridad y Seguridad Web
    • Solución de errores web
    • Tiendas online y Funnels
  • Sobre Plugins
    • Rank Math SEO
    • AI Engine
    • WP Rocket
    • WPCode
    • WP Translate Master
    • CartBounty
    • WP SEO Pro
  • Blog
    • Español ✓
    • English
    • 🇨🇳 中文(简体)
    • Français
    • Deutsch
    • Italiano
  • Mi cuenta
    • Historial de Noticias
  • Herramientas
    • Generador de Contraseñas
    • Generador de Código QR
    • Contador de Palabras
    • Formateador JSON
    • Conversor Imagenes a WebP
    • Comprobador de Correos Electrónicos
    • Compresor de Vídeo para Web
    • Generador de Firmas de Email
Have an existing account? Sign In
Síguenos
© 2026 BiblioWeb — Todos los derechos reservados.
Portada » Blog » Guía del editor de bloques de WordPress (Gutenberg)
Wordpress

Guía del editor de bloques de WordPress (Gutenberg)

Adrián Alcalá
Last updated: 08/08/2026 21:10
Por Adrián Alcalá
Compartir
14 Min Read
Guía del editor de bloques Gutenberg
COMPARTIR

El editor de bloques Gutenberg es, desde WordPress 5.0, la forma nativa de crear contenido en la plataforma: cada párrafo, imagen, título o botón es una pieza independiente (un bloque) que puedes mover, configurar y combinar para maquetar páginas completas sin escribir código ni instalar constructores externos. A muchos usuarios el cambio desde el editor clásico les descolocó en su día, pero la realidad de 2026 es que Gutenberg ha madurado hasta convertirse en una herramienta seria de maquetación: columnas, patrones prediseñados, bloques reutilizables y un control fino de tipografía, color y espaciado que hace innecesarios muchos plugins. En esta guía aprenderás a manejar el editor de bloques con soltura: la interfaz y sus atajos, los bloques esenciales y cómo configurarlos, la maquetación con columnas y grupos, los patrones y bloques sincronizados que multiplican tu productividad, y los trucos que usan quienes publican a diario para trabajar más rápido que con cualquier editor clásico.

Contents
La interfaz del editor de bloques Gutenberg: dónde está cada cosaLos bloques esenciales y cómo sacarles partidoMaquetar con columnas, grupos y filasPatrones y bloques sincronizados: deja de repetirteTrucos de productividad para el día a díaGutenberg frente a los constructores visualesPreguntas frecuentesConclusión

La interfaz del editor de bloques Gutenberg: dónde está cada cosa

Al crear una entrada o página nueva te encuentras tres zonas principales:

  • El lienzo central, donde escribes y ves el contenido tal como quedará (o muy parecido, según tu tema).
  • La barra superior, con el insertador de bloques (el botón +), deshacer/rehacer, la vista de lista (esencial en composiciones complejas), y a la derecha los botones de guardar, previsualizar y publicar.
  • La barra lateral de ajustes, que alterna entre los ajustes del documento (categorías, imagen destacada, extracto, URL) y los del bloque seleccionado (color, tipografía, espaciado). Se muestra u oculta con el icono del engranaje.

Además, al seleccionar cualquier bloque aparece sobre él una barra de herramientas flotante con sus acciones rápidas: cambiar de tipo, alinear, mover arriba o abajo, y el menú de tres puntos con opciones como duplicar, copiar o convertir en patrón.

La forma más rápida de trabajar no es el ratón, sino el teclado. Escribe / al inicio de una línea vacía seguido del nombre del bloque (/imagen, /tabla, /columnas) y lo insertarás sin tocar el insertador. Otros atajos que merecen memoria muscular:

  • Ctrl + Shift + D: duplicar el bloque seleccionado.
  • Ctrl + Alt + T: insertar un bloque antes del actual.
  • Ctrl + Shift + Alt + M: alternar entre editor visual y editor de código.
  • ## + espacio: convierte la línea en un título H2 (### para H3, y así sucesivamente).

Los bloques esenciales y cómo sacarles partido

Gutenberg trae decenas de bloques, pero el 90 % del trabajo diario se hace con unos pocos. Conocer sus opciones a fondo marca la diferencia:

Párrafo y Título

Los dos pilares. En la barra lateral puedes ajustar tamaño tipográfico, color de texto y fondo, y letra capital. Con los títulos, respeta la jerarquía SEO: un solo H1 (el título de la entrada), H2 para secciones y H3 para subsecciones. Si trabajas el posicionamiento, un plugin SEO te avisará de estos detalles; tienes nuestra guía para instalar y configurar Yoast SEO en WordPress si aún no lo has hecho.

También te podría interesar

Notion vs. Airtable: Optimizando las Herramientas de Productividad para Agencias Web
Cómo usar la IA en WordPress para mejorar tu SEO y tu contenido
Cómo instalar WordPress con IA paso a paso
Cómo actualizar WordPress de forma segura (núcleo, tema y sin sustos)

Imagen y Galería

El bloque Imagen permite alineación (incluidas ancho completo y ancho amplio si el tema lo soporta), enlace, texto alternativo y redondeo de esquinas. Sube siempre imágenes optimizadas: el peso de las fotos es la causa número uno de webs lentas, y convertirlas antes a formato moderno con un conversor de imágenes a WebP reduce el tamaño hasta un 80 % sin pérdida visible.

Lista, Cita y Tabla

Las listas admiten anidación y estilo numerado u ordenado; las tablas permiten cabecera, pie y celdas de ancho fijo. Para contenidos comparativos, una tabla bien usada mejora la legibilidad y tiene premio en los resultados enriquecidos de Google.

Botones, Separador y Espaciador

El bloque Botones crea llamadas a la acción con colores, bordes y radios configurables sin CSS. El Espaciador (altura regulable en píxeles) resuelve esos huecos verticales que antes requerían trucos.

Medios y texto, y Archivo HTML personalizado

Medios y texto coloca imagen y texto en dos columnas responsivas con un clic. Y cuando necesitas incrustar algo exótico, el bloque HTML personalizado acepta cualquier código: es la válvula de escape para casos límite.

Maquetar con columnas, grupos y filas

Aquí es donde el editor de bloques Gutenberg pasa de editor de texto a herramienta de diseño:

Columnas

El bloque Columnas divide el ancho en 2 a 6 columnas con proporciones predefinidas (50/50, 30/70…) o personalizadas en porcentaje. Dentro de cada columna puedes insertar cualquier bloque, incluidas otras columnas. En móvil se apilan automáticamente en vertical.

Grupo

El bloque Grupo envuelve varios bloques en un contenedor con fondo, borde, padding y margen propios: es la forma de crear «cajas» destacadas (un aviso, una oferta, un resumen) sin plugins. Selecciona varios bloques y usa Agrupar desde la barra de herramientas.

Fila y Pila

Variantes del grupo con disposición horizontal (Fila) o vertical (Pila) basadas en flexbox: perfectas para alinear un icono junto a un texto o una serie de logotipos.

Merece mención aparte el ancho amplio y el ancho completo: si tu tema los soporta, los bloques de imagen, cubierta, grupo y columnas pueden extenderse más allá de la columna de texto e incluso ocupar todo el ancho de la pantalla. Es el recurso que da aspecto «de diseño profesional» a una página: alterna secciones a ancho completo con fondo de color y contenido centrado, y tendrás una landing digna sin tocar una línea de CSS.

Un consejo de flujo de trabajo: en composiciones anidadas (grupos dentro de columnas dentro de grupos) seleccionar el bloque correcto con el ratón es frustrante. Abre la vista de lista de la barra superior: verás el árbol completo de bloques y podrás seleccionar y arrastrar cualquiera con precisión total.

Patrones y bloques sincronizados: deja de repetirte

Las dos funciones que más productividad aportan a quien publica con frecuencia:

Patrones

Un patrón es una composición prediseñada de bloques (una cabecera con llamada a la acción, una parrilla de servicios, una sección de preguntas frecuentes) que insertas y luego personalizas. WordPress incluye una biblioteca oficial y muchos temas añaden los suyos. También puedes crear los tuyos: selecciona los bloques, menú de tres puntos, Crear patrón. Si un diseño te queda bien una vez, conviértelo en patrón y no vuelvas a maquetarlo desde cero.

Bloques sincronizados

Al crear un patrón puedes marcarlo como sincronizado: entonces todas sus copias son la misma entidad, y editarlo en un sitio lo actualiza en todas las páginas donde aparece. Es la herramienta perfecta para elementos repetidos que cambian con el tiempo: una caja de autor, un aviso legal, una llamada a la acción de campaña. El día que cambie tu oferta, la editas una vez y toda la web se actualiza.

Función Qué es Cuándo usarla
Patrón (no sincronizado) Plantilla de bloques que se copia Diseños que reutilizas pero personalizas en cada uso
Patrón sincronizado Bloque único compartido entre páginas Elementos idénticos en muchas páginas que deben actualizarse a la vez
Grupo con estilos Contenedor con diseño propio Cajas puntuales que no vas a repetir

Trucos de productividad para el día a día

  1. Escribe primero, maqueta después. Redacta todo el contenido en párrafos y títulos, y solo al final añade imágenes, columnas y cajas. Mezclar redacción y diseño duplica el tiempo.
  2. Pega desde Word o Google Docs sin miedo. Gutenberg limpia el formato y convierte títulos, listas y negritas en bloques correctos automáticamente.
  3. Arrastra imágenes directamente desde una carpeta de tu ordenador al lienzo: se suben y se insertan solas.
  4. Convierte bloques entre tipos. Un párrafo puede convertirse en cita, título o lista desde su barra de herramientas, sin reescribir nada.
  5. Usa «Copiar estilos» y «Pegar estilos» (menú de tres puntos del bloque) para replicar color, tipografía y espaciado entre bloques.
  6. Controla la longitud del contenido. Para artículos SEO conviene vigilar la extensión total; una pasada por el contador de palabras y caracteres te dice al momento si llegas al objetivo.
  7. Bloquea bloques críticos. Desde el menú del bloque, Bloquear impide moverlo o eliminarlo por accidente: útil en webs que editan varias personas.

Gutenberg frente a los constructores visuales

La pregunta inevitable: ¿sigue haciendo falta un constructor tipo Elementor o Divi? Depende del proyecto. Gutenberg gana en velocidad de carga (genera HTML limpio, sin capas extra de CSS y JavaScript), en estabilidad a largo plazo (es parte del núcleo, no un plugin que pueda abandonarse) y en rapidez de edición para contenido editorial. Los constructores siguen ofreciendo más control de diseño al píxel, efectos visuales avanzados y plantillas comerciales más espectaculares.

Como criterio general: para blogs, medios, documentación y webs corporativas con mucho contenido, Gutenberg es hoy la opción más sensata; para landings muy diseñadas o clientes que exigen efectos visuales complejos, un constructor puede justificarse. Ten en cuenta también que el resultado visual de Gutenberg depende mucho del tema activo: un tema moderno preparado para bloques multiplica sus posibilidades, y en nuestra guía sobre cómo elegir el tema perfecto para tu web WordPress explicamos en qué fijarse.

Preguntas frecuentes

¿Puedo volver al editor clásico de WordPress?

Sí, el plugin oficial Classic Editor sigue disponible y mantenido. Pero salvo casos muy concretos (flujos de trabajo heredados, plugins incompatibles), hoy es mejor invertir ese esfuerzo en aprender el editor de bloques: todo el desarrollo presente y futuro de WordPress gira en torno a él.

¿El editor de bloques Gutenberg es malo para el SEO?

Al contrario. Genera HTML semántico y ligero, favorece los encabezados jerárquicos y se integra con todos los plugins SEO. Una página maquetada con bloques nativos suele cargar más rápido que su equivalente hecha con un constructor visual, y la velocidad es factor de posicionamiento.

¿Qué pasa con mis entradas antiguas del editor clásico?

Se muestran dentro de un «bloque clásico» que conserva su contenido intacto. Puedes dejarlas así indefinidamente o convertirlas a bloques con la opción Convertir a bloques, que separa automáticamente párrafos, títulos e imágenes. Revisa el resultado tras convertir, especialmente si usaban shortcodes o HTML a medida.

¿Necesito plugins de bloques adicionales?

Para empezar, no: los bloques nativos cubren la mayoría de necesidades. Si echas en falta bloques concretos (acordeones, tablas de precios, testimonios), suites como Spectra o Stackable los añaden. Instala una sola de estas suites, no varias: cada una carga sus propios recursos y duplicarlas penaliza el rendimiento.

Conclusión

El editor de bloques Gutenberg ha recorrido un largo camino desde su estreno: lo que empezó como un editor polémico es hoy una herramienta de maquetación completa, rápida y perfectamente integrada en WordPress. La curva de aprendizaje real es corta: interfaz, media docena de bloques esenciales, columnas y grupos para maquetar, y patrones para no repetir trabajo. Con esos fundamentos y los atajos de teclado, publicar contenido bien diseñado se vuelve cuestión de minutos. Nuestro consejo es práctico: en tu próxima entrada, prueba a resolver con bloques nativos lo que antes hacías con shortcodes o plugins de maquetación. Lo más probable es que descubras que el editor que WordPress trae de serie era la herramienta que llevabas tiempo buscando.

Compartir este artículo
Correo electrónico Copiar enlace Imprimir
PorAdrián Alcalá
Follow:
Adrián Alcalá es desarrollador WordPress y consultor SEO, autor del plugin WP Translate y creador de BiblioWeb. Desde aquí comparte guías, tutoriales y herramientas gratuitas para quienes crean, optimizan y posicionan páginas web. Lleva años ayudando a negocios de toda España a sacar el máximo partido a WordPress, y todo lo que publica está probado en proyectos reales.
Artículo anterior Error 500 en WordPress: causas y soluciones Error 500 en WordPress: qué es y cómo solucionarlo
Artículo siguiente Qué es un child theme de WordPress y cómo crearlo Qué es un child theme en WordPress y cómo crearlo
como instalar wordpress - ¡Tu primera web en marcha! 🎉 Cómo instalar WordPress sin estrés y con la confianza de un experto (
¡Tu primera web en marcha! 🎉 Cómo instalar WordPress sin estrés y con la confianza de un experto (¡Te lo ponemos fácil!).
Wordpress
como instalar wordpress - ¿Quieres saber cómo instalar WordPress como un PRO? 🚀 Guía definitiva para elegir el hosting perfe
¿Quieres saber cómo instalar WordPress como un PRO? 🚀 Guía definitiva para elegir el hosting perfecto (¡y que tu web vuele!)
Wordpress
Mejores recursos para aprender WordPress
Los mejores recursos para aprender WordPress en español
Wordpress
como instalar wordpress - ¡Adiós al miedo! Cómo instalar WordPress en tu propio servidor local (¡Perfecto para experimentar s
¡Adiós al miedo! Cómo instalar WordPress en tu propio servidor local (¡Perfecto para experimentar sin riesgos y crear tu #CrearPaginaWeb!)
Wordpress
Anuncio

También te puede interesar

WordPress.com vs WordPress.org: comparativa de las dos plataformas
Wordpress

WordPress.com vs WordPress.org: diferencias y cuál elegir

08/08/2026
Cómo poner WordPress en modo mantenimiento
Wordpress

Cómo poner WordPress en modo mantenimiento

08/08/2026
Insertar Instagram en WordPress
Wordpress

Cómo insertar Instagram en WordPress (con y sin plugin)

24/08/2026
Tendencias WordPress 2026
Wordpress

Tendencias WordPress 2026: lo que viene y cómo prepararte

24/08/2026
Mostrar más
  • Más Noticias:
  • WordPress
  • Instalar
  • Guía
  • CrearPaginaWeb
  • como instalar wordpress
  • Crear
  • instalación
  • futuro
  • Descubre
  • Yoast
  • Complementos
  • trucos
  • wordpress instalacion
  • Adiós
  • Pasarelas
  • página
  • Crear página web
  • truco
  • Error
  • Construcción
BiblioWeb

Biblioweb.es

Actualidad de tecnología web

Información en la que puedes confiar: guías y soluciones prácticas de tecnología web — WordPress, plugins, ciberseguridad, hosting, rendimiento y solución de errores.

Rss

Enlaces de interés

  • Sobre nosotros
  • Contacto
  • Herramientas gratuitas
  • Pluginteca

¡Suscríbete ahora para recibir actualizaciones en tiempo real sobre las últimas noticias!

Legal

  • Aviso Legal
  • Términos y Condiciones
  • Política de cookies
  • Política de Privacidad

Ultimas novedades

como instalar wordpress - ¡Tu primera web en marcha! 🎉 Cómo instalar WordPress sin estrés y con la confianza de un experto (

¡Tu primera web en marcha! 🎉 Cómo instalar WordPress sin estrés y con la confianza de un experto (¡Te lo ponemos fácil!).

25/08/2026
Seguir leyendo
como instalar wordpress - ¿Quieres saber cómo instalar WordPress como un PRO? 🚀 Guía definitiva para elegir el hosting perfe

¿Quieres saber cómo instalar WordPress como un PRO? 🚀 Guía definitiva para elegir el hosting perfecto (¡y que tu web vuele!)

24/08/2026
Seguir leyendo

© 2026 BiblioWeb — Todos los derechos reservados.

Gestionar consentimiento
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios (no) personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o los ID's únicos en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
  • Administrar opciones
  • Gestionar los servicios
  • Gestionar {vendor_count} proveedores
  • Leer más sobre estos propósitos
Ver preferencias
  • {title}
  • {title}
  • {title}
Welcome to Foxiz
Username or Email Address
Password

Lost your password?