Vuoi aggiungere contenuti multi-colonna ai tuoi post di WordPress?

Le colonne possono essere utilizzate per creare Layout accattivanti per le tue pubblicazioni e pagine.

I supporti di stampa tradizionali, come giornali e riviste, hanno utilizzato un layout a più colonne sin dai primi giorni di stampa. Il loro scopo era abilitare utenti più facile da leggere un testo più piccolo mentre si utilizza lo spazio disponibile economicamente.

Se non hai ancora creato un sito web o un blog su WordPress, ti invitiamo a consultare Come installare un blog WordPress in 7 passi avanti, Come trovare, installare e attivare un tema WordPress sul tuo blog

I layout a colonna singola sono più comunemente usati sul Web. comunque, il griglie con più colonne sono comunque utili per evidenziare i contenuti e facilitarne la lettura e l'analisi.

In questo tutorial, ti mostreremo come aggiungere facilmente contenuti multi-colonna ai tuoi post di WordPress senza scrivere alcun codice HTML.

Aggiungi contenuto a più colonne wordpress e1565264744355

Aggiunta di contenuto a più colonne in WordPress: la soluzione facile

La creazione di contenuto multi-colonna, noto anche come contenuto della griglia in WordPress, ora è facile perché è una funzionalità predefinita. Il nuovo editor di blocchi Gutenberg di WordPress propone un blocco di colonne.

Per aggiungere un layout a più colonne, è necessario creare un nuovo articolo o modificarne uno. Una volta nell'area di modifica, fai clic sul pulsante " aggiungere Nella parte superiore per aggiungere un blocco.

Quindi devi selezionare il blocco Colonne "Situato nella scheda" Elementi del layout ".

Aggiungi colonne wordpress

Vedrai il puntatore del mouse saltare nella colonna di sinistra e un segnaposto per il testo apparirà nella colonna di destra.

Colonne su wordpress gutenbeg

Come puoi vedere nello screenshot qui sopra, il blocco Colonna all'inizio sembra essere un'area vuota. Se passi il mouse a sinistra, puoi vedere il bordo del blocco evidenziato.

Potrai anche vedere i parametri del blocco nella colonna di destra dello schermo.

Esempio di colonne GutenbergPer impostazione predefinita, il blocco di colonne aggiunge due colonne. Puoi aumentare il numero di colonne che desideri aggiungere dalle impostazioni del blocco a destra. Ciò consente di aggiungere fino a sei colonne su una singola riga.

Modifica le colonne di wordpress di gutenbergBasta fare clic su una colonna e iniziare a digitare per aggiungere contenuti. Puoi utilizzare il tasto Tab sulla tastiera per passare alla colonna successiva.

Vai alla colonna successiva di wordpressAggiunta di contenuti multimediali e altri contenuti alle tue colonne

Oltre al contenuto di testo, puoi anche aggiungere immagini e incorporare video nelle colonne di WordPress.

Il blocco di colonne consente di aggiungere blocchi all'interno di ogni colonna. Passa il mouse su una colonna e noterai il "Aggiungi un nuovo blocco"Dentro. Puoi anche aggiungere un blocco inserendo il nome del blocco.

Aggiungi un'immagine a una colonna

Il blocco selezionato verrà visualizzato nella colonna. Puoi andare lì e aggiungere contenuti.

Per caricare - caricare - i tuoi media, scopri il nostro articolo su Come caricare in blocco i tuoi media su WordPress

Blocco immagine della colonna di Gutenberg

Ecco come potrebbe apparire la tua nuova colonna in tema WordPress predefinito Venti diciannove. In questo esempio utilizziamo tre colonne e l'ultima colonna contiene un'immagine.

Immagine aggiungi colonna Gutenberg

Se vuoi solo aggiungere un'immagine e del testo a lato, puoi anche usare il blocco Media e testo Invece di colonne. Questo blocco è progettato specificamente per visualizzare file multimediali come immagini e video accanto al testo.

Wordpress blocca i supporti di testo

Aggiunta di più colonne nell'editor classico di WordPress

Se non hai aggiornato WordPress a Gutenberg e stai ancora utilizzando ileditor classicoè necessario installare un plug-in separato per creare un layout di griglia di colonne.

Inizia installando e attivando il plugin Colonne a griglia leggera

Per istruzioni dettagliate, segui la nostra guida passo passo su come per installare un plugin in WordPress.

Dopo l'attivazione, è possibile creare un nuovo messaggio o aprire un vecchio messaggio da modificare. Quindi fare clic su " Aggiungi colonne Nella barra degli strumenti dell'editor visivo.

Aggiungi colonne wordpress classic editorOra vedrai una finestra popup che ti consente di aggiungere la tua prima colonna. Puoi scegliere quanta area può coprire la tua colonna, su desktop, tablet e dispositivi mobili in modo diverso.

Vai oltre scoprendo Come creare una larghezza pagina intera su WordPress

Ad esempio, se si imposta la percentuale di griglia del desktop 50%, la colonna coprirà metà della linea.

Definisci la percentuale di colonne

Ha molte opzioni per impostare la larghezza della colonna, da 5% a 100% con un intervallo 5. Puoi sceglierne uno facendo clic sul menu a discesa.

Opzione di larghezza della colonna

Quindi, è necessario aggiungere il contenuto della colonna nell'area "Contenuto", quindi fare clic sul pulsante "OK" per inserirlo nella pubblicazione.

Contenuto della colonna divi

Il plugin genererà lo shortcode richiesto con il tuo contenuto e lo aggiungerà al tuo editor di post.

Scopri in questo tutorial Come installare e configurare il plugin WP Super Cache per migliorare le prestazioni del tuo blog.

Colonna aggiunta al classico editor di wordpress

Ora che la tua prima colonna è stata aggiunta, puoi ripetere il processo per aggiungere altre colonne. Per l'ultima colonna, non dimenticare di selezionare la casella "Ultima colonna della riga'.

Aggiungi un'altra colonna al classico editor di wordpress

Successivamente, sarai in grado di salvare l'anteprima e visualizzarla in anteprima. Ecco come appare sul nostro sito Web di test Twenty Seventeen.

Colonna aggiunta demo wordpress

Se vuoi anche trovare temi WordPress che possano aiutarti a creare colonne sulle tue pagine o pubblicazioni, ecco i temi 3 WordPress premium perfetto per questo compito.

1. TheGem

Ci sono molti Temi WordPress che può pretendere di offrire un layout OnePage, ma nessuno può offrire la ricchezza di opzioni e funzionalità del modello TheGem WordPress. 

I temi wordpress multiuso di Thegem creano un sito web

Tutti gli elementi di design che associ a un buon sito Web OnePage sono presenti in questo tema WordPress : uno slider a schermo intero (che può essere creato utilizzando il plugin Revolution Slider fornito con il file tema WordPress), una scelta di sei stili di intestazione e la possibilità di creare sezioni a larghezza intera utilizzando il plug-in Visual Composer incluso nel pacchetto.

Inoltre, ha una serie di opzioni di personalizzazione per elementi come caratteri, colori e icone. È una cosa rara, ma ci sono anche dettagli che non ci piacciono su TheGem. Ma fondamentalmente è un tema WordPress adatto a te ovviamente, dato il numero di punti positivi che ha. È un forte concorrente, che faciliterebbe la creazione di un sito Web OnePage.

DownloadDemo | Web hosting

2. Stoccolma

Stoccolma è un tema WordPress progettato per aiutarti a creare il sito Web di un'impresa di costruzioni, di ingegneria civile o di qualsiasi azienda legata al mondo della ristrutturazione edilizia. Questo Modello WordPress è rivolto a professionisti attenti alla qualità e ai dettagli.

Stoccolma-temi-wordpress-multiuso-versatile-creare-sito-internet

Viene fornito con un pannello delle opzioni e un backend user-friendly, ti permetteranno di gestire facilmente i tuoi contenuti. Ci sono circa 20 demo di questo modello che presentano una vasta gamma di attività su cui è possibile utilizzare questo tema WordPress. E questi possono anche essere usati come base per la personalizzazione futura in modo che il tuo sito web abbia un aspetto unico.

Molto reattivo, viene visualizzato perfettamente su qualsiasi tipo di schermo. Se durante la personalizzazione o l'installazione di questo modello si riscontrano difficoltà, la documentazione completa inclusa nel pacchetto può fungere da guida. E se ancora non riesci, il supporto dedicato a questo tema WordPress rimane a tua disposizione.

DownloadDemo | Web hosting

3. Giove

Giove è un altro tema WordPress molto popolare. Ha demo 25 che coprono 6 dalle nostre categorie - agenzia, creatività, istruzione, cibo, salute ed eCommerce - e altri verranno aggiunti ad esso in futuri aggiornamenti. La maggior parte dei suoi layout ha un design minimalista, con una piacevole tipografia.

Giove-theme-wordpress-multiuso-versatile-creare-sito-internet

Uno dei principali punti di forza di Giove è il Personalizzatore di intestazioni creative che ti consente di personalizzare rapidamente e facilmente il design delle intestazioni del tuo sito web. Visual Composer, cursori 3 (Layer, Revolution e iCarousel), nuovi codici brevi 10, più di icone 1800 e tipi di post personalizzati 10 sono tutti inclusi nella consegna.

Anche i suoi tempi di caricamento della pagina sono eccellenti. Questo è un prodotto eccezionale e ti sarà difficile trovarne così tanti Temi WordPress avendo le sue caratteristiche.

DownloadDemo | Web hosting

Altre risorse consigliate

Per andare oltre nell'ottimizzazione del tuo blog o del tuo sito web, ti suggeriamo anche di consultare alcuni link che ti immergeranno nel mondo di Gutenberg

Conclusione

Ecco ! Questo è tutto per questo tutorial. Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere colonne ai tuoi post e pagine WordPress. Non esitate a condividi questo tutorial con i tuoi amici sui tuoi social network.

Se hai suggerimenti o commenti, saranno i benvenuti. Ma se sei un principiante, ti invitiamo a consultare il nostro risorse.

...