Elementor [PRO]: Guida Miglior Page Builder WordPress

  • Post author:
  • Reading time:17 min(s) read

elementor page builder wordpress

Oggi ti parlo di un Page Builder che ha rivoluzionato il settore del Web Design, mi sto riferendo proprio a lui: ELEMENTOR!

In breve, Elementor non è altro che un costruttore visuale di siti web a blocchi, una soluzione Ad Hoc per quelle persone che:

  • Non possono permettersi di acquistare un sito da un Designer
  • Non possono acquistare un tema premium
  • Non conoscono la programmazione

Praticamente è una soluzione per tutti, infatti, oltre a queste dinamiche, è un Page Builder intuitivo, molto semplice da usare e completissimo. No, non sto esagerando, è la verità e lo capirai in questo articolo.

Di base WordPress semplifica moltissimo la creazione di Blog, Siti Web e eCommerce. Infatti puoi creare pagine e articoli semplicemente dal CMS stesso.

Ma cosa fai quando sul web incontri un sito super figo e ne vorresti uno simile anche tu? Semplice, usi Elementor, ll Page Builder visuale più completo e semplice da usare.

In questa guida completa su Elementor ti parlerò delle sue qualità che lo differenziano dagli altri Page Builder, le funzionalità più importanti e ti spiegherò anche come usarlo. Non è nulla di complicato.

Vedrai che questo articolo ti scorrerà giù per le mani come olio e alla fine saprai cos’è un Page Builder visuale, cos’è Elementor e come usarlo.

Quindi elimina TUTTE le distrazioni e divorati questa guida. Buona lettura!

Che cos’è Elementor?

elementor page builder

In breve:

Elementor è un PageBuilder o costruttore di pagine Web VISUALE, INTERATTIVO e Drag&Drop per WordPress pensato per creare Siti velocemente e in semplicità dal Design invidiabile.

Se questa descrizione non ti dice nulla ecco a te l’essenza di Elementor in pochi secondi:

Questo video dice tutto. No?

Una soluzione All-In-One (in un solo plugin) per controllare ogni aspetto del Design di un Sito Web e costruirlo velocemente, è un costruttore visuale e interattivo, non rallenta il tuo Sito.

Queste qualità hanno reso Elementor il Page Builder più utilizzato su WordPress. Infatti conta più di 5 milioni di installazioni attive e migliaia di recensioni di cui il 98% sono 5 stelle su 5. Un’enorme successo.

Grazie a questo Plugin per WordPress NON devi essere un’esperto di Web Design.

Basta installare Elementor e iniziare a costruire pagine usando i blocchi forniti, modificare i Font, aggiungere pulsanti, form di contatto, immagini, video eccetera.

Perchè scegliere Elementor Page Builder?

scegliere elementor page builder

I motivi per cui ti consiglierei di usare Elementor e di sceglierlo come Page Builder predefinito per WordPress sono moltissimi. Non voglio elencarteli tutti, uno per uno. Mi concentrerò sull’essenziale, ciò che rende Elementor il Miglior Visual PageBuilder per WordPress.

Naturalmente, i motivi si traducono in: QUALITÀ. Qualità paragonabili a pilastri portanti che mantengono su l’eccellenza di Elementor.

Quindi, senza perderci in altre chiacchiere non posso fare altro che parlarti di queste qualità essenziali.

Iniziamo.

1) Semplice, flessibile, completo e funzionale

Quattro qualità fondamentali per un Page Builder tutte in uno. Cosa potremmo desiderare di più noi utilizzatori di WordPress? Elementor e basta!

Che tu sia un’esperto o un principiante puoi tranquillamente usare Elementor, non sono richieste competenze particolari, è semplicissimo usarlo!

Inoltre, presentano tutta una serie di funzioni, blocchi e template che lo rendono completo, funzionale e flessibile. Non bisogna ricorrere ad altre fonti esterne o codici di programmazione, Elementor ha già la soluzione per te.

2) Tanti blocchi da posizionare e template

moduli di elementor

Questi sono solo alcuni dei numerosi blocchi che puoi selezionare, trascinare e posizionare sulle pagine web che stai costruendo. Sono più di 90 i moduli disponibili e il team di sviluppo di Elementor si sta sforzando sempre di più per farne uscire dei nuovi.

Elementor parte da moduli base e semplici, per arrivare poi a quelli “PRO” e infine abbiamo quelli per personalizzare WooCommerce su WordPress, quindi è possibile anche impattare sul tuo eCommerce a livello grafico.

Ogni blocco ha le sue numerose funzionalità per essere personalizzati.

template costruiti elementor page builder wordpress

Elementor offre anche più di 200 templates, ovvero delle sezioni o intere pagine già costruite dal Team di sviluppo. Devi soltanto scegliere il design che più ti piace e importarlo con un click, nulla di complicato (poi ti mostrerò anche come).

Se non hai voglia di smanettare tra le mille funzionalità di Elementor, puoi tranquillamente usare i modelli già pronti e modificare i testi inserendo le tue informazioni. A portata di click!

3) Design assurdi e responsive

Prima di commentare questa qualità goditi la galleria sottostante:

Che dici?… Fighissimo!

Ecco come nascono quei Design mozzafiato che vedi in giro sul Web, Elementor è dietro l’angolo. C’è chi sceglie template già costruiti e chi si cimenta nell’utilizzo delle mille funzionalità che questo Plugin offre per realizzare qualcosa di esclusivo e inedito.

personalizzazione con elementor page builder

Puoi farlo anche tu, basta dedicarci del tempo, non è impossibile. Per i creativi questo non sarà un problema, c’è solo da divertirsi. Con Elementor non devi passare mesi e mesi a programmare, hai la possibilità di velocizzare il processo di creazione grazie all’Editor visuale.

Immagina di avere la tua tavolozza virtuale (i blocchi o i moduli) e mille tecniche (le funzionalità) per comporre la tua opera d’arte (il tuo sito): questo è Elementor (flessibilità e libertà estrema sulla grafica).

In questo Blog mi soffermo sempre su un’aspetto che ogni sito deve avere, importantissimo per la SEO, conversioni e User Experience. Questa caratteristica è denominata come: Responsiveness.

Ovvero la capacità di un sito web di adattarsi alle varie misure dei dispositivi mobili, quindi stiamo parlando di Tablet e Smartphone di molteplici dimensioni.

Ecco, il Team di sviluppo di Elementor ha programmato la sua struttura di codici in modo tale che tutti i Widget, Blocchi e Design si adattino a questi dispositivi alla perfezione.

Le tre immagini di sopra spiegano tutto, infatti sull’editor visuale del PageBuilder è possibile fare lo switch da modalità Desktop a Tablet o a Smartphone. Questo serve proprio a lavorare sul lato Responsive del sito, e ti ripeto che è molto importante.

4) Codice pulito, sicuro e veloce

Dietro a tutte quelle creazioni che vedi con Elementor naturalmente si nasconde un’ecosistema molto vasto di codici di programmazione che il Team di sviluppo del Plugin ha creato.

Consultando il loro Code Reference, ovvero le pagine in cui Elementor mostra i codici del Plugin, ho notato che mi trovavo di fronte a un codice pulito, aggiornato, leggero e ben incastrato.

Infatti non ci sono elementi ridondanti che potrebbero interferire tra loro creando vari problemi. L’ecosistema di codici di Elementor è come una pista le cui unità minime sono ben connesse tra loro.

Questo ecosistema di codici ben compilati garantisce all’utente finale di essere al sicuro e di non rallentare il sito. Due qualità fondamentali.

codice elementor

Naturalmente chiunque può consultare il Code Reference di Elementor, è una risorsa aperta a tutti. Clicca sul pulsante sottostante per accedervi:

Una risorsa estremamente utile per gli sviluppatori o programmatori di siti web. Ovviamente se sei un principiante questa risorsa non dovrebbe interessarti, infatti puoi tranquillamente usare il Page Builder ignorando questa parte.

Inoltre, Elementor ha dedicato una sezione del suo Sito alla documentazione completa del Plugin, questo racchiude una serie di tutorial che ti guidano all’uso del PageBuilder.

Ci sono tutorial semplici fino ad arrivare a procedure complesse.

5) Compatibilità

La penultima qualità di questo Page Builder riguarda la compatibilità con temi e plugin per WordPress. Infatti, il codice di Elementor è talmente flessibile che raramente entra in conflitto con temi e plugin.

Nel 98% dei casi Elementor è compatibile con Temi e Plugin sia gratuiti sia premium, quindi dovrai preoccuparti poco di installare dei moduli su WordPress.

L’unica cosa a cui devi fare attenzione è evitare di ottimizzare troppo i codici HTML, CSS e JS con plugin di caching, questo POTREBBE causare problemi a Elementor come ad altri Plugin o Temi. Un’ottimizzazione leggera dei codici, se l’hai fatto, è più che sufficiente.

Detto questo non penso di dovermi dilungare troppo su questa qualità di Elementor.

6) PopUp Builder, Newsletter, eCommerce e altro…

email marketing e elementor page builder

Grazie a Elementor puoi costruire visualmente il tuo form di contatto, lead magnet o input per la newsletter e aumentare visite, conversioni e leads, un’eccellente, direi anche fondamentale, funzionalità per Bloggers, eCommerce e Siti Web.

Oltre a questo, con Elementor puoi anche realizzare dei PopUp utilizzando l’editor visuale del plugin, una funzione molto interessante e utile per raggiungere gli scopi di cui ti ho parlato un secondo fa (conversioni, lead, visite ecc).

Di conseguenza, puoi anche integrare i migliori strumenti di Digital Marketing grazie a Elementor. Grazie a queste integrazioni puoi lavorare più efficientemente con la tua Newsletter o lista contatti.

Altra chicca: con Elementor puoi personalizzare a pieno l’ambiente eCommerce integrando WooCommerce su WordPress, una manna dal cielo per i merchants digitali.

Questo è tutto per quanto riguarda le qualità più importanti di Elementor. Naturalmente sul sito ufficiale troverai una lista di tutte le features di questo plugin, se hai voglia di consultarle tutte clicca sul bottone sottostante:

Elementor Pro VS Elementor Free

elementor free vs elementor pro

Questo va sottolineato chiaramente: esistono due versioni di Elementor, una gratuita e una premium, la prima è limitata e la seconda comprende tutte le funzionalità del plugin.

differenze elementor pro

Ecco le differenze brevemente (oppure consulta la tabella di sopra):

  • Elementor Free: si limita alla costruzione a blocchi SOLO delle pagine (i blocchi disponibili sono solo quelli base, ovvero 29), accesso alle funzionalità base e una decina di Template pre costruiti.
  • Elementor PRO: personalizzare ogni spazio del tuo sito, hai più di 90 blocchi, più di 200 design, tutte le funzionalità, puoi personalizzare il Design di WooCommerce, creare PopUp, form di contatto e input per la newsletter, integrare strumenti e di Digital Marketing e molto altro.

Come vedi le differenze sono enormi tra la versione gratuita e quella a pagamento.

Queste differenze sono notevoli, quindi puoi avere veramente tanto da Elementor PRO, quindi se necessiti di tali funzionalità l’investimento è più che ottimale.

costo di elementor pro

Elementor PRO non puoi ottenerlo gratuitamente (quindi evita di scaricare versioni craccate potenzialmente pericolose per il tuo sito), bisogna pagare una quota annuale che può variare in base alle tue esigenze, vediamo i prezzi (in totale abbiamo tre pacchetti):

  • Personal: 49$ all’anno, valido per un singolo sito web
  • Plus: 99$ all’anno, valido per tre siti web
  • Expert: 199$ all’anno, valido per mille siti web

Come puoi vedere le differenze ricadono soltanto nel numero di licenze che possiedi. Acquistando il pacchetto Personal, quello da 49$ l’anno, hai la licenza per un sito web, ad esempio.

Invece, col pacchetto Plus hai tre licenze per usare Elementor per tre siti web differenti. Poi se hai bisogno di gestire tanti siti web pagando 199$ l’anno hai 1000 licenze di Elementor Pro da usare su mille siti diversi.

Penso che per partire e usufruire delle funzionalità di Elementor Pro, un’investimento di 49$ annuali è più che economico. Per acquistarlo ci vogliono due minuti, basta cliccare sul pulsante “BUY NOW” sotto al pacchetto che ti serve e compilare il modulo d’acquisto con i tuoi dati, fine.

La versione Free puoi tranquillamente installarla dalla sezione “Plugin” da WordPress, nulla di più semplice.

Sei pronto per creare qualsiasi Sito Web con Elementor?

usare elementor pro

È arrivato il momento di iniziare a utilizzare Elementor e spiegarti qualche concetto base.

Senza perderci in ulteriori chiacchiere ti elenco i tre step da seguire per poter usare Elementor, tre passaggi che non puoi saltare assolutamente, eccoli:

  1. Avere un sito con CMS WordPress.org, Hosting e Dominio.
  2. Scaricare, installare e attivare Elementor su WordPress.
  3. Usare il Page Builder e sbizzarrirsi.

Molto semplice.

Iniziamo!

<1> Avere un sito con CMS WordPress.org, Hosting e Dominio.

Questa è la base, se non segui questo step ti sarà impossibile proseguire.

Per poter utilizzare Elementor Pro o Gratis devi avere un sito web SELF-HOSTED. Ovvero un sito web che sia composto da Hosting, Dominio e WordPress.org come CMS.

Utilizzare Wix, Webbly, Squarespace e simili potrebbero sembrarti soluzioni attendibili, ma non lo sono. WordPress.org ha una qualità nettamente superiore a loro per migliaia e migliaia di motivi.

Però fai attenzione:

NON confondere WordPress.ORG da WordPress.COM. WordPress.COM è praticamente come Wix, Webbly, Squarespace e simili. WordPress.ORG è un CMS Open Source, ovvero gratuito, che va installato su un’Hosting in presenza di un Dominio [questi due vanno acquistati].

In breve:

  • CMS: è WordPress.org, un software visuale che puoi usare per creare il tuo sito web in pochi secondi.
  • Dominio: è il nome del tuo sito web, digitandolo su Google apparirà il tuo sito, praticamente è il suo nome (esempio: www.iltuosito.com).
  • Hosting: non è altro che il server (memoria, processore e componenti) in cui sono contenuti tutti i file del tuo sito (immagini, pagine, articoli, database ecc).

Questo è in breve.

Ma non preoccuparti perché ho realizzato una guida su: COME CREARE UN SITO WEB CON WORDPRESS.ORG, ACQUISTARE HOSTING E DOMINIO A UN PREZZO VANTAGGIOSO!

Praticamente è la mia guida per realizzare un sito web su cui puoi installare ELEMENTOR. Ma è anche un procedimento per avere tra le mani un sito web PROFESSIONALE e sul quale hai il 100% del controllo.

Anche il mio sito è su WordPress.ORG, ho un’hosting e un dominio. Ti piace, vero?

Ecco la guida creata da me di cui ti sto parlando, è semplice e adatta anche ai principianti:

ACQUISTARE HOSTING, DOMINIO E INSTALLARE WORDPRESS | GUIDA PRATICA

Ho realizzato questo articolo per guidare qualsiasi persona nel processo di creazione di un Sito Web, Blog o eCommerce grazie a tre ingredienti per un progetto online PROFESSIONALE:

Hosting + Dominio + WordPress.org

Un’articolo puramente pratico in cui ti guido spiegandoti anche i minimi dettagli.

<2> Scaricare, installare e attivare Elementor su WordPress.

Uno passaggio semplicissimo.

Prima di tutto accedi sul tuo Sito Web su WordPress, come nell’immagine qui sotto:

installare elementor

Quindi clicca sulla voce “Plugin” sulla barra a sinistra.

aggiunger elementor su wordpress

In seguito clicca sul pulsante in alto “Aggiungi nuovo“.

installazione elementor page builder su wordpress
  1. Cerca sulla barra di ricerca a destra la parola chiave: elementor
  2. Tra i risultati di ricerca ti apparirà per primo Elementor Website Builder, è il plugin che devi installare. Quindi clicca sul pulsante “Installa adesso“, attendi qualche secondo e poi clicca sul pulsante “Attiva“.

Ben fatto, ora hai Elementor sul tuo sito WordPress, naturalmente questa è la VERSIONE GRATUITA.

Se desideri la versione Elementor PRO, devi acquistarla sul sito ufficiale cliccando sul bottone sottostante. Dopodiché clicca sul pulsante “BUY NOW” del pacchetto che desideri, inserisci i tuoi dati e acquista il prodotto.

Dopo dovrai scaricare il Plugin premium dal tuo account su Elementor, caricarlo come Plugin su WordPress e attivare il plugin tramite il codice licenza che puoi trovare sul tuo account Elementor.

Altrimenti guarda questo video:

<3> Utilizzare Elementor Page Builder su WordPress

Una volta che hai acquistato o scaricato la versione che desideri, e installata su WordPress, puoi iniziare a utilizzare Elementor per iniziare a costruire il tuo Sito Web, Blog o eCommerce.

Ti mostro come in breve.

>>>Modificare pagine con Elementor

Per modificare una pagina con Elementor, prima di tutto creane una:

aggiungere pagina wordpress per elementor

Quindi, clicca sulla voce “Pagine” sulla colonna a sinistra, dopo clicca sul pulsante “Aggiungi pagina” in alto.

Per utilizzare Elementor abbiamo bisogno di una pagina, quindi così ne abbiamo creata una. Molto semplice.

modificare pagina con elementor

Quindi, prima di tutto in alto dovrai inserire un titolo (il titolo della pagina che stai creando).

In seguito, clicca sul pulsante in alto nominato come “Modifica con Elementor“. Una volta dato il primo click dovrai attendere qualche secondo per far caricare il Page Builder.

costruire pagina con elementor

Eccoci all’interno dell’editor di Elementor.

A sinistra (punto 1) abbiamo gli elementi da trascinare sull’area di lavoro (punto 2).

Sulla colonna di sinistra in basso (punto 3) abbiamo una Tool Bar che ti illustrerò tra poco.

Adesso ti mostro brevemente come costruire le tue pagine.

Ad esempio, clicca sul blocco “Editor di testo“, mantieni il tasto sinistro del mouse premuto e trascina il blocco nell’area trattegiata.

elementor page builder editor di testo

Io, ad esempio ho aggiunto un blocco “Intestazione” e un “Editor di testo” [IMMAGINE SOTTO].

elementor page builder pagina wordpress

Selezionando un blocco che hai inserito precedentemente (punto 1) puoi modificarlo dalla colonna a sinistra (punto 3).

A destra, una volta che hai selezionato un blocco, appariranno tre piccole icone sopra il blocco inserito (punto 2). Il “+serve a inserire un blocco prima di quello selezionato, l’icona al centro serve per modificare il layout, la “xserve a eliminare il blocco selezionato.

aggiungere sezioni a colonne su elementor

Cliccando sul “+” puoi scegliere quale struttura a colonna aggiungere.

aggiungere colonne su elementor

Io ad esempio ho scelto quella a doppia colonna. Poi tu puoi scegliere il layout che ti serve.

Una volta che hai aggiunto la sezione che desideri puoi trascinare qualsiasi blocco desideri aggiungere.

aggiungere blocchi sulle colonne elementor

Invece, cliccando sull’icona della cartella si aprirebbe la libreria dei template di Elementor.

aggiungere sezioni a colonne su elementor

Ti apparirà un pop up come quello mostrato nell’immagine qui sotto:

aggiungere template da elementor

Da qui puoi scegliere se inserire pagine intere già costruite (punto 1), oppure se inserire singole sezioni (punto 2).

Una volta che hai scelto il modulo da inserire devi cliccare sulla scritta “Inserisci” come indicato dalla freccia. Quindi il template sarà importato sulla pagina in questione.

Invece, per visualizzare il template graficamente senza inserirlo puoi cliccaresulla lente di ingrandimento col “+” al centro.

design responsive con elementor

Ogni volta che aprirai Elementor ti ritroverai con la modalità Desktop attiva, ovvero come verrebbe visto il tuo sito da dispositivi Desktop (come i computer).

Se vuoi vedere il tuo sito da Tablet o da Smartphone puoi cliccare sulle relative voci e il tuo sito sarà adattato in base alla larghezza scelta.

Con queste funzioni puoi verificare se il tuo sito è responsive.

anteprima pagine elementor

Cliccando sull’icona indicata dalla freccia è possibile visualizzare l’anteprima di ciò che hai costruito con il Page Builder.

salvare una pagina elementor

Cliccando sul pulsante “Pubblica” è possibile salvare le modifiche fatte alla pagina e andrai anche a pubblicarla effettivamente.

Invece, se vuoi salvare la pagina senza pubblicarla devi cliccare sulla freccia rivolta verso l’alto in bianco, affianco alla scritta “Pubblica“. Dopo clicca sull’opzione “Salva bozza“.

Nulla di complicato.

Ti consiglio di vedere il video qui sotto per approfondire l’utilizzo di elementor:

>>> Creare delle Landing Page

Con Elementor puoi anche creare delle Landing Page.

Per fare ciò devi recarti sulla pagina che vuoi modificare su WordPress. In seguito dalle impostazioni della pagina sotto la voce “Template” devi selezionare l’impostazione “Elementor canvas“.

creare landing page con elementor

Prima di tutto devi selezionare l’ingranaggio in altro a destra. Cliccando su quell’icona aprirai le impostazioni della pagina.

Dopodiché devi scorrere in basso e sotto la voce template seleziona la voce “Elementor Canvas“.

In seguito clicca sul pulsante “Modifica con Elementor” per costruire la tua Landing Page e aprire l’editor.

landing page con elementor

Modificando l’impostazione che ti ho mostrato prima avrai tutta la pagina disponibile per creare la tua Landing Page.

Da qui devi solo iniziare a buttare giù i blocchi di cui hai bisogno e costruire la pagina.

>>> Quando non usare Elementor

Evita assolutamente di modificare gli ARTICOLI con Elementor. Per creare degli articoli utilizza solo ed esclusivamente l’editor di WordPress, ovvero quello che ti si presenta appena ne aggiungi uno.

Ma evita in ogni modo di scrivere e comporre articoli con l’editor di Elementor, usalo solo per modificare le Pagine, come ti ho mostrato in questo articolo.

Conclusioni

Se sei arrivato fin qui ti ringrazio, significa che hai apprezzato tutto il contenuto di questa super guida su Elementor.

Ormai ti ho detto tutto di questo Page Builder, l’85% di ciò che devi scoprire lo scoprirai con la pratica. Non mollare, ci vuole un pò di tempo e apprenderai tutto ciò che Elementor ha da offrire ai suoi utenti/clienti.

Ti ricordo che se hai qualsiasi problema puoi consultare:

Troverai qualsiasi guida e tutorial nel caso ti serva un’aiuto.

Non voglio lasciarti senza contenuti, quindi ecco a te degli articoli molto importanti che dovresti leggere:

Ho impiegato giorni e giorni per scrivere questo articolo. Mi farebbe tanto piacere se tu lo condividessi, ti bastano 5 secondi…


Michele Mincone

Sono un blogger appassionato, adoro creare piattaforme e business online da evolvere all’infinito, studio e applico strategie di Digital Marketing. Mi nutro principalmente di crescita personale, obiettivi e condivisione con altre persone appassionate.

Lascia un commento