Der Zähler-Block ermöglicht es Ihnen, animierte Zahlenzähler anzuzeigen, die von einem Startwert bis zu einer Endzahl hochzählen. Dieser Block ist perfekt, um beeindruckende Statistiken, Meilensteine und Errungenschaften auf eine auffällige Weise zu präsentieren, die die Aufmerksamkeit der Besucher fesselt.
Ob Sie Jahre im Geschäft, betreute Kunden, abgeschlossene Projekte oder eine andere Kennzahl hervorheben möchten, der Zähler-Block erweckt Ihre Zahlen mit einer sanften Zähl-Animation zum Leben, die abgespielt wird, wenn Besucher den Block ins Sichtfeld scrollen.
Hinzufügen des Zähler-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Zähler-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Zähler-Block in den gewünschten Bereich Ihrer Seite.
Ziehen Sie den Zähler-Block aus dem Blöcke-Panel und legen Sie ihn in den gewünschten Seitenbereich.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Zähler-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie die Zählerwerte, das Animationsverhalten und die Beschriftung konfigurieren.
Zählerwerte:
- Startzahl: Legen Sie die Zahl fest, von der der Zähler zu zählen beginnt, wenn die Animation ausgelöst wird. Typischerweise auf 0 gesetzt, aber Sie können von jedem Wert aus starten, um einen partiellen Zähleffekt zu erzielen.
- Endzahl: Legen Sie die Endzahl fest, bis zu der der Zähler hochzählt. Dies ist die Hauptstatistik oder Errungenschaft, die Sie anzeigen möchten.
- Zahlenpräfix: Fügen Sie Text oder ein Symbol hinzu, das vor der Zahl erscheint, wie z. B. ein Währungssymbol (z. B. $) oder ein Pluszeichen.
- Zahlensuffix: Fügen Sie Text oder ein Symbol hinzu, das nach der Zahl erscheint, wie z. B. ein Prozentzeichen (%), ein Pluszeichen (+) oder eine Einheit wie „T“.
Animationseinstellungen:
- Animationsdauer: Steuern Sie, wie lange (in Millisekunden) die Zähl-Animation dauert. Eine längere Dauer erzeugt einen langsameren, dramatischeren Hochzähl-Effekt.
- Tausendertrennzeichen: Wählen Sie, ob ein Tausendertrennzeichen in der Zahl angezeigt werden soll (z. B. 1.000 statt 1000) zur besseren Lesbarkeit.
- Trennzeichen: Wählen Sie das Zeichen, das als Tausendertrennzeichen verwendet wird, wie z. B. ein Komma oder ein Punkt, um Ihre regionalen Formatierungspräferenzen anzupassen.
Beschriftung:
- Titel: Fügen Sie eine beschreibende Beschriftung hinzu, die unter der Zahl erscheint, um zu erklären, was die Statistik darstellt (z. B. „Zufriedene Kunden“, „Abgeschlossene Projekte“, „Jahre Erfahrung“).
Konfigurieren Sie Ihre Zählerwerte, Animationsdauer, Tausendertrennzeichen und den Titel in der Registerkarte Inhalt.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Zähler-Blocks anpassen.
Zahlentypografie:
- Zahlenfarbe: Legen Sie die Farbe der Zählernummer fest, um sie an Ihr Marken- oder Seitendesign anzupassen.
- Schriftart: Wählen Sie die Schriftfamilie für die Zählernummer.
- Schriftgröße: Legen Sie die Größe der Zahl für Desktop-, Tablet- und Mobilgeräte fest.
- Schriftstärke: Steuert, ob die Zahl fett oder in einer leichteren Stärke erscheint
- Zeilenhöhe: Passt den vertikalen Abstand des Zahlentexts an
- Buchstabenabstand: Feinabstimmung des horizontalen Abstands zwischen den Zeichen in der Zahl
- Zahlen-Ausrichtung: Richten Sie die Zählernummer links, mittig oder rechts aus
- Zahlenschatten: Fügen Sie der Zahl einen Textschatten hinzu, mit Steuerelementen für Farbe, horizontalen/vertikalen Versatz, Weichzeichnung und Spreizung
Titel-Typografie:
- Titelfarbe: Legen Sie die Farbe der beschreibenden Beschriftung unter dem Zähler fest
- Schriftart: Wählen Sie die Schriftfamilie für die Titelbeschriftung
- Schriftgröße: Legen Sie die Titelgröße für Desktop-, Tablet- und Mobilgeräte-Breakpoints fest
- Schriftstärke: Steuern Sie die Stärke des Titeltextes
- Zeilenhöhe: Passen Sie den Abstand des Titeltextes an
- Buchstabenabstand: Feinabstimmung des Zeichenabstands im Titel
- Titel-Ausrichtung: Richten Sie die Titelbeschriftung links, mittig oder rechts aus
- Titel-Schatten: Fügen Sie dem Titel einen Textschatten mit Steuerelementen für Farbe, Versatz, Weichzeichnung und Spreizung hinzu
Abstand:
- Abstand (Außen): Steuern Sie den äußeren Abstand um Ihren Zählerblock (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Zähler und den umgebenden Elementen vorhanden ist
- Abstand (Innen): Passen Sie den inneren Abstand innerhalb Ihres Zählerblocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Zählerinhalt und den Blockrändern
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Zählerblock an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Zählers beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-counter|true)
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Zählerblock auf Desktop-Bildschirmen aus
- Auf Tablet ausblenden: Blenden Sie den Zählerblock auf Tablet-Geräten aus
- Auf Mobilgeräten ausblenden: Blenden Sie den Zählerblock auf Mobilgeräten aus
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Zählerblock in den Ansichtsbereich gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Die Kombination einer Eingabeanimation mit dem Zähleffekt schafft ein äußerst ansprechendes Erlebnis für Besucher
Verwenden Sie die Registerkarte "Erweitert", um Typografie, Farben, Schatten, Abstände und Sichtbarkeit für Ihren Zählerblock zu steuern.
Schritt 4: Speichern Sie Ihre Änderungen
Sobald Sie die Konfiguration des Zählerblocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Zählerblock zu Ihrer Seite hinzugefügt! Animierte Zähler sind eine bewährte Methode, um Vertrauen und Glaubwürdigkeit aufzubauen, indem Ihre beeindruckendsten Zahlen in den Vordergrund gerückt werden. Experimentieren Sie mit verschiedenen Zahlenformaten, Präfixen, Suffixen und Typografiestilen, um Zähler zu erstellen, die perfekt zu Ihrer Marke passen und Ihre Statistiken unübersehbar machen.