Kostenloses Elementorkreis-Fortschrittsleisten-Widget
Das kostenlose Progress Bar Widget von Elementor zeichnet eine gerade Linie Das Progress Bar Widget in Master Addons ist ebenfalls kostenlos, und es kann die Leiste als Linie, als Linie mit einer prozentualen Blase, als Vollkreis oder als Halbkreis-Fächeranzeige zeichnen Geben Sie ihm einen Titel und einen Wert von 0 bis 100, wählen Sie eine Stilvoreinstellung aus, dann färben Sie die gefüllte Leiste und die Spur dahinter Es funktioniert gut für Finanzierungsziele, Kursfortschritt, Bewertungen und Einzelstatistiken Für eine Liste von Fertigkeitsleisten innerhalb eines Widgets verwenden Sie Fortschrittsbalken. Für eine Leiste, die sich füllt, während Besucher durch einen Beitrag scrollen, verwenden Sie Fortschrittsanzeige lesen.
So fügen Sie eine Circle Progress Bar in Elementor hinzu
Das Widget ist Teil des kostenlosen Master Addons Plugins, daher benötigen Sie nur Elementor und Master Addons.
- Installieren und aktivieren Master Addons von WordPress.org.
- Bearbeiten Sie Ihre Seite mit Elementor und durchsuchen Sie das Widgets-Panel nach Fortschrittsleiste.
- Ziehen Sie es in eine Spalte Für eine Kreisreihe legen Sie in jede Spalte ein Widget.
- Geben Sie im Inhalt den Titel ein und legen Sie den Wert von 0 bis 100 fest.
- Stellen Sie im Stil, im allgemeinen Stil, Stilvoreinstellungen auf Kreis oder auf Fächer für eine halbe Kreislehre ein.
- Legen Sie die Farben und Breiten der Vorder- und Rückleiste fest und gestalten Sie dann den Titel- und Werttext.
Jede Einstellung wird in der Einstellungen für das Widget der Fortschrittsleiste Führung.
Line-, Line Bubble-, Circle- und Fan-Voreinstellungen
Wählen Sie die Form in Stil, allgemeine Stile StilvoreinstellungenLinie ist ein flacher horizontaler Balken mit dem Titel darüber Line Bubble fügt ein rundes Etikett hinzu, das bis zum Füllpunkt gleitet und den Prozentsatz anzeigt Kreis zeichnet einen vollen Ring mit dem Wert in der Mitte, und Fan zeichnet eine halbe Kreislehre.
- Wechseln Sie jederzeit die Voreinstellungen und Titel, Wert und Farben bleiben so, wie sie sind.
- Blasenfarbe Setzt die Füllung der Blase auf Line Bubble.
- Blasenposition Verschiebt die Blase nach oben oder unten gegen die Stange.
Titel und Wert
Die Registerkarte Inhalt hat zwei Felder. Titel ist das Etikett, wie Fundraising-Ziel oder Kursfortschritt. Wert Ist eine Zahl von 0 bis 100 (standardmäßig 60), die festlegt, wie weit sich der Balken, der Ring oder die Anzeige füllt, und die als Prozentsatz angezeigt wird.
- Die Füllung wird beim Laden der Seite über etwa eine Sekunde von Null auf Ihren Wert animiert.
- Es gibt kein benutzerdefiniertes Maximum, daher werden 45 von 60 Lektionen als 75 Unterrichtsstunden angeboten.
- Ein Widget ist ein Indikator Duplizieren Sie es, um eine Kreisreihe oder einen Zeilenstapel zu erstellen.
Styling der vorderen und hinteren Bar
Vordere Leiste Ist das gefüllte Teil und Rückleiste Ist die Spur dahinter Jede hat ihre eigene Farbe und eine Breitenzahl für die Strichstärke, standardmäßig 5. Eine dicke Frontleiste über einer dünneren Lichtspur ist gut lesbar, besonders auf den Circle - und Fan-Voreinstellungen.
- Die Standardfarben sind Lila (#704aff) auf einem hellgrauen (#ddd) Track.
- Farben sind solide Es gibt keine Möglichkeit zum Füllen von Farbverläufen.
- Breite ist eine Zahl für alle Geräte, also überprüfen Sie das Ergebnis auf Mobilgeräten.
Titel und Werttext
Die Titel und Wert Stilabschnitte haben jeweils einen Farbwähler und eine vollständige Typografiegruppe, sodass der Prozentsatz größer oder fett als das Etikett sein kann. Bei den Voreinstellungen für Kreis und Ventilator befindet sich der Wert innerhalb der Form.
- Der Titel wird als H6-Überschrift ausgegeben und standardmäßig auf Schwarz.
- Wertfarbe und Typografie gelten auch für das Line Bubble-Etikett.
Elementor-Fortschrittsleiste vs. Master-Addons-Fortschrittsleiste
Beide Widgets sind kostenlos Die Progress Bar von Elementor ist eine gerade Leiste, die eine Textzeile darin aufnehmen kann Master Addons fügt runde Formen hinzu, sodass die Wahl meist auf die Form ankommt, die Sie benötigen.
| Merkmal | Elementor-Fortschrittsleiste | Master Addons Fortschrittsleiste |
|---|---|---|
| Preis | Kostenlos in Elementor | Kostenlos in Master Addons |
| Formen | Nur Linie | Linie, Linienblase, Kreis und Fächer |
| Wert | Prozent-Slider mit dynamischen Tags | Anzahl von 0 bis 100 |
| Text | Titel mit HTML-Tag-Auswahl, Anzeigeprozentsatz, Innerer Text | Titel (H6) und ein Prozentlabel |
| Bargröße | Höhen- und Grenzradius | Breite der vorderen und hinteren Stange |
| Farben | Balkenfarbe und Hintergrundfarbe | Farben der vorderen und hinteren Stange, Blasenfarbe |
| Animation | Füllt sich, wenn die Leiste in Sicht scrollt | Füllt sich, wenn die Seite geladen wird |
Verwenden Sie das Widget von Elementor für eine einfache Zeile, die animiert wird, wenn Besucher es erreichen oder seinen Wert aus einem dynamischen Tag ziehen Verwenden Sie Master-Addons, wenn Sie einen Ring oder eine Anzeige wünschen Verwandte kostenlose Widgets: Fortschrittsbalken Für Fertigkeitsleisten in einem Widget Fortschrittsanzeige lesen Für einen Scroll-Fortschrittsindikator und Gegen auf Für animierte Zahlen.
Häufig gestellte Fragen für Progress Bar
Was ist der Unterschied zwischen Progress Bar, Progress Bars und Reading Progress Bar?
Progress Bar (dieses Widget) ist ein Indikator, der als Linie, Linie mit Blase, Kreis oder Lüfteranzeige angezeigt wird Die Fortschrittsbalkenelement Ist eine Liste horizontaler Fertigkeitsleisten, die Sie in einem Widget hinzufügen. Fortschrittsanzeige lesen Erweiterung ist, die anzeigt, wie weit ein Besucher durch die Seite gescrollt hat.
Wird die Fortschrittsleiste animiert, wenn sie in Sicht scrollt?
Nein. Die Füllung läuft in etwa einer Sekunde von Null auf Ihren Wert, sobald die Seite geladen wird, sodass eine Leiste weit unten auf der Seite möglicherweise beendet wird, bevor sie jemand sieht. Elementors eigene Fortschrittsleiste und das Master Addons Fortschrittsleisten-Widget beginnen beide mit dem Füllen, wenn sie in Sichtweite kommen.
Ist das Master Addons Progress Bar Widget kostenlos?
Ja. Es kommt mit dem kostenlosen Master Addons Plugin auf WordPress.org, und alle vier Presets sind ohne Pro Lizenz enthalten.
Kann ich einen Kreisfortschrittsbalken für eine Punktzahl von 100 erstellen?
Ja. Stilvoreinstellungen auf Kreis und Wert auf die Punktzahl setzen, zum Beispiel 85. Der Ring füllt sich auf 85 Prozent mit 85% in der Mitte Für eine Punktzahl aus einer anderen Zahl, konvertieren Sie ihn zuerst in einen Prozentsatz, da das Widget kein benutzerdefiniertes Maximum hat.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
