Hinweis: Der folgende Artikel hilft Ihnen weiter: So erstellen Sie animierte Zahlenzähler in WordPress (2 Möglichkeiten)
Möchten Sie animierte Zahlenzähler zu Ihrer WordPress-Website hinzufügen?
Animierte Zähler sind eine großartige Möglichkeit, Ihrer Website Interesse und Orientierung zu verleihen. Sie können wichtige Statistiken veranschaulichen, Erfolge hervorheben und Ihre Webseite ansprechender gestalten.
In diesem Artikel zeigen wir die besten Möglichkeiten, animierte Zahlenzähler in WordPress einfach zu erstellen.
Was ist ein animierter Zahlenzähler?
Ein animierter Zahlenzähler ist ein Widget, das bis zu einer bestimmten Zahl hoch- oder runterzählt.
Sie ähneln Countdown-Timern, da sie schrittweise bis zum Ende eines Verkaufs oder einer Werbeaktion herunterzählen können. Sie können aber auch Zähler-Widgets einbetten, die hochzählen, um bestimmte Statistiken hervorzuheben.
Sie können animierte Zahlenzähler auf verschiedene Arten verwenden:
- Zeigen Sie, wie viele Kunden Sie haben
- Zeigen Sie die Anzahl der Projekte an, die Sie abgeschlossen haben
- Präsentieren Sie die Gesamtzahl der E-Mail-Abonnenten
- Feiern Sie Ihr langjähriges Firmenjubiläum
Quantifizierbare Statistiken wie diese sind eine wirksame Art von Social Proof. Verbraucher halten Statistiken und Zahlen im Allgemeinen für vertrauenswürdig, was ihnen helfen kann, schneller als gewöhnlich zu konvertieren.
Wem würden Sie mehr vertrauen: einer Marke mit 22 Kunden oder einer mit einem Kundenstamm von mehr als 1.213.437?
Vor diesem Hintergrund finden Sie hier zwei einfache Möglichkeiten, Ihrer WordPress-Website animierte Zahlenzähler hinzuzufügen.
1. So erstellen Sie benutzerdefinierte animierte Zahlenzähler mit SeedProd
Bei der ersten Methode zeigen wir Ihnen, wie Sie mit SeedProd animierte Zahlenzähler zu Ihrer WordPress-Site hinzufügen.
SeedProd ist der beste Drag-and-Drop-Website- und Landingpage-Builder für WordPress. Mit dem visuellen Live-Editor können Sie problemlos jede Art von WordPress-Layout ohne Code erstellen.
Mit SeedProd können Sie Folgendes erstellen:
Mit vollständigen Website-Kits und Landingpage-Vorlagen ist der Einstieg schnell und einfach. Darüber hinaus können Sie jedes Design mit WordPress-Blöcken wie animierten Zahlenzählern, Textanimationen, Call-to-Action-Schaltflächen, responsiven Galerien und 1-Klick-Anpassungen optisch anpassen.
Mit vollständiger WooCommerce-Unterstützung, E-Mail-Marketing-Integrationen und Kompatibilität mit beliebten WordPress-Plugins und -Themes ist SeedProd der schnellste und einfachste Weg, benutzerdefinierte WordPress-Designs zu erstellen, ohne einen Entwickler engagieren zu müssen.
Beginnen wir also mit diesem Tutorial und erfahren Sie, wie Sie mit SeedProd animierte Zahlenzähler erstellen.
Schritt 1. Installieren und aktivieren Sie SeedProd
Gehen Sie zunächst zur Preisseite von SeedProd und wählen Sie Ihren Plan aus. Für diese Anleitung verwenden wir SeedProd Pro für seinen Drag-and-Drop-WordPress-Theme-Builder.
Melden Sie sich als Nächstes bei Ihrem Konto-Dashboard an und klicken Sie auf Downloads Tab. Klicken Sie auf diesem Bildschirm auf Laden Sie das SeedProd-Plugin herunter Klicken Sie auf die Schaltfläche und kopieren Sie Ihren Lizenzschlüssel.
Gehen Sie nun zu Ihrer WordPress-Website und laden Sie die ZIP-Datei des Plugins hoch. Wenn Sie bei diesem Schritt Hilfe benötigen, befolgen Sie diese Anweisungen auf Installieren und Aktivieren eines WordPress-Plugins.
Gehen Sie nach der Installation und Aktivierung des Plugins zu SeedProd » Einstellungen und geben Sie den zuvor kopierten Lizenzschlüssel ein.
Klicken Sie nun auf Schlüssel überprüfen Klicken Sie auf die Schaltfläche, um Ihre Lizenzdetails zu speichern.
Schritt 2. Erstellen Sie ein WordPress-Layout
Im nächsten Schritt erstellen Sie ein neues Layout in WordPress. Sie können dies mit SeedProd tun, indem Sie entweder ein neues WordPress-Theme von Grund auf 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 Counter-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 komplett individuelles Website-Design von Grund auf ohne Code zu erstellen.
Wenn Sie jedoch Ihr aktuelles WordPress-Theme behalten und SeedProd zum Erstellen einzelner Seiten verwenden möchten, ist der Landing Page Builder die beste Lösung.
Sie können diesen Schritt-für-Schritt-Anleitungen für jede Option folgen:
Beide Anleitungen führen Sie durch die Auswahl einer Vorlage und das Verständnis des visuellen Editors. Sobald Sie mit der Funktionsweise vertraut sind, kehren Sie zu Schritt 3 zurück, um Anweisungen zum Hinzufügen des Counter-Blocks zu Ihrem Design zu erhalten.
Note: Für dieses Tutorial verwenden wir den Theme Builder mit dem Headphone Shop-Website-Kit.
Schritt 3. Fügen Sie den SeedProd Counter Block hinzu
Der nächste Schritt besteht darin, den Counter-Block zu Ihrer Landingpage oder Ihrem WordPress-Theme-Design hinzuzufügen. Also klicken 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:
Auf der linken Seite befinden sich Blöcke und Abschnitte und 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 beliebige Vorlagenelemente anzupassen.
Es ist auch ganz einfach, neue Elemente per Drag & Drop zu Ihrer Seite hinzuzufügen. Wir zeigen Ihnen, wie das mit dem Counter-Block geht.
Suchen Sie im linken Bereich nach Schalter blockieren und auf Ihr WordPress-Design ziehen.
Sobald der Block vorhanden ist, können Sie darauf klicken, um die verschiedenen Anpassungsoptionen anzuzeigen.
Mit dem Counter-Block können Sie:
- Fügen Sie einen Anfangs- und einen Endzählwert hinzu
- Geben Sie ein Zahlenpräfix und -suffix ein
- Legen Sie die Animationsdauer fest
- Wählen Sie ein Dezimal- oder Leerzeichentrennzeichen
- Fügen Sie einen Zählertitel hinzu
- Bearbeiten Sie die Ausrichtung auf Mobilgeräten und Desktops
Klicken Sie außerdem auf das Registerkarte „Erweitert“. bietet noch mehr Möglichkeiten für die Gestaltung Ihrer Theke. Sie können beispielsweise die Schriftarten und Farben für Zähler und Titel ändern, Schatteneffekte hinzufügen, den Abstand anpassen und Sichtbarkeitsoptionen für Mobil- und Desktop-Geräte auswählen.
Das Beste daran ist, dass kein benutzerdefiniertes CSS, HTML, JQuery oder Javascript erforderlich ist, damit Ihr Zähler genau so aussieht, wie Sie es möchten. Zeigen und klicken Sie einfach, um Ihren Zahlenzähler zu formatieren, und Ihr Stylesheet wird automatisch aktualisiert.
Passen Sie Ihre Seite weiter an, bis Sie mit dem Aussehen zufrieden sind. Klicken Sie dann auf Speichern Klicken Sie oben rechts auf die Schaltfläche, 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, können Sie sie für Ihre Website-Besucher live schalten.
Wenn Sie eine eigenständige Zielseite erstellen, klicken Sie einfach auf den Abwärtspfeil auf der Schaltfläche „Speichern“ und wählen Sie aus Veröffentlichen. Wenn Sie jedoch den Theme Builder verwenden, gibt es noch einen weiteren Schritt.
Beenden Sie den Seitenersteller, indem Sie auf das X-Symbol klicken und dann im Theme-Builder-Dashboard das Symbol aktivieren Aktivieren Sie das SeedProd-Theme schalten Sie auf die Position „Ja“.
Das ist es! Sie können jetzt eine Vorschau Ihres Designs anzeigen, um die Animation Ihres Zahlenzählers in Aktion zu sehen:
2. Verwendung des Counter Number WordPress Plugins
Wenn Sie nicht daran interessiert sind, einen Drag-and-Drop-Seitenersteller zum Anpassen Ihrer WordPress-Site zu verwenden, gibt es eine andere Möglichkeit, animierte Zahlenzähler zu Ihrer Site hinzuzufügen, ohne Code schreiben zu müssen.
In diesem Fall können Sie ein kostenloses WordPress-Zahlenzähler-Plugin wie das verwenden Counter Number-Plugin von WPShopMart. Damit können Sie vollständig responsive Zähler zu Ihrer Website hinzufügen, um Zahlenstatistiken zu Beiträgen, Seiten und Seitenleistenbereichen anzuzeigen.
Diese Methode umfasst nicht so viele Anpassungsoptionen wie die vorherige, ist aber eine einfache Möglichkeit, Ihrer Website mit einem Shortcode einen einfachen animierten Zahlenzähler hinzuzufügen.
Laden Sie zunächst das Counter Number-Plugin herunter, installieren Sie es und aktivieren Sie es auf Ihrer WordPress-Site.
Dann geh zu Zählernummern » Alle Zähler Klicken Sie in Ihrem WordPress-Administrationsbereich auf Neuen Zähler hinzufügen Taste.
Auf dem nächsten Bildschirm sehen Sie einen einfachen Drag-and-Drop-Counter-Builder. Geben Sie also einen Titel für Ihren Zähler ein und scrollen Sie dann nach unten Zählernummer hinzufügen Abschnitt.
Standardmäßig sind bereits 3 Zähler eingerichtet. Wir löschen zwei 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 Zahlenwert eingeben.
Anschließend können Sie auf der rechten Seite 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 können Sie Ihren Zähler zu einem Beitrag oder einer Seite hinzufügen. Erstellen oder bearbeiten Sie also eine WordPress-Seite oder einen WordPress-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 eine Vorschau Ihrer Seite anzeigen, zählt der Zahlenzähler automatisch hoch.
Hier hast du es!
Wir hoffen, dass dieser Leitfaden Ihnen dabei geholfen hat, die beste Methode zum Hinzufügen animierter Zahlenzähler zu WordPress zu finden.
Sind Sie bereit, benutzerdefinierte Zahlenzähler ohne Code zu erstellen?
Es könnte Ihnen auch Spaß machen, die folgenden WordPress-Tutorials zu lesen:
Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.
