GenerateBlocks tutorial italiano: come creare sezioni personalizzate in WordPress

Creare sezioni personalizzate in WordPress non significa per forza installare page builder pesanti, riempire il sito di shortcode o dipendere da layout difficili da mantenere. Con GeneratePress come tema e GenerateBlocks come sistema di costruzione delle sezioni, puoi lavorare direttamente dentro l’editor a blocchi di WordPress, mantenendo una struttura leggera, ordinata e molto più vicina al codice reale del sito.

GenerateBlocks nasce proprio con questa filosofia: pochi blocchi, ma molto flessibili. La documentazione ufficiale descrive GenerateBlocks come uno strumento che permette di imparare pochi blocchi in profondità e usarli per costruire praticamente qualsiasi layout; tra i blocchi principali troviamo Container, Grid, Text, Button, Query, Image e Shape. Inoltre, GenerateBlocks lavora molto bene insieme a GeneratePress, anche se può funzionare anche con altri temi WordPress.

In questo tutorial vediamo come creare sezioni personalizzate in WordPress usando GenerateBlocks, ragionando come farebbe un web designer: struttura, spaziature, gerarchia visiva, responsive design e pulizia del layout.

Perché usare GenerateBlocks per creare sezioni personalizzate

Quando costruisci una pagina WordPress, una delle prime cose da evitare è progettare “a pezzi” senza una logica. Una sezione non è semplicemente un blocco colorato con dentro un titolo e un testo. Una buona sezione deve avere una funzione precisa.

Può servire a presentare un servizio, introdurre un contenuto, creare una hero section, mostrare una griglia di card, inserire una call to action o accompagnare l’utente verso una richiesta di preventivo.

GenerateBlocks è molto adatto a questo tipo di lavoro perché ti permette di controllare:

• larghezza della sezione;
• padding interno;
• margini;
• colori;
• sfondi;
• bordi;
• ombre;
• griglie responsive;
• tipografia;
• pulsanti;
• immagini;
• layout desktop, tablet e mobile.

La cosa interessante è che non sei costretto a usare decine di widget diversi. Lavori con pochi elementi fondamentali e li combini in modo intelligente.

Con GenerateBlocks 2.0 il sistema è stato anche riscritto con grande attenzione alle performance e al controllo del codice. Nel changelog ufficiale viene indicato che i blocchi sono stati riscritti da zero per migliorare performance e controllo, e che l’output frontend viene generato come HTML/CSS statico quando possibile. Questo è un aspetto importante se vuoi costruire un sito WordPress veloce, ordinato e facile da mantenere.

Prima di iniziare: tema, plugin e impostazioni consigliate

Per seguire questo tutorial ti consiglio questa base:

Tema: GeneratePress
Builder: GenerateBlocks
Editor: Gutenberg, cioè l’editor a blocchi nativo di WordPress
Obiettivo: creare sezioni personalizzate senza usare page builder pesanti

Una volta installato GenerateBlocks, quando aggiungi un nuovo blocco dentro una pagina o un articolo, puoi cercare la categoria “GenerateBlocks” e scegliere il blocco di partenza. La documentazione di WordPress.org consiglia espressamente di partire quasi sempre da un Container block.

Qui faccio una piccola precisazione utile: a seconda della versione di GenerateBlocks che stai usando, potresti vedere nomi leggermente diversi. Nelle versioni più recenti il sistema ha introdotto nuovi blocchi come Element, Text, Query, Media e Shape, mentre nelle versioni precedenti potresti trovare ancora Container, Grid, Headline, Button e Image. GenerateBlocks 2.0 mantiene comunque compatibilità con i blocchi della versione 1.x, quindi i vecchi layout non dovrebbero rompersi automaticamente dopo l’aggiornamento.

Per semplificare, in questo articolo userò soprattutto i concetti di Container, Grid, Text, Image/Media e Button, perché sono quelli più facili da capire quando si progetta una sezione.

Come ragionare prima di costruire una sezione

Prima ancora di cliccare su “Aggiungi blocco”, devi chiederti una cosa semplice: a cosa serve questa sezione?

Una sezione può avere obiettivi diversi. Per esempio:

• presentare un servizio;
• spiegare un vantaggio;
• mostrare tre caratteristiche;
• guidare verso un pulsante;
• creare fiducia;
• dividere visivamente due parti della pagina;
• introdurre un contenuto successivo.

Questa fase è importante perché ti evita di creare sezioni belle ma inutili. Nel web design, soprattutto quando lavori su siti professionali, ogni sezione deve aiutare l’utente a capire qualcosa o a compiere un’azione.

Una buona sezione personalizzata di solito ha questa struttura:

Sezione esterna
└── Contenitore interno
    ├── Titolo
    ├── Testo introduttivo
    ├── Griglia / colonne / contenuto
    └── Pulsante o elemento finale

La sezione esterna controlla lo sfondo e lo spazio verticale.
Il contenitore interno controlla la larghezza massima del contenuto.
I blocchi interni costruiscono il contenuto vero e proprio.

Questa distinzione è fondamentale.

Uno degli errori più comuni è usare un solo blocco per fare tutto: sfondo, larghezza, padding, contenuto, colonne e pulsanti. Il risultato diventa difficile da modificare, soprattutto su mobile.

Creare una sezione personalizzata semplice

Partiamo da una sezione classica: titolo, testo e pulsante.

Dentro una pagina WordPress, aggiungi un blocco Container o, nelle versioni più recenti, un blocco equivalente di tipo Element/Container.

Questa sarà la tua sezione esterna.

Imposta questi valori indicativi:

Padding desktop:
top: 90px
right: 20px
bottom: 90px
left: 20px

Background:
colore chiaro oppure gradiente leggero

Larghezza:
full width, se vuoi che lo sfondo occupi tutta la pagina

A questo punto, dentro la sezione esterna, aggiungi un secondo Container. Questo sarà il contenitore interno, quello che impedisce al testo di allargarsi troppo.

Imposta:

Max width: 1200px
Margin left/right: auto

Adesso puoi inserire:

• un blocco Text o Headline per il titolo;
• un blocco Text per il paragrafo;
• un blocco Button per la call to action.

Il titolo potrebbe essere:

Realizzo sezioni WordPress personalizzate, leggere e facili da modificare

Il testo:

Con GeneratePress e GenerateBlocks puoi costruire layout professionali direttamente nell’editor di WordPress, mantenendo controllo, velocità e pulizia visiva.

Il pulsante:

Parlami del tuo progetto

Già con questa struttura hai una sezione pulita, ordinata e facilmente modificabile.

La regola più importante: sezione esterna e contenitore interno

Questa è una delle logiche più importanti quando lavori con GenerateBlocks.

La sezione esterna serve per controllare:

• sfondo;
• colore generale;
• padding verticale;
• eventuali forme decorative;
• separazione dalla sezione precedente e successiva.

Il contenitore interno serve per controllare:

• larghezza massima del contenuto;
• allineamento;
• organizzazione interna;
• griglia;
• leggibilità.

Per esempio, se vuoi creare una sezione con sfondo blu scuro che occupa tutta la larghezza dello schermo, non devi mettere il max-width direttamente sulla sezione esterna. Devi lasciare la sezione esterna full width e mettere il limite di larghezza sul contenitore interno.

La struttura corretta è questa:

Container esterno: sfondo blu, padding verticale, larghezza piena
└── Container interno: max-width 1200px, margin auto
    ├── Titolo
    ├── Testo
    └── Pulsante

Questa logica ti permette di avere uno sfondo pieno, ma un contenuto ben allineato con il resto del sito.

Creare una hero section con GenerateBlocks

La hero section è la prima sezione importante di una pagina. Di solito contiene una promessa chiara, un testo breve e una call to action.

Una buona hero section non deve dire tutto. Deve dire la cosa giusta.

Esempio di struttura:

Container esterno hero
└── Container interno
    └── Grid a 2 colonne
        ├── Colonna sinistra: titolo, testo, pulsanti
        └── Colonna destra: immagine o elemento visuale

Con GenerateBlocks puoi creare questa struttura usando un blocco Grid. Il blocco Grid viene descritto nella documentazione come una scorciatoia per creare layout CSS Grid; di default parte con un contenitore padre e due contenitori figli, ma puoi aggiungere altri blocchi e modificare il layout dalle impostazioni.

Per una hero section desktop puoi usare:

Grid desktop:
2 colonne
60% contenuto testuale
40% immagine
gap: 50px

Su mobile, invece, conviene impilare le colonne:

Grid mobile:
1 colonna
testo sopra
immagine sotto

Esempio di contenuto:

Titolo:
Crea un sito WordPress più veloce, ordinato e professionale

Testo:
Con GeneratePress e GenerateBlocks puoi costruire pagine personalizzate senza appesantire il sito, lavorando direttamente con l’editor nativo di WordPress.

Pulsante primario:
Richiedi un preventivo

Pulsante secondario:
Guarda il portfolio

Qui la cosa importante è non esagerare con gli elementi. Una hero section deve essere chiara, respirare bene e far capire subito dove porti l’utente.

Creare una sezione servizi con card personalizzate

Una delle sezioni più comuni in un sito professionale è quella dedicata ai servizi.

Con GenerateBlocks puoi costruire una griglia di card molto pulita.

La struttura potrebbe essere questa:

Container esterno
└── Container interno
    ├── Titolo sezione
    ├── Testo introduttivo
    └── Grid 3 colonne
        ├── Card 1
        ├── Card 2
        └── Card 3

Ogni card può essere un Container con dentro:

• icona o immagine;
• titolo;
• testo;
• eventuale link.

Esempio di tre card:

Siti WordPress professionali
Realizzo siti web su misura per aziende, professionisti e attività locali, con struttura chiara e contenuti facili da gestire.

Restyling di siti esistenti
Miglioro siti già online intervenendo su layout, esperienza utente, velocità, struttura e comunicazione.

Ottimizzazione tecnica e SEO
Rendo il sito più ordinato, più veloce e più comprensibile per utenti e motori di ricerca.

Per lo stile delle card puoi usare:

Background: #ffffff
Padding: 32px
Border radius: 16px
Box shadow: leggera
Gap nella griglia: 24px

Su desktop puoi usare tre colonne.
Su tablet due colonne.
Su mobile una colonna.

Questa è una scelta semplice ma molto efficace, perché evita card troppo strette sui dispositivi piccoli.

Creare una sezione alternata immagine/testo

Un altro layout molto usato è quello con immagine a sinistra e testo a destra, oppure viceversa.

È perfetto per spiegare un servizio, raccontare un processo o presentare un vantaggio concreto.

Struttura:

Container esterno
└── Container interno
    └── Grid 2 colonne
        ├── Immagine
        └── Testo

Esempio:

Titolo:
Un layout costruito intorno ai contenuti, non il contrario

Testo:
Una sezione efficace non nasce dagli effetti grafici, ma dalla chiarezza. Prima si decide cosa deve capire l’utente, poi si costruisce il layout più adatto per accompagnarlo nella lettura.

Pulsante:
Scopri come lavoro

Qui GenerateBlocks è molto comodo perché puoi gestire separatamente il comportamento responsive. Su desktop mantieni due colonne, su mobile trasformi tutto in una colonna singola.

Un consiglio pratico: su mobile, spesso è meglio mettere prima il testo e poi l’immagine, soprattutto se l’immagine è decorativa. Se invece l’immagine è fondamentale per capire il contenuto, puoi lasciarla prima.

Creare una call to action personalizzata

La call to action è una sezione decisiva. Non deve essere aggressiva, ma deve essere chiara.

Una CTA efficace può stare:

• a metà pagina;
• prima del footer;
• dopo una sezione servizi;
• alla fine di un articolo;
• in una landing page.

Struttura:

Container esterno con sfondo evidente
└── Container interno centrato
    ├── Titolo
    ├── Testo breve
    └── Pulsante

Esempio:

Titolo:
Hai già un’idea per il tuo sito?

Testo:
Raccontami cosa vuoi realizzare. Anche se il progetto è ancora in fase iniziale, possiamo trasformarlo in una struttura chiara, concreta e adatta al tuo pubblico.

Pulsante:
Parlami della tua idea

Questo tipo di testo è più naturale rispetto al classico “Richiedi un preventivo gratuito”. È meno freddo, più umano e funziona bene anche se l’utente non ha ancora deciso tutto.

Dal punto di vista visivo, puoi usare:

Sfondo: blu scuro
Testo: bianco
Padding: 70px 24px
Border radius interno: 24px
Pulsante: bianco con testo blu scuro

Una CTA non deve avere troppi link. Meglio un’azione principale, chiara e visibile.

Come gestire il responsive con GenerateBlocks

Una sezione bella su desktop ma rotta su mobile non è una buona sezione.

Con GenerateBlocks devi sempre controllare almeno tre viste:

• desktop;
• tablet;
• mobile.

GenerateBlocks 2.0 ha introdotto controlli responsive più estesi anche nella versione gratuita, con breakpoint per desktop, tablet e mobile; nella documentazione ufficiale vengono indicati breakpoint come desktop sopra 1025px, tablet tra 768px e 1024px e mobile sotto 767px.

Quando lavori sulle sezioni, controlla sempre questi aspetti:

Spaziature

Un padding desktop di 100px può essere elegante, ma su mobile può diventare eccessivo.

Puoi ragionare così:

Desktop:
padding top/bottom: 90px

Tablet:
padding top/bottom: 70px

Mobile:
padding top/bottom: 50px

Titoli

Un H2 da 48px su desktop può funzionare bene, ma su mobile rischia di occupare troppo spazio.

Esempio:

Desktop:
font-size: 48px

Tablet:
font-size: 38px

Mobile:
font-size: 30px

Griglie

Le griglie devono adattarsi. Una griglia a 3 colonne su desktop raramente funziona bene su mobile.

Schema consigliato:

Desktop: 3 colonne
Tablet: 2 colonne
Mobile: 1 colonna

Pulsanti

Su mobile i pulsanti devono essere facili da toccare. Evita pulsanti troppo piccoli o link troppo vicini tra loro.

Un buon pulsante mobile dovrebbe avere:

Padding verticale: almeno 12/14px
Padding orizzontale: almeno 20/24px
Testo chiaro
Area cliccabile comoda

Attenzione alla gerarchia dei titoli

Quando crei sezioni personalizzate, non devi pensare solo alla grafica. Devi pensare anche alla struttura HTML.

La pagina dovrebbe avere un solo H1 principale. Le sezioni interne dovrebbero usare H2, ed eventuali sottosezioni H3.

Esempio corretto:

H1: Web Designer a Prato
H2: Siti WordPress professionali
H3: Siti aziendali
H3: Restyling siti web
H3: Ottimizzazione SEO
H2: Come lavoro
H2: Portfolio
H2: Richiedi un preventivo

Esempio da evitare:

H1: Web Designer a Prato
H1: Siti WordPress professionali
H1: Come lavoro
H1: Portfolio

Dal punto di vista visivo puoi anche far sembrare un H2 molto grande, ma semanticamente deve rimanere un H2 se si tratta di una sezione interna.

Questo è importante per accessibilità, SEO e chiarezza del documento.

Usare classi CSS personalizzate quando serve

GenerateBlocks ti permette di fare moltissimo dall’interfaccia, ma in certi casi una classe CSS personalizzata è più pulita.

Per esempio, puoi assegnare a una sezione una classe come:

sergio-section-services

oppure a una card:

sergio-service-card

Poi puoi aggiungere piccoli ritocchi CSS nel Customizer, in un child theme o tramite Code Snippets.

Esempio:

.sergio-service-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sergio-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

Questo tipo di CSS è leggero, leggibile e facile da mantenere.

Il consiglio è: usa l’interfaccia di GenerateBlocks per la struttura principale, ma non avere paura di usare CSS personalizzato quando vuoi ottenere un effetto preciso e riutilizzabile.

Creare sezioni riutilizzabili

Una volta creata una buona sezione, non ha senso rifarla da zero ogni volta.

Puoi trasformarla in un pattern, duplicarla o salvarla come struttura riutilizzabile, a seconda del tuo flusso di lavoro.

Questo è molto utile per sezioni come:

• CTA finale;
• blocco servizi;
• hero section;
• sezione testimonianze;
• blocco “come lavoro”;
• griglia portfolio;
• sezione contatti.

L’obiettivo è creare un piccolo sistema visivo coerente. Non devi inventare ogni pagina da capo. Devi costruire una libreria di sezioni riconoscibili, coerenti e facilmente adattabili.

Un sito professionale non è fatto da tante sezioni casuali. È fatto da moduli coerenti.

GeneratePress Elements e sezioni globali

Se usi GeneratePress Premium, puoi spingerti oltre e usare i Block Elements.

I Block Elements permettono di creare elementi globali con l’editor a blocchi: hook, site header, footer, sidebar, page hero, content template e altri elementi. La documentazione ufficiale spiega anche che questi elementi possono essere mostrati in punti specifici del sito tramite regole di visualizzazione, includendo o escludendo pagine, articoli, categorie o altre condizioni.

Questo significa che puoi creare, per esempio:

• una CTA globale prima del footer;
• una hero diversa per una categoria;
• un blocco autore negli articoli;
• una sezione promozionale solo in certe pagine;
• un layout particolare per gli archivi.

Questa combinazione tra GeneratePress Elements e GenerateBlocks è molto potente, perché ti permette di costruire sezioni personalizzate non solo dentro una singola pagina, ma anche in punti strategici del tema.

Esempio pratico: sezione “Perché scegliere me”

Vediamo una sezione concreta.

Obiettivo: creare una sezione per spiegare perché un cliente dovrebbe scegliere te come web designer.

Struttura:

Container esterno
└── Container interno
    ├── Titolo
    ├── Testo introduttivo
    └── Grid 3 colonne
        ├── Card 1
        ├── Card 2
        └── Card 3

Contenuto:

Titolo:
Perché lavorare con me

Testo:
Non mi limito a costruire pagine belle da vedere. Progetto siti WordPress pensati per essere chiari, veloci, responsive e facili da gestire nel tempo.

Card 1:
Approccio concreto
Ogni sezione del sito ha uno scopo preciso: spiegare, guidare o portare l’utente verso un’azione.

Card 2:
WordPress leggero
Uso GeneratePress e GenerateBlocks per creare layout puliti senza appesantire il sito con strumenti inutilmente complessi.

Card 3:
Attenzione ai dettagli
Curo struttura, responsive design, micro-interazioni, leggibilità e coerenza visiva.

Impostazioni visive:

Sezione esterna:
background: #f5f7fb
padding desktop: 90px 20px
padding mobile: 55px 20px

Contenitore interno:
max-width: 1180px
margin: auto

Titolo:
max-width: 760px
font-size desktop: 44px
font-size mobile: 30px

Testo introduttivo:
max-width: 720px
font-size: 18px
line-height: 1.7

Card:
background: #ffffff
padding: 32px
border-radius: 18px
box-shadow leggera

Questa è una sezione semplice, ma professionale. Funziona bene perché ha una gerarchia chiara: prima il titolo, poi la spiegazione, poi i tre motivi.

Errori comuni quando si creano sezioni con GenerateBlocks

Il primo errore è usare troppi contenitori senza logica. Annidare blocchi può essere utile, ma se ogni elemento ha tre Container inutili, il layout diventa più difficile da gestire.

Il secondo errore è non distinguere tra larghezza della sezione e larghezza del contenuto. Lo sfondo può essere full width, ma il testo deve rimanere entro una larghezza leggibile.

Il terzo errore è impostare tutto solo da desktop. Una sezione deve essere progettata pensando già a tablet e mobile.

Il quarto errore è usare font troppo piccoli o testi troppo larghi. Un paragrafo che corre da un lato all’altro dello schermo è faticoso da leggere.

Il quinto errore è creare troppe varianti grafiche. Se ogni sezione ha colori, bordi, ombre e spaziature diverse, il sito perde coerenza.

Il sesto errore è usare immagini pesanti. Anche se GenerateBlocks è leggero, una pagina può diventare lenta se carichi immagini enormi non ottimizzate.

Il settimo errore è non curare la CTA. Una sezione può essere bellissima, ma se non guida l’utente verso un’azione, rischia di essere solo decorativa.

Una buona sezione deve respirare

Nel web design moderno lo spazio vuoto è importante quanto il contenuto.

Una sezione personalizzata non deve essere piena in ogni angolo. Deve lasciare respiro, dare ritmo alla pagina e aiutare l’utente a leggere senza fatica.

Quando lavori con GenerateBlocks, usa padding e gap con criterio. Non avere paura degli spazi ampi, soprattutto su desktop. Una pagina professionale spesso si riconosce proprio dalla gestione dello spazio.

Meglio una sezione semplice, ben spaziata e chiara, piuttosto che una sezione piena di effetti, icone, box, testi e pulsanti.

Quando usare una griglia e quando no

Non tutte le sezioni hanno bisogno di una Grid.

Usa una griglia quando devi affiancare elementi con pari importanza:

• servizi;
• vantaggi;
• step di un processo;
• articoli;
• portfolio;
• caratteristiche.

Evitala quando il contenuto è principalmente narrativo. In quel caso può bastare un contenitore centrale con una buona larghezza del testo.

Per esempio, una sezione “Chi sono” potrebbe funzionare meglio con un layout a due colonne, immagine e testo. Una sezione “Come lavoro” potrebbe funzionare bene con tre o quattro card. Una sezione introduttiva, invece, potrebbe essere solo testo centrato con un pulsante.

La struttura deve seguire il contenuto, non il contrario.

Conclusione

GenerateBlocks è uno degli strumenti più interessanti per chi vuole creare sezioni personalizzate in WordPress senza appesantire il sito. Usato insieme a GeneratePress, permette di costruire layout professionali, responsive e puliti, mantenendo un controllo molto preciso su struttura, spaziature, tipografia e comportamento mobile.

La cosa più importante, però, non è conoscere ogni singola opzione del plugin. La cosa più importante è imparare a ragionare per sezioni: capire a cosa serve ogni blocco della pagina, definire una gerarchia chiara, costruire contenitori ordinati e controllare sempre il risultato su desktop, tablet e mobile.

Con pochi elementi ben usati — Container, Grid, Text, Image e Button — puoi creare hero section, sezioni servizi, CTA, layout alternati, card personalizzate e blocchi riutilizzabili. Il risultato è un sito WordPress più leggero, più facile da gestire e più professionale.

In fondo, il vero vantaggio di GenerateBlocks non è solo tecnico. È progettuale: ti obbliga a costruire con metodo, senza affidarti a effetti inutili o a strutture gonfie. Ed è proprio questo che fa la differenza tra una pagina semplicemente “costruita” e una pagina davvero progettata.