Mit dem Block „Zähler“ können Sie animierte Zahlenzähler anzeigen, die von einem Startwert bis zu einer Endzahl hochzählen. Dieser Block eignet sich perfekt, um beeindruckende Statistiken, Meilensteine und Erfolge auf auffällige Weise zu präsentieren und so die Aufmerksamkeit der Besucher auf sich zu ziehen.
Ganz gleich, ob Sie Ihre Unternehmensjahre, die Anzahl Ihrer Kunden, abgeschlossene Projekte oder andere Kennzahlen hervorheben möchten – der Zähler-Block erweckt Ihre Zahlen mit einer flüssigen Zählanimation zum Leben, die abgespielt wird, wenn Besucher den Block in den sichtbaren Bereich scrollen.
Hinzufügen des Zählerblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Zählerblock zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Zähler“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Ziehen Sie den Block „Zähler“ aus dem Blockfenster und legen Sie ihn im gewünschten Seitenbereich ab.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Zählerblock, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie die Zählerwerte, das Animationsverhalten und die Beschriftung konfigurieren.
Gegenwerte:
- Startnummer: Legen Sie die Zahl fest, mit der der Zähler zu zählen beginnt, wenn die Animation ausgelöst wird. Normalerweise wird der Wert 0 eingestellt, aber Sie können mit einem beliebigen Wert beginnen, um einen Teilzähleffekt zu erzielen.
- Endnummer: Legen Sie die Endnummer fest, bis zu der der Zähler zählen soll. Dies ist die wichtigste Statistik oder Leistung, die Sie anzeigen möchten.
- Zahlenpräfix: Fügen Sie Text oder ein Symbol hinzu, das vor der Zahl erscheint, z. B. ein Währungssymbol (z. B. $) oder ein Pluszeichen.
- Zahlensuffix: Fügen Sie Text oder ein Symbol hinzu, das nach der Zahl erscheint, z. B. ein Prozentzeichen (%), ein Pluszeichen (+) oder eine Einheit wie „K“.
Animationseinstellungen:
- Animationsdauer: Legen Sie fest, wie lange (in Millisekunden) die Zählanimation dauert. Eine längere Dauer erzeugt einen langsameren, dramatischeren Aufwärtszähleffekt.
- Tausender-Trennzeichen: Wählen Sie, ob ein Tausender-Trennzeichen in der Zahl angezeigt werden soll (z. B. 1.000 statt 1000), um die Lesbarkeit zu verbessern.
- Trennzeichen: Wählen Sie das Zeichen aus, das als Tausendertrennzeichen verwendet werden soll, z. B. ein Komma oder ein Punkt, entsprechend Ihren regionalen Formatierungspräferenzen.
Etikett:
- Titel: Fügen Sie eine beschreibende Beschriftung hinzu, die unter der Zahl erscheint und erklärt, was die Statistik darstellt (z. B. „Zufriedene Kunden“, „Abgeschlossene Projekte“, „Jahre Erfahrung“).
Konfigurieren Sie Ihre Zählerwerte, die Animationsdauer, das Tausendertrennzeichen und die Titelbeschriftung auf der Registerkarte „Inhalt“.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Zählerblocks anpassen.
Zahlentypografie:
- Zahlenfarbe: Passen Sie die Farbe der Zählernummer an Ihr Marken- oder Seitendesign an.
- Schriftart: Wählen Sie die Schriftart für die Zählernummer aus.
- Schriftgröße: Legen Sie die Größe der Zahlen auf Desktop-, Tablet- und Mobilgeräten fest.
- Schriftstärke: Legt fest, ob die Zahl fett oder in einer leichteren Schriftstärke angezeigt wird.
- Zeilenhöhe: Passen Sie den vertikalen Abstand des Zahlentextes an.
- Buchstabenabstand: Passen Sie den horizontalen Abstand zwischen den Zeichen in der Zahl genau an.
- Zahlenausrichtung: Richten Sie die Zählernummer links, mittig oder rechts aus.
- Zahlenschatten: Fügen Sie der Zahl einen Textschatten hinzu, dessen Farbe, horizontaler/vertikaler Versatz, Unschärfe und Ausbreitung Sie mit den Steuerelementen einstellen können.
Titeltypografie:
- Titel Farbe: Legen Sie die Farbe der beschreibenden Beschriftung unterhalb des Zählers fest.
- Schriftart: Wählen Sie die Schriftfamilie für die Titelbeschriftung aus.
- Schriftgröße: Legen Sie die Titelgröße für Desktop-, Tablet- und Mobilgeräte 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
- Titelausrichtung: Richten Sie die Titelbeschriftung links, mittig oder rechts aus.
- Titel-Schatten: Fügen Sie dem Titel einen Textschatten hinzu, dessen Farbe, Versatz, Unschärfe und Ausbreitung Sie mit den entsprechenden Steuerelementen anpassen können.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Zählerblock herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen dem Zähler und den umgebenden Elementen angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Zählerblocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand 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 benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Counter-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-counter|true)
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Den Zählerblock auf Desktop-Bildschirmen ausblenden
- Auf Tablet ausblenden: Den Zählerblock auf Tablet-Geräten ausblenden
- Auf Mobilgeräten ausblenden: Den Zählerblock auf Mobilgeräten ausblenden
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Zählerblock in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Eindrehen“ und viele mehr. Die Kombination einer Eingangsanimation mit dem Aufwärtszähleffekt sorgt für 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
Wenn Sie die Konfiguration des Zählerblocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Zählerblock zu Ihrer Seite hinzugefügt! Animierte Zähler sind ein bewährtes Mittel, um Vertrauen und Glaubwürdigkeit aufzubauen, indem Sie Ihre beeindruckendsten Zahlen in den Vordergrund stellen. Experimentieren Sie mit verschiedenen Zahlenformaten, Präfixen, Suffixen und Schriftstilen, um Zähler zu erstellen, die Ihre Marke perfekt widerspiegeln und Ihre Statistiken unübersehbar machen.