--- title: Countdown – das Zähler-Element in toujou url: "https://www.toujou.de/service/elementbibliothek/widgets/countdown/" description: Das Element ermöglicht das animierte Anzeigen eines Countdowns auf der Website. Anleitung, Beispielansicht sowie Tipps, Tricks und Hinweise zum toujou-Element. date: 2026-09-10 modified: 2026-09-10 --- # Countdown – das Zähler-Element in toujou 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. [Countdown](https://www.toujou.de/service/elementbibliothek/widgets/countdown/) Countdown ========= Das Element Countdown ermöglicht das animierte Herunterzählen zu einem bestimmten Datum auf Ihrer Website. Dabei ist das Enddatum einzutragen. Weitere Optionen zur Anzeige während und nach Ablauf des Countdowns ergänzen die redaktionellen Möglichkeiten. [Beispielansicht](#c1019928) [Anleitung](#c1019927) [Hinweise, Tipps & Tricks](#c1019924) --- Beispielansicht --------------- Tage Stunden Minuten Sekunden --- Anleitung ----------- [ ![Screenshot des toujou Backends, das anzeigt, wie man das Countdown-Element aus der Auswahl der Widgets waehlt](https://www.toujou.de/_assets/processed/rBq9do8a0phw7zmWYJwOVAlMBo753quPfrvTAUNuLXo/q:85/w:432/h:243/fn:Y3NtX2NvdW50ZG93bi1lbGVtZW50LXdhZWhsZW5fZDgzMjRiODExYw:t/cb:3cbf38d6444779ac5b3afcf10ef0d10ea1522558/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTdfY291bnRkb3duL2NvdW50ZG93bi1lbGVtZW50LXdhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/17_countdown/countdown-element-waehlen.png) ### Countdown-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 **Countdown**. [ ![Screenshot des toujou Backends, das einen roten Rahmen um den Bereich Enddatum zeigt](https://www.toujou.de/_assets/processed/RdDjUTDO6oa9EpGql9etOHkwPWvFQUwPyRfoB-xpGs0/q:85/w:432/h:243/fn:Y3NtX2NvdW50ZG93bi1laW5zdGVsbHVuZ2VuXzk4MzI3OGYwZmI:t/cb:8dbe10ce3ff71d31524799bc33c93a96d8c08178/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTdfY291bnRkb3duL2NvdW50ZG93bi1laW5zdGVsbHVuZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/17_countdown/countdown-einstellungen.png) ### Countdown einstellen - Im Countdown-Element stellen Sie das Enddatum im **Eingabefeld** im Bereich *Zieldatum* ein. Nutzen Sie dafür die manuelle Eingabe im Feld oder das Kalender-Icon. Diese Eingabe ist zwingend erforderlich. - **Speichern** Sie die Einstellungen. [ ![Screenshot des toujou Backends, das mit roten Rahmen weitere Optionen anzeigt.](https://www.toujou.de/_assets/processed/vZQUdeAJ4mkF94rg5PG5GLCJ6neFN1pWFZGmajswteM/q:85/w:432/h:243/fn:Y3NtX2NvdW50ZG93bi13ZWl0ZXJlLWVpbnN0ZWxsdW5nZW5fYzk5ODFiMWU5NQ:t/cb:a0df06497cc3c2b2b11516689fcd7b11f079fb00/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTdfY291bnRkb3duL2NvdW50ZG93bi13ZWl0ZXJlLWVpbnN0ZWxsdW5nZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/17_countdown/countdown-weitere-einstellungen.png) ### Optionale Einstellungen - Aktivieren Sie das Häkchen im **Kasten** bei *Countdown nach Ablauf ausblenden*, damit der Zähler nicht mehr angezeigt wird. - Aktivieren Sie das Häkchen im **Kasten** bei *Leere Tage ausblenden*, damit die Tage beim Wert 0 aus der Anzeige verschwinden. - Aktivieren Sie das Häkchen im **Kasten** bei *Labels ausblenden*, um nur die Zahlen anzuzeigen. - Unter *Abschlussmeldung* haben Sie im **RTE** die Möglichkeit, einen Text zu hinterlegen, der nach Ende anstelle des Countdowns angezeigt wird. Hinweise, Tipps & Tricks ------------------------------ **Besonderheiten**: Für die Funktionalität des Elements muss zwingend ein Enddatum eingetragen sein. Alle anderen Felder sind optional. Mit dem Element Design können Sie die Schriftfarbe des Countdown bzw. verschiedene Hintergrundfarben (Theme-abhängig) wählen und das Element so optisch hervorheben. **Responsive**: Das Element wird auf allen Endgeräten horizontal einzeilig angezeigt. --- Verknüpfte Tutorials -------------------- Tutorials, die mit diesem Element in Verbindung stehen. [Counter](https://www.toujou.de/service/elementbibliothek/widgets/counter/) [Chapter](https://www.toujou.de/service/elementbibliothek/widgets/chapter/) [Widgets](https://www.toujou.de/service/elementbibliothek/widgets/) [Tutorials](https://www.toujou.de/tutorials/) [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) ##### toujou-Tutorials [Checkliste ❯](https://www.toujou.de/service/#c1001893) [Kontakt/Daten hinterlegen ❯ ](https://www.toujou.de/tutorials/kontakte-anlegen/) [Dateiliste / Fileadmin ❯ ](https://www.toujou.de/tutorials/dateiliste/) [Navigation bearbeiten ❯ ](https://www.toujou.de/tutorials/seiten-anlegen/) [Seiteninhalte ❯](https://www.toujou.de/tutorials/seiteninhalte/) [Seiteneigenschaften ❯](https://www.toujou.de/tutorials/seiteneigenschaften/) [Responsive-Check ❯](https://www.toujou.de/tutorials/responsive-mobile-first/) [Yoast SEO ❯](https://www.toujou.de/tutorials/yoast-seo/) [Redirects ❯](https://www.toujou.de/tutorials/redirects/) / [Blog ❯](https://www.toujou.de/tutorials/blog-administration/) [Seiten übersetzen ❯](https://www.toujou.de/tutorials/seiten-uebersetzen/) [Linkvalidator ❯](https://www.toujou.de/tutorials/linkvalidator/) ##### toujou-Setup [Theme ❯ ](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [Logo ❯ ](https://www.toujou.de/service/toujou-setup/logo-hochladen/) [Font ❯ ](https://www.toujou.de/service/toujou-setup/font-bestimmen/) [Color ❯ ](https://www.toujou.de/service/toujou-setup/farben-festlegen/) [Social Media ❯ ](https://www.toujou.de/service/toujou-setup/social-media/) [Analytics ❯](https://www.toujou.de/service/toujou-setup/analytics/) [Data Protection ❯](https://www.toujou.de/service/toujou-setup/datenschutz/) [Website Overlay ❯](https://www.toujou.de/service/toujou-setup/website-overlay/) ##### toujou-Elementbibliothek [Texte ❯ ](https://www.toujou.de/service/elementbibliothek/text-elements/) [Medien ❯ ](https://www.toujou.de/service/elementbibliothek/media-elements/) [Combinations❯ ](https://www.toujou.de/service/elementbibliothek/combined-elements/) [Teaser ❯ ](https://www.toujou.de/service/elementbibliothek/teaser-elements/) [Cards ❯](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) [Collections ❯](https://www.toujou.de/service/elementbibliothek/collections/) [Maps ❯ / ](https://www.toujou.de/service/elementbibliothek/map-elements/)[Blog ❯ ](https://www.toujou.de/service/elementbibliothek/blog-elements/) [Events ❯ ](https://www.toujou.de/service/elementbibliothek/events/)/ [Widgets ❯ ](https://www.toujou.de/service/elementbibliothek/widgets/) [Navigation ❯](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [HTML ❯ ](https://www.toujou.de/service/elementbibliothek/html/)/ [Forms ❯ ](https://www.toujou.de/service/elementbibliothek/forms/) ##### toujou TOURISM [tourism-Modul ❯](https://www.toujou.de/tutorials/tourism-modul/) [Expertise & Konzept ❯](https://www.toujou.de/websites/websites-fuer-reiseveranstalter/) [Alle Features ❯](https://www.toujou.de/loesungen/etourism/) [toujou-Reiseportale ❯](https://www.toujou.de/warum-toujou/unsere-kunden/#c1002004) [Reiseseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisen-anlegen/) [Reiseseiteneigenschaften ❯](https://www.toujou.de/tutorials/reiseseiten/reiseseiteneigenschaften/) [Reisekategorien ❯](https://www.toujou.de/tutorials/reiseseiten/reisekategorien-anlegen/) [Termine & Preise ❯](https://www.toujou.de/tutorials/reiseseiten/termine-preise/) [Reisesuchseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) [Trip Elements ❯ ](https://www.toujou.de/service/elementbibliothek/trip-elements/) [Search Elements ❯](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/)