Vai al contenuto principale

Come aggiungere più colonne su WordPress senza utilizzare un plugin

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 passi 7 poi, 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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Per caricare - caricare - i tuoi media, scopri il nostro articolo su Come caricare i tuoi media di massa su WordPress

Blocco immagine della colonna di Gutenberg

Ecco come potrebbe apparire la tua nuova colonna nel tema WordPress predefinito Ventinove. 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.

Smetti di sprecare tempo e denaro!

Scopri lo strumento migliore per creare il tuo blog, il blog del tuo negozio online o qualsiasi altro sito web in pochi clic!

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 premio perfetto per questo compito.

1. TheGem

Esistono molti temi WordPress che possono pretendere di offrire un layout OnePage, ma nessuno può offrire la vasta gamma di opzioni e funzionalità disponibili nel modello WordPress TheGem. 

I temi wordpress multiuso di Thegem creano un sito web

Tutti gli elementi di design associati a un buon sito Web OnePage sono presenti in questo tema WordPress: un dispositivo di scorrimento a schermo intero (che può essere creato con il plug-in Revolution Slider fornito con il tema WordPress), una scelta di sei stili di intestazione e la possibilità di creare sezioni a larghezza intera usando 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 per una società di costruzioni, ingegneria civile o qualsiasi azienda legata al mondo della ristrutturazione edilizia. Questo modello WordPress è rivolto a professionisti che si preoccupano della qualità e dei 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 il tempo di caricamento della pagina è eccellente. Questo è un ottimo prodotto e sarà difficile trovare tanti temi WordPress con 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.

... 

Questo articolo contiene i commenti 18

  1. 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!

    1. 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.

  2. Tutto quello che posso dire è che questo è Geniale.
    funziona molto bene e CA risponde a tutte le mie aspettative.
    grazie nombreu (BCP)

      1. 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 ...

        1. 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.

          1. 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

          2. Vogliamo Mireille ma il tipo di servizio richiesto è, purtroppo, pagando e vi invitiamo a contattare il nostro team tecnico blogpascher.com

          3. Dato che ho installato una versione limitata gratuitamente, penso che il problema sia lì.
            Proverò ad installare un'altra versione ...

      2. 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?

  3. 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

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
6 azioni
quota4
Tweet1
Enregistrer1