Looking for an easy way to add number count animations to your WordPress website?
Animated counters are a great way to add interest and direction to your site. They illustrate important statistics, highlight accomplishments, and make your web page more engaging.
In this guide, I’ll show the best ways to add number count animations to WordPress without coding.
How to Add Number Count Animations in WordPress:
What Are Number Count Animations?
Number count animations show numbers increasing or decreasing in real-time. They’re commonly used on websites to highlight stats, milestones, or key numbers, drawing attention as the numbers count up or down to a set goal.
Sie können animierte Zählwerke auf verschiedene Weise verwenden:
- Zeigen Sie, wie viele Kunden Sie haben
- Anzeige der Anzahl der von Ihnen abgeschlossenen Projekte
- E-Mail-Abonnenten insgesamt anzeigen
- Feiern Sie die Anzahl Ihrer Geschäftsjahre
Statistics like this are effective social proof. Consumers generally find stats and figures trustworthy, which can help them convert quicker than usual.
Welcher Marke würden Sie mehr vertrauen: einer Marke mit 22 Kunden oder einer Marke mit einem Kundenstamm von mehr als 1 213 437 Kunden?
With that being said, here are 2 easy ways to add number count animations to your WordPress website.
1. Add Number Count Animations with SeedProd
For the first method, I’ll show you how to add animated number counters to your WordPress site using SeedProd.
SeedProd ist der beste Drag-and-Drop-Website- und Landing Page-Builder für WordPress. Mit seinem visuellen Live-Editor können Sie ganz einfach jede Art von WordPress-Layout ohne Code erstellen.
Mit SeedProd können Sie Folgendes herstellen:
- Benutzerdefinierte WordPress-Themen
- Landing Pages mit hoher Konversionsrate
- Demnächst erscheinende Seiten
- Bildschirme im Wartungsmodus
- WordPress-Anmeldeseiten
- Benutzerdefinierte 404-Seiten-Designs
- Inhaltsseiten wie Über uns, Dienstleistungen und Kontakt
- Und vieles mehr.
Mit vollständigen Website-Kits und Landing-Page-Vorlagen ist der Einstieg schnell und einfach. Außerdem können Sie jedes Design mit WordPress-Blöcken wie animierten Zählern, Textanimationen, Call-to-Action-Buttons, responsiven Galerien und 1-Klick-Anpassungen visuell anpassen.
Schritt 1. Installieren und Aktivieren von SeedProd
First, go to the SeedProd pricing page and choose your plan. For this guide, we’ll use SeedProd Pro for its drag-and-drop WordPress Theme Builder.
Loggen Sie sich anschließend in Ihr Konto-Dashboard ein und klicken Sie auf die Registerkarte 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 bei diesem Schritt Hilfe benötigen, folgen Sie diesen Anweisungen zur Installation und Aktivierung eines WordPress-Plugins.
After installing and activating the plugin, go to SeedProd’s Settings and enter the license key you copied earlier.
Klicken Sie nun auf die Schaltfläche Schlüssel überprüfen, um Ihre Lizenzdaten zu speichern.
Schritt 2. Ein WordPress-Layout erstellen
Der nächste Schritt ist die Erstellung eines neuen Layouts in WordPress. Sie können dies mit SeedProd tun, indem Sie entweder ein neues WordPress-Theme von Grund auf erstellen oder eine eigenständige Landing Page erstellen.
Beide Methoden nutzen den leistungsstarken Drag-and-Drop-Seiten-Builder, um Ihr Design anzupassen. Und Sie können den Counter-Block von SeedProd auf Themes und Landing Pages verwenden.
Als Entscheidungshilfe sollten Sie sich überlegen, welche Funktionen 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 für die Erstellung einzelner Seiten verwenden möchten, ist der Landing Page Builder die beste Lösung für Sie.
Sie können diese Schritt-für-Schritt-Tutorials für jede Option befolgen:
- Wie man ein benutzerdefiniertes WordPress-Theme erstellt
- Wie man eine WordPress Landing Page erstellt
Beide Anleitungen führen Sie durch die Auswahl einer Vorlage und das Verständnis des visuellen Editors. Sobald Sie mit der Funktionsweise vertraut sind, kommen Sie zu Schritt 3 zurück, um Anweisungen zum Hinzufügen des Zählerblocks zu Ihrem Entwurf zu erhalten.
Hinweis: Für dieses Tutorial verwenden wir den Theme Builder mit dem Headphone Shop Website-Kit.
Schritt 3. Hinzufügen des SeedProd Counter Blocks
Im nächsten Schritt fügen Sie den Counter-Block zu Ihrer Landing Page oder Ihrem WordPress-Theme-Design hinzu. 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 Ihren Entwurf öffnen, sehen Sie ein Layout ähnlich dem folgenden Screenshot:
Auf der linken Seite befinden sich Blöcke und Abschnitte, auf der rechten Seite eine Live-Vorschau Ihrer Seite.
Sie können auf eine beliebige Stelle in Ihrer Vorschau klicken, um den Inhalt zu bearbeiten und die Elemente der Vorlage anzupassen.
Es ist auch super einfach, neue Elemente per Drag & Drop zu Ihrer Seite hinzuzufügen. Wir zeigen Ihnen, wie Sie das mit dem Counter-Block machen.
Suchen Sie auf der linken Seite nach dem Counter-Block und ziehen Sie ihn auf Ihr WordPress-Design.
Sobald der Block platziert ist, können Sie ihn anklicken, um die verschiedenen Anpassungsoptionen zu sehen.
Mit dem Zählerblock können Sie:
- Hinzufügen eines Start- und Endwertes für die Zählung
- Geben Sie ein Nummernpräfix und -suffix ein
- Einstellen der Animationsdauer
- Wählen Sie ein Dezimaltrennzeichen oder ein Leerzeichen
- Einen Zählertitel hinzufügen
- Bearbeiten Sie die Ausrichtung auf Handy und Desktop
Plus, clicking the Advanced tab offers even more settings for styling your counter. For instance, you can change the counter and title fonts and colors, add shadow effects, adjust the spacing, and select visibility options for mobile and desktop devices.
Das Beste daran ist, dass Sie kein benutzerdefiniertes CSS, HTML, Jquery oder Javascript benötigen, um Ihren Zähler so zu gestalten, wie Sie es wünschen. Zeigen Sie einfach auf den Zähler und klicken Sie darauf, um ihn zu gestalten, und Ihr Stylesheet wird automatisch aktualisiert.
Fahren Sie mit der Anpassung Ihrer Seite fort, bis Sie mit dem Aussehen zufrieden sind. Klicken Sie dann auf die Schaltfläche Speichern in der oberen rechten Ecke, um Ihre Anpassungen zu speichern.
Schritt 4. Veröffentlichen Sie Ihre animierten Zähler
Nachdem Sie Ihre animierten Nummernzähler zu Ihrer benutzerdefinierten Seite hinzugefügt und Ihre Änderungen gespeichert haben, können Sie sie für Ihre Website-Besucher live schalten.
Wenn Sie eine eigenständige Landing Page 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 einen weiteren Schritt.
Beenden Sie den Seitenersteller, indem Sie auf das X-Symbol klicken, und schalten Sie dann im Dashboard des Themenerstellers den Schalter "SeedProd-Theme aktivieren " auf "Ja".
Das war's! Sie können nun eine Vorschau Ihres Entwurfs anzeigen, um die Animation Ihres Nummernzählers in Aktion zu sehen:
2. Add Number Count Animations Using Counter Number
If you’re not interested in using a drag-and-drop page builder to customize your WordPress site, there is another way to add number count animations to your site without writing code.
In diesem Fall können Sie ein kostenloses WordPress-Zähler-Plugin wie das Counter Number-Plugin von WPShopMart verwenden. Damit können Sie Ihrer Website vollständig responsive Zähler hinzufügen, um Zahlenstatistiken in Beiträgen, Seiten und Seitenleistenbereichen anzuzeigen.
Diese Methode bietet nicht so viele Anpassungsmöglichkeiten wie die vorherige, aber es ist eine einfache Möglichkeit, einen einfachen animierten Nummernzähler mit einem Shortcode zu Ihrer Website hinzuzufügen.
Um loszulegen, laden Sie das Zählernummern-Plugin herunter, installieren und aktivieren es auf Ihrer WordPress-Website.
Gehen Sie dann in Ihrem WordPress-Adminbereich zu Zählerzahlen " Alle Zähler und klicken Sie auf die Schaltfläche Neuen Zähler hinzufügen.
Auf dem nächsten Bildschirm sehen Sie eine einfache Drag-and-Drop-Zählererstellung. Geben Sie also einen Titel für Ihren Zähler ein und scrollen Sie dann nach unten zum Abschnitt Zählernummer hinzufügen.
There are already 3 counters set up by default. We’ll delete 2 of them by clicking the trashcan icon, then edit the remaining counter.
In den Zählereinstellungen können Sie einen Titel hinzufügen, ein Zählersymbol auswählen und einen Zahlenwert eingeben.
Auf der rechten Seite können Sie dann Folgendes ändern:
- Farbe und Größe des Symbols
- Farbe und Größe des Zählertitels
- Zählernummer, Farbe und Größe
- Schriftgewichte
- Schriftfamilie
Sie können das Zählersymbol auch ausblenden, wenn Sie dies wünschen. Wenn Sie mit dem Aussehen Ihres Zählers zufrieden sind, kopieren Sie den Shortcode und klicken Sie dann auf Veröffentlichen.
Jetzt können Sie Ihren Zähler zu einem Beitrag oder einer Seite hinzufügen. Erstellen oder bearbeiten Sie also eine WordPress-Seite oder einen Beitrag. Suchen Sie dann den gewünschten Abschnitt der Seite 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, wird der Nummernzähler automatisch hochgezählt.
Da haben Sie es!
Wir hoffen, dass dieser Leitfaden Ihnen geholfen hat, die beste Methode zum Hinzufügen von animierten Zählern zu WordPress zu finden.
Sind Sie bereit, benutzerdefinierte Nummernzähler ohne Code zu erstellen?
Vielleicht interessieren Sie sich auch für die folgenden WordPress-Tutorials:
- Hinzufügen von Geschäftszeiten zu WordPress
- Wie man ein Hintergrundbild ohne CSS dimmt
- So fügen Sie Twitter-Widgets zu Ihrer WordPress-Website hinzu
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte hinterlassen Sie einen Kommentar mit Ihren Fragen und Ihrem Feedback.
Sie können uns auch auf YouTube, X (früher Twitter) und Facebook folgen, um weitere hilfreiche Inhalte für Ihr Unternehmen zu erhalten.
Ich wünschte, ich könnte festlegen, ob die Dezimalstelle die Tausender- oder die Zehntelstelle bezeichnen soll, d. h. 1,400 Mio. $ gegenüber 1,4 Mio. $.
Das hängt im Allgemeinen von Ihren persönlichen Vorlieben ab, Kimber, und davon, was Sie für Ihre Zwecke für am sinnvollsten halten. Ich persönlich bin ein Fan von 1,4 Mio. $, weil es übersichtlicher ist.