Gratis Elementor Circle Progress Bar Widget
Elementors gratis Progress Bar widget trækker en lige linje. Progress Bar widget i Master Addons er også gratis, og det kan tegne linjen som en linje, en linje med en procentvis boble, en hel cirkel eller en halv cirkel fan gauge. Giv den en titel og en værdi fra 0 til 100, vælg en stil forudindstillet, og farvelæg derefter den fyldte bjælke og sporet bag den. Det fungerer godt til finansiering af mål, kursusfremskridt, vurderinger og enkelt statistik. For en liste over færdighedsbjælker inde i en widget, brug Progress Bars. For en bar, der udfyldes som besøgende rulle gennem et indlæg, brug Læsning Progress Bar.
Sådan tilføjes en Circle Progress Bar i Elementor
Widgetten er en del af det gratis Master Addons plugin, så alt hvad du behøver er Elementor og Master Addons.
- Installer og aktiver Master Addons fra WordPress.org.
- Rediger din side med Elementor, og søg i widgetpanelet efter Progressbar.
- Træk den ind i en kolonne. For en række cirkler skal du sætte en widget i hver kolonne.
- I Indhold skal du skrive Titlen og indstille Værdien fra 0 til 100.
- I stil, generelle stilarter, indstil stilforudindstillinger til cirkel eller til blæser for en halv cirkelmåler.
- Indstil farver og bredder på forreste bjælke og bagerste bjælke, og stil derefter teksten Titel og værdi.
Hver indstilling er dækket af Progress Bar-widgetindstillinger guide.
Linje-, linjeboble-, cirkel- og blæserforudindstillinger
Vælg formen i Style, Generelle stilarter, Stilforudindstillinger. Line er en flad vandret bjælke med titlen over den. Line Bubble tilføjer en rund etiket, der glider langs til udfyldningspunktet og viser procentdelen. Circle tegner en fuld ring med værdien i midten, og Fan tegner en halv cirkelmåler.
- Skift forudindstillinger til enhver tid, og titlen, værdien og farverne forbliver, som de er.
- Boble Farve indstiller fyld af boblen på Line Bubble.
- Bobleposition flytter boblen op eller ned mod stangen.
Titel og værdi
Fanen Indhold har to felter. Title er mærket, som Fundraising-mål eller kursusfremskridt. Value er et tal fra 0 til 100 (60 som standard), der indstiller, hvor langt bjælken, ringen eller måleren fyldes, og det vises som en procentdel.
- Fyldet animerer fra nul til din værdi over cirka et sekund, når siden indlæses.
- Der er ikke noget brugerdefineret maksimum, så 45 af 60 lektioner går ind som 75.
- En widget er én indikator. Dupliker den for at opbygge en række cirkler eller en stak linjer.
Front Bar og Back Bar Styling
Front Bar er den udfyldte del og Back Bar er sporet bag det. Hver har sin egen Farve og et Bredde nummer for slagtykkelsen, 5 som standard. En tyk front bar over en tyndere lys spor er let at læse, især på Circle og Fan presets.
- Standardfarver er lilla (#704aff) på et lysegråt (#ddd) spor.
- Farver er solide. Der er ingen mulighed for gradientudfyldning.
- Bredde er ét tal for alle enheder, så tjek resultatet på mobilen.
Titel og Værditekst
The Title og Value style sektioner har hver en farvevælger og en fuld Typografi gruppe, så procentdelen kan være større eller dristigere end etiketten. På Circle og Fan forudindstillinger værdien sidder inde i formen.
- Titlen udlæses som en H6-overskrift og er som standard sort.
- Værdifarve og typografi gælder også for Line Bubble-etiketten.
Elementor Progress Bar vs Master Addons Progress Bar
Begge widgets er gratis. Elementors Progress Bar er en lige bjælke, der kan holde en tekstlinje inde i den. Master Addons tilføjer runde former, så valget kommer for det meste ned til den form, du har brug for.
| Feature | Elementor Progress Bar | Master Addons Progress Bar |
|---|---|---|
| Price | Gratis i Elementor | Gratis i Master Addons |
| Former | Kun linje | Line, Line Bubble, Circle og Fan |
| Value | Procentvis skyder med dynamiske tags | Antal fra 0 til 100 |
| Text | Titel med HTML-tag valg, Display Procent, Inner Text | Titel (H6) og en procentmærkat |
| Barstørrelse | Højde og Border Radius | Front Bar og Back Bar Bredde |
| Farver | Barfarve og baggrundsfarve | Front Bar og Back Bar farver, Bubble Color |
| Animation | Fylder, når baren ruller til syne | Udfyldes, når siden indlæses |
Brug Elementors widget til en simpel linje, der animerer, når besøgende når den eller trækker dens værdi fra et dynamisk tag. Brug Master Addons, når du vil have en ring eller en måler. Relaterede gratis widgets: Progress Bars for færdighedsbjælker i én widget, Læsning Progress Bar for en rullefremskridtsindikator, og Counter Up for animerede numre.
Ofte stillede spørgsmål til Progress Bar
Hvad er forskellen mellem Progress Bar, Progress Bars og Reading Progress Bar?
Progress Bar (denne widget) er én indikator, der vises som en linje, en linje med en boble, en cirkel eller en fanmåler. Den Progress Bars-element er en liste over vandrette færdighedsbjælker, som du tilføjer i en widget. Læsning Progress Bar er en udvidelse, der viser, hvor langt en besøgende har rullet gennem siden.
Animerer statuslinjen, når den ruller til syne?
Nej. Fyldet løber fra nul til din værdi på cirka et sekund, så snart siden indlæses, så en bjælke langt nede på siden kan afsluttes, før nogen ser det. Elementors egen Progress Bar og Master Addons Progress Bars-widget begynder begge at fylde, når de kommer til syne.
Er Master Addons Progress Bar widget gratis?
Ja. Det leveres med det gratis Master Addons plugin på WordPress.org, og alle fire forudindstillinger er inkluderet uden en Pro-licens.
Kan jeg lave en cirkelfremskridtsbjælke for en score ud af 100?
Ja. Indstil Style Presets til Circle og Value til scoren, for eksempel 85. Ringen fyldes til 85 procent med 85% i midten. For en score ud af et andet tal skal du konvertere den til en procentdel først, da widgetten ikke har noget brugerdefineret maksimum.
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
