Guida pratica a Gutenberg per web designer alle prime armi

Se stai iniziando a lavorare come web designer freelance o vuoi realizzare da sola i tuoi primi siti WordPress, ti sarai sicuramente imbattuta nell’editor Gutenberg. Introdotto ufficialmente da WordPress nel 2018, Gutenberg ha rivoluzionato il modo di costruire pagine web: non più un semplice campo di testo, ma un sistema visuale a blocchi che ti permette di progettare il layout direttamente nell’area di editing, in modo più intuitivo e flessibile.

A differenza dei page builder più noti come Elementor o Divi, Gutenberg è integrato nativamente in WordPress, è più leggero e garantisce una maggiore compatibilità a lungo termine. Questo lo rende ideale per i web designer che vogliono offrire siti più veloci, accessibili e manutenibili, senza dipendere da soluzioni esterne.

In questa guida troverai una panoramica completa e pratica su come usare Gutenberg se sei all’inizio. Ti spiegherò come funzionano i blocchi, quali sono i più utili per costruire pagine efficaci, e ti darò alcuni consigli strategici per sfruttare al meglio le sue potenzialità senza complicarti la vita. Non servono conoscenze avanzate di codice: solo un po’ di curiosità e voglia di sperimentare.

Perché usare Gutenberg se sei un web designer all’inizio (ma non solo!)

• È integrato in WordPress, quindi non devi installare plugin extra.
• È più leggero rispetto a molti page builder.
• Ti aiuta a imparare la struttura HTML e CSS grazie all’organizzazione a blocchi.
• È compatibile con tanti temi moderni e plugin.
• Ti permette di offrire siti web responsive e performanti ai tuoi clienti, senza appesantirli.

Blocchi base di Gutenberg: icone e spiegazioni

Paragrafo

Serve per inserire testo normale. Puoi modificare stile, grandezza, colore e spaziatura.

Titolo

Inserisce titoli, H1, H2, H3, H4, H5,H6, fondamentali per la struttura SEO e la leggibilità della pagina.

Immagine

Carica e inserisce un’immagine singola. Puoi aggiungere alt text e regolare l’allineamento.

Galleria

Mostra più immagini in griglia. Ideale per portfolio o sezioni visive.

Elenco (Lista)

Crea liste puntate o numerate, utili per ordinare concetti e step. Ricorda che gli elenchi puntati piacciono tanto a google!

Citazione

Inserisce una frase in evidenza con stile tipografico distinto. Personalmente non lo uso quasi mai.

Pulsante

Aggiunge una call-to-action con link, colore e forma personalizzabili.

Copertina (Cover)

Inserisce una sezione visiva con immagine di sfondo o colore di sfondo e testo sovrapposto. Ideale per hero section. Io la uso tantissimo.

Colonne

Divide lo spazio in più colonne responsive per layout più avanzati.

Gruppo

Raggruppa più blocchi in una sezione unica, utile per impaginare sezioni complesse.

Separatore

Inserisce una linea divisoria tra sezioni per migliorare la leggibilità.

Tabella

Crea tabelle semplici con righe e colonne. Utile per listini, confronti o dati.

File

Permette di caricare un file da scaricare (PDF, doc, ecc.) con pulsante di download.

Video

Incorpora video da media library o da YouTube/Vimeo.

Audio

Per caricare o incorporare file audio (podcast, registrazioni, ecc.).

Spazio vuoto

Aggiunge uno spazio bianco tra i blocchi, regolabile in altezza. Perfetto per gestire il respiro tra le sezioni.

HTML Personalizzato

Per inserire codice HTML su misura, se vuoi aggiungere widget, non permette l’inserimento di PHP.

Pattern personalizzati (ex blocchi riutilizzabili)

I vecchi blocchi riutilizzabili ora si chiamano Pattern salvati (o “Blocchi modello personalizzati”). Cambia il nome, ma il concetto resta potente: ti permettono di creare e salvare sezioni riutilizzabili in tutto il sito, mantenendo coerenza e risparmiando tempo.

Quando usare i pattern personalizzati?

Per CTA ricorrenti (es. “Contattami per un preventivo personalizzato”), per moduli contatto o box informativi sempre uguali o anche per intestazioni grafiche o titoli con particolari stili.

Ho scritto un articolo dedicato ai blocchi personalizzati di Gutenberg

Leggi l’articolo

Come creare i pattern in wordpress?

1. Crea un layout con i blocchi che ti servono (anche complessi).
2. Seleziona tutto → clic sui tre puntini → “Crea pattern”.
3. Assegna un nome, scegli se salvarlo come sincronizzato (modifiche propagate) o non sincronizzato (indipendente).
4. Lo ritroverai nella libreria Pattern, pronto all’uso.

Plugin per blocchi avanzati

Gutenberg va benissimo così com’è, ma se vuoi creare layout più flessibili, dinamici e visivamente curati… i plugin che aggiungono blocchi avanzati sono una svolta.

Io li considero strumenti da lavoro veri e propri: non plugin “carini da avere”, ma risorse che scelgo con attenzione per ogni progetto. Non servono mille blocchi, ma quelli giusti — quelli che ti fanno risparmiare tempo e ti permettono di costruire sezioni belle, funzionali e leggere.

Qui sotto trovi quelli che uso (o ho testato), con i blocchi che offrono e i motivi per cui secondo me vale la pena provarli.

Attenzione però: attiva solo quello che ti serve e se il plugin che hai scelto lo consente, attiva solo i blocchi che davvero usi, e non mescolare troppi plugin insieme… uno è già abbastanza. Il tuo sito (e la SEO) ti ringrazieranno.

Gutenberg: i dubbi più comuni (e le risposte che ti servono)

Gutenberg può sembrare ostico all’inizio, soprattutto se arrivi da page builder visivi o da temi molto strutturati. Ma una volta che ci prendi la mano, ti accorgerai che è uno strumento potente, leggero e davvero flessibile.
Conoscere i blocchi base e capire come potenziarlo con i plugin giusti è il primo passo per realizzare siti su misura, belli da vedere e veloci da navigare.
Soprattutto se, come me, lavori in ottica SEO e vuoi avere controllo pieno sul layout, senza sacrificare le prestazioni.