--- title: Counter – das Zähler-Element in toujou url: "https://www.toujou.de/service/elementbibliothek/widgets/counter/" description: Counter ermöglicht das animierte Anzeigen von definierten Zahlen. Anleitung, Beispielansicht sowie Tipps, Tricks und Hinweise zum toujou-Element. date: 2024-12-04 modified: 2024-12-04 --- # Counter – 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. [Counter](https://www.toujou.de/service/elementbibliothek/widgets/counter/) Counter ======= Das Element Counter ermöglicht das animierte Anzeigen von Zahlen auf Ihrer Website. Dabei sind Start- und Endzahl einzutragen. Für eine Präzisierung der Anzeige stehen etliche Optionen wie Animationsdauer, Präfix und Suffix sowie das Hochladen eines Bildes und das Element Design zur Verfügung. [Beispielansicht](#c1017954) [Anleitung](#c1017948) [Hinweise, Tipps & Tricks](#c1017944) --- Beispielansicht --------------- - 1 Beispielansicht ohne Präfix und Suffix, mit Primary Design - ~ 1 Beispielansicht mit Präfix, ohne Element Design - ~ 1 kmBeispielansicht mit Präfix, Suffix und Secondary Design --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/lwjjBzN8mgMFCyHb7ToUvOeSKBHTUmZtDW-tGC4JU68/q:85/c:1913.166:945.16565656566:fp:0.499:0.5/rt:force/w:432/h:213/fn:Y3NtX2NvdW50ZXItZWxlbWVudGF1c3dhaGxfODMzMzUwYWNmNw:t/cb:0ea840a815d381b60801609456e5793a162f5ba9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTRfY291bnRlci9jb3VudGVyLWVsZW1lbnRhdXN3YWhsLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/14_counter/counter-elementauswahl.png) ### Counter-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 **Counter**. [ ![](https://www.toujou.de/_assets/processed/X4IQM-Ihf5mcuYXBzQxpTh_B1FXQcum2xr1b9yt8sIc/q:85/c:1917:945.16565656566:fp:0.5:0.5/rt:force/w:432/h:213/fn:Y3NtX0NvdW50ZXItbmV1ZW4tQ291bnRlci1hbmxlZ2VuXzJhNmQyMmM5NDY:t/cb:792254c5e638506945c194b0a5e05335dda54243/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTRfY291bnRlci9Db3VudGVyLW5ldWVuLUNvdW50ZXItYW5sZWdlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/14_counter/Counter-neuen-Counter-anlegen.png) ### Neuen Counter anlegen - Im Counter-Element können Sie mehrere animierte Zahlen anzeigen lassen. - Durch Klick auf **+ Neu anlegen** im Reiter *Allgemein* erstellen Sie ein neuen Counter. - Anschließend öffnet sich die Eingabemaske für diesen Counter. [ ![](https://www.toujou.de/_assets/processed/wkf1J0iKEQE8qbTD5sHxmrtd5TyRrBGZcDTDHZppP4s/q:85/c:1917:945.16565656566:fp:0.5:0.4979797979798/rt:force/w:432/h:213/fn:Y3NtX2NvdW50ZXItc3RhcnQtZW5kd2VydF8zNzE1MzEyMTMx:t/cb:ce94db452c5743f06518f8d3a703898aa6ef7a10/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTRfY291bnRlci9jb3VudGVyLXN0YXJ0LWVuZHdlcnQucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/14_counter/counter-start-endwert.png) ### Start- und Endwert definieren - Unter dem Reiter Allgemein tragen Sie im Feld *Startwert* die Zahl ein, mit der die Animation beim Seitenaufruf beginnen soll. - Im Feld Endwert hinterlegen Sie die Zahl, mit der die Animation abschließen soll. - Beide Felder sind in allen Countern für die Funktionalität des gesamten Elements auszufüllen. [ ![](https://www.toujou.de/_assets/processed/1USsQO2vIceI8gU49VMoeVKwAOQdc59AN7AC4VvLrLg/q:85/c:1915.083:945.16565656566:fp:0.4995:0.5/rt:force/w:432/h:213/fn:Y3NtX2NvdW50ZXItb3B0aW9uYWxlLWRldGFpbHNfZGM5OTk4MGMxZg:t/cb:a6c627469b648bc761f84d7ff3bded5be6dfad00/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTRfY291bnRlci9jb3VudGVyLW9wdGlvbmFsZS1kZXRhaWxzLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/14_counter/counter-optionale-details.png) ### Optionale Werte eintragen - Hinterlegen Sie ein Medium in einem Counter im Bereich *Bild* über die Option **Datei hinzufügen** oder **Dateien auswählen und hochladen**. - Wählen Sie im Bereich *Animationsdauer* über das **Dropdown-Menü** die Geschwindigkeit. Zur Auswahl stehen langsam, mittel und schnell. - Definieren Sie einen Titel für den einzelnen Counter, indem Sie das Feld unterhalb von *Titel* ausfüllen. - Im Bereich *Präfix* und *Suffix* hinterlegen Sie Werte / Zeichen, die vor bzw. nach dem Wert erscheinen sollen. [ ![](https://www.toujou.de/_assets/processed/BVHYIRdia2jLZd4--aUa3V9Br_2QQei-peRmaNwvtFw/q:85/c:1917:945.16565656566:fp:0.5:0.5/rt:force/w:432/h:213/fn:Y3NtX2NvdW50ZXItd2VpdGVyZS1jb3VudGVyLWFubGVnZW5fNzM2OGZlNmU2MA:t/cb:d7a8b41ee988b78fb38e9ef4b9f7adae6fbbed63/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMTRfY291bnRlci9jb3VudGVyLXdlaXRlcmUtY291bnRlci1hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/14_counter/counter-weitere-counter-anlegen.png) ### Weitere Counter anlegen - Über einen Klick auf **+ Neu anlegen** im Reiter *Allgemein* erstellen Sie weitere Counter im Element. Dieser werden je nach Endgerät neben- oder untereinander angezeigt. - In jedem Counter muss zwingend Start- und Endwert hinterlegt werden. Die anderen Felder sind optional. - **Speichern** Sie die Einstellungen abschließend. --- Hinweise, Tipps & Tricks ------------------------------ **Besonderheiten**: Für die Funktionalität des Elements Counter muss ein Start- und Endwert eingetragen sein. Diese beiden Felder müssen mit Zahlen ausgefüllt sein. Andere Felder sind optional. Es muss stets mindestens ein Counter angelegt sein. Weitere Counter im Element sind jederzeit erweiterbar. **Responsive**: Für Endgeräte mit Display-Anzeige <840px werden standardmäßig bis zu maximal 4 Counter-Anzeigen nebeneinander angezeigt. Von 839px bis 640px werden maximal zwei Counter nebeneinander angezeigt, für kleinere Displays wird jeder einzelne Counter untereinander angezeigt. --- 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/) ---