• Passa alla navigazione primaria
  • Passa al contenuto principale
  • Passa alla barra laterale primaria
  • Passa al piè di pagina

Tiziano Fogliata

  • Home
  • WordPress
  • Web Marketing
  • Email Marketing
  • Contatti

Home » WordPress » Come creare un layout a più colonne con Elementor

Come creare un layout a più colonne con Elementor

Scritto da Tiziano Fogliata il 27 Aprile 2018 - Aggiornato il 7 Aprile 2020

Quando crei un layout con Elementor l’istinto ti porta a cliccare immediatamente sul pulsante “Aggiungi una nuova sezione”, ma questa potrebbe non essere sempre la scelta migliore e ti spiego il perché.

Se vuoi imparare a usare al meglio questo diffuso e potente page builder per WordPress ti consiglio di guardare il video per evitare un errore che potrebbe farti perdere parecchio tempo nella costruzione del tuo sito.

Con Elementor infatti, anche le persone che hanno poca o nessuna confidenza con gli aspetti tecnici legati alla creazione di una pagina Web, possono facilmente ottenere risultati sorprendenti. È opportuno però capire alcuni concetti base nell’utilizzo di un page builder per WordPress come Elementor.

In questo video ti spiego come realizzare una layout a più colonne con Elementor, una struttura che può essere utile in più situazioni, sia che si tratta di creare una landing page oppure una qualsiasi altra pagina del tuo sito.

Scoprirai come in pochi minuti puoi creare una struttura per i contenuti della pagina che potrai replicare facilmente sul tuo sito.

Ti consiglio anche di guardare il video tutorial dedicato a un altro errore che spesso le persone commettono quando utilizzano un page builder per WordPress.

Share16
Tweet3
Share8
WhatsApp

Sezione: WordPress Argomento: Elementor, Video Tutorial

Interazioni del lettore

Ti potrebbero interessare anche…

Uso dei Tag Dinamici col Theme Builder di Elementor Pro
Inserire codice personalizzato con Elementor
Landing Page con Elementor: ora è più facile crearle e gestirle

Commenti

  1. Filippo dice

    8 Luglio 2019 alle 15:43

    Ciao, all’interno di un blocco, poniamo con 4 sezioni.
    2 su ogni riga. come faccio a unirne 2 verticalmente?
    Grazie

    Rispondi
    • Tiziano Fogliata dice

      8 Luglio 2019 alle 15:59

      Ciao, la domanda non mi è chiara e non capisco cosa intenda con “unire verticalmente”. Tieni presente che con Elementor si crea una sezione, all’interno della sezione si creano le colonne e dentro le colonne posizionano i widget.

      Rispondi
      • Filippo dice

        8 Luglio 2019 alle 16:14

        Prendiamo l’esempio di un foglio excel.
        ho 2 righe e 2 colonne. Quindi 4 sezioni giusto?
        Se le nominiamo partendo da in alto a sinistra avremo la sezione 1 poi la 2, sotto (sempre da sinistra) la 3 e poi la 4.
        Ecco, io vorrei poter unire la 1 e 3, cosi da avere un unico blocco a sinistra e sulla destra una colonna con 2 righe

        Rispondi
        • Tiziano Fogliata dice

          8 Luglio 2019 alle 16:28

          L’approccio più semplice per ottenere una cosa del genere è quello di creare una sezione, all’interno della quale inserisci due colonne e nella colonna di destra inserisci due widget uno sotto l’altro. Mentre in quella di sinistra solo uno. Oppure potresti utilizzare il widget Sezione Interna.
          Quello che non puoi fare è modificare le sezioni e colonne come faresti con un foglio Excel.

          Rispondi
  2. Cristian dice

    10 Novembre 2019 alle 17:51

    Complimenti e grazie per la guida. Nell’ultimo aggiornamento di Elementor , il widget “colonne” è stato sostituito con “sezione interna”. Sulla base del tuo consiglio, cambia qualcosa?

    Rispondi
    • Tiziano Fogliata dice

      11 Novembre 2019 alle 09:09

      Ciao Cristian, sono sostanzialmente la stessa cosa.

      Rispondi
  3. alessandro Bernardi dice

    5 Febbraio 2020 alle 09:10

    Ciao Filippo
    ho visto che caricando un’ immagine full screen nella pagina appena aggiorno la stessa mi appare l’immagine piccole per mezzo secondo e poi divente full. Dove sbaglio secondo te?
    Grazie e complimenti

    Rispondi
    • Tiziano Fogliata dice

      5 Febbraio 2020 alle 10:57

      Ciao Alessandro, il problema potrebbe essere causato o da un’immagine troppo pesante. Oppure da quello che in gergo viene chiamato FOUC (flash of unstyled content), ossia quando durante la fase di caricamento della pagina riusciamo a vedere un elemento prima che venga applicato lo stile corretto. Se la causa è questa, qui trovi alcune possibili soluzioni.

      Rispondi
  4. Daniela dice

    2 Marzo 2020 alle 23:22

    Ho installato elementor su WordPress ma non mi fa trascinare i widget nella sezione che creo! Mi spunta un pallino rosso e non rilascia il widget bel sezione….

    Rispondi
    • Tiziano Fogliata dice

      3 Marzo 2020 alle 07:43

      Utilizzi Internet Explorer? Se sì, basta usare un altro browser come Chrome o Firefox.

      Rispondi
  5. Silvia Affini dice

    2 Aprile 2020 alle 12:31

    Ciao!
    ho una domanda: ho creato una sezione e ho scelto di applicarle come sfondo una galleria di immagini. Nell’anteprima e nell’immagine del sito questa galleria non si vede ma rimane lo spazio vuoto. Come mai?

    Rispondi
    • Tiziano Fogliata dice

      2 Aprile 2020 alle 19:46

      Ciao Silvia, non sapendo come hai realizzato la pagina, quali altri plugin sono installati, quale tema è attivo, quale browser utilizzi e non vedendo fisicamente la pagina, è impossibile risponderti.

      Rispondi
  6. Antonio Leone dice

    8 Aprile 2020 alle 21:54

    Grazie per le utilissime indicazioni.
    Ho bisogno di un aiuto su come disporre il testo attorno ad una immagine.
    Buon lavoro!

    Rispondi
    • Tiziano Fogliata dice

      9 Aprile 2020 alle 18:25

      Purtroppo non esiste un solo modo per farlo e la soluzione varia in base a cosa si vuole ottenere. Una possibile soluzione è quella di inserire l’immagine direttamente all’interno del testo (nel widget Editor di testo) e poi impostare l’allineamento dell’immagine a destra o sinistra.

      Rispondi
  7. Bassiano dice

    10 Aprile 2020 alle 00:50

    Buongiorno e grazie per la grande disponibilità!
    una domanda… perchè mentre modifico una pagina in elementor vedo un’impaginazione ed invece se vado nella visualizzazione “normale” del sito ne vedo un’altra?
    mi spiego, ho 5 colonne appaiate con un hover effect per far apparire un testo, ho impostato la larghezza di sezione su “boxed” mettendola a 1550, ho poi impostato le 5 colonne con larghezza immagine custom a 310×900.
    lì vedo tutto bene…. ma quando vado nella pagina non è più cosi, non capisco…. (ho provato altezza minima e predefinito nella sezione)

    poi un’altra cosa, quando apro il sito ora la pagina di landing è una pagina con header, footer e la scritta HOME in mezzo, cliccando su HOME appare la giusta pagina di landing, cosa sbaglio?

    ringrazio anticipatamente per la gentilezza

    Rispondi
    • Bassiano dice

      10 Aprile 2020 alle 00:51

      una specifica, l’errore che ho è sull’altezza delle colonne, la larghezza è ok.

      in pratica escono più corte

      Rispondi
      • Tiziano Fogliata dice

        10 Aprile 2020 alle 09:11

        Buongiorno, è la classica domanda che richiederebbe vedere come è stata realizzata la pagina per poter rispondere.

        Rispondi
  8. Christian dice

    27 Aprile 2020 alle 17:41

    Ciao, sono alle prese con elementor, ho seguito alcuni tuoi tutorial, ma non riesco a capire 2 cose:
    1) alcune parti dei sotto menu sono in inglese, mentre nei tuoi tutorial sono in italiano;
    2) quando creo una sezione, mi rimane un bordo in alto che non ho capito come portare a zero.

    Grazie di tutto

    Rispondi
    • Tiziano Fogliata dice

      28 Aprile 2020 alle 16:36

      Per quanto riguarda le traduzioni dell’interfaccia di Elementor, puoi andare nella sezione Bacheca -> Aggiornamenti del tuo sito WordPress e verificare se sono disponibili gli aggiornamenti delle traduzioni.
      Mentre per quanto riguarda il bordo superiore, bisogna capire se è un bordo o un margine. Se rimane dello spazio vuoto, potresti risolvere la cosa impostando un margine superiore negativo per far salire la tua sezione.

      Rispondi
  9. gaspare dice

    4 Maggio 2020 alle 03:23

    Ciao tiziano avevo una domanda da farti.. Sto creando un blog con elementor e ho creato i miei articoli con 2 sole sezioni con dentro sezioni interne ( la prima sezione con il titolo e il video e la seconda con il resto del testo con qualche immagine). Mi chiedevo se in chiave seo è importante integrare il tutto in una sola sezione…

    Rispondi
    • Tiziano Fogliata dice

      5 Maggio 2020 alle 10:48

      Ciao Gaspare, in linea di principio, meno sezioni e sottosezioni crei meglio è. In questo modo la struttura della pagina è più semplice ed eviti un eccesso di markup HTML. Per quanto riguarda la creazione degli articoli inoltre, io suggerisco sempre di usare l’editor standard di WordPress (Gutenberg) per scriverli ed evitare di ricorrere ad Elementor o altri page builder per la creazione degli articoli.

      Rispondi
      • gaspare dice

        5 Maggio 2020 alle 17:32

        Tiziano grazie mille per la risposta e per i consigli.. Ti volevo dire che con il page builder di elementor mi trovo troppo bene a organizzare gli articoli perché riesco a inserire qualsiasi cosa in modo facile e non so se con l’editor standard di WordPress è cosi semplice.. quindi mi domando è meglio che cambio i miei articoli e li creo con l’editor standard? Poi Tiziano volevo chiederti se mi puoi dare qualche consiglio sul mio sito : ganardinerocasper.com.. ancora grazie

        Rispondi
        • Tiziano Fogliata dice

          6 Maggio 2020 alle 11:12

          Io, soprattutto per gli articoli, consiglio di usare l’editor standard di WordPress anziché Elementor o altri page builder perché questo di evita di essere troppo dipendente da un page builder, ti permette di creare pagine più leggere e veloci da caricare. Inoltre, per la maggior parte degli articoli, l’editor di WordPress è più che sufficiente e non servono tutti i widget messi a disposizione da Elementor.

          Rispondi
  10. Sara dice

    13 Giugno 2020 alle 16:19

    Salve,
    avrei una domanda su elementor, ho personalizzato con elementor la griglia prodotti di woocommerce (composta da 5 colonne e due righe), vorrei però tenere ancorato in basso al singolo box prodotto il tasto”aggiungi al carrello”.
    Questo per evitare che in caso di descrizione su due righe il tasto sia sfalsato in altezza.
    Quale funzione potrei utilizzare?

    Rispondi
    • Tiziano Fogliata dice

      15 Giugno 2020 alle 11:17

      Ciao, non mi occupo di WooCommerce, ma nella griglia prodotti di Elementor anche se il titolo del prodotto è su più righe il pulsante aggiungi al carrello è sempre allineato.

      Rispondi
  11. Vincenzo dice

    28 Luglio 2020 alle 16:21

    Buongiorno,
    ho installato Elementor ed ho creato tutte le pagine del sito. Ha sempre funzionato correttamente, ma da un po di tempo non so perchè non visualizzo sul sito i divisori e le impostazioni delle immagini, mentre nella pagine di edit vedo tutto correttamente

    Rispondi
    • Tiziano Fogliata dice

      29 Luglio 2020 alle 14:12

      Per rispondere mi servirebbe la sfera di cristallo 😉
      Potrebbe essere un conflitto con altri plugin, con il tema, oppure un problema di cache. Ti conviene contattare il supporto di Elementor e fornire loro tutti i dettagli della tua installazione (se hai la versione Pro). Se usi la versione free puoi usare il forum di supporto di wordpress.org https://wordpress.org/support/plugin/elementor/

      Rispondi
  12. Eric dice

    2 Agosto 2020 alle 18:05

    Ciao Tiziano ho letto con interesse il tuo articolo e guardato il tuo video e mi hanno aiutato molto. Avrei solo un dubbio che mi sta facendo impazzire.
    Nella home, sotto l’header, ho creato una sezione a larghezza piena e altezza “a pieno schermo” con una galleria di sfondo. Il settaggio a pieno schermo comporta che la sezione non tenga conto dell’header e sfori in basso oltre la schermata. La situazione peggiora visualizzandola con tablet e smartphone perchè l’altezza della sezione non si può modificare in elementor in base alla periferica. Se inserisco un’altezza minima si risolve, ma con il pc, in funzione delle dimensioni del monitor con cui visualizzi la pagina, la sezione è troppo piccola o grande. Mi capita una cosa simile nel menù dell’header, che su un monitor a 32″ occupa lo spazio ideale sulla destra, e su un 19″ quasi tutto l’header. Grazie per la risposta!

    Rispondi
    • Tiziano Fogliata dice

      3 Agosto 2020 alle 17:21

      Ciao, io non uso quasi mai l’altezza a pieno schermo. Piuttosto preferisco usare l’altezza minima e impostare come altezza 100 VH.
      L’altezza minima inoltre la può personalizzare in base al device.
      Se vuoi che l’header occupi il 20% dell’altezza lo imposti a 20 VH e se imposti la sezione sottostante a 80 VH, questa occuperà il restante 80%.

      Rispondi
  13. Francesca dice

    26 Novembre 2020 alle 19:02

    Ciao,
    Vorrei mettere, tramite elementor, due icone affiancate e fare in modo che rimangano così sia da versione desktop sia da versione mobile. Riesco a metterle affiancate solo nella versione desktop, come posso metterle così anche da mobile senza che si dispongano automaticamente in colonna?

    Grazie

    Rispondi
    • Tiziano Fogliata dice

      27 Novembre 2020 alle 11:02

      Ciao Francesca, quando modifichi la pagina in modalità mobile devi impostare la larghezza di ognuna delle due singole colonne al 50%. In questo modo appariranno affiancate anche su mobile.

      Rispondi
  14. Diego dice

    5 Dicembre 2020 alle 18:28

    Ciao Tiziano, ho un problema dal quale proprio non riesco a uscirne.
    Nelle impostazioni globali sia i colori che i font e i link o le tag rispondo perfettamente, in diretta e simultaneamente ai cambiamenti che seleziono nelle varie voci.
    Purtroppo però SOLO il raggio o curvatura dei pulsanti proprio non risponde al setting globale e per modificarli devo farli uno per uno nel setting ogni singolo widget. Sono disperato, in due giorni ho disistallato tutto e riattivato più volte ma non ce n’è… aiuto….

    Rispondi
    • Tiziano Fogliata dice

      7 Dicembre 2020 alle 11:32

      Ciao, se le impostazioni del raggio sono impostate a livello di singolo pulsante, le impostazioni globali non vengono applicate. Quindi devi togliere le impostazioni del raggio su ogni singolo widget pulsante.
      Un’altra possibile spiegazione è qualche conflitto con il CSS del tema. Comunque ti consiglio di contattare il supporto di Elementor, in modo da segnalare loro un eventuale bug o incompatibilità.

      Rispondi
  15. valentina dice

    11 Dicembre 2020 alle 15:35

    Ciao Tiziano, ho un problema quando trascino un widget articolo o un widget post, in poche parole prima li vedevo, adesso se provo a inserire entrambi mi appare sono una linea blu piccola e non capisco cosa sia perchè i setaggi sono tutti predefiniti.
    Grazie mille!!

    Rispondi
    • Tiziano Fogliata dice

      12 Dicembre 2020 alle 17:12

      Ciao, trascinando i widget di Elementor, io ricordo di aver sempre visto una linea blu/azzurra che indica dove il widget viene posizionato una volta che rilasci il pulsante del mouse.

      Rispondi

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato.

Barra laterale primaria

Mi presento

Tiziano FogliataMi chiamo Tiziano Fogliata e mi occupo di consulenza e formazione in ambito WordPress e digital marketing.
Aiuto aziende e professionisti a sfruttare strumenti come WordPress, l'email marketing e la marketing automation per comunicare, trovare nuovi clienti e far crescere la propria attività. Autore di due libri su WordPress editi da Hoepli. Continua…

WordPress: articoli consigliati

  • Come scegliere l’hosting per il tuo sito
  • Come scegliere un tema WordPress
  • Come installare WordPress su hosting SiteGround
  • 16 cose da fare prima di pubblicare il tuo sito
  • Quanto costa realizzare un sito WordPress
  • Perché consiglio Genesis come tema per WordPress
  • Landing page su WordPress: guida alle soluzioni migliori
  • Guida ai Page Builder per WordPress
  • Come e perché fare il backup di un sito WordPress
  • Siti WordPress in più lingue con WPML
  • Gravity Forms: il miglior plugin WordPress per creare moduli

Web Marketing

  • Funnel Marketing per vendere online
  • Landing page: cos’è e perché ne hai bisogno
  • Web Marketing: differenze tra tattica e strategia
  • Come usare Google Optimize per effettuare A/B test
  • Guida alla scelta del miglior servizio di email marketing

Gli strumenti e i servizi che uso

  • Hardware e dispositivi che utilizzo
  • Le app e i servizi che utilizzo

Footer

Link veloci

  • Video tutorial
  • I migliori plugin per WordPress
  • Guida all'email marketing
  • Glossario
  • WordPress FAQ

Risorse e formazione

  • Risorse WordPress
    I temi, i plugin e le migliori risorse per il tuo sito
  • Corsi online
    Per imparare in modo facile passo dopo passo
  • Consulenza e Formazione
    Sessioni di consulenza o formazione personalizzate

Contatti e Social

  • Contattami
  • Facebook
  • YouTube
  • Twitter
  • Instagram
  • Feed RSS

©2004–2021 Tiziano Fogliata | Informazioni sul sito | Privacy Policy | Cookie Policy | Preferenze Cookie
Partita IVA: 02689700983 | Registro Imprese di Brescia n. 471035