Animierte Nummern sind eine großartige Möglichkeit, Daten zu visualisieren und Vertrauen bei deinen Besuchern aufzubauen. Egal, ob du Projektabschlussraten, Kundenzufriedenheitswerte oder finanzielle Meilensteine präsentierst – diese Elemente verwandeln statische Daten in ein interaktives Erlebnis.
Du kannst zwischen zwei Elementtypen wählen:
Nummer:
Statistiken, welche aus diesen Layout-Typen bestehen:
- Donut
- Halb-Donut
- Ring
- Fortschrittsbalken
Elemente hinzufügen
Es gibt zwei Möglichkeiten, ein Nummer/Statistik-Element (oder jedes andere Element) zu deiner Seite hinzuzufügen:
In einem neuen Abschnitt: Klicke auf das Plus-Zeichen (+) in der Mitte eines leeren Abschnitts.
In einem bestehenden Abschnitt: Fahre mit der Maus über den Abschnitt, um die Kontrollleiste oben links anzuzeigen, und klicke auf das Burger-Icon (drei Linien).
Inhalt & Werte konfigurieren
Schauen wir uns die Einstellungen an, die festlegen, welche Daten dein Element anzeigt. Klicke auf das Element, um die Einstellungen zu öffnen:
Wert: Gib die endgültige Zahl ein, die das Element erreichen soll (z. B. 75).
Max: Lege das Gesamtlimit für die Berechnung fest. Die Animation nutzt diesen Wert, um zu bestimmen, wie weit der Donut oder Balken „gefüllt“ wird. Wenn dein Wert beispielsweise 50 und dein Maximum 100 ist, füllt sich der Balken zu 50 %.
Beschreibung: Ein optionales Textfeld, um ein Label oder Kontext unter der Nummer hinzuzufügen.
Suffix & Präfix (nur für das „Nummer“-Element): Ermöglicht es dir, Text vor und nach der animierten Nummer einzufügen.
Anzeigeformat: Wähle aus, wie deine Nummer erscheint. Du kannst zwischen Nummer, Prozent, Währung, Distanz, Fläche, Volumen und Masse wählen.
Element hinzufügen: Hiermit kannst du mehrere Nummern gruppieren. Wenn du mehr als eine hinzufügst, wechselt das Stift-Icon oben links zu einem Burger-Icon, mit dem du zwischen den einzelnen Werten wechseln und diese verwalten kannst.
Design & Animation anpassen
Um den visuellen Stil zu ändern, klicke auf das Element und wechsle zum zweiten Tab (das Zahnrad-Icon).
Hier kannst du den Look verfeinern:
Layout-Typ: Wechsle zwischen den fünf verschiedenen Stilen (Donut, Balken etc.).
Layout-Einstellungen: Passe die Geometrie an, wie z. B. die Linienstärke, Formgröße, Eckenradius und Farben.
Nummer: Individualisiere Größe und Farbe der Ziffern sowie des Einheiten-Symbols.
Beschreibung (erscheint nur, wenn eine Beschreibung hinzugefügt wurde): Passe Größe und Farbe des Beschreibungstextes an.
Animation: Steuere die Art der Bewegung und die Geschwindigkeit des Hochzählens. Du kannst auch die Vorschau-Option nutzen, um die Animation zu sehen, ohne die Seite veröffentlichen zu müssen.
Häufig gestellte Fragen (FAQ)
Wann startet die Animation?
Wann startet die Animation?
Die Animation ist Scroll-gesteuert. Das bedeutet, die Zahlen beginnen erst zu zählen, wenn das Element im Browserfenster des Besuchers sichtbar wird. Befindet sich das Element am Ende der Seite, startet die Animation erst, wenn der Nutzer dorthin scrollt.
Kann ich Dezimalzahlen anzeigen (z. B. 75.5 %)?
Kann ich Dezimalzahlen anzeigen (z. B. 75.5 %)?
Ja, gib einfach deinen Wert ein und trenne die Dezimalstellen mit einem Punkt.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂