Elementor-Fähigkeitsleisten-Widget: Mehrere Fortschrittsleisten in einer Liste
Das Master Addons Fortschrittsbalken Widget stapelt mehrere horizontale Fertigkeitsbalken in einem Widget Es ist kostenlos Fügen Sie für jede Fertigkeit, jeden Dienst oder jedes Ziel eine Leiste hinzu, geben Sie ihr einen Titel und einen Prozentsatz von 1 bis 100, und wählen Sie eine Farbe pro Leiste aus, wenn Sie mögen Die Balken füllen sich von Null, wenn sie in Sicht scrollen, mit dem Prozentsatz, der innerhalb jeder Leiste angezeigt wird Verwenden Sie es für Fähigkeiten auf einer ungefähren Seite, Projektstatus oder Umfrageergebnissen Suchen Sie stattdessen nach einem einzelnen Kreis oder Messgerät? Verwenden Sie die Fortschrittsanzeige Widget mit seinen Circle - und Fan-Voreinstellungen Für eine Leiste, die sich füllt, während Besucher durch einen Beitrag scrollen, verwenden Fortschrittsanzeige lesen.
So fügen Sie Fertigkeitsstäbe in Elementor hinzu
Sie benötigen Elementor und das kostenlose Plugin Master Addons Schauen Sie sich das an Fortschrittsbalken Dok.
- Überprüfen Sie, ob die Fortschrittsbalken unter eingeschaltet sind Master-Addons, Widgets.
- Suchen Sie im Elementor-Editor nach Fortschrittsbalken Und auf die Seite ziehen.
- Bearbeiten Sie in den Stats Bars die drei Beispielleisten und klicken Sie auf Element hinzufügen, um mehr zu erhalten.
- Legen Sie einen Titel und einen Prozentsatz für jeden Balken fest und eine Balkenfarbe, wenn Sie verschiedene Farben wünschen.
- Stellen Sie im Register Stil die Spur ein und füllen Sie Farben, Balkenhöhe, Abstand und Radius.
- Stylen Sie die Titel und Prozentsätze, sehen Sie sich dann die Seite in der Vorschau an und scrollen Sie zum Widget.
Fügen Sie so viele Fertigkeitsleisten hinzu, wie Sie benötigen
Bars leben in der Stats Bars Repeater im Reiter Inhalt Klicken Sie auf Element für jede Leiste hinzufügen, dann setzen Sie die Statistiken Titel (zum Beispiel “Webdesign”), die Prozentwert Von 1 bis 100 und optional Barfarbe Für diese Leiste Ziehen Sie Elemente, um sie neu zu ordnen Das Titelfeld akzeptiert Elementordynamische Tags.
- Beliebig viele Balken in einem Widget.
- Jeder Balken hat seinen eigenen Titel, Prozentsatz und Farbe.
- Balken ohne eigene Farbe verwenden die Aktive Balkenfarbe aus dem Register Stil.
Stil der Balken, Titel und Prozentsätze
Die Statistiken Bar Stilabschnittssätze Bar BG Color (die leere Spur), Active Bar Color (die Füllung), Vertical Spacing between Bars (5 bis 128 px), Bar Height (1 bis 96 px) und Stats Bar Border Radius für quadratische oder pillenförmige Stangen. Statistiken Titel Ausrichtung, Farbe und Typografie aufweist, und Stats-prozentsatz Farbe und Typografie für die Zahl in der Leiste hat.
- Getrennte Farben für die Strecke und die Füllung.
- Randradius in px oder % für abgerundete Balken.
- Fill-Animation wird einmal abgespielt, wenn das Widget in die Ansicht scrollt; Höhere Werte brauchen länger, um sie zu füllen.
Elementor-Fortschrittsleiste vs. Master-Addons-Fortschrittsleisten
Elementor hat ein kostenloses Progress Bar Widget, das einen Balken anzeigt Hier ist, wie die beiden vergleichen.
| Merkmal | Elementor-Fortschrittsleiste | Master Addons Fortschrittsbalken |
|---|---|---|
| Balken pro Widget | Eine | So viele, wie du hinzufügst |
| Farbe pro Balken | Ein Widget, eine Farbe | Ja, pro Repeater-Artikel |
| Text in der Leiste | Ja, benutzerdefinierter innerer Text | Nur Prozentanteil |
| Animieren, wenn in die Ansicht gescrollt wird | Ja | Ja |
| Dynamische Tags | Ja | Nur Titel |
| Kosten | Kostenlos | Kostenlos |
Für eine Leiste mit benutzerdefiniertem inneren Text reicht das Elementor-eigene Widget Für eine Liste von Fähigkeiten hält ein Progress Bars-Widget diese ausgerichtet.Verwandt: Fortschrittsanzeige Für Kreise und Messgeräte Fortschrittsanzeige lesen Für den Scroll-Fortschritt und Gegen auf Für animierte Zahlen.
Häufig gestellte Fragen für Fortschrittsbalken
Animieren die Balken, wenn sie in Sicht scrollen?
Ja. Jeder Balken füllt sich von Null auf seinen Wert, sobald das Widget in den Ansichtsfenster gelangt, die Füllung dauert etwa 20 Millisekunden pro Prozentpunkt, so dass ein 90% - Balken unter zwei Sekunden dauert Es gibt keine Einstellung, um die Geschwindigkeit zu ändern oder die Animation auszuschalten.
Ist das Progress Bars Widget kostenlos?
Ja. Progress Bars ist Teil des kostenlosen Master Addons Plugins mit jeder Content - und Style-Steuerung Es gibt keine Pro-Version dieses Widgets.
Sind die Fortschrittsbalken mobil responsive?
Ja. Die Balken nehmen die volle Breite ihrer Spalte ein, also schrumpfen sie mit dem Bildschirm Barhöhe und Vertical Spacing sind keine responsiven Bedienelemente, aber die Titel - und Prozenttypografie kann kleinere Schriftgrößen auf Tablet und Mobil verwenden.
Kann ich statt einer Volltonfarbe einen Farbverlauf für die aktive Balkenfarbe verwenden?
Nr. Bar BG Farbe, Aktive Balkenfarbe und die eigene Farbe jedes Balkens nehmen nur eine einfarbige Farbe an Wenn Sie eine Farbverlaufsfüllung benötigen, ist Kontaktieren Sie uns Und wir können einen CSS-Schnipsel vorschlagen.
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
