Zahlen überzeugen schneller als Sätze: 5,5 K-Benachrichtigungen geliefert, 120 M Videoaufrufe Die Gegen-Up-Widget In Master-Addons für Elementor Legt diese Statistiken in eine Reihe von Karten, die beim Laden der Seite von Null hochzählen, jeweils mit einem Symbol, einem Suffix wie K+ oder M+ und einem eigenen Design.
Diese Anleitung erstellt von Grund auf einen Abschnitt mit vier Statuten: Elemente, Zahlen, Symbole, Layout und Kartendesign, der mit den fertigen Zählern auf der Live-Seite endet.
Was das Counter Up Widget macht #
Ein Widget hält einen Satz Zählerelemente Jedes Element ist eine Statistik: eine Zahl, die beim Laden der Seite von Null nach oben zählt, ein Präfix oder Suffix darum herum, ein Titel darunter und ein optionales Symbol oder Bild oben drauf Das Widget ordnet die Elemente in Spalten an und stylt sie als Gruppe, sodass ein Statistikband ohne Herumfummeln pro Karte konsistent bleibt.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Das im Master Addons-Optionsfeld unter Basis-Widgets aktivierte Counter Up-Widget.
- Ihre reellen Zahlen Ein Statistikabschnitt mit erfundenen Figuren schadet mehr als gar keine Statistiken.
So fügen Sie das Counter Up-Widget hinzu #
Suchen Sie im Elementor-Editor nach Elemente Panel für Gegen auf Und auf die Seite ziehen Es lädt mit bereits auf der Leinwand zählenden Sample-Items, so dass die Animation von der ersten Sekunde an sichtbar ist.
Richten Sie jedes Gegenelement ein #
Offen Inhalte aufheben und klicken Sie auf ein Element in der Liste. Jedes trägt den vollständigen Satz von Per-Stat-Steuerelementen:
- Typ: Keines, Symbol oder Bild oben auf dem Stat. Symbol öffnet die Elementorbibliothek; Bild öffnet die Mediathek.
- Titel: Das Label unter der Nummer, wie “Mitteilungen geliefert”.
- Nummernpräfix und Suffix: Text um die Zahl herum Ein Präfix “$” oder ein Suffix “K+” verwandelt 5,5 in $5,5 oder 5,5 K+.
- Nummer: Der Wert, auf den der Zähler klettert Dezimalstellen funktionieren, also lautet 5,5 mit einem K+-Suffix 5,5 K+.
- Hintergrund: Eine Kartenfarbe pro Element, für den Zeitpunkt, an dem ein Status hervorstechen sollte.
Der Suffix-Trick hält große Zahlen kurz: Statt auf 120.000.000 zu animieren, zählt die Demo mit einem M+-Suffix auf 120. Die Karte bleibt sauberer, und niemand zählt die Nullen, um sie zu überprüfen.
Der Pro-Item Hintergrund Farben nur diese Karte Nützlich, um eine Schlagzeilen-Statistik hervorzuheben, oder überspringen Sie sie und lassen Sie die gemeinsame Box-Stil alle vier handhaben:
Wählen Sie Spalten und Inhaltsposition #
Unterhalb der Artikelliste, die Spalten Legt fest, wie viele Zähler sich eine Zeile teilen (1, 2, 3, 4 oder 6), mit einem responsiven Umschalter pro Gerät. Inhaltliche Position Platziert den Titel relativ zur Zahl: oben, links, rechts oder unten Die Demo versucht es mit 2 Spalten mit nebeneinander liegender Nummer und Titel und legt sich dann wieder auf 4 gestapelten Spalten ab.
Stimmen Sie die Symbole #
Die Symboleinstellungen Abschnitt steuert den Symbolblock auf jeder Karte: Symbol-/bildposition (links, oben oder rechts der Statistik), Symbolgröße, und Symbolkreis oder Bildgröße Für die farbige Scheibe hinter der Glyphe Die Demo läuft mit 30 Pixel-Icons auf 86 Pixel-Kreisen.
Die Karten stylen #
In der Stil Tab Counter Up Box-Stil Deckt den Shared Card Look ab: Hintergrundfarbe, Polsterung, Marge, Grenztyp, Grenzradius, und Kastenschatten. Die Demo landet auf weichrosa Karten mit 20 Pixel Polsterung und Rand, die die vier Statistiken ohne harte Ränder trennt.
Gestalten Sie die Zahlen, Titel und Symbole #
Die Inhaltlicher Stil Abschnitt in vier Gruppen aufgeteilt, eine pro Element auf der Karte:
- Symbolstil: Die Glyphenfarbe und die Kreisfarbe dahinter Die Demo färbt die Kreise mit weißen Icons tiefviolett.
- Zahlenstil: Farbe und Typografie für den Stat selbst, den größten Text auf der Karte.
- Zahlenpräfix: Seine eigene Farbe, Typografie, Größe und Marge, sodass ein Währungssymbol kleiner als die Zahl sitzen kann.
- Titelstil: Farbe, Typografie und Rand für das Etikett.
Das Ergebnis auf der Seite #
Auf der Live-Seite zählen die Zahlen nach dem Laden der Seite etwa zwei Sekunden lang von Null nach oben und setzen sich dann mit den Endwerten ab. Hier ist das fertige Band:
Häufige Anwendungsfälle #
- Unternehmensstatistiken Bänder: betreute Kunden, gelieferte Projekte, Geschäftsjahre.
- SaaS-Beweisabschnitte: Benutzer, Betriebszeit, Integrationen.
- Portfolionummern: Kampagnen laufen, Einnahmen generiert, Stunden der Bearbeitung.
- Gemeinnützige Wirkung: gelieferte Mahlzeiten, Freiwillige, gesammelte Gelder.
- Kurs - und Community-Seiten: Schüler, Unterricht, Bewertungen.
Tipps für bessere Zähler #
- Suffixe für große Zahlen verwenden. Zählen bis 120 mit einem M+-Suffix liest sich sauberer als Zählen bis neun Ziffern.
- Zähler hoch auf der Seite platzieren. Die Zählung läuft einmal, wenn die Seite geladen wird, sodass Zähler weit unter der Falte möglicherweise beendet werden, bevor jemand zu ihnen scrollt.
- Halten Sie das Set auf drei oder vier Statistiken. Sechs Zähler treten gegeneinander an; vier werden gelesen.
- Führe mit der stärksten Zahl. Besucher lesen von links nach rechts und beenden die Reihe möglicherweise nicht.
- Symbolkreise mit Ihrer Palette abgleichen. Die Kreisfarbe ist die sichtbarste Stilwahl auf der Karte; Die Lila-in-Rosa-Funktionen der Demo funktionieren, da beide aus einer Palette stammen.
- Überprüfen Sie die Anzahl der mobilen Spalten. Vier Spalten auf einem Telefon drücken die Zahlen zusammen; Das responsive Spaltensteuerelement repariert es mit einem Klick.
Video-Tutorial #
Wenn Sie das Counter Up-Widget in Aktion sehen möchten, durchläuft dieses Video das gesamte Setup, vom ersten Element bis zum animierten Statistikband auf der Live-Seite:
Häufig gestellte Fragen #
Was ist das Counter Up Widget in Master Addons?
Es handelt sich um ein Elementor-Widget für animierte Statistikabschnitte Jedes Element enthält eine Zahl, die beim Laden der Seite von Null aufwärts zählt, plus ein Präfix, Suffix, Titel und ein optionales Symbol oder Bild. Spalten, Symbolgröße und Kartenstil werden im gesamten Set gemeinsam genutzt.
Wie zeige ich 120 M+ statt 120000000?
Setzen Sie die Zahl auf 120 und das Zahlensuffix auf M+ Der Zähler animiert auf 120 und zeigt 120 M+ an, das gleiche funktioniert für K+ tausende und Dezimalwerte wie 5,5 mit einem K+ Suffix.
Kann jeder Zähler sein eigenes Symbol und seine eigene Farbe haben?
Ja. Jedes Element wählt sein eigenes Symbol oder Bild über die Typsteuerung aus, und jedes Element hat seine eigene Hintergrundfarbe. Gemeinsame Symbolgröße, Kreisgröße und Kartenstil stammen von Symboleinstellungen und der Registerkarte Stil.
Wann startet die Zählanimation?
Die Zahlen zählen von Null bis zu dem Wert, den Sie beim Laden der Seite festlegen, über etwa zwei Sekunden Die Animation wird einmal abgespielt und wartet nicht, bis das Widget in die Ansicht scrollt.
Kann ich ändern, wie viele Zähler hintereinander sitzen?
Ja. Der Columns-Dropdown in Counter Up Content bietet 1, 2, 3, 4 oder 6 Spalten mit einem responsiven Umschalter, sodass ein vierspaltiges Desktop-Band auf Tablets und einem auf Telefonen auf zwei Spalten herunterfallen kann.
Wie unterscheidet sich Counter Up vom Elementor Counter-Widget?
Elementorzähler zeigt eine Zahl pro Widget an und lässt Sie die Startnummer, Dauer und Tausend-Trennzeichen festlegen, und es zählt, wenn die Zahl in Sicht scrollt Counter Up hält viele Zähler in einem Widget mit Symbolen, Kartenstyling und 1, 2, 3, 4 oder 6 Spalten, und es zählt einmal auf Seiten laden.
Einwickelnd #
Das Counter Up-Widget verwandelt einfache Zahlen in ein Statistikband, das sich bewegt: Symbole, Präfixe und Suffixe pro Element, gemeinsame Spalten und Kartenstyling sowie eine Count-up-Animation, die genau einmal den Blick auf sich zieht Durchsuchen Sie den gesamten Satz von Master Addons Widgets und Erweiterungen Um zu sehen, was sonst noch mit dem Plugin ausgeliefert wird Die Counter Up Produktseite Vergleicht es mit dem Elementor Counter Widget.
