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
  • Categorie
    • Desarrollo Web y Plugins
    • IA & Automatización web
    • Ciberseguridad y Seguridad Web
    • Plugins WordPress
    • Solución errores web
    • Hosting & Rendimiento Web
  • WordPress
    • Todo sobre WordPress
    • Plugins 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
Font ResizerAa
  • Historial de Noticias
Search
  • Inicio
  • Categorias
    • Desarrollo Web y Plugins
    • IA & Automatización web
    • Ciberseguridad y Seguridad Web
    • Plugins WordPress
    • Woocommerce
    • Hosting & Rendimiento Web
    • Solución de problemas y errores web
    • Tiendas online & Embudos de Ventas (Funnels)
  • WordPress
    • Todo sobre WordPress
    • Plugins 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
Follow US
© 2026 BiblioWeb — Todos los derechos reservados.
Portada » Blog » Guida dell'editor a blocchi di WordPress (Gutenberg)
Wordpress

Guida dell'editor a blocchi di WordPress (Gutenberg)

Adrián Alcalá
Last updated: 08/08/2026 21:10
By Adrián Alcalá
Share
14 Min Read
Guida all'editor a blocchi Gutenberg
SHARE

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 repetirteTrucchi di produttività per la vita quotidianaGutenberg contro i costruttori visualiPreguntas 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.

You Might Also Like

Automatización Web: ¿n8n o Zapier? La elección estratégica para tu agencia WordPress
Cómo insertar Instagram en WordPress (con y sin plugin)
Cómo instalar WordPress rápido: guía definitiva paso a paso
WordPress.com vs WordPress.org: diferencias y cuál elegir

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: allora tutte le sue copie sono la stessa entità, e modificarlo in un punto lo aggiorna in tutte le pagine in cui appare. È lo strumento perfetto per elementi ripetuti che cambiano nel tempo: una casella autore, un avviso legale, una call to action di una campagna. Il giorno in cui la tua offerta cambia, la modifichi una volta e l'intero sito web si aggiorna.

Funzione Cos'è Quando usarlo
Pattern (non sincronizzato) Modello di blocchi che si copia Design che riutilizzi ma personalizzi ad ogni uso
Pattern sincronizzato Blocco unico condiviso tra le pagine Elementi identici in molte pagine che devono essere aggiornati contemporaneamente
Gruppo con stili Contenitore con design personalizzato Caselle specifiche che non ripeterai

Trucchi di produttività per la vita quotidiana

  1. Scrivi prima, impagina dopo. Scrivi tutto il contenuto in paragrafi e titoli, e solo alla fine aggiungi immagini, colonne e caselle. Mescolare redazione e design raddoppia il tempo.
  2. Incolla da Word o Google Docs senza paura. Gutenberg pulisce il formato e converte automaticamente titoli, liste e grassetti in blocchi corretti.
  3. Trascina le immagini direttamente da una cartella del tuo computer alla tela: vengono caricate e inserite automaticamente.
  4. Converti i blocchi tra i tipi. Un paragrafo può essere convertito in citazione, titolo o lista dalla sua barra degli strumenti, senza riscrivere nulla.
  5. Usa “Copiar estilos” y “Pegar estilos” (menu a tre punti del blocco) per replicare colore, tipografia e spaziatura tra i blocchi.
  6. Controlla la lunghezza del contenuto. Per gli articoli SEO è opportuno monitorare la lunghezza totale; un passaggio attraverso il contatore di parole e caratteri ti dice subito se raggiungi l'obiettivo.
  7. Blocca i blocchi critici. Dal menu del blocco, Blocca impedisce di spostarlo o eliminarlo per errore: utile nei siti web modificati da più persone.

Gutenberg contro i costruttori visuali

La domanda inevitabile: è ancora necessario un costruttore tipo Elementor o Divi? Dipende dal progetto. Gutenberg vince in velocità di caricamento (genera HTML pulito, senza strati extra di CSS e JavaScript), in stabilità a lungo termine (fa parte del core, non un plugin che può essere abbandonato) e in rapidità di editing per i contenuti editoriali. I costruttori continuano a offrire più controllo del design al pixel, effetti visivi avanzati e modelli commerciali più spettacolari.

Come criterio generale: per blog, media, documentazione e siti web aziendali con molti contenuti, Gutenberg è oggi l'opzione più sensata; per landing page molto elaborate o clienti che richiedono effetti visivi complessi, un costruttore può essere giustificato. Tieni presente anche che il risultato visivo di Gutenberg dipende molto dal tema attivo: un tema moderno preparato per i blocchi moltiplica le sue possibilità, e nella nostra guida su come scegliere il tema perfetto per il tuo sito WordPress spieghiamo a cosa prestare attenzione.

Preguntas frecuentes

Posso tornare all'editor classico di WordPress?

Sì, il plugin ufficiale Classic Editor è ancora disponibile e mantenuto. Ma salvo casi molto specifici (flussi di lavoro ereditati, plugin incompatibili), oggi è meglio investire quello sforzo nell'apprendere l'editor a blocchi: tutto lo sviluppo presente e futuro di WordPress ruota attorno ad esso.

L'editor a blocchi Gutenberg è dannoso per la SEO?

Al contrario. Genera HTML semantico e leggero, favorisce le intestazioni gerarchiche e si integra con tutti i plugin SEO. Una pagina impaginata con blocchi nativi di solito si carica più velocemente del suo equivalente realizzato con un costruttore visuale, e la velocità è un fattore di posizionamento.

Cosa succede ai miei vecchi articoli dell'editor classico?

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 Converti in blocchi, che separa automaticamente paragrafi, titoli e immagini. Controlla il risultato dopo la conversione, specialmente se usavano shortcode o HTML personalizzato.

Ho bisogno di plugin a blocchi aggiuntivi?

Per cominciare, no: i blocchi nativi coprono la maggior parte delle esigenze. Se ti mancano blocchi specifici (fisarmoniche, tabelle dei prezzi, testimonianze), suite come Spectra o Stackable li aggiungono. Installa una sola di queste suite, non più di una: ognuna carica le proprie risorse e duplicarle penalizza le prestazioni.

Conclusión

L'editor a blocchi Gutenberg ha fatto molta strada dal suo debutto: quello che è iniziato come un editor controverso è oggi uno strumento di impaginazione completo, veloce e perfettamente integrato in WordPress. La curva di apprendimento reale è breve: interfaccia, mezza dozzina di blocchi essenziali, colonne e gruppi per l'impaginazione, e pattern per non ripetere il lavoro. Con queste basi e le scorciatoie da tastiera, pubblicare contenuti ben progettati diventa questione di minuti. Il nostro consiglio è pratico: nel tuo prossimo articolo, prova a risolvere con i blocchi nativi ciò che prima facevi con shortcode o plugin di impaginazione. Molto probabilmente scoprirai che l'editor che WordPress offre di serie era lo strumento che cercavi da tempo.

Share This Article
Email Copy Link Print
ByAdriá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.
Previous Article Errore 500 in WordPress: cause e soluzioni Error 500 en WordPress: qué es y cómo solucionarlo
Next Article Cos'è un child theme di WordPress e come 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
Migliori risorse per imparare 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
- Advertisement -

You May also Like

Sicurezza WordPress - Stop Hacker Il tuo WordPress blindato in minuti: Installa e configura Wordfence come un pro (e dimentica
Wordpress

Cómo instalar y configurar Wordfence para proteger WordPress

08/08/2026
La comunità WordPress e come partecipare
Wordpress

La comunidad WordPress: WordCamps, meetups y cómo participar

24/08/2026
Alternativas a WordPress: — ilustración sobre Alternativas a WordPress: ¿Qué nos dice la comparativa Webflow vs. Squarespace?
Wordpress

Alternativas a WordPress: ¿Qué nos dice la comparativa Webflow vs. Squarespace?

24/08/2026
Wordpress - El futuro ya está aquí: Domina la IA para crear títulos de blog que disparen tu WordPress (Y olvídate de la comp
IA & Automatización webWordpress

Cómo crear títulos de blog con IA para WordPress

08/08/2026
Show More
  • More News:
  • WordPress
  • Instalar
  • Guía
  • CreareSitoWeb
  • como instalar wordpress
  • Crear
  • instalación
  • futuro
  • Descubre
  • Yoast
  • Plugins
  • 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
  • Contatti
  • Herramientas gratuitas
  • Pluginteca

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

Legale

  • Note Legali
  • Termini e Condizioni
  • Informativa sui cookie
  • Informativa sulla privacy

Ultime novità

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
Continua a leggere
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
Continua a leggere

© 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 Always active
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.
  • Manage options
  • Manage services
  • Manage {vendor_count} vendors
  • Read more about these purposes
Ver preferencias
  • {title}
  • {title}
  • {title}
Welcome to Foxiz
Username or Email Address
Password

Lost your password?