Creare layout a più colonne richiedeva una conoscenza dell'HTML o l'aiuto di uno sviluppatore, ma non più. ✨
Attraverso i nostri test delle funzionalità di editing dei contenuti di WordPress, abbiamo trovato un modo intuitivo per dividere i tuoi contenuti in colonne senza toccare alcun codice.
Questi layout possono rendere i tuoi post più facili da leggere e visivamente più accattivanti, specialmente quando confronti funzionalità, elenchi pro e contro o organizzi grandi blocchi di testo.
In questa guida, condivideremo i metodi più semplici che abbiamo scoperto per aggiungere contenuti a più colonne ai tuoi post di WordPress.
💡Risposta rapida: Come aggiungere contenuti a più colonne in WordPress
Ecco una rapida panoramica dei metodi che tratteremo per aggiungere colonne ai tuoi post e pagine di WordPress.
- Utilizzo dell'Editor a Blocchi: Il metodo più semplice è utilizzare il blocco integrato 'Colonne' per creare layout senza plugin.
- Utilizzo dell'Editor Classico: Per gli utenti ancora sul vecchio editor, ti mostreremo come utilizzare il plugin Column Shortcodes per aggiungere un layout a griglia.
Perché aggiungere contenuti a più colonne in WordPress?
Il motivo principale per aggiungere contenuti a più colonne è rendere i tuoi post più scansionabili e visivamente organizzati, il che aiuta a mantenere i lettori coinvolti.
Mentre i layout a colonna singola sono comuni online, i layout a griglia sono uno strumento potente per migliorare l'esperienza utente. Ecco i vantaggi chiave dell'utilizzo di un layout a più colonne in WordPress:
- Migliora la leggibilità: Proprio come i giornali e le riviste, le colonne interrompono le lunghe righe di testo, rendendo i tuoi contenuti più facili da leggere e scansionare rapidamente per i visitatori.
- Migliore organizzazione: Sono perfetti per organizzare le informazioni fianco a fianco. Questo è ideale per confronti di prodotti, elenchi di pro e contro o per mostrare immagini accanto a descrizioni testuali.
- Evidenzia le informazioni chiave: Puoi utilizzare un layout a colonne per attirare l'attenzione del lettore sulle parti più importanti del tuo articolo.
- Aumenta l'interazione: Rendendo i tuoi contenuti più facili da digerire, crei una migliore esperienza utente. Questo può incoraggiare i visitatori a trascorrere più tempo sul tuo sito.
Detto questo, vediamo come puoi aggiungere contenuti multi-colonna nell'editor a blocchi e classico. Puoi semplicemente fare clic sui collegamenti sottostanti per passare al metodo che desideri utilizzare:
- Aggiungere Contenuti Multi-Colonna nell'Editor a Blocchi di WordPress – Il Modo Facile
- Aggiungere Colonne Multiple nel Vecchio Editor Classico di WordPress
- Domande frequenti sull'aggiunta di contenuti multi-colonna in WordPress
Aggiungere Contenuti Multi-Colonna nell'Editor a Blocchi di WordPress – Il Modo Facile
Creare contenuti multi-colonna, noti anche come contenuti a griglia in WordPress, è ora facile perché è una funzionalità predefinita. L'editor a blocchi di WordPress include un blocco Colonne.
Per aggiungere un layout multi-colonna, devi creare un nuovo post o modificarne uno esistente. Una volta nell'editor dei contenuti, fai clic sull'icona '+' in alto per aggiungere un blocco.
Successivamente, devi selezionare il blocco Colonne nella scheda 'Design'.
Successivamente, dovrai selezionare il numero di colonne e i layout che desideri utilizzare per il tuo post del blog.
WordPress ti mostrerà diverse opzioni tra cui scegliere. Ad esempio, puoi scegliere un layout a colonne 50/50, utilizzare un layout 33/66 e altro ancora.
Dopo aver scelto un layout, puoi aggiungere blocchi alle tue colonne. Il blocco Colonne ti consente di aggiungere blocchi all'interno di ciascuna colonna.
Ad esempio, puoi selezionare il blocco Paragrafo e aggiungere contenuti.
Sarai anche in grado di vedere le impostazioni del blocco nella colonna di destra della schermata di modifica del post nel pannello delle impostazioni. Qui puoi modificare la larghezza delle colonne.
Oltre al testo, puoi anche aggiungere immagini e incorporare video nelle colonne di WordPress.
Basta spostare il mouse su una delle colonne e fare clic sul pulsante '+' per aggiungere un blocco. Puoi anche aggiungere un blocco digitando '/' e quindi il nome del blocco.
Ad esempio, abbiamo aggiunto un'immagine in una colonna e del testo nell'altra colonna.
Aggiungere Colonne Multiple nel Vecchio Editor Classico di WordPress
Se non hai aggiornato il tuo WordPress a Gutenberg e stai ancora utilizzando l'Editor Classico, dovrai installare un plugin separato per creare un layout a colonne a griglia.
Innanzitutto, installa e attiva il plugin Column Shortcodes. Per istruzioni dettagliate, segui la nostra guida passo passo su come installare un plugin in WordPress.
📌 Disclaimer: Tieni presente che il plugin non è stato testato con l'ultima versione di WordPress. Tuttavia, quando l'abbiamo testato sul nostro sito demo, ha funzionato bene. Se sei ancora insicuro, consulta la nostra guida per principianti sull'uso di plugin obsoleti.
Dopo l'attivazione, puoi creare un nuovo post o modificarne uno esistente. Una volta nell'editor classico, fai semplicemente clic sul pulsante ‘[ ]’ nella barra degli strumenti.
Il plugin ti mostrerà ora un elenco di shortcode di colonne per il tuo post del blog.
Puoi scegliere qualsiasi layout desideri aggiungere al tuo blog WordPress. Ci sono anche opzioni per modificare il padding delle colonne.
Una volta selezionato uno shortcode, questo apparirà automaticamente nell'editor classico. Ad esempio, per questo tutorial abbiamo scelto lo shortcode 'one half'.
Puoi quindi inserire il tuo contenuto tra gli shortcode.
Successivamente, puoi fare nuovamente clic sull'icona dello shortcode ‘[ ]’ per aggiungere un altro shortcode di colonna.
Aggiungiamo lo shortcode 'one half (last)' per mostrare due colonne una accanto all'altra. Da qui, devi solo aggiungere il tuo contenuto all'altra colonna.
Dopodiché, puoi visualizzare in anteprima il tuo post e pubblicarlo.
Ecco come è apparso sul nostro sito di prova.
Domande frequenti sull'aggiunta di contenuti multi-colonna in WordPress
Ecco alcune domande che i nostri lettori hanno posto frequentemente sull'aggiunta di contenuti multi-colonna sui loro siti web:
Come appaiono le colonne di WordPress sui dispositivi mobili?
WordPress gestisce automaticamente questo aspetto per te. Su schermi più piccoli come i telefoni cellulari, le colonne verranno impilate verticalmente una sopra l'altra.
Questo design reattivo garantisce che i tuoi contenuti siano sempre leggibili e facili da usare, indipendentemente dal dispositivo.
Posso regolare la larghezza di un singolo blocco colonna di WordPress?
Sì. Per regolare la larghezza, fai clic per selezionare un singolo blocco Colonna (non il contenitore padre 'Colonne'). Nella barra laterale delle impostazioni del blocco a destra, puoi specificare un valore di larghezza.
Puoi usare percentuali (%), pixel (px) e altre unità web per un controllo preciso.
Cosa succede se ho bisogno di opzioni di layout più avanzate?
Il blocco Colonne predefinito è eccellente per la maggior parte dei layout semplici. Tuttavia, se hai bisogno di un controllo più avanzato su spaziatura, allineamento, impostazioni reattive o vuoi creare design a griglia più complessi, allora un plugin per page builder è la soluzione migliore.
Ti consigliamo di utilizzare uno strumento come SeedProd per una completa libertà di progettazione drag-and-drop.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere contenuti a più colonne nei post e nelle pagine di WordPress. Potresti anche voler consultare la nostra semplice guida su come aggiungere una checklist per i post del blog nell'editor di WordPress e il nostro tutorial su come aggiungere modelli di contenuto in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jiří Vaněk
Ottimo, finalmente so come farlo anche in Gutenberg. Questo è il motivo per cui sono passato a Elementor perché trovavo Gutenberg poco intuitivo. Forse ero solo troppo pigro per impararlo. Tuttavia, in Elementor, ho capito e trovato subito questa funzionalità. Ora so come gestire anche Gutenberg :). Grazie!
Ralph
Grazie! È stato davvero semplice con la tua guida. L'uso di 3 colonne renderà sicuramente alcuni dei miei contenuti migliori rispetto a un noioso muro di testo.
Supporto WPBeginner
Felice che la nostra guida abbia potuto aiutare!
Amministratore
Nishant Kumar
Davvero molto utile. Non so come aggiungere una sezione a colonne nel blog di WordPress. Ora l'ho capito.
Supporto WPBeginner
Glad our guide could help
Amministratore
Matt
Ciao – grazie per questo post, davvero utile. Una domanda veloce: il testo viene assegnato automaticamente a ciascuna delle (due) colonne per garantire che le colonne abbiano la stessa altezza sulla pagina, o è qualcosa che devi testare/gestire all'inserimento del testo?
Supporto WPBeginner
Dovresti assicurarti manualmente che il tuo contenuto abbia una lunghezza uguale o simile se lo desideri.
Amministratore
Sir Newton
Per favore, come posso fare in modo che il mio sito web di e-commerce visualizzi una vista di prodotti a due colonne su mobile.
Grazie
Supporto WPBeginner
Dovresti verificare con il supporto del tuo tema o con il plugin e-commerce che stai utilizzando per modificare lo stile della tua pagina negozio.
Amministratore
Stuart
Ciao, ho bisogno di 11 colonne. C'è un modo per superare il massimo che ho calcolato (10)?
Supporto WPBeginner
Al momento non abbiamo un metodo consigliato per creare 11 colonne di larghezza. A seconda di ciò che desideri visualizzare, potresti prendere in considerazione la creazione di una tabella invece di colonne.
Amministratore
Caite Adamek
C'è un modo per trasferire automaticamente le colonne? Quando ho impostato le mie 2 colonne, ho messo le immagini nella prima colonna, poi il testo nella seconda. Ho notato che la versione mobile non può visualizzare le 2 colonne una accanto all'altra, quindi le immagini vengono visualizzate per prime, poi il testo. Vorrei che il testo venisse visualizzato per primo, poi le immagini. Devo riscrivere tutto o c'è un modo intelligente per scambiare il contenuto delle 2 colonne?
Supporto WPBeginner
Al momento no, potresti creare un'area a 2 colonne sotto dove l'hai attualmente e posizionare il contenuto come desideri lì, quindi eliminare l'originale.
Amministratore
Kimberly Kelley
Usando le colonne multiple (2), i video si sovrappongono. C'è un modo per regolare la larghezza massima dei video dato che l'unico modo in cui riesco ad aggiungerli è tramite URL, non codice di incorporamento.
Supporto WPBeginner
Potresti verificare se i video si sovrappongono quando non visualizzi nell'editor, altrimenti, potresti guardare nella sezione CSS avanzata e impostare la larghezza usando quel selettore: https://www.wpbeginner.com/glossary/css/
Amministratore
Nicole
C'è un modo per centrare verticalmente gli elementi in una colonna con i nuovi blocchi/editor di Gutenberg? Ad esempio, vorrei un'immagine centrata verticalmente a sinistra e testo a destra. Quindi, diciamo 30 righe di testo e un'immagine di 200 px di altezza: c'è un modo più semplice che inserire e dimensionare manualmente blocchi distanziatori?
Supporto WPBeginner
Per quello che sembra tu desideri, potresti voler usare il blocco media e testo invece del blocco colonne.
Amministratore
Rob Tait
Ciao
Come scrivo in 1 colonna e poi in 2 colonne per il paragrafo successivo e poi di nuovo in 1 colonna per il terzo paragrafo?
Qualsiasi aiuto è molto apprezzato?
Grazie
Rob
Ashish
Perché non possiamo semplicemente usare Elementor o qualsiasi altro plugin per la creazione di pagine? È molto più facile da usare con così tante funzionalità aggiuntive.
dimiter kirov
Questo plugin non è stato aggiornato per 3 anni e, come se non bastasse, non funziona con il plugin Gutenberg
Jenny
Ciao,
Ho provato ad aggiungere colonne a una delle mie pagine e il pulsante Colonna avanzata non è apparso. Ho controllato i miei plugin e diceva che era installato. Sai quale potrebbe essere il problema?
Grazie!
Jenny
Rob Tait
È necessario installare un editor visuale avanzato come TIny MCE per poter vedere il pulsante. Non verrà visualizzato sull'editor visuale standard predefinito. Ho appena avuto lo stesso problema, ma ora viene visualizzato dopo aver installato quanto sopra, che è gratuito.
Spero che questo aiuti
Rob
Dennis
Ottimo. Proprio quello che stavo cercando e finalmente qualcuno che può spiegare tutto passo dopo passo.
Heather
Ho installato il plugin e l'ho attivato. Viene visualizzato come "attivato". Ancora, non c'è nessun pulsante. Come posso risolvere questo problema? So già come installare un plugin, quindi quella soluzione non è applicabile.
Kirk
Ho installato il plugin con un tema gratuito di base e il pulsante della colonna non è mai apparso nel mio editor di pagine. So che non sei il creatore del plugin, volevo solo condividere la nostra esperienza
om zho
incollando da text edit, la spaziatura del testo è strana poiché non c'è una selezione "formato pulito" per le colonne WP avanzate.. come puoi risolverlo?
Martine S.
Ehi, sembra fantastico! Ma come apparirà sui telefoni? Sto usando un plugin simile per avere due colonne, una per il norvegese e una per l'inglese. Ma quando le persone leggono il mio blog tramite telefono, la seconda colonna viene subito dopo la prima colonna, quindi sembra un testo completo - in due lingue diverse!
Joe Nelo
Quale plugin stai usando per visualizzare due colonne di testo? Sto cercando di fare lo stesso per inglese ed esperanto.
Elizabeth
Come si attiva il plugin??
Supporto WPBeginner
Ciao Elizabeth,
Si prega di consultare la nostra guida passo passo su come installare un plugin di WordPress.
Amministratore
PB
C'è un modo per garantire che il testo in queste colonne venga visualizzato come un elenco, ovvero con interruzioni di riga rigide tra gli elementi anziché come un singolo blocco di testo continuo?
Molte grazie in anticipo per il tuo consiglio
Steve Elliott
C'è un modo per dare a queste colonne un colore di sfondo?
Bhagyashree barlingay
Non riesco a copiare/incollare materiale che ho già digitato, in queste colonne.
Naveed
sto usando wordpress versione 4.5, ma questo plugin non è compatibile con il mio tema, posso usare questo plugin per il mio tema??
ik
Puoi aggiungere immagini a ogni colonna? O puoi aggiungere pulsanti di azione a ogni colonna?
Supporto WPBeginner
Sì.
Amministratore
Kate
Le colonne funzionano ma quando cerco di incorporare VIDEO all'interno delle colonne viene mostrato solo il testo del codice...
Daniel Speraw
Sembra buono quando vengono aggiunte colonne al post, ma quando lo guardo pubblicato è tornato a 1 colonna centrata. Ci ho provato più volte e in due browser. Qualche idea?
Questo è di gran lunga il plugin più facile. Voglio DAVVERO usarlo.
Molte grazie,
Daniel
Meshellklip
Puoi aggiungere immagini a ogni colonna? O puoi aggiungere pulsanti di azione a ogni colonna?
Sri Harsha Chilakapati
Ciao,
Il mio sito utilizza il tema responsive Customizr e non voglio perdere quella responsività. Posso aggiungere colonne responsive usando questo plugin?
Chris Xphstos
Ηι!
C'è un modo per presentare un layout con colonne ma non un post con 2-3-4 colonne ecc.?
Ogni colonna all'interno di una pagina sarà un post separato. Qualcosa come il Blog Layout di Joomla...
Supporto WPBeginner
Per quello dovresti cercare un tema WordPress multi-colonna, ci sono molti temi di questo tipo disponibili.
Amministratore
Karen
Grazie! Volevo imparare come fare questo da un po' di tempo - tutto a posto ora! xx
Debra Torres
Questo è esattamente ciò di cui avevo bisogno! Stavo cercando di usare le tabelle per le colonne e mi stavo frustrando così tanto. Grazie, grazie, grazie!
Mark Corder
Devo dire: se hai bisogno di usare più colonne regolarmente, questa sembra un'ottima soluzione anche se conosci HTML/CSS! Adoro il fatto che abbiano incluso un breakpoint nelle Opzioni per adattarsi ai design responsive...