In questo tutorial troverai informazioni su:<\/p>\n\n\n\n
- Qual \u00e8 lo scopo delle colonne<\/a><\/li>
- Come funzionavano le colonne nel vecchio editor<\/a><\/li>
- Come creare colonne in WordPress senza plug-in (nell'editor di blocchi)<\/a><\/li>
- Impostazioni del blocco Colonne di base<\/a><\/li>
- Come lavorare con il blocco delle colonne di WordPress<\/a><\/li>
- Come modificare i blocchi nidificati<\/a><\/li>
- Le colonne bloccano i vantaggi<\/a><\/li><\/ul>\n\n\n\n
<\/span><\/a>Qual \u00e8 lo scopo delle colonne<\/span><\/h3>\n\n\n\n
Le colonne sul sito Web possono avere pi\u00f9 applicazioni. Prima di tutto possono rendere i contenuti ben organizzati, pi\u00f9 leggibili e pi\u00f9 facili da sfogliare. Organizzando il contenuto in colonne puoi evidenziare informazioni o parametri importanti.<\/p>\n\n\n\n
Ad esempio, puoi utilizzare il layout a pi\u00f9 colonne per presentare i tuoi servizi. Aggiungi un'immagine illustrativa, una descrizione o un pulsante. Ovviamente puoi rendere l'immagine cliccabile.<\/p>\n\n\n\n
![\"Layout](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-services.png\")
<\/a>Layout multicolonna con servizi<\/figcaption><\/figure><\/div>\n\n\n\n Analogamente ai servizi, puoi utilizzare le colonne su WordPress per mostrare prodotti o categorie di prodotti. \u00c8 l'ideale se hai un semplice sito web aziendale.<\/p>\n\n\n\n
![\"Layout](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shop-cat.png\")
<\/a>Colonne utilizzate per mostrare prodotti e categorie<\/figcaption><\/figure><\/div>\n\n\n\n Nei post del blog puoi utilizzare le colonne per separare i contenuti. Puoi posizionare testo, elenchi puntati o immagini fianco a fianco.<\/p>\n\n\n\n
![\"Contenuti](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-post-example.png\")
<\/a>Utilizzo delle colonne per separare i contenuti<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Come funzionavano le colonne nel vecchio editor<\/span><\/h3>\n\n\n\n
Prima di WordPress 5+, se volevi creare contenuti multicolonna, dovevi usare le tabelle. Era molto pi\u00f9 difficile che nel nuovo editor. Inoltre, di solito c'era un problema con gli stili e la visualizzazione delle tabelle sui dispositivi mobili. Come funzionava?<\/p>\n\n\n\n
Hai avuto pi\u00f9 opzioni su come creare colonne nel sito web di WordPress:<\/p>\n\n\n\n
1. Inserisci manualmente il codice HTML nell'editor di testo<\/b><\/p>\n\n\n\n
<table>\n <tr>\n <td><\/td>\n <td><\/td>\n <\/tr>\n<\/table><\/pre>\n\n\n\n
Questo approccio \u00e8 stato utilizzato principalmente dagli sviluppatori, che potevano creare rapidamente tabelle o colonne in base alle loro esigenze. Lo svantaggio era che non tutti i temi WordPress potevano gestire bene le colonne. Le tabelle di solito non erano perfette e l'utente medio non poteva risolvere facilmente tutti i possibili problemi.<\/p>\n\n\n\n
2. Consentire le tabelle nell'editor di WordPress<\/b><\/p>\n\n\n\n
Poich\u00e9 WordPress utilizzava l'editor TinyMCE, era possibile consentire alle funzioni di modificare le tabelle. Se sei interessato a saperne di pi\u00f9, puoi trovare tutti i dettagli in questo foro<\/a>. Nel caso in cui tu faccia la stessa cosa per i nostri temi AIT, le tabelle funzioneranno correttamente.<\/p>\n\n\n\n
3. Utilizzo dell'elemento Colonne nei temi AIT<\/b><\/p>\n\n\n\n
Se utilizzi uno dei nostri vecchi temi WordPress, conosci sicuramente il nostro elemento Colonne. Questo elemento pu\u00f2 essere utilizzato per aggiungere colonne all'interno delle pagine. \u00c8 un elemento ordinabile, il che significa che puoi posizionarlo ovunque ti serva. Il vantaggio \u00e8 la sua variabilit\u00e0 all'interno delle pagine.<\/p>\n\n\n\n
![\"Elemento](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/ait-columns-element.png\")
<\/a>Colonne di elementi ordinabili: puoi usarlo in qualsiasi tema AIT<\/figcaption><\/figure><\/div>\n\n\n\n 4. Scarica il plug-in di terze parti per gestire le tabelle<\/b><\/p>\n\n\n\n
Un'altra soluzione su come creare colonne nei post e nelle pagine di WordPress era scaricare uno dei plugin disponibili per la creazione di tabelle. Questi plugin consentono di aggiungere colonne\/tabelle utilizzando pochi clic senza alcuna codifica. Era possibile utilizzarlo anche da utenti meno esperti.<\/p>\n\n\n\n
<\/span><\/a>Come creare colonne in WordPress senza plug-in (nell'editor di blocchi)<\/span><\/h3>\n\n\n\n
Grazie al nuovo editor di blocchi, la creazione di colonne \u00e8 diventata estremamente semplice. Se usi ancora il vecchio WordPress, ora \u00e8 il momento giusto per aggiornare alla versione pi\u00f9 recente. Potrai aggiungere e gestire colonne semplicemente, in pochi click utilizzando il blocco Colonne.<\/p>\n\n\n\n
Questo blocco \u00e8 un gradito cambiamento per tutti coloro che vogliono lavorare con contenuti a pi\u00f9 colonne, presentare prodotti o scrivere blog e non hanno esperienza con la programmazione.<\/p>\n\n\n\n
Diamo un'occhiata a come aggiungere il blocco Colonne e come creare colonne in WordPress senza plugin:<\/p>\n\n\n\n
- La prima opzione \u00e8 fare clic su "+" nella barra in alto e selezionare Blocco colonne dai blocchi disponibili.<\/li>
- La seconda opzione \u00e8 fare clic su "+" ovunque all'interno dell'editor.\n<\/li><\/ul>\n\n\n\n
![\"Aggiungi](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-add.png\")
<\/a>Aggiunta di colonne in WordPress facendo clic su "+"<\/figcaption><\/figure><\/div>\n\n\n\n ![\"Aggiungi](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shortcut.gif\")
<\/a>Aggiunta di colonne in WordPress utilizzando la barra "\/"<\/figcaption><\/figure><\/div>\n\n\n\n <\/span>Layout predefiniti del blocco Colonne di WordPress (NOVIT\u00c0 da WP 5.3)<\/span><\/h4>\n\n\n\n
L'ultima versione ha apportato enormi miglioramenti nelle impostazioni delle colonne. Prima di tutto sono disponibili stili di layout predefiniti. Cosa significa?<\/p>\n\n\n\n
Gli utenti possono scegliere il layout e lo stile di allineamento nel processo di aggiunta di un nuovo blocco all'area del contenuto. I layout predefiniti possono essere molto utili, specialmente per quegli utenti che non hanno competenze WordPress avanzate. Questa funzione rappresenta il modo in cui immaginiamo il modo in cui creare colonne in WordPress (senza plug-in o qualsiasi altro componente aggiuntivo).<\/p>\n\n\n\n
![\"Layout](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wordpress-columns.jpg\")
Opzioni di layout predefiniti<\/figcaption><\/figure>\n\n\n\n <\/span><\/p>\n\n\n\n
Se non vuoi scegliere il layout predefinito nel blocco Colonne di WordPress, saltalo. Dopo aver saltato questo passaggio, il contenuto verr\u00e0 separato in 2 parti uguali\/due singole colonne che possono essere modificate.<\/p>\n\n\n\n
![\"Blocco](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns.png\")
<\/a>Blocco colonne con 2 aree predefinite (colonne) modificabili<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Colonne Blocca le impostazioni di base<\/span><\/h4>\n\n\n\n
Il blocco delle colonne di WordPress stesso non ha molte opzioni. Perch\u00e9 \u00e8 cos\u00ec spiegheremo pi\u00f9 avanti. Nella barra in alto puoi modificare l'allineamento in largo o a tutta larghezza. Puoi modificare questo allineamento se \u00e8 supportato dal tuo tema attivo.<\/p>\n\n\n\n
![\"Barra](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-toolbar.png\")
<\/a>Barra degli strumenti superiore con opzioni di allineamento<\/figcaption><\/figure><\/div>\n\n\n\n L'impostazione del blocco colonne pi\u00f9 importante \u00e8 il numero di colonne nella barra laterale dell'ispettore sul lato destro. Di default ci sono 2 colonne, ma puoi aumentare questo numero a 6. Puoi cambiarlo usando il mouse o inserendo un numero. Come appare lo vedrai subito dopo aver aumentato o diminuito le colonne. Il blocco si modifica dinamicamente a seconda del dispositivo di scorrimento.<\/p>\n\n\n\n
![\"Modifica](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-count.gif\")
<\/a>Muoviti con il cursore per modificare il numero di colonne di cui hai bisogno<\/figcaption><\/figure><\/div>\n\n\n\n \u00c8 molto pratico perch\u00e9 cambi letteralmente il numero di colonne in pochi secondi senza modifiche difficili alle impostazioni o alla codifica.<\/p>\n\n\n\n
Analogamente ad altri blocchi nell'editor di WordPress, puoi inserire la classe CSS personalizzata anche nel blocco Colonne.<\/p>\n\n\n\n
<\/span>Block appender per un lavoro pi\u00f9 fluido con i blocchi<\/span><\/h4>\n\n\n\n
Il blocco colonne \u00e8 speciale perch\u00e9 puoi creare pi\u00f9 blocchi con esso. Fino al rilascio della nuova versione era piuttosto difficile lavorare con i singoli blocchi. Quando volevi aggiungere un blocco, non sapevi esattamente dove fare clic. Grazie a Block appender (e alla sua differenziazione per colore di sfondo) \u00e8 pi\u00f9 facile inserire il contenuto nella colonna appropriata.<\/p>\n\n\n\n
![\"Blocca](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wp-columns-block-appender.jpg\")
Blocco appender con colore di sfondo<\/figcaption><\/figure>\n\n\n\n <\/span><\/a>Come lavorare con WordPress Columns Block<\/span><\/h3>\n\n\n\n
La bellezza del blocco Colonne \u00e8 che ogni colonna pu\u00f2 annidare altri blocchi. Pu\u00f2 essere paragrafo, blocco immagine o blocco pulsante. Il numero massimo di colonne \u00e8 6, puoi quindi creare contenuti multicolonna di cui hai bisogno. Come accennato in precedenza, per presentare i prodotti \u00e8 possibile aggiungere l'immagine del prodotto, il nome, il prezzo e il pulsante fianco a fianco.<\/p>\n\n\n\n
![\"Diversi](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-blocks.png\")
<\/a>Con il blocco Colonne puoi presentare diversi tipi di contenuto affiancati<\/figcaption><\/figure><\/div>\n\n\n\n Puoi anche utilizzare diversi blocchi di colonne uno sotto l'altro per creare la griglia. Puoi usarlo per presentare i tuoi servizi o promuovere funzionalit\u00e0 importanti.<\/p>\n\n\n\n
![\"Effetto](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-features.png\")
<\/a>Effetto griglia dei blocchi Colonne posizionati uno sotto l'altro<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Modifica di blocchi nidificati<\/span><\/h4>\n\n\n\n
Come abbiamo gi\u00e0 accennato, puoi nidificare altri blocchi all'interno delle colonne. Ogni blocco nidificato ha tutte le sue impostazioni disponibili. Ci\u00f2 significa che se aggiungi il blocco immagine nella colonna, puoi modificarlo esattamente come in standalone Blocco immagine<\/a>.<\/p>\n\n\n\n
![\"Modifica](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-image-block.png\")
<\/a>Impostazioni disponibili per il blocco Immagine nidificato nel blocco Colonne<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Conclusione: le colonne bloccano i vantaggi<\/span><\/h3>\n\n\n\n
Il rilascio dell'editor a blocchi di WordPress e la disponibilit\u00e0 dell'utilizzo di colonne nelle pagine e nei post hanno notevolmente semplificato il modo in cui gli utenti sono in grado di lavorare con i contenuti. Grazie al blocco delle colonne di WordPress non \u00e8 pi\u00f9 importante utilizzare soluzioni di terze parti o scrivere codice HTML. L'aggiunta o l'eliminazione di colonne \u00e8 possibile con pochi clic. Tutto \u00e8 molto intuitivo e veloce anche per gli utenti meno tecnici.<\/p>\n\n\n\n
I tuoi contenuti nel layout a pi\u00f9 colonne saranno ben allineati nella griglia. Sembrer\u00e0 anche buono nella versione reattiva subito.<\/p>\n\n\n\n
Stavamo lavorando duramente sul nuovo tema WordPress Citadela, sviluppato appositamente per l'editor di blocchi di WordPress. Ulteriori informazioni sul tema Citadela e sui pacchetti di layout disponibili.<\/p>\n
\n\nIndice dei contenuti<\/p>\n<\/span><\/div>\n
- Come funzionavano le colonne nel vecchio editor<\/a><\/li>