Gutenberg: errori comuni di chi lo usa senza una logica

Gutenberg è un po’ come una cucina nuova di zecca: bella, moderna, piena di sportelli… e tu che cerchi il cassetto delle posate aprendo a caso, finché non trovi il microonde dentro al forno.

Se stai usando Gutenberg “a sentimento” (cioè: aggiungo blocchi, sposto cose, copio e incollo, poi qualcosa si rompe e incolpo WordPress), sappi che non sei sola. È normale: Gutenberg non è difficile, è solo molto libero. E la libertà, senza un minimo di logica, si trasforma in una pagina che:

• visivamente sembra ok… finché non la guardi da mobile
• è un incubo da modificare
• non aiuta Google a capire cosa stai dicendo
• ti fa perdere tempo ogni volta che devi “solo cambiare una frase”

In questo articolo ti porto gli errori più comuni che vedo quando Gutenberg viene usato senza struttura (da chi sta iniziando, ma anche da chi scrive articoli per il proprio blog). E soprattutto: ti lascio soluzioni pratiche, esempi e piccole regole che ti salvano la vita.

Obiettivo: farti usare Gutenberg con più testa, meno nervi, e un risultato più pulito.

Parti senza una scaletta e finisci con un muro di blocchi

Sintomo: inizi a scrivere, aggiungi blocchi man mano, poi ti ritrovi con 40 elementi tutti uguali e zero gerarchia.

Perché è un problema: Gutenberg premia la struttura. Se non sai dove stai andando, il layout diventa casuale. E quando devi aggiornare qualcosa… inizi a scrollare come se stessi cercando il telecomando sotto i cuscini.

Soluzione pratica: fai una mini scaletta prima di aprire WordPress
Ti bastano 5 minuti, sul blocco note:

• Titolo (H1)
• 4–7 sezioni (H2)
• sotto ogni sezione: 2–4 punti chiave

Esempio rapido, scaletta articolo:

• H2: Errore 1 – Titoli a caso
• H2: Errore 2 – Spaziature fatte con invio
• H2: Errore 3 – Immagini buttate dentro senza criterio
• H2: Errore 4 – Colonne ovunque
• H2: Checklist finale

Usi i titoli (H2, H3, H4) come fossero dettati solo dalla dimensione grafica

Sintomo: metti un H2 perché lo vuoi grosso, un H3 perché “ci sta bene”, e magari salti da H2 a H4 perché sì.

Perché è un problema: i titoli non sono decorazioni. Sono una mappa: per chi legge, per l’accessibilità, per Google.

Regola pratica facile:

• H1 solo il titolo dell’articolo (di solito lo gestisce WordPress)
• H2 i capitoli principali
• H3 sotto-capitoli dentro un H2
• H4 rarissimo, usalo solo se serve davvero dettagliare

Esempio corretto:

• H2: Come scegliere le immagini
  • H3: Formato e dimensioni
  • H3: Alt text e accessibilità

Crei spaziature usando “Invio invio invio” (e poi da mobile piangi)

Sintomo: per fare spazio tra paragrafi o sezioni, premi invio più volte. Funziona… finché non cambia qualcosa.

Perché è un problema: gli spazi “finti” non sono controllabili, cambiano tra desktop e mobile, e rendono la pagina instabile.

Soluzione pratica: (in base a come lavori)

• usa il blocco Spazio vuoto per distanze verticali
• oppure imposta margin/padding nei blocchi (se il tema lo permette)
• se usi Gruppi/Contenitori, lavora di padding invece che di righe vuote

Mini regola:
Se stai premendo invio per distanziare i tuoi contenuti, fermati e chiediti invece: “che blocco mi serve per farlo in modo pulito?”

Metti tutto in un unico blocco o fai copia-incolla selvaggio da word o Google Docs

Sintomo: incolli un testo intero, poi lo lasci in un blocco unico. Oppure incolli da Docs e Gutenberg porta dentro formattazioni strane.

Perché è un problema: perdi controllo e importi stili che sporcano l’impaginazione (spazi strani, grassetti casuali, caratteri speciali…).

Soluzioni pratiche:

• se scrivi in Docs: incolla senza formattazione (di solito Ctrl+Shift+V)
• copia prima il contenuto in un file txt e poi da li nel tuo blocco
• spezza il contenuto in blocchi logici: paragrafi, liste, citazioni, box informativi (piacciono al tuo utente e anche a Google!)
• usa il blocco Elenco, non trattini scritti a mano

Esempio tipico da sistemare:

• testo lungo → spezzalo ogni 3–5 righe
• inserisci una lista se hai più di 3 concetti consecutivi
• inserisci un box “In breve” quando stai spiegando un passaggio

Usi il blocco Colonne per tutto

Sintomo: Le colonne sono utili… ma spesso diventano la scorciatoia che rovina la pagina. Fai due colonne per un testo breve, tre colonne per delle icone, e poi da mobile diventa una torre di Pisa.

Perché è un problema: su mobile le colonne si impilano. Se non progettate bene, l’ordine dei contenuti diventa confuso e la lettura rallenta.

Soluzione pratica:

• usa colonne solo quando hai due contenuti che hanno senso anche impilati
• controlla sempre l’ordine che risulta su mobile
• se devi fare layout complessi, meglio un Gruppo con stile coerente o un pattern

Esempio che funziona:
a sinistra immagine, a destra testo + CTA breve

Esempio che non funziona:
tre colonne con pezzi di una frase o contenuti che si capiscono solo se affiancati (e su mobile diventa un disastro)

Non usi Gruppi e contenitori, e non puoi gestirla a “blocchi” o “fasce”

Sintomo: la pagina è un elenco infinito di elementi uno dopo l’altro. Vuoi spostare una sezione intera? Devi trascinare 12 blocchi. Uno per uno, e rischi di perdere i pezzi.

Perché è un problema: senza contenitori la tua pagina non è strutturata ed è difficile da gestire.

Soluzione pratica, ragiona a fasce o sezioni:

Ogni parte importante della pagina dovrebbe essere un Gruppo o un Container (a seconda del tuo tema/plugin). Dentro ci metti titoli, testo, immagini.

Vantaggi immediati:

• sposti una sezione in un attimo
• applichi sfondo, padding, margin e bordi senza impazzire
• la pagina diventa modulare e più facile da mantenere

Inserisci le immagini senza un vero motivo, senza alt text e coerenza

Sintomo: carichi immagini enormi, le ritagli a occhio, cambi stile ogni volta, e l’alt text… non pervenuto, rischi di rendere le tue pagine pesanti, perdi coerenza visiva e opportunità SEO e accessibilità.

Checklist pratica per le immagini in Gutenberg:

• usa immagini già ottimizzate e leggere (WebP se possibile)
• mantieni uno stile coerente (stessa proporzione, stessi bordi/angoli, colori dominanti)
• alt text: descrivi cosa c’è nell’immagine + contesto utile (senza keyword stuffing)
• se l’immagine è decorativa: alt vuoto (dipende dal caso)
• pensa sempre a chi leggerà la tua pagina, le immagini accompagnano il tuo contenuto, devono supportarlo e rafforzarne i concetti

Non salvi pattern e blocchi riutilizzabili, perdi un sacco di tempo a rifare le stesse cose

Sintomo: ogni articolo ha lo stesso box “Tips”, la stessa conclusione, la stessa CTA… e tu li ricrei ogni volta da zero. Copi, incolli, sistemi stili e spaziature. È come fare la ricetta dallo stesso foglio ogni volta che cucini: funziona, ma è faticoso.

Perché è un problema: sperchi tempo, alzi il rischio di errore e aumenti a dismisura la noia nel costruire le tue pagine. La funzione dei blocchi riutilizzabili (ora chiamati pattern) serve proprio a risolvere questo: progettare una sezione una volta sola, e poi richiamarla facilmente ovunque senza reinventare la ruota.

Soluzione pratica, crea dei pattern per i blocchi che usi spesso:

• box “Tip pratico”
• box “Errore comune”
• box “Checklist”
• CTA finale

Una volta salvati, li trovi nella libreria e li inserisci con un clic, senza dover ripetere gli stessi passaggi ogni volta.

Approfondimento:
Se vuoi, ho scritto una guida completa proprio su come creare e gestire i pattern in Gutenberg, con esempi pratici:
Pattern Gutenberg: guida pratica ai blocchi riutilizzabili di WordPress.

Non controlli l’anteprima su mobile

Sintomo: impagini tutto da desktop, sei soddisfatto, pubblichi. Poi apri la pagina dal telefono… e sembra un’altra storia. Titoli spezzati, spaziature enormi, colonne impilate in modo strano.

Perchè è un problema

Una parte enorme del traffico arriva da mobile. Se la pagina è scomoda da leggere:

• il tempo di permanenza sul sito cala
• la percezione di professionalità scende
• e anche Google non è esattamente entusiasta

Gutenberg ti permette di controllare tablet e mobile con un clic, ma molti non lo fanno. E non è un dettaglio tecnico: è una questione di rispetto verso chi legge.

Approfondimento:
Se vuoi approfondire il tema del responsive e capire perché a volte “su cellulare è tutto sballato”, puoi leggere anche il mio articolo:
Aiuto, il mio sito non funziona su cellulare!

Mini checklist finale: Gutenberg in meno di 2 minuti

Semplici passaggi che ti aiutano nella pratica a ottenere il miglior risultato con Gutenberg.

STRUTTURA

• Ho una gerarchia chiara di H2 e H3?
• Se leggo titoli e sottotitoli riesco a capire di cosa parla l’articolo senza leggere i paragrafi?

LAYOUT

• Le sezioni sono organizzate in Gruppi o Container?
• Ho evitato invii multipli per creare spazio?
• Le colonne hanno senso anche quando si impilano?

CONTENUTO

• I paragrafi sono leggibili (non muri di testo)?
• Ho usato punti elenco quando serviva?
• Le immagini sono coerenti e con alt text sensato?

MOBILE

• Ho controllato anteprima tablet e telefono?
• I titoli restano leggibili?
• La pagina scorre in modo fluido?