Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man in WordPress eine Animation zum Zählen von Zahlen anzeigt

Suchen Sie nach einer Möglichkeit, einen animierten Nummernzähler auf Ihrer WordPress-Seite anzuzeigen?

Die Anzeige von Zahlen erhöht die Aufmerksamkeit Ihrer Besucher und ermöglicht es Ihnen, Meilensteine, zufriedene Kunden, erfolgreich abgeschlossene Projekte und andere wichtige Statistiken auf Ihrer Website anzuzeigen.

In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress eine Animation zum Zählen von Zahlen anzeigen können.

How to show a number count animation in WordPress

Warum eine Animation zum Zählen von Zahlen in WordPress hinzufügen?

Die Anzeige eines Zahlenzählers auf Ihrer WordPress-Website ist eine großartige Möglichkeit, die Nutzer zu fesseln und ihre Aufmerksamkeit zu erregen.

Sie können damit wichtige Statistiken zu Ihrer Website anzeigen, z. B. die Anzahl der monatlichen Besucher oder die Anzahl der Artikel in einem WordPress-Blog.

In ähnlicher Weise können Sie eine animierte Zählung verwenden, um abgeschlossene Projekte, die Anzahl zufriedener Kunden, die Anzahl der Klienten, erreichte Meilensteine Ihres Unternehmens und andere wichtige Informationen anzuzeigen.

OptinMonster verwendet zum Beispiel einen Zähler, um die monatlichen Besuchersitzungen optimiert darzustellen.

Number counter at OptinMonster

Das Hinzufügen und individuelle Anpassen einer Zählung in WordPress erfordert normalerweise die Bearbeitung von Code. Das kann für Anfänger, die nicht wissen, wie man Code schreibt, schwierig sein.

Sehen wir uns also an, wie Sie in WordPress einen animierten Nummernzähler anzeigen können. Wir werden 2 einfache Methoden mit einem Premium-Website-Builder und einem kostenlosen Plugin vorstellen.

Sie können auf die unten stehenden Links klicken, um zu dem von Ihnen gewünschten Abschnitt zu springen:

Der beste Weg, einen animierten Nummernzähler in WordPress einzufügen, ist die Verwendung von SeedProd. Es ist der beste WordPress Page-Builder, der viele Optionen für die individuelle Anpassung bietet.

Für dieses Tutorial werden wir die SeedProd Pro-Version verwenden, 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.

Als Erstes müssen Sie SeedProd installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

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

Entering the SeedProd license key

Als Nächstes müssen Sie in Ihrem WordPress-Administrationsbereich zu SeedProd “ Landing Pages wechseln.

Mit SeedProd können Sie professionell gestaltete benutzerdefinierte Landing Pages erstellen, einschließlich einer „Demnächst“-Seite, einer Wartungsmodus-Seite, einer Login-Seite und einer 404-Seite.

Klicken Sie nun auf die Schaltfläche „Neue Landing Page hinzufügen“.

Click the Add New Landing Page button

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

Bewegen Sie einfach den Mauszeiger über eine Vorlage und klicken Sie auf die orangefarbene Schaltfläche mit dem Häkchen.

Select a page template

Es öffnet sich nun ein Popup-Fenster. Geben Sie einfach einen Seitennamen und eine Seiten-URL ein.

Klicken Sie anschließend auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“.

Enter a Page Name and Page URL

Dadurch wird der SeedProd Drag-and-Drop-Builder gestartet.

Anschließend können Sie Ihre Seitenvorlage bearbeiten, indem Sie verschiedene Blöcke hinzufügen oder auf vorhandene Elemente auf der Seite klicken.

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

Add the counter block

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

So gibt es Optionen, um die Start- und Endnummer des Zählers zu ändern, ein Zahlenpräfix und -suffix einzugeben und den Titel zu bearbeiten.

Edit the title of the counter

Als nächstes können Sie auf die Registerkarte „Erweitert“ unter den Zählerblockeinstellungen auf der linken Seite wechseln.

Hier finden Sie weitere Optionen zum Ändern von Stil, Farbe, Abstand, Schriftart und mehr für Ihren Zählerblock.

Edit the color and style of the block

Klicken Sie dann oben auf die Schaltfläche „Speichern“.

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

Save and publish your changes

Um den animierten Nummernzähler in Aktion zu sehen, besuchen Sie einfach Ihre WordPress-Website.

So sah es auf unserer Website aus.

Number counter preview

Methode 2: Zählanimation mit Zählernummer anzeigen

Eine weitere Möglichkeit, in WordPress eine Animation zum Zählen von Zahlen einzufügen, ist die Verwendung des Plugins Counter Number.

Es ist ein kostenloses WordPress Plugin, das einfach zu benutzen ist und mit dem Sie einfache Zähler für Ihre Website erstellen können.

Zunächst 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 in Ihrem WordPress-Dashboard zu Zählerzahlen “ Alle Zähler gehen und auf die Schaltfläche „Neuen Zähler hinzufügen“ klicken.

Add a new counter

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. Wenn Sie mehr Vorlagen und Anpassungsmöglichkeiten wünschen, empfehlen wir Ihnen die Verwendung von SeedProd.

Enter a name for the counter and select a template

Als nächstes können Sie Details zur Zählernummer hinzufügen. Sie haben die Möglichkeit, den Titel des Zählers zu bearbeiten, ein Symbol auszuwählen und den Wert der Zählernummer einzugeben.

Sie können so viele Zählernummern hinzufügen, wie Sie möchten, indem Sie unten auf die Schaltfläche „Neues Zählfeld hinzufügen“ klicken.

Add counter details

Außerdem erhalten Sie weitere Anpassungsoptionen über das Panel auf der rechten Seite.

Mit dem Plugin können Sie beispielsweise die Farbe des Zählertitels, die Farbe der Zahlen, die Größe des Symbols, die Schriftgröße, die Schriftfamilie und vieles mehr ändern.

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

Publish your counter number

Als Nächstes können Sie in Ihrem WordPress-Dashboard zu Zählerzahlen “ Alle Zähler gehen.

Kopieren Sie den Shortcode für den Zähler. Er wird ungefähr so aussehen:

[COUNTER_NUMBER id=41]

Copy the shortcode for counter

Danach können Sie Ihre animierte Zahlenzählung ü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 einen bestehenden Beitrag. Sobald Sie sich im Inhaltseditor befinden, klicken Sie einfach auf das „+“-Zeichen und fügen einen Shortcode-Block hinzu.

Adding a shortcode block to WordPress

Anschließend 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 Zählung in Aktion zu sehen.

Free plugin counter number preview

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man in WordPress eine Zählanimation anzeigt. Sehen Sie sich auch unsere Anleitung zum Hinzufügen eines animierten Hintergrunds in WordPress und unsere Expertenauswahl der besten WordPress Theme-Builder an, um Ihr perfektes Theme zu gestalten.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

Kommentare

  1. Herzlichen Glückwunsch, du hast die Möglichkeit, der erste Kommentator dieses Artikels zu sein.
    Hast du eine Frage oder Anregung? Bitte hinterlasse einen Kommentar, um die Diskussion zu starten.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.