Come usare Elementor per creare siti web

Aggiornato il da | 120 commenti | Disclaimer I nostri contenuti sono supportati dai lettori. Questo significa che se clicchi su uno dei link ai servizi che raccomandiamo e poi effettui un acquisto, è possibile che ci venga accreditata una commissione. È così che finanziamo questo sito web, lo manteniamo attivo e ti forniamo continuamente le informazioni più affidabili.

Guida a Elementor il visual page builder per WordPress

Se hai deciso di creare un sito web e vuoi modificarne l’aspetto senza scervellarti con il codice, imparare come usare Elementor Page Builder per WordPress può darti un grande aiuto.

Per chi è alle prime armi, creare un sito web può sembrare un’impresa davvero difficile, modificarne il design anche peggio.

Per gli utenti più esperti, creare un sito è solo una questione di risorse e tempo, fattori che spesso scarseggiano.

WordPress ci semplifica tantissimo la vita e con il passare del tempo si sono affermati sempre di più degli strumenti chiamati “visual page builder” (editor visuale di pagina).

Indice dei contenuti
Visualizza altro

Questi strumenti ti permettono di creare pagine web attraverso un’interfaccia semplice, osservando i risultati in tempo reale e magari partendo da modelli precostituiti.

Ed Elementor ti consente di fare proprio questo.

Elementor Page Builder WordPress

Infatti Elementor, come quasi tutti i migliori visual builder, ci permette di concentrarci sull’aspetto del nostro sito e sull’esperienza dei visitatori.

In questo modo eviterai di investire tanto tempo nel comprendere gli aspetti tecnici dietro la creazione di un sito web (cosa importante ma che può sempre avvenire mentre la prima versione del sito è online).

Ma adesso andiamo avanti rispondendo alla domanda…

Quali sono i vantaggi di Elementor rispetto ad altri page builder?

Vantaggi di Elementor

A differenza di molti page builder, specialmente quelli già presenti all’interno di alcuni temi, con Elementor è possibile progettare completamente ogni sezione del tuo sito web, e non solo i contenuti.

Potrai infatti creare le tue header, i footer e le sidebar con questo strumento, per poi effettuare una sorta di collage e realizzare la tua pagina completamente personalizzata.

Grazie ai modelli già pronti, potrai scegliere il template di pagina che più ti piace o che risulti più in linea con la tipologia di attività di cui ti occupi.

Da qui, sarà quindi molto semplice partire per creare la pagina e quindi personalizzarla secondo il tuo stile personale.

Dato che Elementor ti permette, quindi, di lavorare su tutti i dettagli, ti suggerisco di utilizzare un tema molto semplice e leggero.

Per questo motivo, lo stesso team che ha sviluppato il plugin ha anche realizzato un tema estremamente basilare che lavora alla perfezione con il page builder.

Si chiama Hello Theme e puoi trovare maggiori informazioni nella mia recensione.

Usa invece temi più ricchi di funzionalità se decidi di usare Elementor solo per costruire alcune pagine, e non tutto il tuo sito.

In questa guida ad Elementor Page Builder parleremo di che cosa è questo plugin e di come usarlo.

Scopriamo Elementor, il Page Builder per WordPress

Elementor Page builder per WordPress

Elementor è disponibile in versione gratuita e versione Pro. Quella gratuita può essere installata come un qualsiasi plugin dalla tua bacheca di WordPress.

Se vuoi passare ad Elementor Pro, non dovrai eliminare la versione gratuita. Quello che devi fare è:

  1. Lascia installata la versione gratuita;
  2. Poi acquista Elementor Pro: dal 24 maggio al 1 giugno 2022 sconti fino al 60%! Approfitta subito!
  3. Scarica il plugin di Elementor Pro dalla tua area cliente;
  4. Installalo come un normale plugin (senza scompattare il file .zip);
  5. Attiva il plugin;
  6. Segui le istruzioni per collegare il tuo sito all’API di Elementor.

Dunque ricorda che nei plugin avrai sempre installato sia Elementor Base (gratuito) che Elementor Pro.

Nella versione Pro avrai tante funzionalità in più, tra cui:

  • 50 elementi Pro da inserire nelle tue pagine;
  • il theme builder per permetterti di realizzare tutte le sezioni del tuo sito;
  • il builder per la creazione di popup;
  • 15 elementi speciali per WooCommerce;
  • effetti grafici avanzati;
  • supporto premium.

Il fatto che puoi passare ad Elementor Pro in qualsiasi momento con grande facilità è un enorme vantaggio.

Puoi iniziare così a prendere confidenza con lo strumento e poi effettuare l’upgrade quando lo riterrai necessario. Passiamo adesso alla pratica e scopriamo come funziona Elementor e come usarlo.

Cos’è Elementor

Cosa e' elementor

Il page builder Elementor è un plugin per WordPress, tradotto in italiano, che appartiene alla categoria dei visual page builder.

Rilasciato nel 2016 è stato subito apprezzato dalla community per l’offerta gratuita di funzionalità in genere premium.

Su WordPress.org è stato installato più di 700.000 volte e gode di ottime valutazioni, 5/5 stelle.

Queste statistiche confermano la grande popolarità di questo strumento che ha i suoi punti di forza in un’interfaccia basata sul “drag and drop” (trascinamento), davvero alla portata di tutti, e sui template pronti da usare.

Se non sai come creare o modificare un tema o il design di un sito web, questo è lo strumento che fa per te.

Questo plugin ti permette di creare design personalizzati senza avere conoscenze tecniche, grazie ad un’interfaccia intuitiva e ad anteprime in tempo reale che ti permettono di mettere alla prova i tuoi cambiamenti con pochi click del mouse.

Elementor ti mette a disposizione vari template che puoi semplicemente caricare in modo da avere l’aspetto del sito pronto in pochi minuti.

Utilizzando il tema appositamente sviluppato dagli stessi creatori, il tema Hello, avrai inoltre la certezza di una compatibilità totale.

Come accennato, questo strumento ha una versione gratuita ma è disponibile anche una versione premium, molto più ricca di funzionalità, a partire da 49$ all’anno per un sito.

Puoi confrontare le funzionalità delle varie versioni visitando il sito ufficiale del plugin.

WordPress Elementor: installazione e primi passi

Come installare Elementor

Dopo aver installato e attivato il plugin, sia nella sua versione gratuita che in quella Pro, ti basterà cliccare su Elementor nella bacheca di WordPress per accedere alle impostazioni del plugin.

Elementor di base è abilitato per articoli e pagine e in questa sezione potrai decidere anche chi avrà accesso agli strumenti messi a disposizione da questo plugin.

Elementor: impostazioni generali

Nella sezione Elementor > Impostazioni trovi le caselle per scegliere se utilizzare il plugin su pagine e articoli.

impostazioni elementor

Puoi inoltre mantenere le impostazioni del tuo tema per quanto riguarda i colori e i font.

Se lasci queste caselle disattivate, potrai decidere colori e font direttamente durante la costruzione della pagina.

La sezione Elementor > Gestore ruolo, invece, ti permette di scegliere chi può avere accesso al builder in base al ruolo WordPress dell’utente.

Per esempio, puoi selezionare Editor per impedire che questo ruolo possa usare Elementor e utilizzi invece solamente l’editor classico o a blocchi.

Usare Elementor in base al ruolo utente

Dopo aver effettuato i cambiamenti desiderati, ricordati di salvarli attraverso il pulsante disponibile nella schermata.

Plugin Elementor: ecco come funziona

Per aver accesso alle funzionalità del plugin ti basterà creare un nuovo articolo o una nuova pagina sul tuo sito.

Elementor Page Builder per WordPress - screenshot creazione nuova pagina

Cliccando sul pulsante Modifica con Elementor avrai accesso a una schermata di caricamento e poco dopo al page builder.

Page Builder di Elementor

Utilizzando il pulsante + (Aggiungi nuova sezione) potrai creare la tua pagina partendo da zero e utilizzando i comandi drag and drop nella colonna sulla sinistra.

Scegli quindi la struttura della sezione in base al numero di colonne, poi seleziona il simbolo + all’interno di essa per scegliere l’elemento da inserire.

Trascina dalla colonna di sinistra l’elemento desiderato (drag) e poi rilascialo nella posizione che desideri (drop).

Quando selezioni un elemento della tua pagina, avrai a disposizione diverse opzioni e le visualizzerai nella colonna a sinistra.

Per esempio, potrai scrivere e formattare un testo, scegliere l’immagine dalla libreria media, personalizzare il colore il link di un’icona ecc.

Se invece vuoi utilizzare i modelli disponibili di Elementor, seleziona il pulsante che rappresenta l’icona di una cartella.

Esso ti permetterà di accedere alla libreria di template. Scegli quello che preferisci e poi personalizzalo a tuo piacimento.

Qui troverai non solo interi modelli di pagine, ma anche di singoli elementi.

Per provare le funzionalità di questo plugin al meglio, ti consiglio di partire quindi da uno dei template che hai a disposizione, cliccando sul pulsante Aggiungi template e scegliendo quello che si avvicina di più al design che avevi in mente.

Template su Elementor - plugin per modificare design sito

Se usi Elementor free, vedrai l’etichetta Pro su alcuni di essi. Questo significa che sono modelli disponibili solo con la versione Premium.

Clicca sul pulsante Inserisci per aggiungere il template da te scelto nella pagina.

Una volta caricato il template, potrai selezionare gli elementi con il mouse e il plugin ti mostrerà le impostazioni rilevanti nella colonna sulla sinistra.

Quando crei una nuova sezione, ogni volta che passerai sopra di essa con il mouse comparirà un piccolo menu di icone:

  • il + indica l’inserimento di una nuova sezione;
  • i puntini in fila servono per trascinare la sezione in un’altra posizione;
  • la X elimina la sezione.

Anche dopo che avrai caricato un template, potrai aggiungere nuovi elementi alla pagina, sempre utilizzando la tecnica del drag&drop.

Puoi salvare i tuoi cambiamenti con il tasto Save (Salva se hai la versione italiana).

Il pulsante Salva non pubblicherà il contenuto sul sito, salverà solo i tuoi cambiamenti.

Potrai visualizzare un’anteprima o tornare alla bacheca di WordPress dove in seguito potrai pubblicare il contenuto definitivo.

Elementor basa l’interfaccia su: sezioni, colonne e widget

Riepiloghiamo quali sono gli elementi su cui si basa questo page builder.

Le sezioni sono i blocchi che compongono la tua pagina e sono un “raccoglitore” per varie colonne e stili diversi.

Ciascuna sezione si suddivide in colonne e determinano la struttura delle sezioni. Puoi scegliere il tipo di colonne al momento di creazione di una sezione.

I widget sono i vari quadratini nella colonna sulla sinistra che rappresentano gli elementi che puoi semplicemente trascinare per posizionarli nella sezione desiderata.

Sezione su Elementor

Ogni elemento, quindi sia le sezioni che i widget, possono essere personalizzati utilizzando le opzioni sulla sinistra.

Investi un po’ di tempo a provare i vari comandi e ti renderai subito conto delle grandi potenzialità creative offerte da questo plugin, senza mai compromettere la semplicità d’uso e l’attenzione prestata per gli utenti meno esperti.

Come usare il Theme Builder di Elementor

Elementor - Come usare il Theme Builder

Una delle caratteristiche più interessanti di Elementor è la possibilità di creare il tuo tema WordPress senza saper programmare.

L’opzione è disponibile solo con la versione Pro.

Ecco come usare questo strumento.

Innanzitutto, vediamo quali elementi è possibile realizzare con il Theme Builder.

Vai su Template > Theme Builder.

Qui troverai diverse schede:

  • Theme builder
  • Header
  • Footer
  • Single
  • Single post
  • Single page
  • Archive
  • Search results
  • Error 404

Per creare una Header personalizzata con Elementor, vai quindi su Header e seleziona Aggiungi nuovo header. Assegnagli un nome e procedi.

Anche in questo caso, potrai scegliere uno dei template disponibili. Clicca su Inserisci e inizia a personalizzare il suo aspetto (margini, dimensioni, colori…).

crea header con Elementor

Quando hai terminato:

  1. clicca sul pulsante Pubblica e ti verrà chiesto dove utilizzare questa header.
  2. Aggiungi una condizione e scegli se mostrarla su tutto il sito o solo in pagine specifiche.

La stessa procedura può essere applicata anche alla creazione di tutti gli altri elementi.

Quando realizzi una pagina come quella dei risultati di ricerca, assicurati che dopo la pubblicazione assegni la giusta condizione per visualizzare questo template (in questo caso, dovrai selezionare Search results).

Pagina ricerca Elementor

Elementor Pro ha anche una interessante funzione per la creazione di popup.

Vai su Template > Popups e clicca su Aggiungi nuovo popup.

Nella scelta del template, adesso troverai anche una sezione Popup, da cui selezionare quello che preferisci.

Dopo averlo inserito potrai personalizzare diversi aspetti, dal contenuto alla grafica.

Fin qui funziona tutto come per la creazione di qualsiasi altro elemento utilizzando il Theme Builder di Elementor.

Ma adesso, quando clicchi su Pubblica, compariranno delle nuove opzioni.

Prima di tutto, la sezione Conditions ti permette di scegliere dove mostrare il tuo popup (come abbiamo visto ad esempio per la header).

Poi potrai selezionare il Trigger, ossia l’evento che causerà la visualizzazione del popup.

Le opzioni sono diverse: al caricamento della pagina, al clic su un elemento, allo scroll, oppure anche nel momento in cui l’utente cerca di uscire dalla pagina.

impostazioni popup elementor

Grazie alle Advanced rules, infine, potrai stabilire impostazioni avanzate per il trigger.

Ad esempio, puoi scegliere di visualizzare il popup dopo un certo periodo di tempo, oppure dopo che l’utente ha visualizzato un certo numero di pagine.

Elementor e SEO

Unidentclinique.it - Risultati Consulenza SEO di SOS WP™

Ora che hai capito come funziona Elementor e hai già sperimentato il suo uso per la creazione di pagine e articoli, è il momento di passare a un livello superiore, e cioè la gestione della SEO con Elementor.

Sappi che Elementor è perfettamente compatibile con i migliori plugin per la SEO, tra cui Yoast SEO e Rank Math.

Vediamo come funzionano questi plugin in una pagina creata con Elementor.

Se usi Rank Math, nella colonna di sinistra troverai la voce SEO.

Se non la vedi, assicurati di non aver selezionato una sezione o un widget (ti basterà fare clic al di fuori dell’elemento o cliccare sul simbolo che rappresenta dei quadratini).

Inserisci la tua keyword principale per permettere a Rank Math di analizzare il tuo testo.

rank math elementor

Nella sezione Preview, vedrai l’anteprima dello snippet.

Clicca su Edit snippet per modificare il title, il meta tag description e il permalink della pagina.

Qui troverai anche la sezione Social.

Infine, visualizzerai tutti i suggerimenti del plugin.

Se invece il tuo plugin preferito per la SEO è Yoast SEO, per trovare le sue impostazioni seleziona il menu rappresentato dall’icona con le tre righe.

Quindi clicca su Yoast SEO.

yoast elementor

Inserisci ora la tua frase chiave principale e consulta i suggerimenti del pugin per migliorare i tuoi contenuti.

La voce Anteprima di Google ti permette di modificare title, description e slug.

Anteprima di Facebook e Anteprima di Twitter servono invece per le condivisioni sui social.

Trovi infine le impostazioni per i dati strutturati, le avanzate e il pulsante Cornerstone.

Domande frequenti riguardo il plugin Elementor

Elementor, cos’è?

Il page builder Elementor è un plugin per WordPress, tradotto in italiano, che appartiene alla categoria dei visual page builder.

Page builder Elementor ha una versione gratuita?

Sì, ma mette a disposizione anche una versione premium a partire da 49$/anno.

WordPress Elementor è un plugin che può essere usato solo da professionisti?

No, assolutamente. Chiunque può facilmente installarlo e utilizzarlo. È un prodotto accessibile anche ai principianti.

Page builder Elementor permette anche di caricare nuovi template?

Sì, consente di aggiungere tutti i template che si desidera, oltre a proporne una grandissima varietà.

Conclusione

In questa guida abbiamo spiegato che cosa è Elementor e come usarlo in pochi semplici passi.

Creare un sito web e curarne il design può essere un’impresa ardua ed estremamente costosa se ci si rivolge a professionisti.

Quando mancano le risorse e le conoscenze per creare un sito, WordPress ed Elementor sono una coppia vincente!

Con un pochino di impegno, i risultati saranno sbalorditivi e nessuno crederà che tu sia riuscito a creare un sito web unico, ottimizzato e dall’aspetto professionale senza utilizzare neanche una riga di codice.

Hai provato ad usare il page builder Elementor?

Quali sono le funzioni che preferisci?

Parliamone nei commenti.

Guide correlate che ti potrebbero interessare:

Domande? Lascia un commento!

  1. Immagine avatar per Toni
    Toni

    Buona sera a tutti e complimenti per il vostro sito, grazie al quale ho risolto molti problemi, tranne questa volta che sono proprio fermo. Premetto che non sono un programmatore e ne capisco zero, ma dopo aver acquistato 4 libri su WP, guardato molti video e letto tantissime recensioni, sono riuscito a creare il mio sito personale, quello di una mia amica e adesso tengo aggiornato anche quello di una associazione di beneficenza. Tutto questo grazie anche ai plugin. Questa volta il problema è ELEMENTOR (versione gratuita) su tema STOREFRONT CHILD THEME di WOOCOMMERCE. A dir la verità i problemi sono due, ma in questo momento vorrei risolvere solo il primo. Ho installato ELEMENTOR creato la pagina SHOP con 4 foto, ognuna delle quali è collegato ad un gruppo di prodotti. Modificato più volte nessun problema, tutto ok. Da qualche giorno quando apro la pagina SHOP e clicco su “modifica con Elementor” mi compare un avviso: L’ANTEPRIMA NON PUO’ ESSERE CARICATA. SI E’ VERIFICATO QUALCOSA DI SBAGLIATO. FAI CLIC SU MAGGIORI DETTAGLI E SEGUI LE INDICAZIONI PER RISOLVERE IL PROBLEMA RAPIDAMENTE. Ho provato a seguire alcune istruzioni del link ma niente da fare (disattivati tutti i plugin e riattivati tutti, cambiato anche tema, aggiornato tutto). In pratica non posso più modificare la pagina SHOP, anche se la stessa (da frontend, si dice così??) viene visualizzata correttamente. WordPress aggioranato, Elementor aggiornato, tema aggiornato). Se invece voglio modificare la HOMEPAGE (o altre due pagine), sempre con ELEMENTOR, non ho nessun problema si apre il pannello dei comandi sulla sinistra e posso fare tutte le modifiche che voglio. Spero in un vostro aiuto. Grazie di tutto e buon anno a tutti

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Toni, hai disattivato anche il plugin per la cache?

    2. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Toni, per aiutarti (visti tutti i tentativi infruttuosi che hai fatto) sarebbe opportuno un aiuto diretto sul sito web. Scrivici per avere supporto a assistenza@sos-wp.it, ti risponderemo tempestivamente. Un saluto e a presto!

  2. Immagine avatar per Andrea
    Andrea

    Ciao Andrea. Ho un problema con Elementor. Ho creato una pagina shop con il theme builder, quindi aggiungendo una pagine archive product, e poi con la condizione shop page. Il problema è che non la vedo al momento di richiamarla tramite voce di menù. Non la ritrovo da nessuna parte. Stessa cosa per tutte le pagine che creo all’ interno del theme builder di Elementor. Come posso fare?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Andrea, hai provato a fare un test disattivando gli altri plugin?

  3. Immagine avatar per Mirko
    Mirko

    Buongiorno, Problemino con Elementor.pro.. Ho creato un pulsante sulla home, ma scrollando in basso il pulsante rimane bloccato in alto, non ho modificato il posizionamento però ( posizionamento predefinito). Cosa posso fare?

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Mirko, che tema stai utilizzando?

  4. Immagine avatar per Mik
    Mik

    Ciao, complimenti innanzitutto per i preziosi articoli e tutorials, spero possiate aiutarmi con un piccolo dettaglio che non riesco a risolvere.
    Il mio sito (tema Jevelin preso su Themeforest) è stato fatto con Unyson e WpBakery, ho deciso di ricostruirlo ex-novo con Elementor e sono riuscito a renderlo quasi identico all’originale.
    Però su alcune colonne è stato impostato un valore di max-width e non trovo l’analoga funzione tra le impostazioni di Elementor.
    Ho delle sezioni a due colonne full-width, una con una foto che può tranquillamente allargarsi a pieno schermo, ma l’altra che contiene testo dovrebbe restare nel limite di una certa misura (esempio max-width 400px).
    Come posso risolvere?

    Grazie 🙏

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Mik, nella sezione specifica di layout (nel tuo caso, la colonna) dovresti poter impostare la larghezza massima.

  5. Immagine avatar per Tommy
    Tommy

    Grande Andrea ti seguo da qualche giorno e mi stai aiutando già un casino! Hai altre guide oltre a questa su elementor? voglio imparare come usare questo pluggin davvero bene. Che faccio lo prendo il pro? ciaooo 🙂

    1. Immagine avatar per Tommy
      Tommy

      Perfetto grazie Andrea procedo!

    2. Immagine avatar per Andrea Di Rocco
      Andrea Di Rocco

      Ciao Tommy alla grande! si ti consiglio Elementor pro e ti consiglio se vuoi imparare come usarli davvero bene il mio video corso completo su Elementor che trovi qui. Un abbraccio e a presto!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati*