Zeitleisten- / Schritt-für-Schritt-Generator (CSS)
Schreibe jeden Schritt in eine Zeile (Titel | Text). Wähle das Modell: nummerierte Schritt-für-Schritt-Anleitung, Zeitleiste mit Daten oder Schritte nebeneinander.
So geht’sSchritte und Geschichte als Zeitleiste
Verfügbar auf: 
Zeitleisten- / Schritt-für-Schritt-Generator (CSS): wofür es gut ist
Ein Abschnitt „So funktioniert es“ mit wenigen nummerierten Schritten beantwortet vorab die Fragen derer, die überlegen, dich zu beauftragen. Dieselbe Struktur eignet sich, um die Geschichte des Unternehmens als Zeitleiste zu erzählen.
Schreibe die Schritte und wähle das Modell: vertikale Schritt-für-Schritt-Anleitung mit Zahlen, Zeitleiste mit Markierungen und den Titeln als Daten oder Schritte nebeneinander, die am Handy zur Spalte werden. Das HTML nutzt eine geordnete Liste, und die Zahlen kommen aus einem CSS-Zähler.
So geht’s
- Schreibe die Schritte, einen pro Zeile.
- Wähle Modell, Titel und Farbe.
- Kopiere den Code und füge ihn in die Seite ein.
Wann nutzen
- Abschnitt „So funktioniert es“ einer Leistung.
- Geschichte des Unternehmens.
- Schritte einer Bestellung oder eines Baus.
Häufige Fragen
Wann nutze ich die Schritt-für-Schritt-Anleitung?
Um in wenigen Schritten zu erklären, wie deine Leistung funktioniert (Bestellung, Produktion, Lieferung), was Zweifel vor dem Kauf verringert. Drei bis fünf kurze Schritte funktionieren besser als eine lange Liste.
Funktioniert die horizontale Version am Handy?
Ja. Unter 768 px werden die Schritte nebeneinander zu einer Spalte, mit der Linie vertikal, damit sie nicht gequetscht werden.
Warum eine geordnete Liste?
Die Schritte stehen in einem ol-Element, sodass der Screenreader die Zahl der Schritte und die Position jedes einzelnen ansagt. Die sichtbaren Zahlen kommen aus dem CSS, ohne den Text zu verdoppeln.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.