--- title: Timeline – making a history visible on your website url: "https://www.toujou.com/service/element-library/widgets/timeline/" description: The timeline element allows you to display a timeline on your website. Instructions, sample view, and tips, tricks, and hints for the toujou element. date: 2026-01-23 modified: 2026-01-27 --- # Timeline – making a history visible on your website 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Widgets](https://www.toujou.de/service/element-library/widgets/) 5. [Timeline](https://www.toujou.de/service/element-library/widgets/timeline/) Timeline ======== The Timeline element allows you to display a timeline on your website. You can store any number of individual entries, which are automatically linked to form a timeline. There are various options for storing details for the individual entries. The timeline can also be aligned horizontally or vertically. [Sample view](#c1019483) [Step by step](#c1019485) [Screen adoption](#c1019488) --- Sample view ----------- - [2018](#timeline-1019484-year-2018) - [2020](#timeline-1019484-year-2020) - [2022](#timeline-1019484-year-2022) - [2024](#timeline-1019484-year-2024) 2018 ---- ### Launch of toujou The TYPO3 website builder was officially launched in 2018. 2020 ---- ### New Features Not only in 2020, but also this year, new features were released for toujou. One example is the event module, which can be used to tease events. [ Events in toujou ](https://www.toujou.de/service/tutorials/pages-navigation/events-in-toujou/) 2022 ---- ### More Flexibility This year, the website builder was set to demonstrate its flexibility by enabling not only the included elements and features, but also system integrations with toujou. [ Systemintegrations ](https://www.toujou.de/features/integrations/) 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. --- Step by step -------------- [ ![](https://www.toujou.de/_assets/processed/3WmiAAGP2csCNvlfNFXPRu7wlrF5pBkQJc1k7x4YQXA/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3RpbWVsaW5lLWNyZWF0ZS1uZXctdGltZWxpbmUtZWxlbWVudF84MjE1MzdiN2U0:t/cb:5df34bda0b8a4e599f9ee4d853fca8d283f42a0b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUtY3JlYXRlLW5ldy10aW1lbGluZS1lbGVtZW50LnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-create-new-timeline-element.png) ### Select Timeline element - After clicking on **+ New** Content in the content area of your page, the window for selecting the element will open. - Select the **Widgets** tab and then **Timeline**. [ ![](https://www.toujou.de/_assets/processed/2AAsVtsWem6w7PBK2MBQlaRt7T9QHdJ9-q1sKMft5Qs/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3RpbWVsaW5lLWNyZWF0ZS1uZXctaXRlbV83NjdkMmU2MjM3:t/cb:ca39f184601a680cc554b3b74d20ac5b5d862ddf/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC90aW1lbGluZS1jcmVhdGUtbmV3LWl0ZW0ucG5n) ](https://www.toujou.de/fileadmin/user_upload/timeline-create-new-item.png) ### Create a time period - In the *General* tab, click on **+ Create new** in the *Timeline item* area to create individual entries. - The input mask for this entry will then open. - In this way, several time periods can be created in the Timeline Element. [ ![](https://www.toujou.de/_assets/processed/WGJSqXkfoP6Md1iKuXsx1Slky19j3JspBUuw9BAsOdU/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3RpbWVsaW5lLXllYXItdGl0bGUtdGV4dF8zNTVjNjBmM2My:t/cb:6ab120636cf15fbec0692e32a6443c23370785f8/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUteWVhci10aXRsZS10ZXh0LnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-year-title-text.png) ### Set year, title, and text - Various options are available for a time period on the timeline in an entry. - Enter a year in the field under Year. - Enter the desired heading in the field under Title. - You also have the option of entering a descriptive text in the field under Text. [ ![](https://www.toujou.de/_assets/processed/v_zIAp0hqTKQBmjb3cUKCY2U-6VgOWeSnBzw1hJwGAE/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3RpbWVsaW5lLWxpbmstaW1hZ2VfNzRmNDRjZTlkMw:t/cb:8661751f4cf339b812cb47e6aefb3b87a5d74f10/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUtbGluay1pbWFnZS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-link-image.png) ### Add image and link - Add media to a timeline entry in the Images section using the **Add file** or **Select and upload file** option. - In the Link section, click on the **chain icon** to select the page you want to link to. In the *Link button text*, define the corresponding link text/CTA. [ ![](https://www.toujou.de/_assets/processed/bXDOYcoh9DjLhQH_uytBKDlfL2EDSMWIIzOjEDy1eR4/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3RpbWVsaW5lLWFkZGl0aW9uYWwtb3B0aW9uc19iNjdiYzg3ZWFj:t/cb:cc95b79cedb058bc84f97664ab74977287c5291a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTVfdGltZWxpbmUvdGltZWxpbmUtYWRkaXRpb25hbC1vcHRpb25zLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/15_timeline/timeline-additional-options.png) ### Set additional options - Under *Timeline direction*, click the **drop-down menu** to choose whether the entire timeline is displayed vertically or horizontally. - In the *Show Legend* area, use the **slider** to define whether a table of contents for the individual entries is displayed as a legend. - Under *Timeline Description*, you can optionally add descriptive text in the text field to improve the accessibility of the entire element. - Finally, **save** the settings. --- Screen adoption ----------------- **Notes**: At least two entries must be created for the Timeline element to function. The field next to the link button must be filled in for the link to be displayed in the frontend. The field in the *Timeline Description* area must be filled in to ensure website accessibility. Only then will the element be marked with aria-label. There are no limits to your creativity when it comes to the descriptive text. The description of the purpose of the corresponding timeline always serves as a guide. --- Linked Tutorials ---------------- Tutorials related to this element. [Image- & Video via Fileadmin](https://www.toujou.de/service/tutorials/file-list-module/) [Tutorials](https://www.toujou.de/service/tutorials/) [Element library](https://www.toujou.de/service/element-library/) ---