Le colonne Gutenberg possono disporsi automaticamente una sotto l’altra sugli schermi piccoli, ma il comportamento dipende dal tema WordPress e dalle impostazioni del blocco. Per ottenere un risultato uniforme è possibile assegnare una classe CSS al blocco Colonne e applicare una regola specifica per smartphone. In questo modo ogni colonna occupa il 100% della larghezza disponibile, mantiene l’ordine dei contenuti e non crea sovrapposizioni orizzontali. La procedura richiede soltanto l’editor a blocchi di WordPress e l’area CSS aggiuntivo del tema.

Come preparare il blocco Colonne in Gutenberg

Apri la pagina o l’articolo interessato nell’editor Gutenberg e inserisci il blocco Colonne. Puoi scegliere una struttura a due, tre o più colonne, quindi aggiungere in ciascuna colonna testo, immagini, pulsanti o altri blocchi.

Per applicare lo stile soltanto a questo gruppo di colonne, seleziona il blocco principale Colonne, non uno dei singoli blocchi Colonna. Nel pannello laterale destro apri la sezione Avanzate e individua il campo Classe CSS aggiuntiva. Inserisci questo nome senza punto iniziale:

colonne-responsive

La classe viene applicata all’elemento contenitore con il blocco Gutenberg delle colonne. Il nome può essere diverso, ma deve corrispondere esattamente a quello utilizzato nel codice CSS, comprese maiuscole e minuscole.

Questa configurazione è preferibile rispetto a uno stile generico su .wp-block-columns, perché permette di modificare soltanto i gruppi selezionati. Le altre colonne del sito continueranno a usare il comportamento previsto dal tema WordPress.

Come inserire il CSS per impilare le colonne

Il codice seguente trasforma il contenitore in un elemento a blocco sugli schermi larghi al massimo 781 pixel. Ogni colonna figlia occupa tutta la larghezza disponibile e viene visualizzata sotto la precedente.

@media (max-width: 781px) {
.wp-block-columns.colonne-responsive {
display: block !important;
}

.wp-block-columns.colonne-responsive > .wp-block-column {
width: 100% !important;
flex-basis: auto !important;
margin-left: 0 !important;
margin-bottom: 1.5rem;
}

.wp-block-columns.colonne-responsive > .wp-block-column:last-child {
margin-bottom: 0;
}
}

La regola display: block disattiva sulla versione mobile la disposizione orizzontale del contenitore. width: 100% assegna a ogni colonna tutta la larghezza disponibile, mentre flex-basis: auto neutralizza le proporzioni eventualmente impostate da Gutenberg o dal tema.

Il valore di 781px è adatto alla soglia utilizzata frequentemente dagli stili dei blocchi Colonne di WordPress, ma non rappresenta una regola universale. Se il tema applica il passaggio a una colonna a 767 pixel, puoi usare la stessa soglia per mantenere un comportamento coerente:

@media (max-width: 767px) {
.wp-block-columns.colonne-responsive {
display: block !important;
}

.wp-block-columns.colonne-responsive > .wp-block-column {
width: 100% !important;
flex-basis: auto !important;
margin-left: 0 !important;
margin-bottom: 1.5rem;
}
}

Scegli una sola soglia tra 781 e 767 pixel, in base al comportamento del tema e alla larghezza dei contenuti. Non è necessario inserire entrambe le regole se vuoi mantenere una gestione semplice del foglio di stile.

Aggiungere il codice con un tema a blocchi

Con un tema a blocchi, apri Aspetto > Editor e accedi alla sezione Stili. Cerca il menu con i tre puntini, quindi seleziona CSS aggiuntivo, se la voce è disponibile, e incolla il codice nell’area dedicata.

La posizione della voce può cambiare in base al tema e alla versione di WordPress. Alcuni temi a blocchi gestiscono gli stili soltanto tramite l’editor del sito e non mostrano un campo CSS aggiuntivo nativo.

Aggiungere il codice con un tema classico

Con un tema classico, vai in Aspetto > Personalizza > CSS aggiuntivo. Incolla il codice, seleziona Pubblica e aggiorna la pagina contenente il blocco Colonne.

Il CSS aggiuntivo del personalizzatore viene normalmente caricato dopo gli stili principali del tema. Per questo motivo la regola può sovrascrivere le impostazioni predefinite senza modificare i file del tema e senza rischiare di perdere il codice durante un aggiornamento.

Come verificare il risultato su smartphone

Salva o aggiorna la pagina e controlla il risultato sia nell’anteprima responsive dell’editor sia su un dispositivo mobile reale. La visualizzazione del browser può essere ridotta trascinando la finestra, ma il test su uno smartphone è utile per verificare menu, immagini, pulsanti e spaziature.

Quando il CSS funziona correttamente, le colonne devono apparire in verticale secondo l’ordine del markup Gutenberg. Una struttura a tre colonne, per esempio, mostrerà prima il contenuto della colonna sinistra, poi quello centrale e infine quello destro.

Controlla in particolare questi aspetti:

Le immagini non devono superare la larghezza della colonna.
I pulsanti devono restare completamente visibili senza scorrimento orizzontale.
Il testo deve mantenere una dimensione leggibile e uno spazio adeguato tra le sezioni.
L’ultima colonna non deve lasciare un margine inferiore inutile.
Il contenuto deve conservare un ordine logico anche senza la disposizione affiancata.

Se il cambiamento non compare, svuota la cache del plugin di ottimizzazione, del tema o della rete di distribuzione dei contenuti. Controlla anche che la classe colonne-responsive sia stata inserita nel blocco principale Colonne e non nel singolo blocco Colonna.

Come risolvere conflitti con il tema WordPress

Alcuni temi assegnano una larghezza fissa, un margine laterale o una proprietà flex alle colonne. In questi casi !important aiuta a dare priorità alla regola mobile, ma non dovrebbe essere aggiunto indiscriminatamente a ogni proprietà del foglio di stile.

Se una colonna continua a non occupare tutta la larghezza, ispeziona l’elemento con gli strumenti per sviluppatori di Google Chrome o Firefox e verifica quale regola sta prevalendo. Il conflitto può dipendere da una classe personalizzata del tema, da uno stile inline generato dal blocco o da un plugin per la costruzione delle pagine.

Per colonne con immagini a tutta larghezza, il CSS può essere integrato con questa regola:

@media (max-width: 781px) {
.wp-block-columns.colonne-responsive img {
height: auto;
max-width: 100%;
}
}

height: auto conserva le proporzioni dell’immagine, mentre max-width: 100% impedisce al contenuto di uscire dai limiti della colonna. Questa aggiunta non è necessaria per tutte le configurazioni, perché molti blocchi Immagine Gutenberg applicano già proprietà equivalenti.

Il blocco Colonne di Gutenberg può già impilare automaticamente le colonne su dispositivi stretti. Il CSS personalizzato è utile quando il tema modifica quel comportamento, quando serve una soglia diversa oppure quando vuoi applicare la stessa regola soltanto ad alcuni gruppi di colonne.

Le colonne Gutenberg responsive CSS funzionano meglio quando la classe viene applicata al contenitore corretto e il breakpoint viene verificato sul tema effettivamente in uso.

FAQ

Spesso il blocco Colonne di Gutenberg dispone le colonne in verticale sugli schermi piccoli, ma il comportamento può essere modificato dal tema o da plugin. Il CSS personalizzato rende la regola più prevedibile.

Seleziona il blocco principale Colonne, apri Avanzate nel pannello laterale e inserisci colonne-responsive nel campo Classe CSS aggiuntiva. Non inserire il punto iniziale.

Sì, ma dovresti sostituire .colonne-responsive con una regola più generale come .wp-block-columns. La classe personalizzata è più sicura perché limita l’effetto ai blocchi scelti.

Verifica la classe del contenitore, la cache del sito e la soglia del media query. Il tema potrebbe inoltre applicare una regola più specifica che richiede un selettore CSS mirato.

Sì. Aumenta la soglia del media query, per esempio a 1024 pixel, se vuoi impilare le colonne anche su tablet. Verifica però che il layout non perda spazio inutilmente sugli schermi intermedi.

Altri articoli di questa serie: