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.
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 ".
Vedrai il puntatore del mouse saltare nella colonna di sinistra e un segnaposto per il testo apparirà nella colonna di destra.
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.
Per 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. Basta fare clic su una colonna e iniziare a digitare per aggiungere contenuti. Puoi utilizzare il tasto Tab sulla tastiera per passare alla colonna successiva.Aggiunta 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.
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
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.
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.
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.
Ora 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.
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.
Quindi, è necessario aggiungere il contenuto della colonna nell'area "Contenuto", quindi fare clic sul pulsante "OK" per inserirlo nella pubblicazione.
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.
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'.
Successivamente, sarai in grado di salvare l'anteprima e visualizzarla in anteprima. Ecco come appare sul nostro sito Web di test Twenty Seventeen.
Se vuoi anche trovare temi WordPress che possano aiutarti a creare colonne sulle tue pagine o pubblicazioni, ecco i temi 3 WordPress premium nel mondo 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.
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.
Download | Demo | 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.
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.
Download | Demo | 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.
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.
Download | Demo | 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
- Come preparare il tuo sito web per Gutenberg
- Come faccio a sapere se il tuo plugin è compatibile con Gutenberg?
- Gutenberg migliorerà o rompere WordPress?
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.
...
Ciao, ho questo plug-in…. ma non funziona bene, succede:
Sto creando due colonne, una più piccola per la foto, un'altra più grande per il testo, quindi il testo è solo 2 righe, non a tutta l'altezza della colonna, quando si salva il testo SALTA sotto la foto, piuttosto che stai accano, guarda che scompare una colonna ...
Cosa faccio? perché sta succedendo questo, c'è un altro plg-in migliore e più semplice di questo qui?
Grazie, ti sarei grato per l'aiuto!
Ciao Irina,
Prova ad attivare il tema WordPress predefinito, se tutto funziona correttamente, il problema è con il tuo tema WordPress corrente.
Controlla anche di aver effettuato gli aggiornamenti dei plugin.
Tutto quello che posso dire è che questo è Geniale.
funziona molto bene e CA risponde a tutte le mie aspettative.
grazie nombreu (BCP)
Buongiorno,
Grazie mille, è fantastico
Come aggiungere colore alla mia rubrica?
Mercii
Buongiorno,
è possibile farlo utilizzando un CSS personalizzato.
Buongiorno,
Non sono riuscito a incollare il testo in una colonna. È possibile ?
Buongiorno,
come si fa a procedere?
Ho copiato del testo e ho provato a incollare con CRTL + V, senza successo. Il menu contestuale con il clic destro non offre la possibilità di incollare.
Non ho trovato altra soluzione che riscrivere tutto ...
Ci scusiamo per il ritardo di risposta.
Potete assicurarvi che facendo clic con il pulsante destro del mouse su un altro elemento della pagina venga visualizzato il menu contestuale? In tal caso, probabilmente c'è un problema JavaScript con il tuo hosting.
Se sei su Google Chrome, vai alla pagina in questione in cui hai il problema, quindi premi il tasto "F12" (si aprirà una finestra o verrà allegata alla pagina) quindi scegli la scheda "Console" . Fai uno screenshot di questa scheda e ti dirò se c'è un problema.
Buongiorno,
Merci pour votre réponse.
Il mio sito è ospitato da Free, potrebbe esserci un problema con javascript.
Puoi dirmi come inoltri lo screenshot che ho fatto?
cordialmente
Vogliamo Mireille ma il tipo di servizio richiesto è, purtroppo, pagando e vi invitiamo a contattare il nostro team tecnico blogpascher.com
Dato che ho installato una versione limitata gratuitamente, penso che il problema sia lì.
Proverò ad installare un'altra versione ...
Ho copiato del testo e ho provato a incollarlo in una colonna del plugin. Impossibile, né con la scorciatoia da tastiera CTRL + V, né nel menu contestuale del clic destro che non offre questa funzione.
Ci sono delle alternative riscrivere tutto?
Ho solo una parola da dire Fantastico! L'ho installato e dopo due o tre correzioni sono riuscito a creare colonne, grazie!
Grazie Ronnie per questo feedback.
ciao ho installato colonne wp avanzate.
ma quando guardo sulla pagina ho un quadratino bianco presente in alto a sinistra di ogni colonna? Mi potete aiutare. grazie
Buonasera,
Hai provato a utilizzare il tema wordpress predefinito per vedere se il problema persiste?
Buongiorno,
Non possiamo davvero aiutare se non si danno i dettagli su come fare per avere un quadrato bianco.
Merci.