Bentornato nel mio blog, oggi ti vado a mostrare come è possibile creare delle pagine web accattivanti e con un layout responsive attraverso l’utilizzo del plugin “Elementor” disponibile per WordPress.
Vedremo che cosa permette di fare questo plugin nella sua versione gratuita, installeremo un secondo plugin per ampliare il parco componenti messo a disposizione da Elementor, attiveremo un tema gratuito ed inizieremo a creare la nostra pagina.
1. Cosa è Elementor?
Elementor è il più famoso plugin di “page-building” disponibile su WordPress, ad oggi (30 gennaio 2021) conta più di 5 milioni di installazioni attive.
Risulta essere un plugin vincente perché mette a disposizione di chiunque una serie di blocchi pre-costruiti che l’utente può utilizzare per creare delle pagine web senza scrivere nemmeno una riga di codice!
Molte persone ritengono i “page-builder” inutili o addirittura dannosi per il sito sul quale vengono utilizzati per via di diverse motivazioni legate soprattutto al lato SEO. Sono una sorta di taboo per certi versi tra i developer, soprattutto in Italia, in quanto si ritiene che chi li utilizzi lo faccia per colmare il proprio GAP di conoscenze lato sviluppo codice.
2. Elementor, Pro & Contro
Il mio pensiero circa i page-builder ed in particolare verso Elementor è un po’ più contrastante rispetto al pensiero medio. Credo siano un ottimo strumento per tutti, developer e non. Permettono di creare strutture responsive in poco tempo sfruttando dei piccoli template già pronti all’uso. Come ogni cosa però ci sono dei contro ed andiamo ad analizzarli di seguito.
Pro
✅ velocità nello sviluppo
✅ nessuna conoscenza del codice richiesta
✅ infinite combinazioni di componenti
✅ pronto per mobile
Contro
⛔ difficoltà nell’ottenere tutte le personalizzazioni
⛔ viene generato del codice “sporco”
⛔ scarsa ottimizzazione SEO
⛔ performance inferiori
3. Iniziamo
Il primo passo da compiere consiste nel creare un sito WordPress in locale (oppure potete usarne anche uno online sotto hosting), io per comodità creo un sito temporaneo con un programma che si chiama Local del quale ho già parlato qui sul blog.
Do un nome al mio sito e aspetto che Local finisca la creazione del progetto
Una volta che hai creato il sito puoi entrare nel pannello di amministrazione di WordPress usando le credenziali del tuo utente, quello che devi fare una volta entrato è andare nella sezione “plugin“, cliccare “aggiungi nuovo” e cercare “Elementor“.
Andremo ad installare Elementor ed un altro plugin che ci fornisce ulteriori componenti compatibili con Elementor.
Appena avrai installato i due plugin puoi dirigerti nella sezione “aspetto” di WordPress, ed aggiungere un nuovo tema. Io ho scelto di installare il tema chiamato “Hello Elementor” ma tu puoi sceglierne uno qualsiasi, qui di seguito ti lascio un link ad un articolo sui migliori temi WordPress compatibili con Elementor.
4. Che pagina realizzare
Io per il seguente tutorial ho immaginato di dover realizzare una simil landing page per un freelancer, non ho curato i contenuti testuali perché non è argomento di questo articolo ma ho piuttosto evidenziato la parte relativa allo stile della mia pagina. Ho iniziato con il disegnare una sorta di “mockup” grafico della pagina, molto grossolanamente con Draw.io, di seguito il risultato
Vorrei focalizzarmi sul farti notare le sezioni in cui ho deciso di dividere la mia pagina, come vedi è una struttura molto semplice che prevede un header con fotografia e descrizione, una sezione sotto con tre punti di forza in evidenza, una zona di “call to action” ed una sezione riassuntiva di quali servizi l’utente potrà andare ad acquistare.
5. La pagina in WordPress
Definita la struttura della pagina che voglio realizzare sono andato a creare una pagina vuota nel mio pannello di amministrazione di WordPress.
Dopodiché ho aperto la pagina ed ho cliccato sul pulsante “modifica con Elementor”, dopo un piccolo caricamento mi si è aperto l’editor visuale di Elementor.
Da questo punto in poi ho ricreato la struttura che mi ero immaginato utilizzando i vari blocchi presenti nell’editor, ho usato il blocco “colonne” per tutte le porzioni della pagina che hanno una suddivisione a griglia, ho usato molto i blocchi “intestazione” per i titoli dei paragrafi.
Da qui in poi prenditi il tempo necessario per smanettare un po’ con i vari componenti e per testare varie combinazioni in base alle tue idee di design.
6. Il risultato finale
Dopo circa un’oretta di sviluppo sono arrivato a una prima versione molto carina della mia pagina, ti lascio qui sotto uno screenshot.
Come vedi il risultato ottenuto non è niente male se pensi che è stato ottenuto in poco meno di un’ora di lavoro !!
Come avrai sperimentato sulla tua pelle, creare pagine con Elementor è veramente divertente ed immediato, puoi costruire delle sezioni modulari che potrai ripetere più volte all’interno della pagina.
7. Conclusioni
Personalmente utilizzo Elementor in quei lavori nei quali non ho necessità di andare ad intervenire nel codice di un sito WordPress oppure in quei casi in cui il budget per la pagina o il tempo risultano essere ridotti. Il mio consiglio è quello di non abusare di questo plugin perché a lungo andare potresti avere impatti importanti sulle prestazioni del tuo sito.
Ah, piccolo twist … alcune parti del mio sito sono realizzate proprio con Elementor, riesci ad indovinare quali?
Come al solito se hai suggerimenti o bisogno di chiarimenti lascia un commento qui sotto, ciao e alla prossima 🙂
