Fertigkeitsbalken, Finanzierungsziele und Projektstatus lesen sich als Bild besser als als eine in einem Satz vergrabene Zahl. Die Fortschrittsanzeige Widget in Master-Addons für Elementor Gibt Ihnen eine animierte Leiste mit einem Titel und einem Prozentsatz sowie einem Dropdown der Stilvoreinstellungen, der zwischen einer einfachen Linie, einer Linie mit einer Blase, einem Vollkreis und einem Halbkreismesser wechselt.
Sie legen einen Titel und einen Wert fest, wählen eine Voreinstellung aus und färben dann die vordere Leiste, die hintere Leiste und den Wert so, dass sie zu Ihrer Marke passen. Diese Anleitung deckt jede Einstellung im Widget ab.
Was das Progress Bar Widget macht #
Das Widget rendert einen Fortschrittsindikator: einen Titel, einen Prozentwert und einen Balken, der diesen Wert ausfüllt, wenn er in Sicht scrollt Die Stilvoreinstellungen Dropdown verändert die Form, sodass derselbe Wert als horizontale Linie, Linie mit einer schwimmenden Blase, Donut-Kreis oder Halbkreisanzeige angezeigt werden kann.
Es hat drei Laschen. Inhalt Titel und den Wert hält. Stil Steuert die Voreinstellung, die Vorder- und Rückleistenfarben, die Blase, den Titel und den Werttext. Fortgeschritten Die üblichen Elementorabstände und Sichtbarkeitsoptionen trägt.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsanleitung.
- Die Etiketten und Prozentsätze, die Sie anzeigen möchten, wie WordPress 60% oder Java 85%.
So fügen Sie das Widget der Fortschrittsleiste hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Fortschrittsleiste, oder scrollen Sie zum Abschnitt Master Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es auf Ihre Seite und es wird mit einer einzigen Leiste geladen, die zum Bearbeiten bereit ist.
Kopf hoch: es gibt zwei ähnliche Widgets. Fortschrittsleiste ist ein einzelner Balken (dieser Leitfaden) und Fortschrittsbalken Stapelt mehrere Balken innerhalb eines Widgets Für ein paar unabhängige Balken in verschiedenen Stilen ist die einzelne Progressbar die flexible Wahl.
Legen Sie den Titel und den Wert fest #
Öffnen Sie die Inhalt Tab. Es gibt nur zwei Felder, wodurch die Einrichtung schnell bleibt.
- Titel: Das Label über der Leiste, wie WordPress oder Design.
- Wert: Der Prozentsatz, den der Balken füllt, beträgt 0 bis 100.
Da jede Progressbar eine Leiste ist, baut man durch Duplizieren des Widgets eine Menge auf, klickt mit der rechten Maustaste darauf und wählt Duplizieren (oder drückt Strg/Cmd + D), dann ändert man auf jeder Kopie Titel und Wert, so sind die obigen WordPress - und Java-Balken nebeneinander gelandet.
Wählen Sie eine Stilvoreinstellung #
Wechseln Sie zu den Stil Tab und öffnen Allgemeine Stile. Die Stilvoreinstellungen Dropdown ist, wo Sie die Form wählen Die Linienblase Voreingestellt fügt eine schwebende Blase hinzu, die den Prozentsatz anzeigt und am Ende der Füllung läuft.
- Stilvoreinstellungen: Linie, Linienblase, Kreis und Lüfter (eine Halbkreisspur).
- Blasenfarbe: Die Farbe der prozentualen Blase auf der Blase voreingestellt.
- Blasenposition: Stupsen Sie die Blase entlang der Stange.
Kreis- und Halbkreismessvoreinstellungen #
Die Kreis Voreingestellt zeichnet einen vollen Donut mit dem Prozentsatz in der Mitte, der zu einem kompakten Stat-Block passt.
Die Fan Voreingestellt zeichnet eine Halbkreisanzeige, die gut zu einer Wertung im Armaturenbrett-Stil oder einem Tacho-Look passt.
Stil die Bar-Teile #
Die Stil Tab zerlegt das Widget in Teile, die Sie selbst stylen können: Allgemeine Stile, Titel, Vordere Leiste, Rückleiste, Wert, und Muster (eine Pro-Option).
- Titel: Farbe und Typografie für das Etikett.
- Vordere Bar: Die Farbe und Breite des gefüllten Teils.
- Rückleiste: Die Farbe der ungefüllten Spur dahinter.
- Wert: Farbe und Typografie für den Prozenttext.
Offen Vordere Leiste Füllfarbe und - breite einzustellen Dies ist es, was Ihre Markenfarbe über den gesamten Balken oder die gesamte Stärke trägt.
Häufige Anwendungsfälle #
- Fertigkeitsleisten Auf einer Über- oder Lebenslaufseite (WordPress 90%, Design 75%).
- Fördermittel oder Zielzähler Zeigen, wie nah eine Kampagne ist.
- Kreisstatistiken in einem Dienst - oder Ergebnisblock.
- Halbkreismessgeräte Für Scores, Bewertungen oder Dashboard-Widgets.
- Projektstatus Balken auf einer Client - oder Portfolioseite.
Tipps für die Arbeit mit dem Progress Bar Widget #
- Duplizieren, dann bearbeiten. Stylen Sie einen Balken so, wie Sie möchten, kopieren Sie ihn dann und ändern Sie Titel und Wert.
- Halten Sie die Waage ehrlich. Der Wert ist prozentual, 60 bedeutet also 60 Prozent voll.
- Passen Sie den Kontrast zwischen Vorder- und Rückleiste an. Ein Lichtweg hinter einer Markenfarbenfüllung liest sich deutlich.
- Verwenden Sie die Blase für genaue Zahlen. Die Line Bubble-Voreinstellung gibt den Prozentsatz direkt auf die Füllung.
- Wählen Sie die Form für den Kontext. Linien für Fertigkeitslisten, Kreise und Lüfter für einzelne herausragende Statistiken.
Sehen Sie sich das Video-Tutorial an #
Folgen Sie lieber auf dem Bildschirm? Das Video-Tutorial unten durchläuft das Element Fortschrittsleiste von Anfang bis Ende und zeigt, wie jede Stilvoreinstellung, Farbe und jeder Wert im Elementor-Editor funktioniert.
Häufig gestellte Fragen #
Was ist das Progress Bar Widget in Master Addons?
Es handelt sich um ein Elementor-Widget, das einen animierten Fortschrittsindikator mit einem Titel und einem Prozentsatz anzeigt. Ein Dropdown der Style-Voreinstellungen wechselt zwischen einer Zeile, einer Zeile mit einer Blase, einem Vollkreis und einem Halbkreismessgerät, und Sie färben jedes Teil aus dem Elementor-Panel.
Welche Fortschrittsbalkenstile enthält das Widget?
Vier Voreinstellungen: Linie, Linienblase, Kreis und Fächer. Linie ist ein schlichter horizontaler Balken, Linienblase fügt eine schwebende prozentuale Blase hinzu, Kreis zeichnet einen vollen Donut mit dem Wert in der Mitte und Fan zeichnet eine Halbkreisanzeige Der Wert bleibt bei allen gleich.
Kann ich in Elementor eine kreisförmige oder Messfortschrittsleiste erstellen?
Ja. Stilvoreinstellungen auf Kreis für einen vollen Donut mit dem Prozentsatz in der Mitte setzen, oder auf Fächer für einen Halbkreis-Gauge Beide animieren zu dem Wert, den Sie eingestellt haben und können durch die Abschnitte Front Bar und Back Bar im Register Stil gefärbt werden.
Wie füge ich mehrere Fortschrittsbalken hinzu?
Jedes Progressbar-Widget ist ein Balken, duplizieren Sie also das Widget und ändern Sie den Titel und den Wert auf jeder Kopie Platzieren Sie die Kopien in Spalten für eine Reihe von Fertigkeitsleisten Für mehrere Balken, die innerhalb eines Widgets verwaltet werden, verwenden Sie stattdessen das separate Progressbars-Widget.
Animiert die Fortschrittsleiste?
Ja. Die Leiste füllt sich auf ihren Wert, wenn sie in Sicht scrollt, so dass eine Fertigkeitsliste oder - eichung animiert wird, wenn der Besucher sie erreicht Der Effekt funktioniert über die Zeilen, Kreis - und Lüftervoreinstellungen hinweg gleich.
Einwickelnd #
Das Progress Bar-Widget verwandelt einen einfachen Prozentsatz in eine animierte Linie, Blase, einen Kreis oder eine Anzeige. Legen Sie einen Titel und einen Wert fest, wählen Sie eine Voreinstellung aus und färben Sie dann die vordere Leiste, die hintere Leiste und den Wert so, dass sie zu Ihrem Design passen. Zu verwandten Statistik-Widgets siehe die Gegenwidget und die Info-Box-WidgetDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
