Generatore di timeline / passo dopo passo (CSS)
Scrivi ogni tappa su una riga (titolo | testo). Scegli il modello: passo dopo passo numerato, timeline con date o tappe affiancate.
Come si usaTappe e storia in una timeline
Disponibile in: 
Generatore di timeline / passo dopo passo (CSS): a cosa serve
Una sezione “come funziona”, con poche tappe numerate, risponde in anticipo ai dubbi di chi sta pensando di rivolgersi a te. La stessa struttura serve a raccontare la storia dell’azienda in una timeline.
Scrivi le tappe e scegli il modello: passo dopo passo verticale con numeri, timeline con marcatori e titoli come date, o tappe affiancate che diventano una colonna sullo smartphone. L’HTML usa una lista ordinata e i numeri vengono da un contatore CSS.
Come si usa
- Scrivi le tappe, una per riga.
- Scegli il modello, il titolo e il colore.
- Copia il codice e incollalo nella pagina.
Quando usarlo
- Sezione come funziona di un servizio.
- Storia dell’azienda.
- Fasi di un ordine o di un lavoro.
Domande frequenti
Quando usare il passo dopo passo?
Per spiegare come funziona il tuo servizio in poche tappe (ordine, produzione, consegna), il che riduce i dubbi prima dell’acquisto. Da tre a cinque tappe brevi funzionano meglio di un elenco lungo.
La versione orizzontale funziona sullo smartphone?
Sì. Sotto i 768 px le tappe affiancate diventano una colonna, con la linea in verticale, per non restare schiacciate.
Perché una lista ordinata?
Le tappe sono in un elemento ol, così lo screen reader annuncia il numero di passaggi e la posizione di ciascuno. I numeri visibili vengono dal CSS, senza duplicare il testo.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.