--- title: Timeline – eine Historie auf der toujou-Website anzeigen url: "https://www.toujou.de/service/elementbibliothek/widgets/timeline/" description: Das Timeline-Element ermöglicht das Abbilden eines Zeitstrahls auf der Website. Anleitung, Beispielansicht sowie Tipps, Tricks und Hinweise zum toujou-Element. date: 2024-12-05 modified: 2024-12-16 --- # Timeline – eine Historie auf der toujou-Website anzeigen 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Widgets](https://www.toujou.de/service/elementbibliothek/widgets/) 5. [Timeline](https://www.toujou.de/service/elementbibliothek/widgets/timeline/) Timeline ======== Das Element Timeline ermöglicht das Anzeigen einer Zeitleiste auf der Website. Dabei können beliebig viele einzelne Einträge hinterlegt werden, die automatisch zu einem Zeitstrahl verknüpft werden. Für die einzelnen Einträge bestehen verschiedenen Optionen zur Hinterlegung von Details. Zudem lässt sich der Zeitstrahl horizontal oder vertikal ausrichten. [Beispielansicht](#c1017978) [Anleitung](#c1017974) [Hinweise, Tipps & Tricks](#c1017968) --- Beispielansicht --------------- - [2018](#timeline-1017982-year-2018) - [2020](#timeline-1017982-year-2020) - [2022](#timeline-1017982-year-2022) - [2024](#timeline-1017982-year-2024) 2018 ---- ### Launch von toujou Im Jahr 2018 wurde der TYPO3 Website-Baukasten offiziell gelauncht. 2020 ---- ### Neue Features Nicht nur 2020, aber auch in diesem Jahr wurden neue Features für toujou freigeschaltet. Ein Beispiel: Das Event-Modul, mit dem sich Veranstaltungen anteasern lassen. [ Events in toujou ](https://www.toujou.de/tutorials/seiten-anlegen/events/) 2022 ---- ### Mehr Flexibilität In diesem Jahr sollte der Website-Baukasten seine Flexibilität vorführen, indem nicht nur die inkludierten Elemente und Features, sondern auch Systemintegrationen mit toujou ermöglicht wurden. [ Systemintegrationen ](https://www.toujou.de/features/extensions/) 2024 ---- ![Eine Zeitachse zeigt wichtige Ereignisse von 2018 bis 2024, einschließlich des Launchs von toujou und neuer Features.](https://www.toujou.de/_assets/processed/tpJLlGJyi8MqNTo3m4WDSwMUJkDEk_YKeRnw2pyMw1c/q:85/c:1432.5:955:fp:0.5:0.5/rt:force/w:308/h:205/fn:Y3NtX0JlaXNwaWVsLVRpbWVsaW5lLWF1Zi10b3Vqb3VfNTYwN2MxYzk1NQ:t/cb:fc3678082ab8fc485911ebcf6198ccbe8a2044a4/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9CZWlzcGllbC1UaW1lbGluZS1hdWYtdG91am91LnBuZw)### Release Timeline Element Im Jahr 2024 wurde Timeline als eines von 150+ toujou-Elementen für alle toujou-Kunden und -Anwenderinnen zugänglich. --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/pt3BZW-v5S41WY92TMGy0DDrzdVNcoOFTwqkh9nKdf0/q:85/w:432/h:216/fn:Y3NtX3RpbWVsaW5lLWVsZW1lbnQtYW5sZWdlbl84MTQ5MzQwMWRm:t/cb:ef8df9aa1c2d8e2e8f70b93a6f219cb780ccb303/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUtZWxlbWVudC1hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-element-anlegen.png) ### Timeline-Element wählen - Nachdem Sie im Inhaltsbereich Ihrer Seite auf **+ Inhalt** geklickt haben, öffnet sich das Fenster zur Auswahl des Elements. - Wählen Sie den Reiter **Widgets** und anschließend **Timeline**. [ ![](https://www.toujou.de/_assets/processed/i128iXmxvT7wP4kVVtjtDGE1uh_Pgvzm-qxBb_1B33M/q:85/w:432/h:216/fn:Y3NtX3RpbWVsaW5lLXplaXRhYnNjaG5pdHRlLWFubGVnZW5fZmNhMTk0NWE2Mg:t/cb:22d5321fa8797575d006a1feb37119bd00f91271/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUtemVpdGFic2Nobml0dGUtYW5sZWdlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-zeitabschnitte-anlegen.png) ### Einen Zeitabschnitt anlegen - Im Reiter *Allgemein* klicken Sie im Bereich *Timeline Element* auf **+ Neu anlegen** um einzelne Einträge anzulegen. - Anschließend öffnet sich die Eingabemaske für diesen Eintrag. - Auf diese Weise lassen sich im Timeline-Element mehrere Zeitabschnitte kreieren. [ ![](https://www.toujou.de/_assets/processed/Se74UJz79Gn2Y_PdajBI2-vufauhhV7OxCZtfcUaR5k/q:85/w:432/h:216/fn:Y3NtX3RpbWVsaW5lLXRpdGVsLXVuZC10ZXh0XzRiZDcwZjVjMWI:t/cb:572b6437910cafe56a35b3690f77c0043a15e4bc/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUtdGl0ZWwtdW5kLXRleHQucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-titel-und-text.png) ### Jahr, Titel und Text einstellen - Für einen Zeitabschnitt auf der Timeline stehen Ihnen in einem Eintrag verschiedene Optionen zur Verfügung. - Hinterlegen Sie im Feld unter *Jahr* eine Jahreszahl. - Im Feld unter *Titel* hinterlegen Sie die gewünschte Überschrift. - Dazu besteht die Möglichkeit, im Feld unter *Text* einen beschreibenden Text einzufügen. [ ![](https://www.toujou.de/_assets/processed/ehFCwj3KChwbLWLJuIcJtTO-riPELht_4q_QHZCAS6Q/q:85/w:432/h:216/fn:Y3NtX3RpbWVsaW5lLWxpbmstdW5kLWJpbGRfMGNkMzFmZGVmMw:t/cb:cd155c67fc3ac1ab76e34d10eb1914df375c1dea/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUtbGluay11bmQtYmlsZC5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-link-und-bild.png) ### Bild und Link hinzufügen - Hinterlegen Sie ein Medium in einem Timeline-Eintrag im Bereich *Bilder* über die Option **Datei hinzufügen** oder **Dateien auswählen und hochladen**. - Wählen Sie im Bereich *Verlinkung* über Klick auf das **Ketten-Symbol** die Seite, auf die Sie verlinken möchten. Im Bereich *Link-Button* definieren Sie den dazugehörigen Link-Text / CTA. [ ![](https://www.toujou.de/_assets/processed/EV5qc8I-e939j4XO0SkhbGNMxNm4Z99Z9hd2QNOumkw/q:85/w:432/h:216/fn:Y3NtX3RpbWVsaW5lLXdlaXRlcmUtb3B0aW9uZW5fMzNmOGJhYjg5YQ:t/cb:587d2037bf80e1774df3b98e17489dc903a89d16/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUtd2VpdGVyZS1vcHRpb25lbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-weitere-optionen.png) ### Weitere Optionen festlegen - Klicken Sie unter *Ausrichtung der Timeline* auf der **Dropdown-Menü**, um zu wählen, ob die gesamte Timeline vertikal oder horizontal dargestellt wird. - Im Bereich *Legende anzeigen* definieren Sie über den **Regler**, ob ein Inhaltsverzeichnis der einzelnen Einträge als Legende angezeigt wird. - Unter *Timeline Beschreibung* fügen Sie im Textfeld für mehr Barrierefreiheit des gesamten Elements optional einen beschreibenden Text hinzu. - **Speichern** Sie die Einstellungen abschließend. --- Hinweise, Tipps & Tricks ------------------------------ **Anmerkungen**: Für die Funktionalität des Elements Timeline müssen mindestens zwei Einträge angelegt sein. Das Feld beim Linkbutton muss ausgefüllt sein, damit der Link im Frontend angezeigt wird. Das Feld im Bereich *Timeline Beschreibung* ist im Sinne der Barrierefreiheit für Websites auszufüllen. Erst dann wird das Element via aria-label ausgezeichnet. Beim beschreibenden Text sind Ihrer Kreativität keine Grenzen gesetzt. Als Orientierung dient stets die Beschreibung des Zwecks der entsprechenden Timeline. --- Verknüpfte Tutorials -------------------- Tutorials, die mit diesem Element in Verbindung stehen. [Bild- & und Videomaterial via Fileadmin](https://www.toujou.de/tutorials/dateiliste/) [Tutorials](https://www.toujou.de/tutorials/) [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) ---