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.
💡Schnelle Antwort: So fügen Sie Zahlenanimationen hinzu
Wenn Sie es eilig haben, hier sind die beiden einfachsten Möglichkeiten, Zahlenzähler zu Ihrer Website hinzuzufügen:
- Methode 1: Verwenden Sie einen Page Builder (empfohlen). Dies ist die beste Option, wenn Sie eine hochkonvertierende Landingpage mit benutzerdefinierten Designs erstellen möchten. Wir empfehlen die Verwendung von SeedProd.
- Methode 2: Verwenden Sie ein kostenloses Plugin. Diese Methode ist ideal, wenn Sie einfach einen einfachen Zähler zu einem vorhandenen Blogbeitrag oder einer Seite hinzufügen möchten, ohne Code zu bearbeiten.
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 Zahlenanimationen (empfohlen)
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.
Hinweis: Für dieses Tutorial verwenden wir die SeedProd Pro-Version, da sie erweiterte Blöcke enthält und es Ihnen ermöglicht, einen Zähler hinzuzufügen. Es gibt auch eine SeedProd Lite-Version, die Sie kostenlos ausprobieren können.
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 ist ein Page Builder zu viel Aufwand, nur um einen einfachen Zahlenzähler hinzuzufügen. Dies gilt insbesondere, wenn Sie den Zähler zu einem vorhandenen Blogbeitrag oder einer Seite hinzufügen möchten.
Hier hilft das Counter Number Plugin. Es ist eine kostenlose Lösung, mit der Sie Zahlenanimationen mit Shortcodes überall auf Ihrer Website hinzufügen können.
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 die Website particle.js von Vincent Garreau verwenden, um Ihre Einstellungen zu bearbeiten und den Code zu generieren.
Sie können ihre Größe, Farbe, Form und Bewegung anpassen, und sie reagieren auf Benutzerinteraktionen wie Mausbewegungen oder Klicks.
Bei WPBeginner finden wir die integrierte Partikel-Hintergrundfunktion von SeedProd beeindruckend. Mit SeedProd ist die Integration von particle.js in Ihre Seiten einfach und erfordert keine Programmierung.
Wählen Sie einfach den benutzerdefinierten Stil aus und klicken Sie auf den Link in SeedProd, um Ihren benutzerdefinierten Partikel-Hintergrund zu generieren.
Um tiefer in diese Methode einzutauchen, lesen Sie unsere detaillierte Anleitung zum Hinzufügen eines animierten Hintergrunds in WordPress.
Häufig gestellte Fragen zum Hinzufügen von Zahlenzähler-Animationen
Hier sind einige Fragen, die unsere Leser häufig gestellt haben, bevor sie eine Zahlenanimationsfunktion in WordPress hinzugefügt haben:
Wie füge ich einen Zähler in WordPress hinzu?
Der einfachste Weg ist die Verwendung eines Plugins wie SeedProd oder Counter Number. Mit diesen Tools können Sie Zahlenzähler per Drag & Drop auf Ihre Seiten ziehen, ohne Code schreiben zu müssen.
Wie füge ich Animationen in WordPress hinzu?
Sie können Animationen mit einem Page Builder wie SeedProd hinzufügen. Wählen Sie einfach ein Element auf Ihrer Seite aus und wählen Sie einen Effekt wie Ausblenden, Zoomen oder Schieben.
Wie erstelle ich einen Countdown in WordPress?
Sie können einen Countdown mit dem Countdown-Block in SeedProd erstellen. Dies ist ideal, um auf Verkaufsseiten oder bald erscheinenden Seiten Dringlichkeit zu erzeugen.
Wie füge ich einen Zähler in CSS hinzu?
Sie können die CSS-Eigenschaft counter-increment verwenden, aber sie ist für Anfänger komplex. Wir empfehlen die Verwendung eines WordPress-Plugins, um animierte Zähler ohne Programmierung hinzuzufügen.
Wie füge ich animierte Icons in WordPress hinzu?
Sie können einen Page Builder wie SeedProd verwenden, um Icons mit Animationseffekten hinzuzufügen. Wählen Sie einfach ein Icon aus und wählen Sie einen Animationsstil aus dem Einstellungsmenü.
Wie erstelle ich eine nummerierte Liste in WordPress?
Sie können den Standard-Listenblock im WordPress-Editor verwenden. Wählen Sie einfach die Option nummerierte Liste aus der Symbolleiste und fügen Sie Ihre Elemente 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.
Jiří Vaněk
Ich benutze SeedProd wirklich gerne. Es ist einfach, elegant und sehr benutzerfreundlich, auch für Anfänger. Ein Zähler auf einer Website ist für viele Dinge nützlich, aber besonders wichtig ist er für mich auf persönlichen Portfolios, wo ich ihn verwende, um die Person, zu der das Portfolio gehört, hervorzuheben. SeedProd macht all das viel einfacher.
WPBeginner Support
Glad to hear you like the plugin
Admin