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.
Il widget di Elementor mostrato nel video si chiama “Colonne“, ma nelle versioni più recenti di Elementor è stato rinominato in “Sezione Interna“. Le funzionalità sono identiche, è cambiato solo il nome.
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.
Ciao, all’interno di un blocco, poniamo con 4 sezioni.
2 su ogni riga. come faccio a unirne 2 verticalmente?
Grazie
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.
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
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.
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?
Ciao Cristian, sono sostanzialmente la stessa cosa.
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
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.
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….
Utilizzi Internet Explorer? Se sì, basta usare un altro browser come Chrome o Firefox.
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?
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.
Grazie per le utilissime indicazioni.
Ho bisogno di un aiuto su come disporre il testo attorno ad una immagine.
Buon lavoro!
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.
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
una specifica, l’errore che ho è sull’altezza delle colonne, la larghezza è ok.
in pratica escono più corte
Buongiorno, è la classica domanda che richiederebbe vedere come è stata realizzata la pagina per poter rispondere.
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
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.
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…
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.
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
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.
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?
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.
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
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/
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!
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%.
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
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.
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….
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à.
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!!
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.
Ciao Tiziano, spero tu mi possa aiutare.
Ho un problema con la modalità responsive. Praticamente se visualizzo la pagina dallo smartphone mi lascia uno spazio bianco a destra. Spero di essere stato chiaro.
Ti ringrazio anticipatamente.
Silvio
È un problema che può capitare e può avere molte cause diverse, che derivano spesso dal modo col quale è stata costruita la pagina. Bisognerebbe rivedere la pagina sezione per sezione ed elemento per elemento fino a trovare il colpevole.
Puoi anche provare ad applicare questo codice css alla pagina, per vedere se risolve il problema:
@media only screen and (max-width: 768px){
html,
body{
width:100%;
overflow-x:hidden;
}
}
Se non sai come inserirlo, qui trovi la spiegazione.
Buongiorno Tiziano,
avrei una domanda.
E’ possibile inserire una sezione contenente un’immagine alla quale aggiungo il link personalizzato, senza che le dimensioni dell’immagine si riducano?
Nel caso specifico:
ho una sezione la cui struttura è divisa in due colonne, in ciascuna delle quali ho inserito un’immagine.
La sezione è a larghezza piena, e le immagini sono anch’esse a larghezza massima, con uno spazio intermedio tra le due. Va tutto bene finché non inserisco i link nelle due immagini. Dopo che lo faccio si rimpiccioliscono di molto e anziché dare l’effetto che voglio (cioè di colpire l’utente, perché sono immagini abbastanza emotive e ricche di dettagli) sembrano due francobolli stampati sulla pagina.
Perché le immagini perdono lo stile che gli ho definito quando inserisco i link?
E’ normale, oppure è un problema che capita solo a me?
Grazie in anticipo
Ciao, non è un comportamento normale. Su Elementor se applichi un link a un’immagine non varia la dimensione della stessa.
Probabilmente il tuo tema ha delle regole nei fogli di stile che intercettano le immagini linkate.
Ciao, ottimo tutorial ma non vedo l’elemento colonne sul mio Elementor (ho la versione 3.4.4).
È stato rimosso e/o sostituito da altro? Perchè soluzione alternativa purtroppo, credo sia solo quella di creare sezioni su sezioni, ma non è l’ideale come giustamente da te spiegato sul tuo tutorial. Qualche dritta? Grazie in anticipo per l’eventuale risposta.
Ora quel widget si chiama Sezione Interna.