In questo nuovo articolo per Elementor Academy andremo a vedere come creare una timeline su Elementor. Sfortunatamente non esiste un widget Elementor Timeline nativo del page builder da poter essere utilizzato nel tuo sito WordPress.
Tuttavia è possibile realizzare una timeline senza dover affidarsi a plugin di terze parti, che ampliano così le funzionalità di Elementor.
In questa guida andremo infatti a scoprire come realizzare una Elementor Timeline, sfruttando le potenzialità di Elementor. Vedremo anche allo stesso tempo quali sono gli addons che possono aiutarti a costruire fantastiche timeline, consapevoli del fatto che potrebbero avere un prezzo aggiuntivo da sostenere.
Ma prima di iniziare, cerchiamo di capire che cosa sono le timeline e perché è utile utilizzare all’interno di una landing page e di un sito internet.
Cosa sono le Timeline e a cosa servono
La timeline, o “linea temporale”, è un componente visivo utile a rappresentare eventi, azioni, fasi o tappe, che vengono disposti in ordine cronologico su una linea continua.
Possono essere realizzate per diversi motivi, mostrare il progresso di un progetto, la vita di una azienda, un rapporto di causa e conseguenza per eventi e avvenimenti, ma li vediamo meglio più in basso. E allo stesso tempo le “linee temporali” possono essere di varia natura: lineari (ordinate orizzontalmente o verticalmente), interattive (magari attraverso un click permettono l’esplorazione dell’evento narrato), statiche (atte a mostrare tutti gli eventi insieme).
Le “linee temporali”, e le Elementor Timeline di cui parleremo in questa guida, nascono per semplificare ed organizzare visivamente informazioni complesse e corpose. In un layout che renda la comprensione e la lettura più semplici, così da migliorare l’esperienza utente e fornire una panoramica chiara ed efficace di un processo o di un percorso temporale.
Quando è giusto utilizzare una timeline?
Raccontare una storia, presentare un processo
Con le timeline è possibile raccontare una storia in modo visivamente ordinato, che sia la storia della tua azienda, oppure la realizzazione di un processo o un prodotto.
Puoi mostrare le tappe più importanti della vita aziendale, attraverso i passaggi significativi e gli eventi chiave che si sono verificati nel tempo. Ma al tempo stesso puoi utilizzare la “linea temporale” per descrivere i momenti di passaggio di una collaborazione, oppure le fasi di evoluzione di un progetto, come ad esempio una campagna di marketing, un trattamento medico.

Comunicare autorevolezza e credibilità
Senza dubbio mostrare l’evoluzione e il progresso attraverso una timeline non può che rafforzare la tua credibilità, e quella della tua azienda.
Se hai ricevuto premi e riconoscimenti nel tempo, inseriscili in una timeline ed aumenta la tua reputazione.
Se stipuli importanti collaborazioni o lavori per grandi clienti, utilizza una linea temporale per mostrare questi eventi, e aumenta la fiducia dei clienti nei tuoi confronti.
Migliore la UX (User Experience)
Magari te lo sei perso qualche rigo sopra, ma le timeline sono utili per organizzare al meglio informazioni più complesse. Un layout chiaro e ordinato non può che aiutare gli utenti nel rendere i contenuti più leggibili e facili da digerire.
E di conseguenza l’esperienza utente non può che trarne beneficio. E fa bene anche in ottica di posizionamento SEO.
Coinvolgere il lettore
Se vogliamo che un utente del web, un lettore digitale, non abbandoni mai il nostro sito web, non solo deve trovare informazioni di interesse e risposte alle sue ricerche. Ma deve sentirsi anche coinvolto.
Timeline con un design interattivo e visivo aiutano tanto nel migliorare l’engagement. I visitatori possono esplorare i contenuti gradualmente e seguire un flusso che li aiuta a rimanere interessati più a lungo.
Quando e perché utilizzarle: i valori delle Elementor Timeline
Ecco una serie di situazioni in una timeline può essere utilizzata intelligentemente:
- Pagina About: raccontare la vita della tua azienda, o se sei un libero professionista raccontare l’evoluzione personale o professionale;
- Pagina Portfolio / Case Studies: passo dopo passo, illustrare i risultati raggiunti attraverso un progetto o un percorso lavorativo;
- Sviluppo di un prodotto: mostrare l’evoluzione nel tempo di un prodotto o di un servizio, con le nuove versioni rilasciate, i miglioramenti e le nuove funzionalità implementate;
- Eventi passati, presenti e futuri: mostrare gli eventi passati, quelli correnti e quelli futuri, ad esempio all’interno di un sito internet di spettacoli, di concerti o di qualsiasi tipologia di eventi.
L’utilizzo di una timeline in questa serie di situazioni, ed in altre affini, può portare numerosi vantaggi, quali:
- Chiarezza: il contenuto presentato viene organizzato in modo chiaro e ordinato;
- Attrattiva visiva: gli elementi grafici e relativi effetti di comparsa/scomparsa e movimento rendono il sito web più dinamico;
- Coinvolgimento: vedere una progressione port gli utenti a sentirsi più coinvolti;
- Credibilità: mette nero su bianco la tua esperienza, i traguardi raggiunti e i successi ottenuti, che non possono che migliorare la tua posizione nei confronti degli utenti.
Realizzare una Elementor Timeline senza il bisogno di componenti aggiuntivi
La prima delle due soluzioni che mostreremo in questa guida riguarda la realizzazione di una Elementor Timeline senza l’ausilio di componenti di terze parti.
Un po’ come abbiamo illustrato in un articolo precedente, la possibilità di realizzare fantastiche tabelle, senza avere un widget nativo per Elementor.
Sfrutteremo semplicemente i container e i vari widget che Elementor mette a disposizione per creare fantastiche timeline. Tipo quella che puoi vedere nell’immagine, che di layout non è fantastica, ma fa comprendere bene il punto di partenza di questo metodo pratico.

I 5 step per creare la tua Elementor Timeline
Step 1.
Apri la pagina in cui vuoi inserire la tua timeline con Elementor. Crea una nuova sezione e scegli il layout a due colonne. La larghezza delle due colonne è arbitraria, in base al tuo gusto estetico. Nel nostro esempio sopra riprodotto abbiamo utilizzato una larghezza del 33% per la colonna di sinistra, e del 66% per la colonna di destra.
Step 2.
Nella colonna di sinistra inserisci un riferimento per segnalare i punti della timeline. Puoi decidere di utilizzare un widget Icon Box o Image Box. Nel nostro esempio abbiamo semplicemente inserito come elemento di testo un numero, a cui abbiamo abbinato un font-size alto e un peso bold. Oltre che applicargli uno sfondo e un raggio al bordo.
Step 3.
Nella colonna di destra inserisci tutto cià che vuoi raccontare per questo elemento della timeline. Noi abbiamo inserito un semplice Text Editor, ma puoi creare anche elementi più complessi, con delle immagini, dei caroselli, quello che preferisci. La colonna di destra rappresenta la descrizione di questo evento nella timeline.
Step 4.
Ripeti questa struttura a due colonne per ogni elemento che vuoi inserire nella timeline. Fai attenzione alla quantità di elementi. Se è vero che una Elementor Timeline aiuta a coinvolgere l’utente, dall’altra parte attenzione a non annoiarlo o riempirlo di informazioni che potrebbero non essere lette o creare dei dubbi nel lettore.
Step 5.
Aggiungi un bordo destro e un bordo sinistro rispettivamente alla colonna di sinistra e a quella di destra. Creando così una linea temporale continua lungo la quale è possibile leggere tutti gli eventi della timeline.
Puoi farlo lavorando sui bordi, inserendo dei divisori, oppure con qualche semplice regola di CSS.
Puoi anche divertirti con degli effetti di animazione in entrata per i vari componenti utilizzati. Così da creare un dinamismo e un coinvolgimento aggiuntivi, che sicuramente gli utenti apprezzeranno.
Crea la tua Elementor Timeline con plugin esterni
Se la creatività non fa per te, oppure non hai troppo tempo da dedicare per creare la tua timeline, puoi decidere di affidarti a plugin di terze parti che si integrano completamente con Elementor.
In questo modo tra i widget che puoi utilizzare nell’editor di Elementor troverai anche quelli relativi alla Timeline. Trascinandoli nella sezione in cui vuoi far comparire la “linea temporale”, puoi popolarla e personalizzarla.
Vediamo quali sono i plugin che possono aiutarti, ricordandoti che quasi tutti sono estensioni che hanno un costo, più o meno trascurabile.
Essential Addons for Elementor
Essential Addons è plugin che puoi utilizzare in una versione Demo di prova, o sottoscrivendo un piano in abbonamento. Mette a disposizione il widget Post Timeline, grazie al quale puoi mostrare i tuoi tipi di contenuto personalizzati in un layout unico e creare così la tua Elementor Timeline.

Elementor Widget Addon for Elementor Page Builder
Questo è un set di una quarantina di widget aggiuntivi per dare libero sfogo alla propria creatività e ampliare le funzionalità di Elementor.
Scaricandolo e installandolo tra i plugin del tuo sito web puoi utilizzare il widget Timeline che ti permette di creare una “linea temporale” orizzontale per vari tipi di post, pagine, contenuti custom o anche semplicemente del testo statico inserito proprio all’interno del widget.

PowerPack Addons for Elementor
PowerPack Addons è un plugin che si integra perfettamente con ogni sito WordPress che utilizza Elementor come Page Builder. Attraverso il widget Timeline ti dà la possibilità di creare qualunque “linea temporale” tu voglia, attraverso numerosi layout, e mostrando sia contenuti dinamici che statici.
Ha un costo abbastanza sostenibili di 49$ all’anno, che al tempo stesso fornisce l’accesso a numerose altre funzionalità.

JetElements
Parte della suite di Crocoblock, JetElements ha un widget Timeline ben fatto, altamente personalizzabile e facile da utilizzare. Il plugin ha un costo, ma come per gli altri acquistandolo puoi avere accesso a tantissime altre feature.

Recap finale
In questa guida abbiamo visto che cos’è una Timeline e come realizzare una Elementor Timeline. Il metodo sicuramente più semplice è quello di affidarsi a plugin esterni, che hanno lo svantaggio di avere un costo, che magari diventa importante andandolo ad aggiungere a quello di Elementor PRO e a quello di altri strumenti digitali che puoi utilizzare.
Il metodo che noi riteniamo migliore è quello di sfruttare le possibilità di Elementor, costruendo la timeline manualmente. Sì, è vero. Ci vuole del tempo. Ma il risultato finale sarà sicuramente coerente con la Brand Identity della tua attività, e di grande soddisfazione perché realizzato in autonomia.
Ti lasciamo alcune FAQ per chiarirti maggiormente le idee se ne avessi bisogno. Nel caso, puoi trovare tantissimi aiuti e il nostro supporto, nell’Elementor Academy.
Domande frequenti su Elementor Timeline
Posso creare una timeline su Elementor senza plugin?
Sì, è possibile creare una timeline manualmente usando le colonne e i widget base di Elementor, come Icon Box, Image Box e Text Editor. Questa opzione richiede più lavoro manuale ma consente di avere un controllo totale sul design.
Quali plugin mi servono per creare una timeline su Elementor?
Ci sono vari plugin che aggiungono un widget di timeline a Elementor, come Essential Addons, PowerPack Addons, Elementor Timeline Widget e JetElements. Questi plugin offrono opzioni di personalizzazione avanzate e permettono di creare timeline in modo più rapido e dinamico.
Qual è il miglior layout per una timeline: orizzontale o verticale?
Dipende dallo spazio disponibile e dal contenuto che vuoi mostrare. Una timeline verticale è spesso più leggibile per sequenze lunghe e complesse, mentre una timeline orizzontale è adatta a contenuti più brevi o in layout con ampia larghezza.
Posso personalizzare i colori e lo stile della mia timeline?
Sì, con Elementor puoi personalizzare colori, font, dimensioni e layout per adattare la timeline al design del tuo sito. I plugin per timeline offrono anche opzioni di stile preimpostate, che puoi personalizzare ulteriormente.
Perché dovrei aggiungere una timeline al mio sito web?
Una timeline è utile per visualizzare cronologicamente eventi o fasi di un progetto. Può rendere il contenuto più ordinato e facile da seguire, migliorando l’esperienza utente e aumentando il coinvolgimento.
Posso rendere la mia timeline interattiva?
Sì, molti plugin per timeline offrono elementi interattivi come icone cliccabili o effetti al passaggio del mouse. In Elementor, puoi aggiungere interattività con le impostazioni avanzate come animazioni di scorrimento e hover.
È possibile creare una timeline dinamica con Elementor?
Con plugin avanzati o integrazioni come JetEngine, puoi creare una timeline dinamica che si aggiorna automaticamente in base a contenuti personalizzati, come post o eventi, rendendola perfetta per un blog o un sito di eventi.Devo avere Elementor Pro per creare una timeline?
No, è possibile creare una timeline anche con Elementor gratuito, usando i widget di base. Tuttavia, Elementor Pro offre funzionalità avanzate, come animazioni e layout flessibili, che possono rendere la timeline più interessante.