Elementor è un page builder per WordPress che facilita la creazione di siti e landing page, rendendola accessibile anche a chi possiede limitate conoscenze di HTML e CSS.
Tuttavia, anche l’uso di uno strumento intuitivo come Elementor può portare a commettere errori, specialmente per chi non ha esperienza nella realizzazione di siti o pagine web.
In questo video, ti mostro una serie di pratiche che ti consiglio di seguire e alcuni errori comuni da evitare nella costruzione del tuo sito o della tua landing page utilizzando Elementor.
Scelta del tema e installazione
Installa Hello Theme di Elementor
Soprattutto se hai scelto di utilizzare Elementor Pro per creare l’intero sito, ti suggerisco di installare Hello Theme di Elementor come tema. Questo tema è il più compatibile con Elementor e riduce, anzi azzera, i conflitti che possono essere causati dagli stili CSS installati da altri temi.
Con questo non intendo dire che Hello Theme è l’unico tema da installare sempre e comunque con Elementor. Temi come Astra e GeneratePress si integrano molto bene con Elementor. Però, soprattutto chi è alle prime armi, rischia di complicarsi la vita dovendosi chiedere ogni volta se una cosa va fatta utilizzando gli strumenti messi a disposizione dal tema oppure se usare Elementor.
Gestione delle funzionalità di Elementor
Di frequente vengono aggiunte nuove funzionalità ad Elementor. Queste nuove funzionalità sono introdotte come esperimenti e, fino a che non sono stabili, ti sconsiglio di attivarle sul tuo sito.
Inoltre, anche tra le funzionalità stabili di Elementor, non tutte sono necessarie in ogni situazione. Nelle impostazioni di Elementor, seleziona le caratteristiche che ti servono, evitando quelle superflue o in fase sperimentale.
Impostazioni di font e colori
Disattiva i Google Fonts e installare font locali
Per migliorare i tempi di caricamento delle pagine e semplificare la gestione degli aspetti legati al GDPR, ti suggerisco di disattivare il caricamento dei font dai server di Google e preferire l’installazione in locale dei caratteri che ti servono.
Qui il video in cui ti spiego come installare font locali su Elementor:
Stili globali per i font
Per evitare di ripetere di continuo le stesse impostazioni per i testi e le intestazioni del tuo sito puoi, anzi DEVI 😉, impostare degli stili globali per i font. Questo, oltre a rendere più uniforme l’aspetto del sito, ti semplifica la vita in caso di modifiche.
Inoltre, sempre restando in tema di font, ti suggerisco questo video nel quale ti racconto perché è meglio usare i Rem (non quelli di Losing My Religion 😬) anziché i pixel per impostare le dimensioni dei caratteri sul tuo sito.
Usa i colori globali
Anziché scegliere ogni volta manualmente (o a caso) il colore da utilizzare, definisci dei colori globali. Questo ti permette di ottenere un design uniforme e coerente e una gestione più efficiente del sito.
Utilizzo di Elementor
Impiego di tag HTML semantici
Elementor, purtroppo, racchiude tutti o almeno la maggior parte dei widget che inserisci in una pagina all’interno del generico tag html <div>.
Con un minimo sforzo è però possibile migliorare la struttura della pagina e utilizzare dei tag HTML semantici anche con Elementor. Ad esempio, assegnando i tag <header> e <footer> alle rispettive sezioni del sito per un codice più chiaro e meglio strutturato. Per approfondire l’argomento ti rimando a questa guida su HTML semantico pubblicata su web.dev.
Configura il layout dei contenitori
Un comportamento che trovo fastidioso di Elementor è quello di inserire automaticamente una spaziatura interna in ogni contenitore. Questo può rendere più complicato allineare i vari elementi in una pagina.
Per questa ragione, nel video ti mostro come eliminare questo problema, azzerando la spaziatura che Elementor applica di default.
Evita i contenitori inutili
Per chi si avvicina per la prima volta alla creazione di pagine web, l’uso di page builder come Elementor può sembrare intuitivo. Tuttavia, è comune limitarsi a valutare il risultato basandosi solo sull’aspetto visivo, trascurando l’importanza della struttura del codice HTML sottostante.
In questo contesto, si può incorrere nell’errore di aggiungere contenitori multipli per allineare vari widget, generando così un eccesso di codice HTML non necessario. Questo approccio non solo appesantisce le pagine, ma le rende anche più difficili da interpretare per i motori di ricerca. Dai un’occhiata anche a questo tutorial sull’utilizzo del Contenitore Flexbox di Elementor.
Sfrutta i widget nativi di Elementor
Questo page builder mette a disposizione numerosi widget. A volte però si ha la tendenza a creare contenuti in modo più “artigianale“ dimenticando che Elementor ci mette a disposizione widget specifici che sono più idonei allo scopo. Questo ha anche il beneficio aggiuntivo di generare meno codice superfluo nelle nostre pagine.
Il navigatore è lo strumento di Elementor che ti consente di spostarti facilmente tra una sezione e l’altra e selezionare con maggiore precisione i vari widget. Ti permette di gestire in maniera più efficiente le pagine molto lunghe e ricche di contenuti. Inoltre, ti offre la possibilità di dare un nome alle varie sezioni della pagina, così da rendere ancora più facile organizzarle.
Riutilizzo dei template
Evitare ripetere inutilmente le stesse operazioni è uno dei modi migliori per essere più produttivi ed efficienti. Con Elementor hai la possibilità di trasformare in template intere sezioni, così da poterle riutilizzare più volte anche su altre pagine. Nel video ti mostro come sfruttare il widget template per inserire questi template nel modo corretto all’interno di una pagina.
Considerazioni finali
Quelli che ho riportato in questa pagina sono alcuni dei principali consigli che ti raccomando di seguire, soprattutto se hai appena iniziato a utilizzare Elementor per la realizzazioni di siti e landing page. Se hai altri consigli, ti invito a segnalarli nei commenti.
Grazie Tiziano, ho trovato davvero utile il tuo tutorial e i tuoi consigli
Grazie Tiziano, ho iniziato con Elementor qualche mese fa e devo dire che all’inizio ero piuttosto confuso dovendo impostare tante cose, con i tuoi video mi è diventato tutto più chiaro.