Elementor è uno dei più usati page builder di WordPress, che si installa tramite un plugin.

A differenza di molti altri Elementor possiede una versione gratuita e la possibilità di effettuare un upgrade, a pagamento (annuale).

Questa guida è dedicata alla versione gratuita del page builder e ai plugin complementari (gratuiti) che lo rendono particolarmente versatile.

Installazione

Clicca sulla voce del menu laterale di WordPress Plugin > Aggiungi nuovo e cerca Elementor Page Builder.

Clicca su Installa ora e poi su Attiva, per venire trasportato in una pagina dove potrai selezionare Crea la tua prima pagina.

Installazione del plugin Elementor

Elementi e widget

Nel caso avessi accettato di creare una nuova pagina, Elementor ti trasporta nella bozza non pubblicata di una pagina vuota, dove poter provare gli elementi e i plugin.

Tutti gli elementi sono raggruppati in tre sezioni, Base, Generale e WordPress.

Nel caso ci fossero installati temi o plugin che forniscono elementi differenti, saranno visualizzati all’interno della categoria WordPress.

Cliccando su ogni menu a tendina, sarà possibile utilizzare gli elementi.

Trascina gli elementi nel rettangolo al centro della pagina, dove c’è scritto Trascina il widget qui, o spostalo all’interno di un elemento della pagina creato precedentemente.

Elementi e widget di Elementor

Struttura di un elemento

Tranne rari casi, ogni elemento ha sempre tre pannelli al suo interno, Contenuto, Stile e Avanzato:

Pannelli di Elementor
  • Contenuto contiene la peculiarità dell’elemento, ciò che lo rendere unico.
  • Stile contiene le variazioni grafiche applicabili al contenuto.
  • Avanzato raggruppa tutti o parte dei sotto-pannelli: Avanzato (inserimento di classi e ID CSS), Sfondo (classico o gradienti), Bordo, Responsive, per nascondere gli elementi su desktop, mobile tablet, e CSS personalizzato, attivabile solo con l’acquisto della versione PRO.

Elementi base

All’interno del primo pannello si trovano i 10 widget che permettono di montare una pagina base:

  • Sezione interna divide in sezioni una parte della pagina, ognuna delle quali può essere riempita con altri elementi.
  • Intestazione permette di inserire un testo, che può essere un H1 o un qualsiasi altro tag, perfino un semplice paragrafo.
  • Immagine consente di caricare un img, inserendo anche del testo e/o un link.
  • Editor di testo viene utilizzato per inserire insieme tag testuali differenti.
  • Video crea un embed di un contenuto Youtube, DailyMotion, Video oppure ospitato sul proprio spazio.
  • Pulsante crea un bottone a cui si possono aggiungere icone e link.
  • Divisore e Distanziatore sono simili, creano degli spazi tra gli elementi. La differenza tra i due è che uno crea una linea visibile, l’altro no.
  • Google Map.
  • Icona contiene un gran numero di opzioni, comprese le versioni monocromatiche dei loghi dei social network.

Elementi: Generale

Il pannello Generale contiene widget utili a personalizzare la pagina e a inserire codice HTML e shortcode.

Utilizzare alcuni di questi elementi renderà difficile tornare ad una visione “normale” della pagina, una volta salvata.

Non che ci siano degli impedimenti a farlo, ma la modalità tradizionale di WordPress potrebbe distruggere il layout della pagina.

pagina modificata da Elementor
Per visualizzare il codice della pagina, bisogna uscire dalla modalità di Elementor

In linea con le indicazioni sul ranking del sito, si sconsiglia l’utilizzo di tab e accordion, pena possibile perdita di posizionamento.

Elementi WordPress

In questa categoria si trovano tutti gli elementi generati da plugin e dal CMS.

In alcuni casi, come accade per il caricamento di video di social o network non supportati dal widget precedente, si possono trovare delle soluzioni valide per ogni bisogno.

Sebbene siano un certo numero, solo i widget dei plugin e poco altro destano un reale interesse.

Template personalizzati, pagine e blocchi.

Per tutti coloro che non vogliono costruire una pagina daccapo, è possibile premere il pulsante Aggiungi template, al centro della pagina.

A questo punto sarà possibile scegliere se utilizzare una struttura già fatta, in Pagine, o usufruire di alcuni Blocchi personalizzati, e continuare la personalizzazione per i fatti nostri.

Blocchi pagine e template di Elementor

Per quanto riguarda i Template personalizzati, si tratta di una delle opzioni più utili di Elementor.

Una volta completata una pagina, è possibile premere sulla freccia accanto al bottone Pubblica e cliccare su Salva come template.

Da questo momento, potrete riutilizzare il template creato ogni volta che vorrete, esportarlo per altri progetti o eliminarlo.

Impostazioni generali e altre opzioni

Alla fine della dashboard, in basso, sono presenti cinque icone, piccole ma utilissime.

La prima a sinistra è Impostazioni, che permette di inserire l’immagine di copertina, cambiare il title della pagina e il layout.

Il bottone Navigatore attiva la vista schematica per sezioni della pagina.

Cronologia contiene tutti i salvataggi e le azioni compiute nelle nostre operazioni.

Modalità responsive permette di cambiare visuale, tra le tre concesse: desktop, tablet e smartphone.

Anteprima modifiche è un bottone equivalente a quello della modalità classica.

Impostazioni generali di Elementor

Infine, nel caso in cui volessimo cliccare in alto a sinistra, si aprirebbe un menu che contiene una parte delle opzioni conosciute, e altri pannelli utili per cambiare i font e i colori della pagina.

Menu laterale su WordPress

Delle otto voci di menu presenti all’interno di Elementor, meno della metà sono realmente utili.

Impostazioni, diviso in Generale, Stile e Avanzato contiene le opzioni per decidere quali tipi di contenuti (pagine, post) modificare, selezionare i font predefiniti e scegliere come gestire il CSS, se inline o esterno.

Strumenti è un pannello pericoloso, perché se da una parte è utile per mettere in manutenzione il sito, dall’altra contiene lo strumento per modificare tutti gli URL per garantire la corretta importazione dei temi grafici.

degli altri pannelli, alcuni sono attivabili solo nella versione PRO (Gestore ruolo e Passa a PRO), mentre Informazioni di sistema, Iniziare e Documentazione rimandano ad un pannello (informazioni di sistema) o a link esterni.

Svantaggi del page builder

A differenza di quanto si possa credere, Elementor non è indicato per ogni sito.

Capita spesso che l’interazione tra il tema grafico e il page builder crei dei problemi nel caricamento della pagina, che possono influenzare negativamente le performance l sito.

Da questo punto di vista, vi consiglio di seguire una delle seguenti soluzioni:

Installare un tema gratuito consigliato da Elementor:

L’azienda che ha creato il plugin consiglia un elenco di temi gratuiti.

Installare un tema a pagamento consigliato:

Nel caso si voglia effettuare un lavoro più elaborato esistono dei temi consigliati dalla stessa azienda.

E se il sito possiede già un tema grafico?

Cambiare un tema grafico o valutare se esso influenza negativamente il posizionamento del sito, richiede l’intervento di un consulente seo qualificato.

Plugin aggiuntivi

Utilizzare la versione gratuita di Elementor può creare alcuni problemi, primo tra tutti l’impossibilità di modificare il CSS dalla dashboard.

Nonostante questo, esistono un numero indefinitito di plugin che espandono le opzioni del page builder.

Il più importante è Raven, che espande il numero di elementi disponibili su Elementor.

Un altro, sebbene sia difficile da utilizzare, è Advanced Custom Fields PRO, che permette di creare dei campi personalizzati all’interno dei post e delle pagine.

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.