> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/zahlenzahler-auf-website-und-funnel-seiten-einsetzen.md).

# Zahlenzähler auf Website- und Funnel-Seiten einsetzen

Ein Zahlenzähler macht eine Kennzahl beim Scrollen sichtbar: Die Zahl läuft vom Start- bis zum Endwert hoch. Das eignet sich für wenige, nachvollziehbare Fakten, etwa Jahre Erfahrung, abgeschlossene Projekte oder Bewertungen. Das Ergebnis soll auf einen Blick verständlich sein – der Effekt ist nur die Unterstützung.

Verwende ausschließlich Zahlen, die du belegen kannst. Jede Zahl braucht eine klare Beschriftung, damit Besucherinnen und Besucher nicht raten müssen, was sie bedeutet.

## Was ein Zahlenzähler kann

Ein Zahlenzähler-Element kann mehrere Kennzahlen enthalten. Für jede Kennzahl kannst du festlegen:

| Einstellung      | Was sie bewirkt                                                              |
| ---------------- | ---------------------------------------------------------------------------- |
| **Beschriftung** | Erklärt die Zahl, zum Beispiel „abgeschlossene Projekte“.                    |
| **Startwert**    | Von diesem Wert beginnt das Hochzählen.                                      |
| **Endwert**      | Bis zu diesem Wert zählt das Element hoch. Dezimalzahlen sind möglich.       |
| **Text davor**   | Ergänzt einen Hinweis vor der Zahl, etwa ein Symbol oder einen kurzen Text.  |
| **Text danach**  | Ergänzt einen Hinweis nach der Zahl, etwa „+“ oder „%“.                      |
| **Bild**         | Optionales PNG-, JPEG- oder SVG-Symbol, das die Kennzahl zusätzlich erklärt. |

Große Werte werden automatisch verkürzt dargestellt. Aus **2500000** kann beispielsweise **2,5 M** werden. Prüfe deshalb immer die öffentliche Vorschau: Die Kurzform und die Beschriftung müssen zusammen verständlich bleiben.

## Bevor du startest

Entscheide zuerst, welche zwei bis vier Kennzahlen wirklich Orientierung geben. Ein Zahlenzähler ist keine vollständige Statistik. Zu viele Werte lenken vom eigentlichen Angebot ab.

Bereite außerdem diese Informationen vor:

1. Den belegbaren Start- und Endwert jeder Kennzahl.
2. Eine kurze, eindeutige Beschriftung.
3. Optional ein passendes Symbol im PNG-, JPEG- oder SVG-Format.
4. Eine sinnvolle Reihenfolge der Kennzahlen.

Bilder sind nicht verpflichtend. Wenn ein Symbol keinen zusätzlichen Sinn erklärt, lass es weg.

## Zahlenzähler in eine Seite einfügen

1. Öffne **Websites und Leadgewinnung > Websites und Funnels**.
2. Wähle die passende Website oder den passenden Funnel aus.
3. Öffne die Seite beziehungsweise den Schritt, in dem die Kennzahlen erscheinen sollen, und starte den Seiteneditor.
4. Wähle in der Seitenleiste **Element hinzufügen**.
5. Suche nach **Zahlenzähler**.
6. Ziehe das Element an die gewünschte Stelle im Layout.
7. Klicke den eingefügten Zahlenzähler an. Seine Einstellungen erscheinen in der rechten Seitenleiste.

Setze das Element möglichst in einen eigenen, ruhigen Abschnitt. So bleibt die Wirkung klar und die Werte werden nicht von anderen Bewegungen überlagert.

## Jede Kennzahl einrichten

Nach dem Einfügen bearbeitest du die einzelnen Zähler im Einstellungsbereich.

1. Klicke auf **Zähler hinzufügen**, wenn du eine weitere Kennzahl brauchst.
2. Gib bei **Beschriftung** an, was die Zahl aussagt.
3. Trage **Startwert** und **Endwert** ein. Für eine normale Hochzählung ist der Startwert oft **0**; er kann aber auch anders gewählt werden.
4. Ergänze bei Bedarf Text vor oder nach der Zahl.
5. Wähle optional ein Bild aus und passe dessen Größe an.
6. Wiederhole die Schritte für weitere Kennzahlen.
7. Entferne einen nicht benötigten Zähler über das Papierkorb-Symbol.

Ein Bild, Text davor oder Text danach gilt immer für die betreffende Kennzahl. Die allgemeinen Gestaltungsfarben gelten dagegen für das gesamte Zahlenzähler-Element.

## Layout und Gestaltung festlegen

Im Bereich **Zähler-Layout** steuerst du die gemeinsame Darstellung aller Kennzahlen:

| Einstellung                  | Mögliche Auswahl oder Wirkung                                                                      |
| ---------------------------- | -------------------------------------------------------------------------------------------------- |
| **Bildgröße**                | Vergrößert oder verkleinert die zu einer Kennzahl gehörenden Symbole.                              |
| **Abstand zwischen Zählern** | Legt den waagerechten Abstand fest. Größere Abstände trennen die Kennzahlen stärker voneinander.   |
| **Spaltenanzahl**            | 1 bis 5 Kennzahlen pro Zeile. Wähle nur so viele Spalten, dass Beschriftungen lesbar bleiben.      |
| **Zahl-Farbe**               | Gilt für die Zahlen des gesamten Elements.                                                         |
| **Beschriftungsfarbe**       | Gilt für alle Beschriftungen dieses Elements.                                                      |
| **Hintergrund**              | Gestaltet den Hintergrund eines einzelnen Zählerbereichs.                                          |
| **Container-Hintergrund**    | Gestaltet den Hintergrund des umschließenden Bereichs.                                             |
| **Rahmen und Schatten**      | Heben den gesamten Bereich optisch ab. Nutze sie sparsam, damit die Zahlen im Vordergrund bleiben. |

Die Farben sind nicht pro einzelner Kennzahl getrennt einstellbar. Wenn du für verschiedene Werte unterschiedliche Farben brauchst, erstelle getrennte Zahlenzähler-Elemente und prüfe, ob das die Seite wirklich klarer macht.

## Bewegung sinnvoll einstellen

Der Zähler kann beim Sichtbarwerden der Seite hochlaufen.

| Einstellung                      | Belegte Wirkung                                                                               |
| -------------------------------- | --------------------------------------------------------------------------------------------- |
| **Animationsdauer**              | 1 bis 15 Sekunden. Sie bestimmt, wie schnell der Wert den Endwert erreicht.                   |
| **Auslösen beim Sichtbarwerden** | Die Hochzählung startet erst, wenn das Element beim Scrollen in den sichtbaren Bereich kommt. |
| **Vorschau der Animation**       | Mit **Animation prüfen** kannst du den Ablauf im Editor erneut abspielen.                     |

Auf der veröffentlichten Seite läuft die Animation je Seitenaufruf nur einmal. Scrollst du später wieder nach oben oder unten, startet sie nicht erneut. Das schützt die Leistung der Seite und verhindert eine dauernde Wiederholung.

Für die meisten Seiten ist eine kurze Dauer sinnvoll. Eine lange Bewegung kann dazu führen, dass Besucherinnen und Besucher den Wert noch nicht sehen, obwohl sie schon weiter lesen möchten.

## Mobilansicht und Umfang prüfen

Spaltenanzahl und Abstände passen sich an unterschiedliche Bildschirmgrößen an. Prüfe die Darstellung trotzdem auf einem echten Smartphone: Lange Beschriftungen können mehr Platz brauchen als im Editor sichtbar ist.

Ein einzelnes Zahlenzähler-Element darf technisch viele Kennzahlen enthalten. Für eine flüssige Seite solltest du höchstens 20 Zähler in einem Element verwenden. Bei mehr Zählern kann die Animation auf weniger leistungsfähigen Geräten träge wirken.

## So prüfst du das Ergebnis

1. Spiele die Animation mit **Animation prüfen** im Editor ab.
2. Prüfe jede Beschriftung gegen den tatsächlichen Wert.
3. Kontrolliere, ob Startwert, Endwert sowie Text davor und danach das richtige Ergebnis bilden.
4. Speichere und veröffentliche die Seite.
5. Öffne die veröffentlichte Seite in einem Desktop-Browser und scrolle zum Element.
6. Warte, bis die Zähler einmal vollständig hochgelaufen sind.
7. Prüfe die gleiche Seite auf einem Smartphone: Spalten, Abstände, Symbole und Beschriftungen müssen lesbar bleiben.
8. Lade die Seite neu und kontrolliere, dass die Animation pro neuem Seitenaufruf wieder einmal abläuft.

## Praxisbeispiel: Vertrauen mit drei klaren Fakten stärken

Ein Beratungsunternehmen möchte auf seiner Startseite drei nachvollziehbare Fakten zeigen:

1. Es fügt einen Zahlenzähler mit drei Kennzahlen ein.
2. Die erste Kennzahl lautet **15** mit der Beschriftung „Jahre Erfahrung“.
3. Die zweite Kennzahl zeigt **320** mit der Beschriftung „abgeschlossene Projekte“.
4. Die dritte Kennzahl zeigt **4,9** mit dem Text danach „von 5“ und der Beschriftung „Durchschnittliche Bewertung“.
5. Das Team wählt drei Spalten, kurze Beschriftungen und eine kurze Animationsdauer.
6. Es prüft die Darstellung auf Smartphone und Desktop sowie die Quellen hinter allen drei Werten.

Die Zahlen geben Orientierung, ohne dass die Seite überladen wirkt.

## Typische Probleme und Lösungen

| Beobachtung                                              | Wahrscheinliche Ursache                                                           | Was du tun kannst                                                            |
| -------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| Die Zahl ist ohne Bedeutung.                             | Eine Beschriftung fehlt oder ist zu allgemein.                                    | Ergänze eine kurze, präzise Beschriftung direkt am Zähler.                   |
| Der Zähler startet nicht sofort.                         | Die Animation ist auf das Sichtbarwerden beim Scrollen eingestellt.               | Scrolle zum Element und prüfe die veröffentlichte Seite.                     |
| Beim Zurückscrollen läuft die Zahl nicht erneut.         | Die Animation läuft je Seitenaufruf nur einmal.                                   | Lade die Seite neu, wenn du den Ablauf erneut prüfen möchtest.               |
| Die Darstellung wirkt auf dem Smartphone gedrängt.       | Zu viele Spalten, große Symbole oder lange Beschriftungen brauchen zu viel Platz. | Verringere Spaltenzahl, Bildgröße oder Textlänge und teste erneut.           |
| Farben einzelner Kennzahlen sollen unterschiedlich sein. | Stile gelten für das gesamte Zahlenzähler-Element.                                | Nutze getrennte Elemente nur dann, wenn es die Verständlichkeit verbessert.  |
| Die Seite reagiert träge.                                | Ein Element enthält zu viele Zähler oder umfangreiche Bilder.                     | Halte höchstens 20 Zähler pro Element und entferne nicht notwendige Symbole. |
| Die angezeigte Kurzform ist missverständlich.            | Große Zahlen werden automatisch abgekürzt.                                        | Ergänze eine klare Beschriftung und prüfe die öffentliche Darstellung.       |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/zahlenzahler-auf-website-und-funnel-seiten-einsetzen.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.