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

Come modificare un sito con Elementor

Indice

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.

Come modificare un sito in Elementor: aggiungi pagina
Come aggiungere una pagina in Elementor

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.

Modifica pagina con Elementor
Modifica con Elementor

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

Pulsante pubblica pagina con Elementor
Pulsante Pubblica pagina in 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.

Come modificare un sito con Elementor: le Sezioni delle pagine
Le sezioni in Elementor

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.

Scelta struttura della sezione in Elementor
Scelta della struttura della Sezione

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

Come modificare un sito con Elementor: le sezioni a due colonne
Struttura della Sezione a due colonne

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

Modifica colonna di una sezione in Elementor
Pulsante Modifica Colonna

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

aggiungi o elimina una colonna in una sezione con Elementor
Aggiungi o rimuovi una colonna

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
Aggiungi sezione in testa in una pagina web con Elementor
Aggiungi Sezione in testa
  • 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.
Aggiungi sezione in coda in una pagina web con Elementor
Aggiungi una Sezione in coda

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.

Come modificare un sito con Elementor: Aggiungi widget
Inserisci il Widget desiderato dalla lista
Cerca Widget di Elementor
Cerca il Widget desiderato

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.

Inserimento Widget di Elementor in una pagina web

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.

Personalizzazione Widget di Elementor

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.

Personalizzazione Contenuto di una Intestazione
Personalizzazione del Contenuto del Widget “Intestazione”

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.

Personalizzazione Contenuto di un Pulsante
Personalizzazione del Contenuto del Widget “Pulsante”

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.

Personalizzazione Stile dell'Intestazione
Personalizzazione dello Stile del Widget “Intestazione”

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).

Personalizzazione Stile di un Pulsante
Personalizzazione dello Stile del Widget “Pulsante”

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.

Personalizzazione Avanzata di un Widget
Personalizzazione Avanzata di un Widget

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
Crea nuovo Template con Theme Builder
Aggiungi un nuovo Template

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

Tipologia Template con Theme Builder
Scelta della Tipologia di Template

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.

Come modificare un sito con Elementor: Esempio Template con Theme Builder
  • 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.
Impostazioni pubblicazione template
Impostazioni di Pubblicazione del Template

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.

Esportazione template da Theme Builder

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.

Crea nuovo Template da pagina esistente

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
Importa template su Theme Builder

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
Impostazioni pubblicazione popup
Impostazioni di Pubblicazione di un Popup
  • 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.
Impostazione trigger popup
Impostazione Trigger di un Popup
  • 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.
Regole di pubblicazione avanzate Popup
Regole di Pubblicazione Avanzate di un Popup

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
Come collegare un popup a un pulsante di una pagina web
Come collegare un Popup ad un pulsante
  • 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).

Collegamento di un popup a un pulsante 2

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!

Facebook
Twitter
LinkedIn
Email

Approfondisci

Gli articoli più letti

mindset vincente - Copertina

Mentalità vincente: i +6 segreti per acquisirla e avere successo (nel business online e nella sfera personale)

Quanto conta avere una mentalità vincente per guadagnare online?
Davvero l’acquisizione di un mindset efficace può aiutare a sostenere la creazione, l’avvio e la crescita di un business online?
Queste due domande pongono l’attenzione su un aspetto spesso trascurato, non solo quando si parla di guadagno online, ma anche quando in generale si parla di obiettivi personali e di vita.
Sviluppare un mindset vincente è fondamentale per riuscire a dare una svolta alla propria vita. Scopri come fare.

Leggi articolo »
Completato 50%

GUIDA GRATUITA

Acquisisci clienti in modo semplice

Scopri il processo in 3 semplici step per attirare nuovi potenziali clienti e convertirli in clienti paganti.

Compila i campi sottostanti e clicca sul pulsante di conferma.

Su questo sito utilizziamo strumenti di prima o terza parte che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie sono normalmente utilizzati per consentire il corretto funzionamento del sito (cookie tecnici), per generare report sull’utilizzo della navigazione (cookie di statistica) e per pubblicizzare adeguatamente i nostri servizi/prodotti (cookie di profilazione). Possiamo utilizzare direttamente i cookie tecnici, ma hai il diritto di scegliere se abilitare o meno i cookie statistici e di profilazione. Abilitando questi cookie, ci aiuti a offrirti un’esperienza migliore.