So fügen Sie einen animierten Zahlenzähler zu WordPress hinzu (ohne Code) 

Möchten Sie Ihre Statistiken, Meilensteine oder Erfolge auf auffälligere Weise präsentieren?

Mit einem animierten Zahlenzähler können Sie Dinge wie die Gesamtzahl der Kunden, E-Mail-Abonnenten oder die Jahre im Geschäft hervorheben und die Aufmerksamkeit Ihrer Besucher auf sich ziehen, während die Zahlen in Echtzeit hochzählen.

In dieser Anleitung zeige ich Ihnen, wie Sie einen animierten Zahlenzähler in WordPress mit zwei Tools hinzufügen, die keinen Code erfordern.

Was sind animierte Zahlenzähler?

Ein animierter Zahlenzähler ist ein visueller Effekt, bei dem eine Zahl in Echtzeit hoch- (oder herunter-) zählt, um typischerweise Statistiken wie die Gesamtzahl der Kunden, abgeschlossenen Projekte oder Geschäftsjahre hervorzuheben.

Sie haben diese Zähleranimation wahrscheinlich schon auf Websites von Unternehmen und Agenturen gesehen, direkt neben Vertrauenssignalen wie Testimonials und Fallstudien.

Studien zu Aufmerksamkeit und Webdesign zeigen durchweg, dass Bewegung das Auge anzieht. Ein Statistikzähler, der sich beim Einblenden animiert, wird wahrgenommen, anders als eine statische Zahl. Das ist der Unterschied zwischen "2.400 Kunden" auf der Seite und dem Zuschauen, wie die Zahl live hochzählt.

Hier sind einige Beispiele für Zahlenanimationen, die Sie verwenden können:

• Zeigen Sie die Anzahl der Kunden, denen Sie geholfen haben
• Heben Sie hervor, wie viele Projekte Sie abgeschlossen haben
• Zeigen Sie Ihre gesamten E-Mail-Abonnenten an
• Feiern Sie Jahre im Geschäft oder gewonnene Auszeichnungen

Gut eingesetzt, wirkt ein WordPress-Statistikblock, der Ihre echten Zahlen anzeigt, wie ein stilles Signal: "Dieses Unternehmen weiß, was es tut."

Welche Methode sollten Sie verwenden?

Beide unten aufgeführten Methoden fügen Ihrem Website animierte Zähl-Animationen ohne Code hinzu. Hier ist, wie Sie wählen:

Methode	Am besten für	Anpassbarkeit
SeedProd Zähler-Block	Erstellen einer neuen Seite oder eines neuen Themes und Sie möchten die volle visuelle Kontrolle über Schriftarten, Farben, Abstände und das mobile Layout	Volle visuelle Kontrolle, erweiterte Stile, kein Code
Counter Number Plugin	Beibehaltung Ihres bestehenden Themes und Sie müssen nur einen einfachen Statistikzähler mit einem Shortcode einfügen	Grundlegende Stile, Shortcode-basiert

1. Zahlen-Animationszähler mit SeedProd hinzufügen

Für die erste Methode zeige ich Ihnen, wie Sie mit SeedProd animierte Zahlenzähler zu Ihrer WordPress-Website hinzufügen.

SeedProd ist ein Drag-and-Drop-Website-Builder für WordPress, mit dem Sie vollständige Websites, Landing Pages und benutzerdefinierte Themes ohne Code gestalten können.

Sie können den Zählerblock zu jeder Seite, Landing Page oder jedem benutzerdefinierten Theme hinzufügen, das Sie mit SeedProd erstellen.

Vollständige Website-Kits und Landing Page-Vorlagen bringen Sie schnell zu einem fertigen Design. Außerdem können Sie jedes Design visuell mit WordPress-Blöcken wie animierten Zahlenzählern, Textanimationen, Call-to-Action-Schaltflächen, responsiven Galerien und 1-Klick-Anpassungen anpassen.

Schritt 1. SeedProd installieren und aktivieren

Gehen Sie zuerst zur SeedProd-Preisseite und wählen Sie Ihren Plan. Für diese Anleitung verwende ich SeedProd Pro wegen seines Drag-and-Drop-WordPress-Theme-Builders.

Klicken Sie als Nächstes auf Ihr Konto-Dashboard und dann auf den Tab Downloads. Klicken Sie auf diesem Bildschirm auf die Schaltfläche SeedProd Plugin herunterladen und kopieren Sie Ihren Lizenzschlüssel.

Gehen Sie nun zu Ihrer WordPress-Website und laden Sie die Plugin-.zip-Datei hoch. Wenn Sie Hilfe bei diesem Schritt benötigen, folgen Sie dieser Anleitung zum Installieren und Aktivieren eines WordPress-Plugins.

Gehen Sie nach der Installation und Aktivierung des Plugins zu SeedProd-Einstellungen und geben Sie den zuvor kopierten Lizenzschlüssel ein.

Klicken Sie nun auf die Schaltfläche Schlüssel überprüfen, um Ihre Lizenzdetails zu speichern.

Schritt 2. WordPress-Layout erstellen

Der nächste Schritt besteht darin, ein neues Layout in WordPress zu erstellen. Sie können dies mit SeedProd tun, indem Sie entweder ein neues WordPress-Theme von Grund auf neu erstellen oder eine eigenständige Landingpage erstellen.

Beide verwenden den visuellen Editor von SeedProd, um Ihr Design anzupassen. Und Sie können den Zählerblock von SeedProd für Themes und Landing Pages verwenden.

Um Ihnen bei der Entscheidung zu helfen, überlegen Sie, welche Funktionalität Ihre Website haben soll.

Der Theme Builder ist eine ausgezeichnete Wahl, um ein komplettes benutzerdefiniertes Website-Design von Grund auf ohne Code zu erstellen.

Wenn Sie jedoch Ihr aktuelles WordPress-Theme beibehalten und SeedProd zum Erstellen einzelner Seiten verwenden möchten, ist der Landing Page Builder Ihre beste Lösung.

Benötigen Sie eine Anleitung? Folgen Sie einem dieser Leitfäden, um Ihr Layout einzurichten, und kehren Sie dann zu Schritt 3 zurück, um den Zählerblock hinzuzufügen: So erstellen Sie ein benutzerdefiniertes WordPress-Theme oder So erstellen Sie eine WordPress-Landing-Page.

Hinweis: Ich werde den Theme Builder mit dem Website-Kit für den Headphone Shop für dieses Tutorial verwenden.

Schritt 3. Fügen Sie den SeedProd Zähler-Block hinzu

Der nächste Schritt besteht darin, den Zählerblock zu Ihrer Landing Page oder Ihrem WordPress-Theme-Design hinzuzufügen. Klicken Sie also auf Design bearbeiten auf der Seite, die Sie anpassen möchten, um sie im visuellen Editor zu öffnen.

Da ich ein WordPress-Theme anpasse, beginne ich mit der Bearbeitung der Homepage-Vorlage:

Wenn Sie Ihr Design öffnen, sehen Sie ein Layout, das dem folgenden Screenshot ähnelt:

Es enthält Blöcke und Abschnitte auf der linken Seite und eine Live-Vorschau Ihrer Seite auf der rechten Seite.

Sie können überall auf Ihrer Vorschau klicken, um den Inhalt zu bearbeiten und alle Vorlagenelemente anzupassen.

Das Hinzufügen neuer Elemente zu Ihrer Seite dauert nur wenige Sekunden. Ziehen Sie sie einfach aus dem linken Bereich und legen Sie sie dort ab, wo Sie sie haben möchten.

Suchen Sie im linken Bereich nach dem Zähler-Block und ziehen Sie ihn auf Ihr WordPress-Design.

Sobald der Block platziert ist, können Sie darauf klicken, um die verschiedenen Anpassungsoptionen anzuzeigen.

Mit dem Zähler-Block können Sie:

• Einen Start- und Endwert für die Zählung hinzufügen
• Ein Präfix und Suffix für die Zahl eingeben
• Die Animationsdauer festlegen
• Einen Dezimal- oder Leerzeichen-Trennzeichen wählen
• Einen Zähler-Titel hinzufügen
• Die Ausrichtung auf Mobilgeräten und Desktops bearbeiten

Außerdem bietet der Erweitert-Tab noch mehr Einstellungen für die Gestaltung Ihres Zählers. Sie können beispielsweise die Schriftarten und Farben des Zählers und Titels ändern, Schatteneffekte hinzufügen, den Abstand anpassen und Sichtbarkeitsoptionen für mobile und Desktop-Geräte auswählen.

Das Beste daran ist, dass kein benutzerdefinierter CSS-, HTML-, jQuery- oder Javascript-Code erforderlich ist, um Ihren Zähler genau so aussehen zu lassen, wie Sie es möchten. Zeigen und klicken Sie, um Ihren Zahlenzähler zu gestalten, und Ihre Stylesheet wird automatisch aktualisiert.

Passen Sie Ihre Seite weiter an, bis Sie mit dem Aussehen zufrieden sind. Klicken Sie dann oben rechts auf die Schaltfläche Speichern, um Ihre Anpassungen zu speichern.

Schritt 4. Veröffentlichen Sie Ihre animierten Zahlenzähler

Nachdem Sie Ihre animierten Zahlenzähler zu Ihrer benutzerdefinierten Seite hinzugefügt und Ihre Änderungen gespeichert haben, sind Sie bereit, sie für Ihre Website-Besucher live zu schalten.

Wenn Sie eine eigenständige Landing Page erstellen, klicken Sie auf den Pfeil nach unten auf der Schaltfläche Speichern und wählen Sie Veröffentlichen. Wenn Sie jedoch den Theme Builder verwenden, gibt es noch einen weiteren Schritt.

Verlassen Sie den Page Builder, indem Sie auf das X-Symbol klicken. Schalten Sie dann im Theme Builder Dashboard den Schalter SeedProd Theme aktivieren auf „Ja“.

Das war's! Sie können jetzt Ihre Design-Vorschau anzeigen, um Ihre Zahlenzähler-Animation in Aktion zu sehen:

Der beste Ort für eine Zähl-Animation ist direkt unter Ihrem Hero-Bereich oder neben einem Testimonial-Block, wo Social Proof am wahrscheinlichsten einen Besucher zum Handeln bewegt.

Ein Zähler, der „2.400 bediente Kunden“ neben einem Call-to-Action-Button anzeigt, übertrifft durchweg denselben CTA ohne ihn. Ihre Zahlen leisten bereits die Arbeit für Ihr Unternehmen, sie müssen nur noch auf der Seite angezeigt werden.

2. Zahlen-Animations-Zähler mit Counter Number hinzufügen

Wenn Sie lieber einen Zähler ohne einen vollständigen Website-Builder hinzufügen möchten, gibt es eine weitere Möglichkeit, Zahlen-Zähler-Animationen zu Ihrer Website hinzuzufügen, ohne Code schreiben zu müssen.

In diesem Fall können Sie ein kostenloses WordPress-Nummernzähler-Plugin wie das Counter Number Plugin von WPShopMart verwenden. Es ermöglicht Ihnen, vollständig responsive Zähler zu Ihrer Website hinzuzufügen, um Zahlenstatistiken auf Beiträgen, Seiten und in Seitenleistenbereichen anzuzeigen.

Diese Methode bietet nicht so viele Anpassungsoptionen wie die vorherige, aber sie ist eine einfache Möglichkeit, einen einfachen animierten Zahlenzähler mit einem Shortcode zu Ihrer Website hinzuzufügen.

Laden Sie zunächst das Counter Number Plugin herunter, installieren und aktivieren Sie es auf Ihrer WordPress-Site.

Gehen Sie dann in Ihrem WordPress-Adminbereich zu Counter Numbers » All Counters und klicken Sie auf die Schaltfläche Add New Counter.

Auf dem nächsten Bildschirm sehen Sie einen einfachen Drag & Drop Zähler-Builder. Geben Sie also einen Titel für Ihren Zähler ein und scrollen Sie dann nach unten zum Abschnitt Zähler-Zahl hinzufügen.

Es sind bereits standardmäßig 3 Zähler eingerichtet. Löschen Sie 2 davon, indem Sie auf das Papierkorbsymbol klicken, und bearbeiten Sie dann den verbleibenden Zähler.

In den Zählereinstellungen können Sie einen Titel hinzufügen, ein Zählersymbol auswählen und einen numerischen Wert eingeben.

Auf der rechten Seite können Sie dann Folgendes ändern:

• Symbolfarbe und -größe
• Farbe und Größe des Zählertitels
• Farbe und Größe der Zählernummer
• Schriftstärken
• Schriftfamilie

Sie können das Zählersymbol auch ausblenden, wenn Sie möchten. Wenn Sie mit dem Aussehen Ihres Zählers zufrieden sind, kopieren Sie den Shortcode und klicken Sie dann auf Veröffentlichen.

Jetzt sind Sie bereit, Ihren Zähler zu einem Beitrag oder einer Seite hinzuzufügen. Erstellen oder bearbeiten Sie also eine WordPress-Seite oder einen Beitrag. Suchen Sie dann den Abschnitt der Seite, den Sie möchten, und fügen Sie Ihren Shortcode direkt in einen neuen Absatzblock ein.

Klicken Sie abschließend auf Aktualisieren oder Veröffentlichen. Wenn Sie Ihre Seite in der Vorschau anzeigen, zählt der Zahlenzähler automatisch hoch.

FAQs zu animierten WordPress-Zahlenzählern

Welchen Plan benötige ich, um den Zählerblock in SeedProd zu verwenden?

Der Zählerblock ist ein PRO-Block, der in den Plänen Plus, Pro und Elite von SeedProd verfügbar ist. Die kostenlose Version von SeedProd enthält den Zählerblock nicht.

Wenn Sie den kostenlosen Plan nutzen und animierte Statistikzähler wünschen, ist das Counter Number Plugin (Methode 2 oben) eine solide kostenlose Alternative.

Kann ich einen animierten Zähler zu jeder WordPress-Seite hinzufügen oder nur zu Landingpages?

Mit SeedProd können Sie den Zählerblock zu jedem Seitentyp hinzufügen, einschließlich vollständiger WordPress-Theme-Vorlagen, Landingpages, "Demnächst verfügbar"-Seiten und benutzerdefinierten 404-Seiten.

Mit dem Counter Number Plugin können Sie Ihren Zähler mit dem generierten Shortcode zu jedem Beitrag, jeder Seite oder jedem Widget-Bereich hinzufügen.

Wie stelle ich sicher, dass der Zahlenzähler nur animiert wird, wenn er ins Bild gescrollt wird?

SeedProds Zählerblock animiert automatisch, wenn der Block in den Viewport gelangt. Es gibt keine zusätzliche Einstellung zum Umschalten. Sobald der Bereich in Sichtweite gescrollt wird, beginnt die Zähl animation.

Wenn Ihr Zähler ausgelöst wird, bevor er sichtbar ist, ist es normalerweise ein Caching-Plugin, das den Viewport-Trigger löscht. Versuchen Sie, Ihren Website-Cache nach der Veröffentlichung zu leeren.

Funktioniert der animierte Zähler auf Mobilgeräten?

Ja. SeedProds Zählerblock ist vollständig responsiv. Sie können auch separate Ausrichtungsoptionen für Mobilgeräte und Desktops direkt im Einstellungsbereich des Zählerblocks festlegen.

Das Counter Number Plugin wird ebenfalls als vollständig responsiv beschrieben, bietet jedoch weniger gerätespezifische Steuerelemente als SeedProd.

Kann ich SeedProds Zählerblock verwenden, ohne ein vollständiges Theme zu erstellen?

Ja. Der Zählerblock funktioniert auf eigenständigen SeedProd-Landingpages, sodass Sie den Theme Builder überhaupt nicht verwenden müssen.

Erstellen Sie eine neue Landingpage in SeedProd, ziehen Sie den Zählerblock auf die Leinwand und veröffentlichen Sie sie. Ihr bestehendes WordPress-Theme bleibt überall sonst auf Ihrer Website erhalten.

Ihre Statistiken verdienen mehr als eine statische Zahl auf der Seite. Mit beiden oben genannten Methoden können Sie in weniger als 10 Minuten einen funktionierenden animierten Zähler live schalten.

Bereit, benutzerdefinierte Zahlenzähler ohne Code zu erstellen?

Vielleicht möchten Sie auch die folgenden WordPress-Tutorials lesen:

• So fügen Sie Geschäftszeiten zu WordPress hinzu
• So dimmen Sie ein Hintergrundbild ohne CSS
• So fügen Sie Twitter-Widgets zu Ihrer WordPress-Site hinzu
• So fügen Sie Textanimationen in WordPress hinzu
• Die besten WordPress-Plugins für Business-Websites

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.