Widget-Einstellungen für Fortschrittsbalken

Eine einzige Fortschrittsleiste erzählt eine Geschichte Ein gestapeltes Set davon zeigt ein ganzes Skill-Set, eine Service-Aufstellung oder den Status eines Projekts, ohne dass der Leser dafür arbeitet Die Widget für Fortschrittsbalken In Master-Addons für Elementor Ist für den Fall gebaut Es gruppiert mehrere animierte Balken in einem Widget, so dass Sie so viele hinzufügen, wie Sie brauchen, und sie zusammen oder einen nach dem anderen stylen.

Betrachten Sie es als den mehrtaktigen Begleiter des Standalone Widget der Fortschrittsleiste. Anstatt für jede Metrik ein separates Widget zu streichen, verwalten Sie die gesamte Gruppe aus einem Panel. Jeder Balken erhält seinen eigenen Titel, Prozentsatz und seine eigene Farbe, während ein gemeinsam genutzter Style-Tab das Aussehen des Sets steuert.

Bevorzugen Sie zuerst zu schauen? Dieses kurze Tutorial geht durch das Widget Ende zu Ende, vom Ziehen in die Styling der Balken:

Was das Progress Bars Widget macht #

Das Widget rendert eine Liste horizontaler Balken, die beim Scrollen in die Ansicht von Null auf ihren eingestellten Wert animiert werden Jeder Balken zeigt links einen Titel, eine prozentuale Beschriftung und eine farbige Füllung, die mit der eingegebenen Zahl zusammenwächst.

Der Unterschied zum Single Bar Widget ist Struktur Hier leben die Balken im Inneren eines Repeaters namens Stats BarsSie fügen also Balken hinzu, duplizieren, ordnen und löschen sie, ohne die Leinwand zu berühren. Ein Widget, ein Satz Stilsteuerelemente und eine beliebige Anzahl von Balken.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Eine Seite im Elementor-Editor geöffnet, wo die Balken hingehen.

So fügen Sie das Widget Fortschrittsleisten hinzu #

Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Fortschrittsbalken, oder scrollen Sie nach unten in den Abschnitt Master Addons Sehen Sie sich hier die Namen an: es gibt zwei Widgets, die fast gleich lesen. Fortschrittsleiste Einzelbar ist, und Fortschrittsbalken Ist die Gruppe Drag Fortschrittsbalken Auf Ihre Seite.

Es wird mit drei bereits ausgefüllten Beispielleisten angezeigt, sodass Sie sofort ein funktionierendes Ergebnis sehen und von dort aus bearbeiten, anstatt leer zu beginnen.

Bearbeiten Sie jede Leiste im Register Inhalt #

Öffnen Sie die Inhalt Tab und Sie finden die Stats Bars Repeater Jede Zeile ist eine Leiste Klicken Sie auf eine Zeile, um sie zu erweitern, und Sie erhalten drei Einstellungen:

• Statistiken Titel: Die über der Leiste angezeigte Beschriftung, wie “Webdesign” oder “WordPress” Dieses Feld nimmt Elementor dynamische Tags, so dass Sie den Titel aus einem Postfeld, Autor Meta, oder einer anderen dynamischen Quelle ziehen können, indem Sie das Tag-Symbol verwenden.
• Prozentwert: Eine Zahl von 1 bis 100, die festlegt, wie weit der Balken gefüllt ist und was das Etikett liest Geben Sie ein 87 und der Balken füllt sich auf 87 Prozent.
• Barfarbe: Eine optionale Farbe für diesen einen Balken Lassen Sie sie leer, um die globale Aktive Balkenfarbe zu verwenden, oder stellen Sie sie hier ein, um die Gruppenfarbe für einen einzelnen Balken zu überschreiben.

Die Farbe pro Balken macht die Gruppe flexibel. Halten Sie jeden Balken auf einer Markenfarbe oder geben Sie jeder Metrik einen eigenen Farbton, damit sie auf einen Blick leicht zu unterscheiden sind.

Unbegrenzte Balken hinzufügen #

Um eine weitere Leiste hinzuzufügen, klicken Sie Artikel hinzufügen Unten im Repeater erscheint eine neue Leiste mit Standardwerten, die Sie umbenennen und festlegen können Es gibt keine Obergrenze, also bauen Sie so viele aus, wie der Inhalt benötigt Das Kopiersymbol in jeder Zeile dupliziert eine Leiste mit intakten Einstellungen, und das X-Symbol entfernt eine.

Der Reiter Inhalt hat auch eine Hilfe Docs Link zum schnellen Nachschlagen und ein Wrapper Link Option aus dem kostenlosen Wrapper Link Erweiterung, die das ganze Widget anklickbar macht Das kommt mir gelegen, wenn die Balken auf einer Karte sitzen, die irgendwo verlinkt.

Style jede Bar aus dem Style Tab #

Wechseln Sie zu den Stil Tab, um zu steuern, wie die ganze Gruppe aussieht Diese Einstellungen gelten für jede Leiste auf einmal, genau deshalb sind die Überschreibungen pro Leiste im Reiter Inhalt wissenswert Der Tab Stil bricht in Statistiken Bar, Statistiken Titel, Stats-prozentsatz, und Muster.

Statistiken Bar #

• Bar BG Farbe: Die Farbe der leeren Spur hinter jeder Füllung.
• Aktive Balkenfarbe: Die Standard-Füllfarbe für jede Leiste, die keine eigene Balkenfarbe im Inhaltsregister eingestellt hat.
• Vertikaler Abstand: Die Lücke zwischen gestapelten Stäben.
• Barhöhe: Wie dick die Balken sind, in Pixeln.
• Stats Bar Grenzradius: Runden die Ecken Die vier Werte für einen geraden Radius verknüpfen, oder Top, Right, Bottom, and Left separat einstellen.

Statistiken Titel #

In diesem Abschnitt wird das Etikett über jedem Balken gestylt.

• Ausrichtung: Links, in der Mitte oder rechts für den Titeltext.
• Farbe: Die Titelfarbe.
• Typografie: Volle Kontrolle über Schriftfamilie, Größe, Gewicht, Transformation und die restlichen Typoptionen von Elementor.

Stats-prozentsatz #

Das Prozentlabel bekommt eine eigene Steuerung Farbe und Typografie, so kann man die Zahl fett und groß machen oder ruhig stellen Darunter sitzt die Muster Abschnitt. Es stammt aus der freien Patterns-Erweiterung und fügt hinter dem gesamten Widget ein farbfestes Hintergrundmuster hinzu, nicht innerhalb der Balken.

Das Ergebnis auf der Seite #

Veröffentlichen oder sehen Sie sich die Seite an und die Balken werden von Null bis zu ihren eingestellten Werten animiert, wenn der Abschnitt in den Ansichtsfenster eintritt. Das Design wird durchgezogen: benutzerdefinierte Balkenfarben, Titelfarbe, Prozentgröße, Abstand und Höhe werden alle auf der Live-Seite angezeigt.

Häufige Anwendungsfälle #

• Fertigkeitsleisten Auf einer Über - oder Lebenslaufseite (Design, Entwicklung, Marketing).
• Servicestärken Auf einer Agenturseite ein Balken pro Angebot.
• Projekt - oder Kampagnenstatus Prozentsätze für die Fertigstellung dargestellt.
• Feature-bewertungen In einem Vergleichsblock, gepaart mit einem Vergleichstabelle.
• Stat Highlights Neben animierten Zahlen aus der Gegen-Up-Widget.

Tipps für die Arbeit mit Progress Bars #

• Legen Sie zuerst das Gruppenstyling fest und überschreiben Sie es dann. Wählen Sie Ihre aktive Balkenfarbe und Balkenhöhe einmal aus und fügen Sie dann nur dort eine Balkenfarbe hinzu, wo eine Leiste hervorstechen soll.
• Prozentsätze ehrlich halten. Die Zahl ist auch das Etikett, so dass ein auf 76 eingestellter Balken “76%” lautet.Match the fill to the real figur.
• Höhe und Radius zusammen stimmen. Ein höherer Balken mit passendem Radius lautet als abgerundete Pille; Ein dünner Balken mit großem Radius kann abgeschnitten aussehen.
• Dynamische Titel in Vorlagen verwenden. Wenn die Balken in einer Post- oder Archivvorlage liegen, verknüpfen Sie den Stats-Titel mit einem dynamischen Tag, sodass sich jeder Eintrag selbst beschriftet.
• Duplizieren statt umbauen. Das Kopiersymbol klont mit seiner Farbe und Typografie eine Leiste, was das Einrichten eines neuen Elements von Hand übertrifft.

Häufig gestellte Fragen #

Einwickelnd #

Das Progress Bars Widget verwandelt einen Stapel Metriken in einen aufgeräumten, animierten Block Fügen Sie Balken im Stats Bars Repeater hinzu, legen Sie jeden Titel und Prozentsatz fest, färben Sie sie einzeln oder als Gruppe und formen Sie das gesamte Set aus dem Style Tab heraus Für eine einzelne Standalone-Bar greifen Sie nach dem Widget der Fortschrittsleiste Stattdessen. durchsuchen Sie die vollständige Master Addons Widgets und Erweiterungen zu sehen, was man noch bauen kann, und die Widget-Seite für Fortschrittsbalken Für Demos. Das Widget ist kostenlos, ohne Pro-only-Optionen.