È capitato a molti di chiedersi quale blocco Gutenberg fosse il più adatto per il layout di una sezione: Riga o Colonne? Quando lavori con l’editor di WordPress, la scelta del contenitore è importante non solo per l’estetica, ma anche per come si ocmporterà la sezione sui dispositivi mobile.
La differenza tra Riga e Colonne
Sebbene a prima vista possano sembrare simili, il blocco Colonne e il blocco Riga utilizzano logiche CSS differenti che ne influenzano il comportamento.
- Blocco Colonne : è il blocco predefinito per creare una sezione a sezioni verticali con una larghezza predefinita e fissa (es. 50% e 50% per due colonne). La sua principale caratteristica, è l’opzione “Impila su mobile”, che sui dispositivi mobile (tipicamente gli smartphone) impila automaticamente le colonne con una larghezza pari alla larghezza del device.
- Blocco Riga : questo blocco è una variante del blocco Gruppo ed è basato sul moderno layout Flexbox di CSS. Il suo scopo principale è disporre gli elementi orizzontalmente (uno accanto all’altro) all’interno di un contenitore. La sua forza risiede nella flessibilità e nel controllo sulla giustificazione e sullo spazio tra gli elementi. Non impila automaticamente come il blocco Colonne, ma ti permette di gestire l’allineamento degli elementi in modo più preciso.
Quando usare il Blocco Colonne
Il blocco Colonne è più appropriato per:
- Layout a griglia semplice: Quando hai bisogno di dividere lo spazio in un numero fisso di colonne con larghezze ben definite e l’obiettivo principale è l’impilamento automatico su schermi piccoli.
- Contenuto con altezza simile: Quando sai che il contenuto all’interno di ciascuna colonna avrà un’altezza approssimativamente simile e non hai bisogno di un allineamento verticale sofisticato (ad esempio, il testo tende a occupare lo stesso spazio).
Quando scegliere il Blocco Riga
Il blocco Riga è la scelta più versatile per:
- Allineamento e Spaziatura precisa: Quando hai bisogno di allineare elementi in linea (come un’icona e un breve testo, o un titolo e un pulsante) e controllare la spaziatura tra di essi con precisione (es. “Spaziatura tra i blocchi”).
Il mio approccio
La regola d’oro è: utilizzo il blocco più specifico per le necessità di layout.
- Per i layout principali della pagina: il blocco Colonne è ancora la soluzione più rapida per una griglia mobile-friendly grazie alla sua opzione di impilamento automatico, sopratutto per pochi elementi (3 o 4).
- Per l’allineamento orizzontale di elementi interni: Il blocco Riga è quasi sempre superiore per disporre elementi come testo/icona o immagine/pulsanti affiancati.
Esempio pratico: creiamo una sezione Team (3 Card)
La sezione Team è il più classico degli esempi che posso usare per darti una dimostrazione pratica. Forse a te servirà per descrivere i tuoi servizi o paragonare offerte fra di loro. Il succo non cambia, ognuno di questi layout parte dalla medesima base.
In azione
Creiamo una sezione “Team” con tre card affiancate che sugli smartphone si impilino (solitamente i tablet hanno abbastanza spazio per comportarsi come un desktop).
- Contenitore principale: Aggiungi un blocco Gruppo . In questo modo puoi gestire la larghezza dello sfondo (ampia o piena) e aggiungere un eventuale colore di sfondo o immagine di sfondo.
- Struttura della Griglia: All’interno del Gruppo, aggiungi un blocco Colonne e scegli il layout a 3 colonne uguali. Questo garantirà l’impilamento automatico su mobile.
- Costruzione della singola Card: All’interno della prima Colonna, aggiungi i contenuti della card:
- Un blocco Immagine (l’avatar della persona).
- Un blocco Titolo (scegli un H3 o un H4) per il nome.
- Un blocco Paragrafo per una breve descrizione
- Un blocco Separatore per la linea continua
- Un blocco Riga per icona e ruolo della persona
- Termina con bordi, arrotondamento e ombra al blocco Colonna a tuo piacimento
- Ripeto l’operazione per le altre due colonne, oppure duplica questa colonna per altre due volte, eliminando poi quelle in eccesso.
Della
Quisque euismod vitae dui non feugiat. Vestibulum libero mi, efficitur vitae velit non, ullamcorper mollis nunc.
UX Designer
Ariel
Quisque euismod vitae dui non feugiat. Vestibulum libero mi, efficitur vitae velit non, ullamcorper mollis nunc.
Web Developer
Zoe
Quisque euismod vitae dui non feugiat. Vestibulum libero mi, efficitur vitae velit non, ullamcorper mollis nunc.
A11y Expert
Se questo esempio ti è piaciuto puoi copiare il codice e usarlo sul tuo sito
<!-- wp:group {"metadata":{"name":"Team Block"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"border":{"width":"1px","color":"var(\u002d\u002dtheme-palette-color-5, #b3b2be)","radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"}},"shadow":"var:preset|shadow|natural","spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}}} -->
<div class="wp-block-column has-border-color" style="border-color:var(--theme-palette-color-5, #b3b2be);border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);box-shadow:var(--wp--preset--shadow--natural)"><!-- wp:image {"id":2821,"width":"150px","sizeSlug":"medium","linkDestination":"media","align":"center","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-medium is-resized is-style-rounded"><a href="https://gloweb.it/wp-content/uploads/2025/12/dog_01.jpeg"><img src="https://gloweb.it/wp-content/uploads/2025/12/dog_01-300x300.jpeg" alt="" class="wp-image-2821" style="width:150px"/></a></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="della">Della</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">Quisque euismod vitae dui non feugiat. Vestibulum libero mi, efficitur vitae velit non, ullamcorper mollis nunc.</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:html -->
<span class="dashicons dashicons-admin-customizer"></span>
<!-- /wp:html -->
<!-- wp:paragraph -->
<p>UX Designer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"width":"1px","color":"var(\u002d\u002dtheme-palette-color-5, #b3b2be)","radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"}},"shadow":"var:preset|shadow|natural","spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}}} -->
<div class="wp-block-column has-border-color" style="border-color:var(--theme-palette-color-5, #b3b2be);border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);box-shadow:var(--wp--preset--shadow--natural)"><!-- wp:image {"id":2826,"width":"150px","sizeSlug":"medium","linkDestination":"media","align":"center","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-medium is-resized is-style-rounded"><a href="https://gloweb.it/wp-content/uploads/2025/12/dog_02.jpg"><img src="https://gloweb.it/wp-content/uploads/2025/12/dog_02-300x300.jpg" alt="" class="wp-image-2826" style="width:150px"/></a></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="della">Ariel</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">Quisque euismod vitae dui non feugiat. Vestibulum libero mi, efficitur vitae velit non, ullamcorper mollis nunc.</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:html -->
<span class="dashicons dashicons-laptop"></span>
<!-- /wp:html -->
<!-- wp:paragraph -->
<p>Web Developer</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"width":"1px","color":"var(\u002d\u002dtheme-palette-color-5, #b3b2be)","radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"}},"shadow":"var:preset|shadow|natural","spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}}} -->
<div class="wp-block-column has-border-color" style="border-color:var(--theme-palette-color-5, #b3b2be);border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50);box-shadow:var(--wp--preset--shadow--natural)"><!-- wp:image {"id":2828,"width":"150px","sizeSlug":"medium","linkDestination":"media","align":"center","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-medium is-resized is-style-rounded"><a href="https://gloweb.it/wp-content/uploads/2025/12/dog_03.jpeg"><img src="https://gloweb.it/wp-content/uploads/2025/12/dog_03-300x300.jpeg" alt="" class="wp-image-2828" style="width:150px"/></a></figure>
<!-- /wp:image -->
<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="della">Zoe</h4>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}}} -->
<p style="font-size:16px">Quisque euismod vitae dui non feugiat. Vestibulum libero mi, efficitur vitae velit non, ullamcorper mollis nunc.</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:html -->
<span class="dashicons dashicons-universal-access"></span>
<!-- /wp:html -->
<!-- wp:paragraph -->
<p>A11y Expert</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->In Conclusione
Il blocco Riga scontenta un po’ tutti, professionisti e non, per la creazione di una griglia di layout perché non permette una gestione facilitata delle impostazioni degli elementi su dispositivi mobile. I Web Designer possono ovviare questo limite aggiungendo le regole CSS necessarie, ed è perfetto.
Chi non ha conoscenze di Web Designer si deve orientare sul blocco Colonna oppure ricorrere a plugin di blocchi aggiuntivi che prevedono le opzioni per i dispositivi mobile.
Se vuoi un sito che sia “facile da gestire”, performante e che attragga nuovi clienti, scrivimi.
Se sei un/una Web Designer in erba e la mia esperienza può fare al caso tuo, contattami per delle lezioni mirate.
