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.
Filippo dice
Ciao, all’interno di un blocco, poniamo con 4 sezioni.
2 su ogni riga. come faccio a unirne 2 verticalmente?
Grazie
Tiziano Fogliata dice
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.
Filippo dice
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
Tiziano Fogliata dice
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.
Cristian dice
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?
Tiziano Fogliata dice
Ciao Cristian, sono sostanzialmente la stessa cosa.
alessandro Bernardi dice
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
Tiziano Fogliata dice
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.
Daniela dice
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….
Tiziano Fogliata dice
Utilizzi Internet Explorer? Se sì, basta usare un altro browser come Chrome o Firefox.
Silvia Affini dice
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?
Tiziano Fogliata dice
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.
Antonio Leone dice
Grazie per le utilissime indicazioni.
Ho bisogno di un aiuto su come disporre il testo attorno ad una immagine.
Buon lavoro!
Tiziano Fogliata dice
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.
Bassiano dice
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
Bassiano dice
una specifica, l’errore che ho è sull’altezza delle colonne, la larghezza è ok.
in pratica escono più corte
Tiziano Fogliata dice
Buongiorno, è la classica domanda che richiederebbe vedere come è stata realizzata la pagina per poter rispondere.
Christian dice
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
Tiziano Fogliata dice
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.
gaspare dice
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…
Tiziano Fogliata dice
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.
gaspare dice
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
Tiziano Fogliata dice
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.
Sara dice
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?
Tiziano Fogliata dice
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.
Vincenzo dice
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
Tiziano Fogliata dice
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/
Eric dice
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!
Tiziano Fogliata dice
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%.
Francesca dice
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
Tiziano Fogliata dice
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.
Diego dice
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….
Tiziano Fogliata dice
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à.
valentina dice
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!!
Tiziano Fogliata dice
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.