Una timeline è uno di quegli elementi grafici che sembrano complicati, ma che in realtà si possono costruire in modo abbastanza pulito usando solo HTML e CSS.
Può essere utile in tantissimi casi: per raccontare la storia di un’azienda, mostrare le fasi di un progetto, descrivere un percorso professionale, presentare gli step di un servizio oppure spiegare l’evoluzione di un prodotto nel tempo.
La cosa bella è che non serve installare per forza un plugin WordPress. Se il sito è già costruito con Gutenberg, GeneratePress, GenerateBlocks o un tema abbastanza leggero, possiamo tranquillamente creare una timeline personalizzata con un semplice blocco HTML e qualche riga di CSS.
In questo articolo vediamo quindi come costruire una timeline verticale responsive, ordinata, elegante e facilmente modificabile.
Cos’è una timeline e quando usarla
Una timeline, o linea temporale, è una rappresentazione visiva di una serie di eventi disposti in ordine cronologico.
In pratica, invece di mostrare una lista piatta di date e descrizioni, organizziamo le informazioni lungo una linea verticale o orizzontale. Questo rende il contenuto molto più leggibile e aiuta l’utente a capire subito la sequenza degli eventi.
Una timeline può essere usata per:
- raccontare la storia di un brand;
- mostrare le tappe di un progetto;
- descrivere il percorso professionale di una persona;
- spiegare le fasi di realizzazione di un sito web;
- presentare un processo aziendale;
- mostrare aggiornamenti, release o milestone.
Nel caso di un sito professionale, ad esempio, una timeline può essere molto utile in una pagina “Chi sono”, in una pagina portfolio o in una landing page dedicata a un servizio.
L’obiettivo della nostra timeline
In questo esempio costruiremo una timeline con queste caratteristiche:
- struttura in HTML semplice;
- stile realizzato solo con CSS;
- nessun plugin;
- nessuna libreria JavaScript;
- layout verticale;
- card alternate a destra e sinistra su desktop;
- layout a colonna singola su mobile;
- codice facilmente modificabile.
L’idea è ottenere una timeline pulita, moderna e adatta a un sito WordPress professionale.
La struttura HTML della timeline
Partiamo dal codice HTML. Questo codice può essere inserito direttamente dentro un blocco HTML personalizzato di Gutenberg.
<section class="sergio-timeline-section">
<div class="sergio-timeline-intro">
<span class="sergio-timeline-label">Il percorso</span>
<h2>Come nasce e si sviluppa un progetto web</h2>
<p>
Ogni sito web professionale nasce da un percorso fatto di analisi,
progettazione, sviluppo e ottimizzazione. Questa timeline mostra le
principali fasi di lavoro, dalla prima idea alla pubblicazione online.
</p>
</div>
<div class="sergio-timeline">
<article class="sergio-timeline-item">
<div class="sergio-timeline-content">
<span class="sergio-timeline-date">Fase 01</span>
<h3>Analisi iniziale</h3>
<p>
Si parte dallo studio degli obiettivi, del pubblico di riferimento,
dei contenuti disponibili e delle funzionalità necessarie al sito.
</p>
</div>
</article>
<article class="sergio-timeline-item">
<div class="sergio-timeline-content">
<span class="sergio-timeline-date">Fase 02</span>
<h3>Struttura dei contenuti</h3>
<p>
Vengono organizzate le pagine principali, il menu di navigazione,
le sezioni interne e il percorso che l’utente dovrà seguire.
</p>
</div>
</article>
<article class="sergio-timeline-item">
<div class="sergio-timeline-content">
<span class="sergio-timeline-date">Fase 03</span>
<h3>Progettazione grafica</h3>
<p>
Si definiscono lo stile visivo, i colori, la tipografia, gli spazi,
le gerarchie e l’aspetto generale dell’interfaccia.
</p>
</div>
</article>
<article class="sergio-timeline-item">
<div class="sergio-timeline-content">
<span class="sergio-timeline-date">Fase 04</span>
<h3>Sviluppo del sito</h3>
<p>
La struttura progettata viene trasformata in pagine reali,
responsive e navigabili, usando WordPress, HTML, CSS e gli strumenti
più adatti al progetto.
</p>
</div>
</article>
<article class="sergio-timeline-item">
<div class="sergio-timeline-content">
<span class="sergio-timeline-date">Fase 05</span>
<h3>Ottimizzazione e pubblicazione</h3>
<p>
Prima della messa online vengono controllati velocità, SEO, versione
mobile, usabilità, form di contatto e dettagli tecnici finali.
</p>
</div>
</article>
</div>
</section>
Questa struttura è volutamente semplice. Abbiamo una sezione principale, un’introduzione e poi una serie di elementi <article>, ognuno dei quali rappresenta una fase della timeline.
La scelta del tag <article> non è obbligatoria, ma è sensata perché ogni blocco della timeline ha un contenuto autonomo: una fase, un titolo e una descrizione.
Il CSS della timeline
Adesso passiamo alla parte più importante: il CSS.
Il codice seguente crea la linea centrale, i pallini, le card e il comportamento responsive.
.sergio-timeline-section {
padding: 80px 20px;
background: #f7f7f4;
}
.sergio-timeline-intro {
max-width: 760px;
margin: 0 auto 60px;
text-align: center;
}
.sergio-timeline-label {
display: inline-block;
margin-bottom: 14px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a6f3d;
}
.sergio-timeline-intro h2 {
margin: 0 0 20px;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.1;
color: #1f2933;
}
.sergio-timeline-intro p {
margin: 0;
font-size: 1.05rem;
line-height: 1.7;
color: #5b6470;
}
.sergio-timeline {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
.sergio-timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
background: linear-gradient(
to bottom,
#c9a24d,
#1f2933
);
transform: translateX(-50%);
border-radius: 999px;
}
.sergio-timeline-item {
position: relative;
width: 50%;
padding: 0 44px 60px;
}
.sergio-timeline-item:nth-child(odd) {
left: 0;
text-align: right;
}
.sergio-timeline-item:nth-child(even) {
left: 50%;
text-align: left;
}
.sergio-timeline-item::before {
content: "";
position: absolute;
top: 22px;
width: 22px;
height: 22px;
background: #ffffff;
border: 5px solid #c9a24d;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 0 8px rgba(201, 162, 77, 0.14);
}
.sergio-timeline-item:nth-child(odd)::before {
right: -11px;
}
.sergio-timeline-item:nth-child(even)::before {
left: -11px;
}
.sergio-timeline-content {
position: relative;
padding: 30px;
background: #ffffff;
border-radius: 22px;
box-shadow: 0 18px 45px rgba(31, 41, 51, 0.09);
border: 1px solid rgba(31, 41, 51, 0.08);
}
.sergio-timeline-date {
display: inline-block;
margin-bottom: 14px;
padding: 7px 13px;
font-size: 0.78rem;
font-weight: 700;
color: #1f2933;
background: #f1dfb8;
border-radius: 999px;
}
.sergio-timeline-content h3 {
margin: 0 0 14px;
font-size: 1.35rem;
line-height: 1.25;
color: #1f2933;
}
.sergio-timeline-content p {
margin: 0;
font-size: 1rem;
line-height: 1.7;
color: #5b6470;
}
@media (max-width: 768px) {
.sergio-timeline-section {
padding: 60px 18px;
}
.sergio-timeline-intro {
text-align: left;
margin-bottom: 44px;
}
.sergio-timeline::before {
left: 13px;
}
.sergio-timeline-item,
.sergio-timeline-item:nth-child(even),
.sergio-timeline-item:nth-child(odd) {
left: 0;
width: 100%;
padding: 0 0 36px 44px;
text-align: left;
}
.sergio-timeline-item::before,
.sergio-timeline-item:nth-child(even)::before,
.sergio-timeline-item:nth-child(odd)::before {
left: 2px;
right: auto;
}
.sergio-timeline-content {
padding: 24px;
border-radius: 18px;
}
}Questo CSS crea una timeline centrale su desktop. Gli elementi dispari vengono posizionati a sinistra, quelli pari a destra. Su mobile, invece, tutto si allinea in una sola colonna, con la linea verticale spostata a sinistra.
È una scelta importante, perché su smartphone una timeline alternata destra/sinistra diventerebbe scomoda da leggere. Meglio privilegiare una struttura semplice, ordinata e scorrevole.
Come funziona la linea centrale
La linea verticale viene creata con questo selettore:
.sergio-timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
background: linear-gradient(
to bottom,
#c9a24d,
#1f2933
);
transform: translateX(-50%);
border-radius: 999px;
}
In pratica, non aggiungiamo una linea manualmente nell’HTML. La generiamo con CSS usando ::before.
Questo è un approccio pulito perché l’HTML resta dedicato ai contenuti, mentre l’aspetto grafico viene gestito dal CSS.
La linea è posizionata al centro con left: 50% e viene corretta con transform: translateX(-50%), in modo da essere perfettamente centrata.
Come vengono alternati gli elementi
L’alternanza tra sinistra e destra viene gestita con nth-child.
.sergio-timeline-item:nth-child(odd) {
left: 0;
text-align: right;
}
.sergio-timeline-item:nth-child(even) {
left: 50%;
text-align: left;
}
Gli elementi dispari stanno a sinistra. Gli elementi pari vengono spostati a destra.
Questa soluzione è molto comoda perché non dobbiamo aggiungere classi manuali tipo .left o .right a ogni elemento. Basta inserire nuove fasi nell’HTML e il CSS si occupa automaticamente dell’alternanza.
Come vengono creati i pallini della timeline
Anche i pallini non sono elementi HTML reali. Vengono creati con ::before sui singoli item.
.sergio-timeline-item::before {
content: "";
position: absolute;
top: 22px;
width: 22px;
height: 22px;
background: #ffffff;
border: 5px solid #c9a24d;
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 0 8px rgba(201, 162, 77, 0.14);
}
Il pallino serve a collegare visivamente ogni card alla linea temporale centrale.
Poi, a seconda che l’elemento sia pari o dispari, il pallino viene posizionato a destra o a sinistra:
.sergio-timeline-item:nth-child(odd)::before {
right: -11px;
}
.sergio-timeline-item:nth-child(even)::before {
left: -11px;
}Il valore -11px corrisponde circa alla metà del pallino, così il cerchio si sovrappone correttamente alla linea centrale.
Rendere la timeline responsive
La parte responsive è fondamentale.
Su desktop possiamo permetterci una timeline centrale, con gli elementi alternati a destra e sinistra. Su mobile, invece, questo layout rischia di diventare troppo stretto.
Per questo, sotto i 768px, trasformiamo tutto in una timeline a colonna singola:
@media (max-width: 768px) {
.sergio-timeline::before {
left: 13px;
}
.sergio-timeline-item,
.sergio-timeline-item:nth-child(even),
.sergio-timeline-item:nth-child(odd) {
left: 0;
width: 100%;
padding: 0 0 36px 44px;
text-align: left;
}
.sergio-timeline-item::before,
.sergio-timeline-item:nth-child(even)::before,
.sergio-timeline-item:nth-child(odd)::before {
left: 2px;
right: auto;
}
}In questo modo la linea si sposta a sinistra, le card occupano tutta la larghezza disponibile e il testo resta comodo da leggere.
Il risultato è molto più naturale su smartphone.
Dove inserire il codice in WordPress
Se usi WordPress, hai diverse possibilità.
Il codice HTML può essere inserito direttamente nella pagina o nell’articolo usando un blocco HTML personalizzato.
Per il CSS, invece, puoi usare una di queste soluzioni:
- inserirlo in Aspetto > Personalizza > CSS aggiuntivo;
- inserirlo in un plugin come Code Snippets;
- inserirlo nel CSS del tema child;
- inserirlo in un blocco CSS personalizzato, se il tuo builder lo consente.
Personalmente, per una timeline riutilizzabile in più pagine, preferisco mettere il CSS in un punto globale del sito, così non devo riscriverlo ogni volta.
Se invece la timeline serve solo in una pagina specifica, si può anche valutare uno snippet caricato solo su quella pagina, in modo da evitare CSS inutile nel resto del sito.
Personalizzare colori, spazi e stile
La timeline dell’esempio usa colori neutri e una sfumatura dorata, ma ovviamente può essere adattata a qualsiasi identità visiva.
Per cambiare il colore principale, puoi modificare soprattutto questi valori:
#c9a24d
#f1dfb8
#1f2933Ad esempio, se vuoi una timeline più fredda e tecnologica, potresti usare un blu. Se vuoi uno stile più elegante, puoi usare nero, grigio caldo e oro. Se invece la timeline è per un sito creativo, puoi osare con colori più accesi.
Anche il raggio delle card può cambiare molto la percezione grafica. Con border-radius: 22px ottieni un effetto morbido e moderno. Con un valore più basso, tipo 8px, il risultato diventa più tecnico e istituzionale.
Variante: timeline per la pagina “Chi sono”
Una timeline funziona molto bene anche in una pagina personale o professionale.
In quel caso potresti sostituire le fasi del progetto con tappe del percorso lavorativo, ad esempio:
<article class="sergio-timeline-item">
<div class="sergio-timeline-content">
<span class="sergio-timeline-date">2015</span>
<h3>Primi progetti web</h3>
<p>
Inizio a realizzare i primi siti web, sperimentando con HTML, CSS,
WordPress e progettazione grafica.
</p>
</div>
</article>Puoi poi aggiungere altri blocchi per esperienze, collaborazioni, competenze acquisite, cambi di direzione o progetti importanti.
Il vantaggio è che il percorso diventa più leggibile e meno “curriculum”. Invece di una semplice lista di date, racconti una storia.
Variante: timeline per spiegare un servizio
Un altro uso molto interessante è quello commerciale.
Se offri un servizio, ad esempio la realizzazione di un sito WordPress, puoi usare la timeline per spiegare il metodo di lavoro.
Esempio:
- primo contatto;
- analisi del progetto;
- proposta operativa;
- realizzazione grafica;
- sviluppo WordPress;
- revisione;
- pubblicazione;
- assistenza successiva.
Questa soluzione è utile perché rende più chiaro il processo al potenziale cliente. Chi arriva sulla pagina capisce subito cosa succede dopo averti contattato, quali sono le fasi e come viene gestito il lavoro.
In una landing page, questa chiarezza può aiutare molto la conversione.
Piccoli consigli di UX
Quando si costruisce una timeline, il rischio è voler inserire troppe informazioni.
Meglio evitare card lunghissime. Una timeline dovrebbe essere leggibile a colpo d’occhio. Ogni blocco dovrebbe avere un titolo chiaro e un testo breve, possibilmente di poche righe.
Il titolo deve spiegare subito la fase. Il paragrafo deve aggiungere contesto, non diventare un articolo dentro l’articolo.
Un’altra cosa importante è mantenere coerenza tra i vari elementi. Se una card ha tre righe di testo e un’altra ne ha quindici, il layout rischia di apparire sbilanciato. Meglio uniformare il più possibile la lunghezza dei contenuti.
Infine, occhio al mobile. La timeline può essere bellissima su desktop, ma se su smartphone diventa scomoda, perde gran parte della sua utilità.
Accessibilità e leggibilità
Anche se la timeline è un elemento visivo, il contenuto deve rimanere leggibile e comprensibile anche senza grafica.
Per questo è importante che le informazioni siano realmente presenti nell’HTML e non solo create via CSS.
Nel nostro esempio, titoli, testi e fasi sono tutti scritti nel markup. La linea e i pallini sono decorativi, quindi è corretto generarli con CSS.
Inoltre, conviene sempre mantenere un buon contrasto tra testo e sfondo. Le card bianche su sfondo chiaro funzionano bene, ma il testo deve restare sufficientemente scuro.
Conclusione
Creare una timeline in HTML e CSS è un ottimo esercizio di progettazione frontend, ma è anche una soluzione molto utile nella costruzione di un sito web professionale.
Con pochi elementi ben organizzati possiamo trasformare una semplice sequenza di informazioni in un contenuto più chiaro, più visivo e più piacevole da consultare.
La cosa importante è non complicare troppo la struttura: HTML semplice, CSS ordinato, buon comportamento responsive e contenuti scritti bene.
In questo modo la timeline non diventa solo un elemento decorativo, ma uno strumento concreto per guidare l’utente dentro una storia, un percorso o un processo.
