Zahlen überzeugen schneller als Sätze: 5,5 K-Benachrichtigungen geliefert, 120 M Videoaufrufe Die Gegen auf Widget in Master-Addons für Elementor Legt diese Statistiken in eine Reihe von Karten, die beim Scrollen der Besucher von Null aufwärts zä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 von Zählerelementen Jedes Element ist eine Statistik: eine Zahl, die beim Scrollen in Sicht von Null animiert, 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. Schnellere Animation, sauberere Karte, 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, 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 drehen sich die Zahlen von Null auf, während der Abschnitt in Sicht scrollt, und setzen sich dann auf die endgültigen Werte. 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 animiert schneller und liest sauberer als Zählen bis neun Ziffern.
- 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 auf der Bildlaufrolle von Null nach oben zählt, plus ein Präfix, Suffix, Titel und ein optionales Symbol oder Bild. Spalten, Symbolgröße und Kartenstil werden über das gesamte Set verteilt.
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 werden animiert, wenn das Widget in den Ansichtsfenster scrollt, wobei von Null bis zu dem von Ihnen eingestellten Wert gezählt wird Besucher, die in der Sektion ankommen, sehen das Count-up-Spiel einmal.
Kann ich ändern, wie viele Zähler hintereinander sitzen?
Ja. Der Spalten-Dropdown in Counter Up Content legt die Zeilenanzahl fest und verfügt über einen responsiven Umschalter, sodass ein vierspaltiges Desktop-Band auf Tablets und einer auf Telefonen auf zwei Spalten herunterfallen kann.
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, und überprüfen Sie die Preisseite Für Pro Extras wie Muster.
