Einen Zeitstrahl auf deiner Website einbauen

Mit einem Zeitstrahl zeigst du Meilensteine, historische Ereignisse oder Phasen eines Prozesses. Weboffice bietet dir zwei Varianten: einen klassischen Zeitstrahl mit Einträgen oder einen animierten Zeitstrahl mit markierten Zeitpunkten.

Voraussetzungen

Du brauchst das Modul Website und Zugriff auf die Bearbeitung einer Seite.

So gehst du vor

Variante 1: Klassischer Zeitstrahl (Einträge)

1. Öffne die Seite, auf der der Zeitstrahl erscheinen soll. Im Bereich Allgemein trägst du eine Überschrift ein – das ist der Titel über dem gesamten Zeitstrahl.

2. Wechsle zum Bereich Einträge. Klicke auf Eintrag hinzufügen, um einen neuen Punkt hinzuzufügen.

3. Für jeden Eintrag füllst du folgende Felder aus:

   • Datum: Trage das Jahr oder ein Datum ein. Dieses wird neben dem Eintrag angezeigt.
   • Titel: Kurze Überschrift für diesen Punkt im Zeitstrahl (unterstützt Markdown-Formatierung).
   • Beschreibung: Längerer Text zum Ereignis oder zur Phase (optional).
   • Animation: Wähle eine Animation, wenn der Eintrag beim Laden der Seite animiert werden soll, oder lass das Feld leer für keine Animation.

4. Mit den Schaltflächen oben rechts jedes Eintrags kannst du:

   • Nach oben/unten verschieben: Ändert die Reihenfolge der Einträge.
   • Kopieren: Dupliziert einen Eintrag – hilfreich, wenn du ähnliche Einträge hast.
   • Entfernen: Löscht den Eintrag aus dem Zeitstrahl.

5. Wiederhole Schritt 2 bis 4, bis du alle Einträge eingegeben hast. Klicke dann Speichern.

Variante 2: Animierter Zeitstrahl mit Zeitpunkten (TimelineStory)

1. Öffne die Seite und konfiguriere im Bereich Allgemein:

   • Farbvariante: Wähle eine Farbschema für den Zeitstrahl.
   • Eyebrow: Ein kurzer, kleinerer Text über dem Haupttitel (optional).
   • Titel (Markdown): Der Haupttitel des Zeitstrahls.
   • Untertitel: Ein erläuternder Text unter dem Titel (optional).

2. Wechsle zum Bereich Zeitpunkte und klicke auf Zeitpunkt hinzufügen.

3. Für jeden Zeitpunkt füllst du ein:

   • Zeit: Der Zeitstempel (z. B. „00:00" für Start, oder Minutenangaben wie „02:30").
   • Label: Kurze Bezeichnung für diesen Punkt (wird neben der Zeit angezeigt).
   • Symbol: Wähle ein Icon aus, das neben Zeit und Label angezeigt wird.
   • Farbton: Die Farbe, in der dieser Punkt hervorgehoben wird.
   • KPI-Chip: Optionale Kennzahl oder Statistik, die als Chip neben dem Text eingeblendet wird.
   • Titel: Kurze Überschrift für diesen Zeitpunkt.
   • Text: Detaillierte Beschreibung des Ereignisses oder der Phase.

4. Mit den Schaltflächen oben rechts ordnest du die Zeitpunkte:

   • Nach oben/unten verschieben: Ändert die zeitliche Reihenfolge.
   • Entfernen: Löscht den Zeitpunkt.

5. Wiederhole Schritt 2 bis 4 für alle Zeitpunkte. Klicke dann Speichern.

Aufbau des Zeitstrahls

Allgemein-Bereich: Enthält übergeordnete Einstellungen wie Titel und – bei der animierten Variante – Farbe und Zusatztexte.

Einträge bzw. Zeitpunkte: Eine Liste von Einzelpunkten, die den Ablauf oder die Meilensteine bilden. Jeder Punkt hat eine Bezeichnung, ein Datum oder eine Zeit sowie optionalen Inhalt. Die Reihenfolge bestimmt, wie sie im Zeitstrahl angezeigt werden.

Aktionsschaltflächen: Für jeden Eintrag oder Zeitpunkt stehen kleine Schaltflächen zur Verfügung – zum Verschieben, Kopieren (nur Einträge) oder Löschen.

Was danach passiert

Sobald du speicherst, wird der Zeitstrahl auf deiner Website angezeigt. Besucher sehen die Einträge oder Zeitpunkte in der Reihenfolge, die du festgelegt hast. Du kannst jederzeit zurückkommend die Einträge bearbeiten, ergänzen oder neu anordnen.

Möchtest du den Zeitstrahl später anpassen, öffne einfach dieselbe Seite erneut und bearbeite die Einträge oder Zeitpunkte.

Tipps und Hinweise

• Reihenfolge ist wichtig: Die Positionen oben und unten im Zeitstrahl beeinflussen die chronologische oder logische Abfolge. Ordne sie sorgfältig.
• Markdown nutzen: In Titeln und Beschreibungen kannst du Markdown einsetzen, um Text hervorzuheben oder Links einzufügen.
• KPI-Chips für Zahlen: Bei animierten Zeitstrahlen eignen sich KPI-Chips, um Metriken oder Statistiken direkt sichtbar zu machen.
• Animationen sparsam einsetzen: Animationen lenken Aufmerksamkeit auf sich – nutze sie gezielt und nicht bei jedem Eintrag.
• Kopieren spart Zeit: Sind mehrere Einträge ähnlich aufgebaut, kopiere einen und ändere nur die nötigen Felder.