Come aggiungere più colonne in WordPress (2 metodi)

Pubblicato: 2021-10-15

La pratica di organizzare i contenuti in colonne risale ai primi giorni della stampa. Questo formato può essere un modo versatile per organizzare testo, immagini e altro. Tuttavia, l'aggiunta di più colonne in WordPress e il posizionamento corretto può essere un po' complicato.

Fortunatamente, non deve essere così. Ora puoi utilizzare l'editor di blocchi per aggiungere facilmente più colonne ai tuoi post e pagine WordPress in un paio di brevi passaggi.

Puoi anche ottenere questo layout usando l'editor classico e un plug-in per la creazione di pagine.

In questo tutorial, esamineremo come aggiungere più colonne in WordPress.

Iniziamo!

Perché utilizzare un layout a più colonne

Dalla scelta del tema giusto all'aggiunta di caratteri personalizzati, la personalizzazione del design del tuo sito è fondamentale per stabilire il tuo marchio. Anche i tuoi post e i layout di pagina fanno parte di questo puzzle. Sperimentare con diverse opzioni di formattazione può essere un modo interessante per aggiungere varietà strutturale ai tuoi contenuti.

Dal momento che non esiste un unico formato che sia il migliore per la leggibilità, puoi essere creativo e trovare un look che funzioni per te. Puoi passare da una pagina all'altra per adattarsi a vari tipi di contenuto e creare un sito WordPress composto da pagine con layout diversi, come in questa demo:

Demo Divi a più colonne

Le colonne sono un formato particolarmente versatile. Se stai cercando di utilizzare il tuo spazio in modo economico, sono un modo semplice per segmentare il tuo testo.

Puoi anche utilizzare le colonne per accoppiare diversi widget insieme in modo coeso, come mostra il tema BuddyBoss:

Il tema BuddyBoss

Oppure potresti semplicemente essere interessato a utilizzare un formato flessibile che può essere rimosso o rimodellato in base alle tue esigenze. Indipendentemente dal tuo ragionamento, le colonne possono aggiungere varietà e organizzazione al tuo sito.

Come aggiungere più colonne in WordPress (2 semplici metodi)

Agli albori di WordPress, gli utenti dovevano avere una conoscenza pratica dell'HTML ed essere in grado di modificare con sicurezza il proprio codice per aggiungere colonne ai propri post. All'epoca, la scrittura e la modifica dei contenuti non erano l'esperienza più intuitiva.

Fortunatamente, ora ci sono due semplici metodi per aggiungere colonne in WordPress: non è richiesto HTML.

L'editor di blocchi viene fornito con un'intuitiva funzionalità di colonna integrata e coloro che preferiscono l'editor classico saranno felici di sapere che puoi ancora evitare le colonne di codifica manuale con l'aiuto di un plug-in.

Ora, vediamo i due metodi.

Metodo uno: utilizzare la funzionalità nativa dell'editor blocchi

Inizieremo con l'aggiunta di più colonne utilizzando l'editor di blocchi (Gutenberg). La nuova interfaccia predefinita per la creazione di contenuti di WordPress offre tutta una serie di utili funzionalità, tutte incentrate su blocchi di contenuto facili da spostare.

Una di queste funzionalità è il blocco Colonne dal nome appropriato, che ti aiuta a creare tutte le colonne che desideri.

Un'immagine dell'Editor blocchi con la casella di ricerca aperta

Per iniziare, inserisci "colonne" nella casella di ricerca dell'editor di blocchi che puoi aprire facendo clic sul pulsante +. In alternativa, puoi semplicemente fare clic sullo schermo e iniziare a digitare "/ colonne" per visualizzare la stessa opzione.

Verrà visualizzata una finestra in cui è possibile scegliere il layout delle colonne:

Un primo piano delle varie opzioni disponibili per il blocco Colonne

È anche possibile iniziare con le due colonne predefinite e regolare le impostazioni in un secondo momento.

Dopo aver specificato quante sezioni vuoi e come vuoi dividerle, puoi trascinare e rilasciare il blocco dove vuoi.

Successivamente, puoi annidare altri blocchi all'interno del blocco Colonne. Potrebbero essere tutti blocchi di testo o puoi scuoterlo. Prova a migliorare una colonna di testo posizionandola accanto a un'immagine o a una colonna del calendario per farla risaltare:

Un blocco di colonne con blocchi calendario e paragrafi nell'editor blocchi

Non aver paura di sfruttare la flessibilità dell'editor mescolando e abbinando elementi.

Successivamente, puoi tornare alle impostazioni del blocco Colonne e modificare il rapporto di larghezza in base alle tue esigenze. Ogni singola colonna può essere regolata in base al tipo di look per cui stai scattando.

Grazie all'interfaccia visiva dell'editor di blocchi, il tuo lavoro sul backend si tradurrà direttamente nel frontend. Per riferimento, ecco come appare il nostro esempio dopo averlo pubblicato:

Un blocco di colonne sul frontend

Una volta apprese le nozioni di base, c'è altro da esplorare con le colonne.

Se stai cercando più funzionalità con l'editor di blocchi, potresti prendere in considerazione di scaricare un plug-in di blocco per potenziare le funzionalità e sperimentare nuove combinazioni di contenuti.

Metodo due: usa l'editor classico e il generatore di pagine di SiteOrigin

Se sei più tradizionalista e utilizzi ancora l'editor classico, puoi anche aggiungere più colonne ai tuoi post e alle tue pagine senza codice. Tutto ciò di cui avrai bisogno è un plugin. Ci sono molte opzioni che possono portare a termine il lavoro, quindi la prima cosa che devi fare è sceglierne una.

Dato che sono un grande fan del plug-in Page Builder di SiteOrigin, userò questo per creare un layout a più colonne nell'editor classico:

Page Puilder di SiteOrigin

Page Builder è una solida opzione gratuita che utilizza un'interfaccia drag-and-drop intuitiva e ha oltre 1 milione di installazioni attive.

Dopo aver installato e attivato il plug-in sul tuo sito, vai alla sua pagina delle impostazioni facendo clic sul menu Impostazioni > Generatore di pagine nella barra laterale di sinistra.

Qui, seleziona la scheda Generale e seleziona l'opzione Usa editor classico per nuovi post :

Impostazioni di SiteOrigin Page Builder

Nota che devi anche avere il plug-in Editor classico installato e attivato sul tuo sito affinché questa opzione funzioni.

Ora puoi aggiungere colonne aprendo un post esistente o creandone uno nuovo e navigando nella scheda Page Builder nell'angolo in alto a destra:

La scheda Page Builder nell'Editor classico

Qui, fai clic sul pulsante Aggiungi riga che creerà una nuova riga in cui puoi aggiungere le tue colonne:

SiteOrigin aggiunge la funzione di riga

Questo aprirà un'interfaccia in cui puoi regolare alcune impostazioni iniziali, inclusi il numero, il rapporto e la direzione delle tue colonne:

Schermata di creazione di una nuova riga in SiteOrigin Page Builder

Specifica il numero di colonne e decidi quali saranno i loro rapporti. Quindi, fai clic su Inserisci per inserirli nel tuo post.

Simile all'editor di blocchi, il plug-in Page Builder di SiteOrigin consente di inserire diversi widget nella struttura delle colonne.

Seleziona la colonna a cui desideri aggiungere il widget, quindi fai clic sul pulsante Aggiungi widget , che farà apparire il seguente pannello:

Un esempio delle opzioni del widget di Page Builder

Scegli l'elemento che desideri incorporare e popolalo con i tuoi contenuti.

Il backend del tuo post ora dovrebbe assomigliare a questo:

Un post della colonna di Page Builder, popolato con widget

Finalizza le tue modifiche.

Questo si tradurrà in un risultato sul frontend simile a questo:

Colonne sul frontend

Prova a giocare con diverse combinazioni di widget per ottenere un aspetto unico per il tuo sito. È un processo semplice che puoi invertire in qualsiasi momento, quindi non aver paura di rompere gli schemi e diventare creativo.

Conclusione

L'aggiunta di colonne al tuo sito WordPress può aiutare a mantenere il tuo layout fresco e accattivante. Anche se il processo può essere occasionalmente un po' impegnativo, ci sono metodi semplici che puoi usare per renderlo più semplice.

In questo tutorial, abbiamo trattato due metodi passo dopo passo per aggiungere più colonne in WordPress:

  1. Utilizzando il blocco Colonne integrato nell'editor dei blocchi
  2. Installazione di un plugin come Page Builder per usarlo con l'editor classico

Qual è il tuo modo preferito per aggiungere colonne in WordPress? Fatecelo sapere nella sezione commenti qui sotto!