Skillbars, Finanzierungsziele und Projektstatus lesen sich als Bild besser als als eine in einem Satz vergrabene Zahl. Die freie Widget der Fortschrittsleiste 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 beim Laden der Seite diesen Wert ausfüllt 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 Installationsführung.
- 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 (die Widget für 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 Duplicate (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: Bewegen Sie die Blase nach oben oder unten gegen die 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, und Wert. Wenn die freie Muster Erweiterung eingeschaltet ist, ein Muster Abschnitt für dekorative Überlagerungen erscheint auch in dieser Registerkarte.
- Titel: Farbe und Typografie für das Etikett.
- Vordere Bar: Die Farbe und Breite des gefüllten Teils.
- Rückleiste: Die Farbe und Breite der unausgefü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 es möchten, kopieren Sie ihn dann und ändern Sie Titel und Wert.
- Halten Sie die Waage ehrlich. Der Wert ist ein Prozentsatz, 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 eingefä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, einmal Der Balken füllt sich in etwa einer Sekunde von Null auf seinen Wert, wenn die Seite geladen wird, nicht wenn er in Sicht scrollt, also zeigen Balken, die in der Nähe der Oberseite platziert sind, die Bewegung am besten an Es funktioniert auf der Linie, Kreis, und Lüftervoreinstellungen 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. Eine Übersicht und einen Vergleich mit der Progress Bar von Elementor finden Sie in der Elementorkreis-Fortschrittsleisten-Widget Seite. Zu verwandten Widgets siehe Fortschrittsbalken Für Fertigkeitsbalken Fortschrittsanzeige lesen Für einen Scroll-Indikator ist der Gegen-Up-Widget 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.
