So zeigen Sie eine animierte Zahlenanzeige in WordPress an

Wahrscheinlich hat Ihre Website beeindruckende Zahlen zu teilen, wie z. B. Kundenzahl, jahrelange Erfahrung, erfolgreiche Projekte oder gewonnene Auszeichnungen.

Die Herausforderung besteht darin, dass die Besucher diese Erfolge tatsächlich bemerken und sich darum kümmern, anstatt einfach daran vorbeizuscrollen. Hier glänzen animierte Nummernzähler.

Wenn Ihre Statistiken von Null an hochzählen, während Besucher diesen Bereich erreichen, entsteht eine kleine Feier Ihres Erfolgs. Diese Bewegung erregt Aufmerksamkeit und lässt Ihre Erfolge bedeutsamer und vertrauenswürdiger erscheinen.

Durch unsere Erfahrung bei der Optimierung von WordPress-Sites für besseres Engagement haben wir festgestellt, dass das Hinzufügen dieser Animationen einfacher ist, als die meisten Leute denken.

Wir zeigen Ihnen genau, wie Sie sie mit 2 einfachen Methoden hinzufügen.

Bevor Sie eine Nummernzähl-Animation in WordPress hinzufügen... 📊

Bevor wir uns dem „Wie“ widmen, wollen wir kurz überlegen, wo diese animierten Zähler auf Ihrer WordPress-Website am besten funktionieren:

• Homepage Hero-Bereiche, um wichtige Erfolge hervorzuheben
• Produktseiten, um die Kundenzufriedenheitsraten hervorzuheben
• Über-uns-Seiten, um Meilensteine des Unternehmens anzuzeigen
• Landing Pages, um Social Proof hervorzuheben
• Preisabschnitte zur Darstellung der Kundenbasis oder der Einsparungen

Aus unserer Erfahrung haben wir festgestellt, dass die strategische Platzierung genauso wichtig ist wie die Animation selbst. Zum Beispiel nutzt OptinMonster effektiv einen Zahlenzähler, um monatliche Besucher-Sitzungen anzuzeigen, und platziert ihn genau dort, wo potenzielle Kunden ihre Entscheidungen treffen.

Das Hinzufügen und Anpassen einer Zahlenanzeige in WordPress erfordert normalerweise die Bearbeitung von Code. Dies kann für Anfänger, die keine Programmierkenntnisse haben, schwierig sein.

Lassen Sie uns nun sehen, wie Sie einen animierten Zahlenteller in WordPress anzeigen können. Wir werden 2 einfache Methoden mit einem Premium-Website-Builder und einem kostenlosen Plugin behandeln.

Sie können auf die unten stehenden Links klicken, um zu Ihrem bevorzugten Abschnitt zu springen:

• Option 1: Erstellen Sie eine Landingpage mit Nummernzähl-Animation mit einem Page Builder
• Option 2: Fügen Sie mit einem Plugin eine schnelle Zahlen-Animationsfunktion zu jeder Seite hinzu
• Bonus: Einen fesselnden animierten Hintergrund hinzufügen 🌟

Option 1: Erstellen Sie eine Landingpage mit Nummernzähl-Animation mit einem Page Builder

Wenn Sie eine Landingpage erstellen und die volle Kontrolle darüber haben möchten, wie Ihre Zahlenzähler aussehen und sich verhalten, ist ein Page Builder Ihre beste Wahl.

Wir haben im Laufe der Jahre Dutzende von WordPress-Seitenerstellern getestet, und SeedProd sticht durch seine umfangreichen Anpassungsoptionen, insbesondere für dynamische Elemente wie Zahlenzähler, immer wieder hervor.

Für weitere Informationen können Sie sich unsere ausführliche SeedProd-Bewertung ansehen.

Das erste, was Sie tun müssen, ist SeedProd zu installieren und zu aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung werden Sie von SeedProd aufgefordert, den Lizenzschlüssel einzugeben. Sie finden den Lizenzschlüssel in Ihrem Kundenbereich und in der Kaufbestätigungs-E-Mail.

Als Nächstes müssen Sie in Ihrem WordPress-Admin-Panel zu SeedProd » Landing Pages navigieren.

SeedProd ermöglicht es Ihnen, professionell gestaltete benutzerdefinierte Landing Pages zu erstellen, einschließlich einer Coming Soon-Seite, einer Wartungsmodus-Seite, einer Login-Seite und einer 404-Seite.

Klicken Sie auf die Schaltfläche „Neue Landingpage hinzufügen“.

Danach können Sie eine SeedProd-Vorlage für Ihre Landingpage auswählen und den animierten Nummernzähler anzeigen.

Fahren Sie einfach mit der Maus über eine Vorlage und klicken Sie auf den orangefarbenen Häkchen-Button.

Ein Popup-Fenster wird nun geöffnet. Geben Sie einfach einen Seitennamen und eine Seiten-URL ein.

Klicken Sie danach auf die Schaltfläche „Seite speichern und mit der Bearbeitung beginnen“.

Dies startet den SeedProd Drag-and-Drop-Builder.

Als Nächstes können Sie Ihre Seiten-Vorlage bearbeiten, indem Sie verschiedene Blöcke hinzufügen oder auf vorhandene Elemente auf der Seite klicken.

Um eine animierte Zahl hinzuzufügen, ziehen Sie einfach den Zählerblock aus dem Menü auf der linken Seite und legen Sie ihn auf der Vorlage ab.

Danach können Sie den Zählerblock auswählen, um ihn weiter anzupassen.

Zum Beispiel gibt es Optionen, um die Start- und Endzahlen des Zählers zu ändern, ein Präfix und Suffix für die Zahl einzugeben und den Titel zu bearbeiten.

Wechseln Sie als Nächstes zum Tab „Erweitert“ unter den Einstellungen des Zählerblocks auf der linken Seite.

Hier finden Sie weitere Optionen, um das Design, das Farbschema, die Abstände, die Schriftart und mehr für Ihren Zählerblock zu ändern.

Klicken Sie als Nächstes oben auf den Umschalter „Speichern“.

Sie können nun „Veröffentlichen“ aus dem Dropdown-Menü auswählen.

Um den animierten Zahlenzähler in Aktion zu sehen, besuchen Sie einfach Ihr WordPress-Blog.

So sah es auf unserer Demo-Website aus.

Option 2: Fügen Sie mit einem Plugin eine schnelle Zahlen-Animationsfunktion zu jeder Seite hinzu

Manchmal kann ein Seitenersteller zu viel sein, wenn alles, was Sie brauchen, ein einfacher Zahlenzähler ist. Hier kommt das Counter Number Plugin ins Spiel. Es ist eine kostenlose, leichtgewichtige Lösung, die eine Sache gut macht: Sie können Zahlenanimationen mit einfachen Shortcodes überall auf Ihrer Website hinzufügen.

Zuerst müssen Sie das Plugin Counter Number installieren und aktivieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie von Ihrem WordPress-Dashboard aus zu Zählernummern » Alle Zähler navigieren und auf die Schaltfläche „Neuen Zähler hinzufügen“ klicken.

Danach können Sie einen Titel für Ihre Zählernummer eingeben.

In der kostenlosen Version können Sie nur die einfache Designvorlage auswählen.

Als Nächstes können Sie Details zur Zählernummer hinzufügen. Es gibt Optionen, um den Titel des Zählers zu bearbeiten, ein Symbol auszuwählen und den Wert der Zählernummer einzugeben.

Sie können beliebig viele Zählernummern hinzufügen, indem Sie unten auf die Schaltfläche „Neuen Counterbox hinzufügen“ klicken.

Außerdem erhalten Sie weitere Anpassungsoptionen im Bedienfeld auf Ihrer rechten Seite.

Zum Beispiel können Sie mit dem Plugin die Farbe des Zählertitels, die Farbe der Zahl, die Symbolgröße, die Schriftgröße, die Schriftfamilie und mehr ändern.

Nachdem Sie die Änderungen vorgenommen haben, scrollen Sie zurück nach oben und veröffentlichen Sie Ihren Zähler.

Als Nächstes können Sie von Ihrem WordPress-Dashboard aus zu Zählernummern » Alle Zähler navigieren.

Kopieren Sie einfach den Zähler-Shortcode. Er wird ungefähr so aussehen:

[COUNTER_NUMBER id=41]

Anschließend können Sie dieses WordPress-Designelement überall auf Ihrer Website platzieren, von Beiträgen und Seiten bis hin zu Seitenleisten.

Fügen Sie einfach einen neuen Beitrag oder eine neue Seite hinzu oder bearbeiten Sie eine vorhandene. Sobald Sie sich im Inhaltseditor befinden, klicken Sie einfach auf das „+“-Zeichen und fügen Sie einen Shortcode-Block hinzu.

Als Nächstes können Sie den Shortcode für die Zählernummer in den Block einfügen.

Von hier aus können Sie Ihre Seite oder Ihren Beitrag in der Vorschau anzeigen und veröffentlichen, um die animierte Nummernzählung in Aktion zu sehen.

Bonus: Einen fesselnden animierten Hintergrund hinzufügen 🌟

Nachdem Sie Ihre Website mit ansprechenden Zahlenzählern verbessert haben, empfehlen wir Ihnen, ihre visuelle Attraktivität mit einem animierten Hintergrund zu steigern.

Dieses Element macht Ihre Seite interaktiver und fesselt die Aufmerksamkeit Ihres Publikums, sobald es eintrifft. Außerdem verleiht es ein hochwertiges Aussehen, ohne Ihre Inhalte zu überladen.

Eine einfache Möglichkeit, einen animierten Hintergrund hinzuzufügen, ist die Verwendung der particle.js-Bibliothek. Diese leichtgewichtige JavaScript-Bibliothek ermöglicht beeindruckende visuelle Effekte mit anpassbaren Partikeln.

Sie können ihre Größe, Farbe, Form und Bewegung anpassen, und sie reagieren auf Benutzerinteraktionen wie Mausbewegungen oder Klicks.

Bei WPBeginner haben wir die integrierte Partikel-Hintergrundfunktion von SeedProd als beeindruckend empfunden. Mit SeedProd ist die Integration von particle.js in Ihre Seiten einfach und erfordert keine Programmierung.

Es bietet verschiedene Animationsstile und Sie können benutzerdefinierte Partikeleffekte erstellen, die perfekt zu Ihrem Thema passen. Um tiefer in diese Methode einzutauchen, lesen Sie unseren detaillierten Leitfaden unter so fügen Sie einen animierten Hintergrund in WordPress hinzu.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine Zahlenanimationsanimation in WordPress anzeigen. Sie können auch unser Tutorial zu so fügen Sie einen animierten Hintergrund in WordPress hinzu und unsere Expertenauswahl der besten WordPress Theme Builder, um Ihr perfektes Theme zu gestalten.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.