Elementor Skill Bars Widget: Flere fremskridtsstænger på én liste
Master Addons Progress Bars widget stabler flere vandrette færdighedsbjælker i en widget. Det er gratis. Tilføj en bjælke for hver færdighed, service eller mål, giv den en titel og en procentdel fra 1 til 100, og vælg en farve pr. bjælke, hvis du vil. Bjælkerne udfyldes fra nul, når de ruller til visning, med procentdelen vist inde i hver bjælke. Brug den til færdigheder på en om side, projektstatus eller undersøgelsesresultater. Leder du efter en enkelt cirkel eller måler i stedet? Brug Progress Bar widget med sine Circle og Fan presets. For en bar, der fyldes som besøgende rulle gennem et indlæg, brug Læsning Progress Bar.
Sådan tilføjes færdighedsstænger i Elementor
Du skal bruge Elementor og det gratis Master Addons plugin. Tjek dette Fremskridtsbjælker docs.
- Kontrollér, at Progress Bars er slået til under Master Addons, Widgets.
- I Elementor-editoren skal du søge efter Progress Bars og træk det ind på siden.
- I Stats Bars skal du redigere de tre eksempelbjælker og klikke på Tilføj element for mere.
- Indstil en titel og en procentdel for hver bjælke og en bjælkefarve, hvis du vil have forskellige farver.
- I fanen Stil skal du indstille spor- og fyldfarver, streghøjde, afstand og radius.
- Style titlerne og procenterne, og forhåndsvisning derefter siden og rulle til widget.
Tilføj så mange færdighedsstænger, som du har brug for
Barer bor i Stats Barer repeater i fanen Indhold. Klik på Tilføj element for hver bjælke, og indstil derefter Stats Titel (for eksempel “Web Design”), den Procentværdi fra 1 til 100, og en valgfri Bar Farve for den pågældende bjælke. Træk elementer for at omarrangere dem. Titelfeltet accepterer Elementor dynamiske tags.
- Et vilkårligt antal søjler i én widget.
- Hver bjælke har sin egen titel, procent og farve.
- Stænger uden deres egen farve bruger Active Bar Color fra fanen Style.
Style stængerne, titlerne og procenterne
The Stats Bar style sektionssæt Bar BG Color (det tomme spor), Active Bar Color (fyldet), Lodret afstand mellem søjler (5 til 128px), Bar Height (1 til 96px) og Stats Bar Border Radius til firkantede eller pilleformede søjler. Stats Titel har justering, farve og typografi, og Stats Procent har farve og typografi for nummeret inde i bjælken.
- Adskil farver til sporet og fyldet.
- Kanteradius i px eller % for afrundede stænger.
- Udfyld animation afspilles én gang, når widgetten ruller til syne; højere værdier tager længere tid at udfylde.
Elementor Progress Bar vs Master Addons Progress Bars
Elementor har en gratis Progress Bar widget, der viser en bar. Her er, hvordan de to sammenligne.
| Feature | Elementor Progress Bar | Master Addons Progress Bars |
|---|---|---|
| Barer pr. widget | One | Så mange som du tilføjer |
| Farve pr. bar | En widget, en farve | Ja, pr. repeater-vare |
| Tekst inde i bjælken | Ja, brugerdefineret indre tekst | Kun procent |
| Animér, når du ruller til syne | Ja | Ja |
| Dynamiske tags | Ja | Kun titel |
| Omkostning | Free | Free |
For en bjælke med brugerdefineret indre tekst er Elementors egen widget nok. For en liste over færdigheder holder en Progress Bars-widget dem justeret. Relateret: Progress Bar til cirkler og målere, Læsning Progress Bar for rullefremskridt, og Counter Up for animerede numre.
Ofte stillede spørgsmål til fremskridtsstænger
Animerer søjlerne, når de ruller til syne?
Ja. Hver bjælke udfylder fra nul til dens værdi, når widgetten kommer ind i viewport. Fyldet tager omkring 20 millisekunder pr. procentpoint, så en 90% bjælke tager under to sekunder. Der er ingen indstilling til at ændre hastigheden eller slå animationen fra.
Er Progress Bars widget gratis?
Ja. Progress Bars er en del af det gratis Master Addons plugin med hvert indhold og stil kontrol. Der er ingen Pro version af denne widget.
Er statuslinjerne responsive på mobilen?
Ja. Søjlerne tager den fulde bredde af deres kolonne, så de krymper med skærmen. Søjlehøjde og Lodret afstand er ikke responsive kontroller, men titlen og procent typografi kan bruge mindre skriftstørrelser på tablet og mobil.
Kan jeg bruge et forløb for den aktive stregfarve i stedet for en ensfarvet?
Nej. Bar BG Color, Active Bar Color og hver bars egen farve tager kun en ensfarvet farve. Hvis du har brug for en gradientfyldning, kontakt os og vi kan foreslå et CSS-uddrag.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
