What is the Progress Bar widget in Master Addons?

It is an Elementor widget that shows an animated progress indicator with a title and a percentage. A Style Presets dropdown switches between a line, a line with a bubble, a full circle, and a half-circle gauge, and you color every part from the Elementor panel.

What progress bar styles does the widget include?

Four presets: Line, Line Bubble, Circle, and Fan. Line is a plain horizontal bar, Line Bubble adds a floating percentage bubble, Circle draws a full donut with the value in the center, and Fan draws a half-circle gauge. The value stays the same across all of them.

Can I make a circular or gauge progress bar in Elementor?

Yes. Set Style Presets to Circle for a full donut with the percentage in the middle, or to Fan for a half-circle gauge. Both animate to the value you set and can be colored through the Front Bar and Back Bar sections in the Style tab.

How do I add several progress bars?

Each Progressbar widget is one bar, so duplicate the widget and change the title and value on each copy. Place the copies in columns for a row of skill bars. For several bars managed inside one widget, use the separate Progressbars widget instead.

Does the progress bar animate?

Yes. The bar fills to its value when it scrolls into view, so a skill list or gauge animates as the visitor reaches it. The effect works the same across the line, circle, and fan presets.

Elementor Progress Bar Widget: Linje, cirkel og måler

Færdighedsbjælker, finansieringsmål og projektstatus læses alle bedre som visuelt end som et tal begravet i en sætning. Den Progress Bar widget i Master Addons til Elementor giver dig en animeret bjælke med en titel og en procentdel, plus en Style Presets dropdown, der skifter mellem en almindelig linje, en linje med en boble, en fuld cirkel, og en halvcirkel gauge.

Du indstiller en titel og en værdi, vælger en forudindstilling og farver derefter frontlinjen, baglinjen og værdien, så den matcher dit brand. Denne vejledning dækker hver indstilling i widgetten.

Færdige Elementor-fremskridtsbjælker bygget med Master Addons Progress Bar-widget, der viser en halvcirkelmåler og en linje med en procentvis boble

Hvad gør Progress Bar-widgetten #

Widgetten gengiver én statusindikator: en titel, en procentværdi og en bjælke, der udfyldes til den pågældende værdi, når den ruller til visning. Den Stilforudindstillinger dropdown ændrer formen, så den samme værdi kan vises som en vandret linje, en linje med en flydende boble, en donutcirkel eller en halvcirkelmåler.

Den har tre faner. Content holder titlen og værdien. Style styrer forudindstillingen, farverne på front- og baglinjen, boblen, titlen og værditeksten. Advanced bærer de sædvanlige Elementor-afstands- og synlighedsmuligheder.

Før du starter #

WordPress med Elementor installeret og aktiv.
Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
De etiketter og procenter, du vil vise, som WordPress 60% eller Java 85%.

Sådan tilføjes Progress Bar-widgetten #

I Elementor-editoren skal du åbne Elementer panel og søg efter Progressbar, eller rul til afsnittet Mastertilføjelser (widgetsene bærer et lilla MA-badge). Træk det over på din side, og det indlæses med en enkelt bjælke, der er klar til at redigere.

Progressbar-widget i panelet Elementorelementer trækkes ind på siden

Heads up: der er to lignende widgets. Progressbar er en enkelt bjælke (denne vejledning), og Progressbars stabler flere barer inde i en widget. For et par uafhængige barer i forskellige stilarter er den enkelte Progressbar det fleksible valg.

Indstil titlen og værdien #

Åbn Content fane. Der er kun to felter, som holder opsætningen hurtig.

Fanen Progress Bar Content med felterne Titel og Værdi, der viser to søjler mærket WordPress og Java

Titel: etiketten over bjælken, som WordPress eller Design.
Værdi: den procentdel, baren fylder til, fra 0 til 100.

Da hver Progressbar er én bjælke, bygger du et sæt ved at duplikere widgetten. Højreklik på den og vælg Dubler (eller tryk på Ctrl/Cmd + D), og skift derefter titel og værdi på hver kopi. Sådan endte WordPress- og Java-bjælkerne ovenfor side om side.

Vælg en forudindstilling for typografi #

Skift til Style faneblad og åben Generelle stilarter. Den Stilforudindstillinger dropdown er der, hvor du vælger formen. Den Line Bubble forudindstillet tilføjer en flydende boble, der viser procentdelen og kører i slutningen af fyldet.

Fremskridtslinje Generelle stilarter med stilforudindstillinger indstillet til linjeboble, plus boblefarve og boblepositionskontroller

Stilforudindstillinger: Linje, linjeboble, cirkel og ventilator (en halvcirkelmåler).
Boble Farve: farven på den procentvise boble på boblen forudindstillet.
Bobleposition: skub boblen langs baren.

Forudindstillinger for cirkel- og halvcirkelmåler #

The Circle forudindstillet trækker en fuld doughnut med procentdelen i midten, som passer til en kompakt stat blok.

Progress Bar ved hjælp af Circle-stilen forudindstillet, der viser en donutring fyldt til 60 procent med værdien i midten

The Fan forudindstillet tegner en halvcirkelmåler, en god pasform til en vurdering i instrumentbrætstil eller et speedometer-look.

Progress Bar ved hjælp af Fan-stil forudindstillingen, der viser en halvcirkelmåler fyldt til 60 procent

Style stangdelene #

The Style tabulator opdeler widgetten i dele, du kan style på egen hånd: Generelle stilarter, Title, Front Bar, Back Bar, Value, og Mønstre (en Pro-mulighed).

Fanen Progress Bar Style med sektioner for generelle stilarter, titel, frontlinje, baglinje, værdi og mønstre

Titel: farve og typografi til etiketten.
Front Bar: farven og bredden af den fyldte del.
Bag Bar: farven på det ufyldte spor bagved.
Værdi: farve og typografi for procentteksten.

Open Front Bar for at indstille fyldfarven og bredden. Det er det, der bærer din mærkefarve hen over hele bjælken eller måleren.

Progress Bar Front Bar sektion med farvevælgeren åben, hvilket ændrer fyldfarven på halvcirkelmåleren

Almindelige brugstilfælde #

Færdighedsbarer på en om- eller CV-side (WordPress 90%, Design 75%).
Finansiering eller målmålere viser, hvor tæt en kampagne er.
Cirkelstatistik i en service- eller resultatblok.
Halvcirkelmålere for scoringer, vurderinger eller dashboard-widgets.
Projektstatus søjler på en kunde- eller porteføljeside.

Tips til at arbejde med Progress Bar-widget #

Dubler, og rediger derefter. Style en bjælke, som du vil, og kopier den derefter og skift titel og værdi.
Hold vægten ærlig. Værdien er en procentdel, så 60 betyder 60 procent fuld.
Match front- og bagstangskontrast. Et let spor bag et mærkefarvefyld lyder tydeligt.
Brug boblen til nøjagtige tal. Forudindstillingen Linjeboble sætter procentdelen lige på fyldet.
Vælg formen for konteksten. Linjer til færdighedslister, cirkler og fans for enkeltstående statistik.

Se video tutorial #

Foretrækker du at følge med på skærmen? Videovejledningen nedenfor går gennem Progress Bar-elementet fra start til slut og viser, hvordan hver stilforudindstilling, farve og værdi fungerer i Elementor-editoren.

Ofte stillede spørgsmål #

Hvad er Progress Bar widget i Master Addons?

Det er en Elementor widget, der viser en animeret fremskridtsindikator med en titel og en procentdel. En Style Presets dropdown skifter mellem en linje, en linje med en boble, en fuld cirkel og en halvcirkelmåler, og du farver hver del fra Elementor panelet.

Hvilke statuslinjestile indeholder widgetten?

Fire forudindstillinger: Linje, Linje Bubble, Cirkel, og Fan. Linje er en almindelig vandret bar, Line Bubble tilføjer en flydende procent boble, Cirkel tegner en fuld doughnut med værdien i midten, og Fan trækker en halvcirkel gauge. Værdien forbliver den samme på tværs af dem alle.

Kan jeg lave en cirkulær eller gauge statuslinje i Elementor?

Ja. Indstil Style Presets til Circle for en fuld doughnut med procentdelen i midten, eller til Fan for en halvcirkelmåler. Begge animerer til den værdi, du indstiller, og kan farves gennem sektionerne Front Bar og Back Bar i fanen Style.

Hvordan tilføjer jeg flere statuslinjer?

Hver Progressbar-widget er én bjælke, så duplikér widgetten og skift titel og værdi på hver kopi. Placer kopierne i kolonner for en række færdighedsbjælker. For flere bjælker, der administreres inde i en widget, skal du bruge den separate Progressbars-widget i stedet.

Animerer fremskridtsbjælken?

Ja. Baren udfylder sin værdi, når den ruller til syne, så en færdighedsliste eller måler animerer, når den besøgende når den. Effekten fungerer på samme måde på tværs af forudindstillingerne for linje, cirkel og ventilator.

Indpakning #

Progress Bar-widgetten forvandler en almindelig procentdel til en animeret linje, boble, cirkel eller måler. Indstil en titel og værdi, vælg en forudindstilling, og farvelæg derefter frontlinjen, baglinjen og værdien, så den matcher dit design. For relaterede stat-widgets, se Tællerwidget og the Infoboks widget, gennemse hele Master Addons widgets og udvidelser, og kontrollere de prissætning side for hvad hver plan indeholder.

Tema Bygherre

Popup Builder

Widget Builder

Mega Menu Builder

Brugerdefineret Css

Dynamiske tags

Visningsbetingelser

Ikoner Bibliotek

Animation

Skabelonsæt

Klar sektioner

Klar Popups

Klar Sider

Klar Header

Klar sidefod

WP Adminify

Admin Bar Editor

Loginfi

Rollemaster Suite

Master Blocks

WP Spotlight