Salta al contenuto principale
4 minuti di lettura (845 parole)

Dividere i blocchi con Advanced Gutenberg Columns Manager

gutenberg-column-manager

Le colonne sono per il contenuto quello che i blocchi di Gutenberg erano per l'editor classico di WordPress. Ti permettono di organizzare i tuoi contenuti senza ostacoli - se non verticalmente, come i blocchi, quindi orizzontalmente. L'ultimo aggiornamento di Advanced Gutenberg presenta un nuovo blocco per aiutarti a iniziare e a lavorare con le colonne.

Il gestore delle colonne di Advanced Gutenberg è una versione più avanzata delle colonne native di Gutenberg. Le sue caratteristiche principali ti danno un maggiore controllo su come il contenuto dovrebbe essere visualizzato, ma allo stesso tempo rende più facile iniziare a creare contenuti con i suoi layout predefiniti.

Layout delle colonne

Per creare il tuo primo blocco di colonne, cerca il gestore di colonne nel tuo editor di WordPress Gutenberg. La prima cosa che vedrai al clic sul nuovo blocco è un elenco delle impostazioni predefinite più comuni. Le opzioni spaziano da un semplice layout a una colonna a visualizzazioni standard a due colonne e fino a sei colonne in un blocco.

 

Queste opzioni sono lì per permetterti di concentrarti sulla creazione di contenuti invece di progettare. Tuttavia, potresti trovarti a cercare un layout che non esiste, come un blocco di colonne che occupa solo il 50% della larghezza del tuo blog. In tal caso, puoi utilizzare la barra laterale per definire le larghezze delle tue colonne.

Per definire le proprie larghezze, cliccare su una colonna e impostarne la larghezza in percentuale, oppure impostarla su 0 per reimpostarla sulla larghezza automatica. Mantenere le percentuali totali al massimo del 100% per evitare che il contenuto del post o della pagina di WordPress trabocchi. Le guide delle colonne - bordi trasparenti - aiuteranno a vedere le modifiche, ma è possibile disattivarle dalla scheda configurazione nelle impostazioni di Advanced Gutenberg.

 

Un'altra novità nel gestore di colonne è la sezione di allineamento. Se si clicca sul blocco esterno del gestore di colonne, si troveranno per prime le opzioni di larghezza. È possibile attivare le opzioni di larghezza estesa o larghezza completa per aumentare la dimensione del blocco di colonne. Subito dopo ci sono le opzioni di allineamento.

Le prime tre opzioni di allineamento sono standard - le colonne possono essere allineate verticalmente in alto, in mezzo o alla fine. La quarta e ultima opzione di allineamento è una che non è nelle colonne di Gutenberg - colonne interne ad altezza piena.

 

L'opzione estende le colonne per essere uguale alla colonna più alta nel blocco. Questa opzione è necessaria se le colonne hanno colori di sfondo o bordi e quindi devono coprire l'intera altezza del blocco.

 

Colonne responsive

Un buon blog dovrebbe essere visualizzato bene su desktop, tablet e telefoni cellulari. Una domanda pertinente che sorge naturalmente è come visualizzare al meglio le colonne quando la larghezza è insufficiente. Le larghezze delle colonne dovrebbero cambiare e, se sì, come? Ogni colonna dovrebbe essere una riga a sé stante?

Advanced Gutenberg ti dà la flessibilità di scegliere come le colonne dovrebbero essere visualizzate su tablet e dispositivi mobili. Clicca sul blocco del gestore delle colonne e scegli un layout per desktop, tablet e dispositivi mobili. Le opzioni sui dispositivi portatili includono la modifica del layout delle colonne o l'impilamento delle colonne per sfruttare la larghezza completa.

 

 

Se stai utilizzando la larghezza ampia dei layout a tutta larghezza, potresti scoprire che il blocco del gestore delle colonne è troppo largo sui dispositivi più piccoli. In tal caso, puoi impostare il padding e il margine per dispositivi mobili o tablet nell'area appena sotto i layout per dispositivi mobili e tablet rispettivamente.

Scorrendo fino in fondo e aprendo le impostazioni di riga, puoi anche specificare cosa dovrebbe accadere quando le colonne superano il contenuto, e la larghezza massima e l'altezza minima di una riga. Una volta che ti sarai familiarizzato con le impostazioni di visualizzazione del layout generale del blocco, potresti voler accedere a impostazioni di reattività ancora più precise.

 

 

Con il gestore delle colonne di Advanced Gutenberg, puoi anche specificare il padding e i margini delle colonne individuali su desktop o dispositivi mobili. Per ottimizzarli, clicca su una colonna invece dell'intero blocco. Quindi, scorri fino alla parte inferiore della barra laterale per specificare il padding e i margini su desktop o dispositivi mobili. Per ciascuno, puoi anche specificare l'allineamento del testo.

 

Personalizzazione delle colonne di WordPress

Quando hai finito di perfezionare le tue colonne - o se non hai sentito la necessità di allontanarti dalle layout standard - puoi personalizzare le colonne o iniziare ad aggiungere contenuto ad esse. Quando si clicca su una colonna, puoi applicare opzioni di visualizzazione a livello di colonna, attualmente limitate allo stile del bordo, al colore, alla larghezza e al raggio.

Più importante, il punto delle colonne è quello di memorizzare e visualizzare il contenuto. Il gestore di colonne di Advanced Gutenberg supporta tutti i tipi di contenuto nelle colonne, il che significa che è possibile memorizzare al loro interno paragrafi, immagini e gallerie, e qualsiasi altro blocco, sia standard che personalizzato. La tua immaginazione è il limite!

column-accordion-content

 

Una volta padroneggiati i blocchi di Gutenberg, puoi esprimere la tua creatività nei tuoi post e pagine di WordPress. Con il gestore delle colonne di Advanced Gutenberg, puoi ottenere il massimo dal tuo blog di WordPress. Quindi, prendi il controllo che vuoi con le colonne e scateni la tua creatività non solo verticalmente, ma anche orizzontalmente!

 

Ottieni Advanced Gutenberg (plugin gratuito): https://www.joomunited.com/wordpress-products/advanced-gutenberg

Rimani Informato

Quando ti iscrivi al blog, ti invieremo un'e-mail quando ci saranno nuovi aggiornamenti sul sito in modo che tu non li perda.

Articoli correlati

 

Commenti

Nessun commento ancora. Sii il primo a inviare un commento
Già registrato? Accedi qui
giovedì, aprile 02, 2026

Immagine Captcha

An Error Occurred: Whoops, looks like something went wrong.

Sorry, there was a problem we could not recover from.

The server returned a "500 - Whoops, looks like something went wrong."

Help me resolve this