Come modificare un sito con Elementor: Sezioni, Widget, Template e Popup

Come modificare il tuo sito con Elementor rendendolo unico e speciale?

Ti stai chiedendo come si usa Elementor e come poter cambiare in meglio il tuo sito grazie all’ausilio del page builder leader di mercato? Bene, sei nel posto giusto!

L’obiettivo di questo articolo è mostrare come personalizzare le pagine del tuo sito web grazie ad Elementor, modificando la struttura, gli elementi presenti e creando nuovi template e popup.

Alla fine dell’articolo sarai in grado di modificare il tuo sito web con Elementor, rendendolo completo, unico ed efficace.

Ma partiamo dall’inizio.

Cos’è Elementor

Elementor è un page builder da installare su WordPress che permette di creare, modificare, aggiornare e personalizzare un sito web senza conoscere alcun linguaggio di programmazione.

Probabilmente, avendo aperto questo articolo, conosci già Elementor e come funziona un page builder. Se così non fosse, ti lascio il link di questo articolo per approfondire.

Come installare Elementor su WordPress

Prima di poter modificare il tuo sito web con Elementor è necessario procedere alla sua installazione sul tuo sito WordPress.

Si tratta di passaggi piuttosto semplici e rapidi che ho spiegato in un articolo dedicato. Clicca qui per leggere come installare Elementor, nelle sue versioni Free e PRO, su WordPress.

Come modificare un sito con Elementor

Una volta installato e attivato Elementor, potrai liberare la tua creatività e modificare il tuo sito web ottenendo risultati estremamente professionali.

Il funzionamento di Elementor è molto semplice e si basa sulla tecnica del Drag & Drop, cioè Trascina e Rilascia. Come avrai visto nell’articolo di presentazione del plugin, è presente una libreria molto ampia di widget che potrai utilizzare per personalizzare il tuo sito.

(Ti lascio anche il link alla pagina ufficiale dei Widget di Elementor)

I widget non sono altro che elementi che compongono il sito, quali ad esempio titoli, paragrafi, immagini ma anche pulsanti, icone, caroselli di immagini, video, post, barre di ricerca e cosi via.

Cosa si intende con Drag and Drop?

E’ la tecnica che permette di inserire un elemento o widget all’interno di una pagina web semplicemente selezionandolo da una lista e trascinandolo fino al punto prescelto. Ecco come si procede in Elementor:

1. Apri la lista di widget disponibili
2. Scegli il widget di tuo interesse
3. Trascina il widget nel punto desiderato della pagina web
4. Rilascia
5. Procedi alla personalizzazione grafica, dei contenuti e delle funzionalità del widget inserito

Ogni widget può essere personalizzato da un punto di vista grafico, definendo colori, effetti di ingresso, effetti hover (cioè al passaggio del puntatore del mouse sull’elemento), sfondi classici e overlay.

Inoltre, in base al tipo di widget può essere necessaria una configurazione dell’elemento stesso: basti pensare al widget “Modulo di contatto”. Si tratta del form che un visitatore del tuo sito può utilizzare per chiederti informazioni. Sarà necessario indicare quali campi inserire, quali rendere obbligatori e le azioni da intraprendere al momento del clic sul pulsante di conferma. Ad esempio il reindirizzamento su una pagina di ringraziamento (la cosiddetta Thank you page) o l’invio di una mail.

Come creare una pagina con Elementor

Per creare una nuova pagina con Elementor vai sulla bacheca di WordPress nella sezione Pagine. In alto a sinistra troverai il pulsante Aggiungi Pagina sul quale dovrai cliccare.

A questo punto si aprirà una schermata (vedi immagine sotto) per la modifica della nuova pagina con l’editor classico di WordPress:

• Inserisci il titolo (opzionale)
• Fai clic su Salva come Bozza

E poi clicca sul pulsante Modifica con Elementor che trovi in alto sulla sinistra.

La tua pagina sarà stata creata e potrai iniziare a personalizzarla con Elementor.

N.B. Fin quando non farai clic su “Pubblica” la tua pagina non sarà visibile online.

Come modificare una pagina web con Elementor

Vediamo ora come modificare una pagina internet con Elementor dopo averla creata.

Partiamo con un’introduzione sulla struttura delle pagine in Elementor: esse sono basate su Sezioni, cioè porzioni di pagina web personalizzabili in modo indipendente dalle altre.

Successivamente vedremo nel dettaglio come modificare tali sezioni.

La struttura delle pagine in Elementor: le Sezioni

Una volta creata la tua pagina web e aperta in Elementor, si presenterà la seguente schermata.

Fai clic sul pulsante “+” per inserire una nuova sezione oppure clicca sul pulsante “Aggiungi Template” per selezionare un Template, esistente o da te creato, da aggiungere alla tua pagina (poco più avanti vedremo come creare un Template).

Personalizzazione delle sezioni in Elementor

Facendo clic sul pulsante “+” potremo scegliere la Struttura della Sezione.

Supponiamo di scegliere la seconda opzione (due colonne), la pagina si presenterà in questo modo:

La sezione appena creata è quella evidenziata dal bordo azzurro e, come desiderato, presenta due colonne al suo interno.

Per aggiungere o rimuovere una colonna basta fare clic sul pulsante “Modifica Colonna” con il tasto destro

e selezionare “Aggiungi una colonna” o “Elimina”. In tal modo, la struttura della sezione verrà aggiornata.

Aggiungere una nuova sezione in Elementor

Nel caso in cui tu voglia aggiungere una nuova sezione, hai due possibilità:

• Fare clic sul pulsante “Aggiungi Sezione” (il +) presente nell’etichetta superiore della sezione. In tal caso, la nuova sezione andrà in testa a quella esistente

• Oppure fare clic sul pulsante “+” nella parte sotto la sezione esistente e procedere come fatto per la prima sezione. In tal caso, la nuova sezione andrà in coda a quella esistente.

Inserimento Widget di Elementor

A questo punto si passa all’inserimento dei widget desiderati e alla personalizzazione delle sezioni.

Puoi selezionare l’elemento o widget da inserire partendo dal menu sulla sinistra o puoi cercarlo sulla barra di ricerca in alto a sinistra.

Una volta identificato il widget di interesse, ti basterà cliccare sopra di esso, trascinarlo sul punto desiderato e rilasciarlo. Ad esempio, nel caso mostrato sotto, ho inserito 2 Intestazioni, 2 paragrafi, un pulsante e un’immagine.

Personalizzazione dei Widget in Elementor

Una volta inseriti uno o più widget potrai cambiarli, modificarli e personalizzarli secondo i tuoi gusti.

Per ogni widget, Elementor permette di intervenire su tre aspetti: Contenuto, Stile e Avanzato.

Contenuto

Nella sezione Contenuto potrai modificare il contenuto testuale, l’immagine o le impostazioni specifiche dell’elemento, in base al widget scelto.

Ad esempio nel caso del widget Intestazione, potrai modificare il Titolo, inserire un link, scegliere la dimensione, il tag HTML e l’allineamento.

Nel caso del Pulsante potrai scegliere la tipologia, il testo da inserire, il link al quale rimandare, l’eventuale icona, le dimensioni e l’allineamento.

Stile

Nella sezione Stile potrai modificare alcuni aspetti grafici del widget in questione.

Nel caso dell’Intestazione, Elementor permette di scegliere il colore del testo, gli aspetti legati alla tipografia (quali ad esempio font e dimensioni), il tratto di testo e l’eventuale ombra.

Mentre per quanto riguarda il Pulsante, oltre agli aspetti di Tipografia e all’ombra, sarà possibile scegliere il colore del testo, il tipo di sfondo e il relativo colore, sia in modalità “normale” che “Hover” (cioè quando il puntatore del mouse del tuo utente si troverà sopra il pulsante).

E’ inoltre possibile modificare l’aspetto grafico del pulsante, prevedendo o meno la presenza del bordo e il suo raggio (quanto è arrotondato, in altre parole).

Avanzate

Elementor, per ciascun widget, prevede anche alcune modifiche Avanzate.

Oltre al Layout, che permette di scegliere il margine, il rientro e la posizione del Widget, è possibile inserire gli Effetti di Movimento e la Trasformazione. I primi riguardano gli effetti, di movimento appunto, da applicare al widget quando scorriamo lungo la pagina o muoviamo il mouse (ad esempio facendo scorrere il titolo o il testo di un paragrafo). I secondi riguardano eventuali effetti di ingresso o uscita dalla pagina che vogliamo prevedere per l’elemento in questione (ad esempio la classica dissolvenza)

Infine, la sezione Responsive permette di oscurare, o meno, uno specifico widget su una o più tipologie di dispositivi: desktop, tablet e mobile. In alcuni casi, per ottimizzare il sito per i dispositivi mobili, è utile nascondere o attivare alcuni elementi su questa tipologia di dispositivi. La SEO del sito ne guadagnerà e tu otterrai un sito web mobile friendly.

Come creare un Template con Elementor

Per creare un template con Elementor esistono due strade principali:

1. la prima consiste nel crearlo mediante il Theme Builder, cioè la funzionalità di Elementor PRO che permette di creare i “blocchi” standard del tuo sito e riutilizzarli in tutte le pagine desiderate
2. la seconda opzione, consiste nel creare un template a partire da una pagina del tuo sito già esistente

Come creare un Template con il Theme Builder di Elementor PRO

Ecco come creare un template con il Theme Builder di Elementor PRO:

• Partendo dalla Bacheca di WordPress, fai clic su Template
• Successivamente fai clic su Theme Builder
• Si aprirà la Home page del Theme Builder che ti mostrerà eventuali Template di Elementor PRO presenti
• Per creare un nuovo template fai clic sul pulsante in alto a destra “Add New”

A questo punto avrai la possibilità di scegliere la tipologia di Template che vuoi creare:

Supponiamo ad esempio di selezionare Articolo Singolo.

Si aprirà la libreria. Potrai scegliere tra Blocchi, Pagine e Template personalizzati (nel caso tu ne abbia già creato qualcuno).

Supponiamo di selezionare Blocchi e scegliere il secondo template disponibile nell’elenco.

• Fai clic su inserisci.
• A questo punto si aprirà la pagina del Template in Elementor PRO e potrai modificarla a tuo piacimento
• Una volta ultimate le modifiche, fai clic su Pubblica.
• Si aprirà la pagina delle impostazioni di Pubblicazione. Puoi decidere se applicare il tuo template su tutto il tuo sito o su alcune pagine specifiche facendo clic su Aggiungi Condizione.

Diversamente, come consiglio io, puoi evitare di selezionare le condizioni. Fai direttamente clic su Salva e Chiudi. Sarai tu, per ogni articolo scritto, a decidere se utilizzare o meno il Template creato.

Ti lascio, a titolo di esempio, il link ad un video ufficiale su come creare un Template dell’Header su Elementor:

Come esportare un Template

Nel caso tu voglia esportare il template creato, torna nella Home page del Theme Builder, fai clic sul template creato, fai clic sui tre puntini e poi su esporta.

Come creare un Template con Elementor PRO da una pagina web esistente

La seconda possibilità è di creare un template partendo da una pagina esistente.

Dalla Bacheca WordPress, vai su Pagine, seleziona quella desiderata e avvia la modifica in Elementor.

Una volta effettuate le modifiche volute, fai clic sulla freccia a destra del pulsante verde e fai clic su Salva come Template.

Ti verrà chiesto di attribuire un nome al template prima di salvarlo nella libreria.

Come importare un Template con Elementor

Per importare un template in Elementor PRO:

• vai nella Home Page del Theme Builder
• fai clic su Add New (come visto in precedenza per la creazione da zero di un template)
• fai clic sul pulsante Importa (in alto a destra), una volta aperta la schermata della libreria

A questo punto basta selezionare il file con estensione .json o .zip da caricare e procedere con l’importazione.

Come creare un Popup con Elementor PRO

Vediamo infine come creare un popup con Elementor PRO:

• Dalla bacheca di WordPress, fai clic su Elementor e poi su Popup
• In alto a sinistra fai clic su “Nuovo”
• Lascia invariata la prima selezione (su Popup), inserisci il nome dove richiesto e fai clic su Crea Template
• Scegli il formato che preferisci nella Libreria (alla sezione Popup) e fai clic su Inserisci
• Ora puoi modificare a tuo piacimento i contenuti e gli aspetti grafici del Popup
• Una volta ultimato il Popup fai clic su Pubblica per accedere alle impostazioni di Pubblicazione

• Nella sezione Condizioni puoi impostare le condizioni per far apparire il Popup su tutto il tuo sito o su specifiche sezioni
• Nella sezione Trigger deciderai qual è l’azione che l’utente deve compiere per far apparire il Popup. Ad esempio si può decidere di far comparire il Popup non appena si ci sia lo scroll della pagina o semplicemente alla fine del caricamento della pagina web.

• Nella sezione Regole avanzate puoi valutare quali requisiti aggiuntivi debbano essere soddisfatti per far comparire il Popup. Ad esempio un numero minimo di visualizzazioni o l’arrivo da un url specifico.

Diversamente, puoi evitare di impostare qualsiasi regola vista fin ora e fare semplicemente clic su Salva e Chiudi. In questo caso, avrai creato il Popup desiderato ma dovrai decidere successivamente come “attivarlo”.

Collegare un Popup al pulsante di una pagina web

Se desideri far comparire il Popup solo dopo il clic dell’utente su un determinato pulsante di una pagina, procedi come segue:

• apri la pagina desiderata in Elementor
• seleziona il pulsante in questione
• spostati sul riquadro di modifica a sinistra, nella sezione Contenuti

• Alla voce link, fai clic su Tag Dinamici e seleziona Popup dalla lista
• Clicca sul simbolo della chiave (a sinistra di Popup) e seleziona lo specifico Popup da far comparire al clic sul pulsante.

A questo punto, il Popup è collegato al pulsante!

Non appena un visitatore farà clic su di esso, comparirà il Popup (può essere utile per scaricare un Lead Magnet ad esempio).

Conclusioni

Eccoci arrivati alla fine dell’articolo!

Spero possa esserti utile per capire come modificare il tuo sito web con Elementor.

Nello specifico, ora sai come:

• Creare nuove pagine e modificarle, personalizzandole con tutti i widget di Elementor
• Creare, modificare e importare template in Elementor
• Creare, modificare e importare Popup

Buon divertimento!

Ti ringrazio per l’attenzione.

Per qualsiasi dubbio o richiesta di supporto non esitare a contattarmi:

Infine, se l’articolo ti è piaciuto e lo trovi interessante, eccoti i pulsanti per condividerlo!

Grazie mille!