So fügen Sie einen animierten Zahlenzähler in WordPress hinzu (2 einfache Wege) 

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.

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 der beste Drag & Drop Website- und Landingpage-Builder für WordPress. Sein Live-Visual-Editor ermöglicht es Ihnen, ganz einfach jede Art von WordPress-Layout ohne Code zu erstellen.

Sie können SeedProd verwenden, um Folgendes zu erstellen:

• Benutzerdefinierte WordPress-Themes
• Hochkonvertierende Landingpages
• „Demnächst verfügbar“-Seiten
• Wartungsmodus-Bildschirme
• WordPress-Login-Seiten
• Benutzerdefinierte 404-Seiten-Designs
• Inhaltsseiten wie Über uns, Dienstleistungen und Kontakt
• Und vieles mehr.

Der Einstieg ist schnell und einfach mit vollständigen Website-Kits und Landingpage-Vorlagen. Außerdem können Sie jedes Design visuell mit WordPress-Blöcken anpassen, wie z. B. animierte Zahlenzähler, Textanimationen, Call-to-Action-Schaltflächen, responsive Galerien und 1-Klick-Anpassungen.

Schritt 1. SeedProd installieren und aktivieren

Gehen Sie zuerst zur SeedProd Preisübersicht und wählen Sie Ihren Plan. Für diese Anleitung verwenden wir SeedProd Pro wegen seines Drag-and-Drop WordPress Theme Builders.

Melden Sie sich als Nächstes in Ihrem Konto-Dashboard an und klicken Sie auf den Tab Downloads. Klicken Sie auf diesem Bildschirm auf die Schaltfläche SeedProd Plugin herunterladen und kopieren Sie Ihren Lizenzschlüssel.

Wechseln Sie nun zu Ihrer WordPress-Website und laden Sie die .zip-Datei des Plugins hoch. Wenn Sie Hilfe bei diesem Schritt benötigen, folgen Sie dieser Anleitung zur Installation und Aktivierung eines WordPress-Plugins.

Nachdem Sie das Plugin installiert und aktiviert haben, gehen Sie zu den 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 Methoden verwenden den leistungsstarken Drag-and-Drop-Seitenersteller, um Ihr Design anzupassen. Und Sie können den Zähler-Block von SeedProd für Themes und Landingpages 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 Landingpage Builder Ihre beste Lösung.

Sie können diese Schritt-für-Schritt-Anleitungen für jede Option befolgen:

• So erstellen Sie ein benutzerdefiniertes WordPress-Theme
• So erstellen Sie eine WordPress-Landingpage

Beide Anleitungen führen Sie durch die Auswahl einer Vorlage und das Verständnis des visuellen Editors. Sobald Sie sich mit der Funktionsweise vertraut gemacht haben, kehren Sie zu Schritt 3 zurück, um Anweisungen zum Hinzufügen des Zähler-Blocks zu Ihrem Design zu erhalten.

Hinweis: Wir verwenden für dieses Tutorial den Theme Builder mit dem Website-Kit „Headphone Shop“.

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

Der nächste Schritt besteht darin, den Zähler-Block zu Ihrer Landingpage 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 wir ein WordPress-Theme anpassen, beginnen wir 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.

Es ist auch super einfach, neue Elemente per Drag & Drop zu Ihrer Seite hinzuzufügen. Wir zeigen Ihnen, wie das mit dem Zähler-Block geht.

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 die Registerkarte Erweitert noch mehr Einstellungen zur 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 Mobil- und Desktop-Geräte auswählen.

Das Beste daran ist, dass Sie kein benutzerdefiniertes CSS, HTML, Jquery oder Javascript benötigen, um Ihren Zähler genau so aussehen zu lassen, wie Sie es möchten. Zeigen und klicken Sie einfach, 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 Landingpage erstellen, klicken Sie einfach 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:

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

Wenn Sie keinen Drag & Drop Page Builder verwenden möchten, um Ihre WordPress-Site anzupassen, gibt es eine andere Möglichkeit, Zahlen-Animations-Zähler zu Ihrer Website hinzuzufügen, ohne Code schreiben zu müssen.

In diesem Fall können Sie ein kostenloses WordPress-Plugin für Zahlenzähler wie das Counter Number Plugin von WPShopMart verwenden. Es ermöglicht Ihnen, vollständig responsive Zähler zu Ihrer Website hinzuzufügen, um Zahlenstatistiken in Beiträgen, Seiten und Sidebar-Bereichen 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 » Alle Zähler und klicken Sie auf die Schaltfläche Neuen Zähler hinzufügen.

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 gibt bereits 3 standardmäßig eingerichtete Zähler. Wir löschen 2 davon, indem wir auf das Papierkorbsymbol klicken, und bearbeiten 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

Da haben Sie es!

Wir hoffen, dieser Leitfaden hat Ihnen geholfen, die beste Methode zum Hinzufügen von animierten Zahlenzählern zu WordPress zu finden.

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.