Færdighedsbjælker, finansieringsmål og projektstatus læses alle bedre som visuelt end som et tal begravet i en sætning. Det frie 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.
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 siden indlæses. 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.
Heads up: der er to lignende widgets. Progressbar er en enkelt bjælke (denne vejledning), og Progressbars (den Progress Bars-widget) 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.
- 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.
- Stilforudindstillinger: Linje, linjeboble, cirkel og ventilator (en halvcirkelmåler).
- Boble Farve: farven på den procentvise boble på boblen forudindstillet.
- Bobleposition: flyt boblen op eller ned mod stangen.
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.
The Fan forudindstillet tegner en halvcirkelmåler, en god pasform til en vurdering i instrumentbrætstil eller et speedometer-look.
Style stangdelene #
The Style tabulator opdeler widgetten i dele, du kan style på egen hånd: Generelle stilarter, Title, Front Bar, Back Bar, og Value. Hvis den frie Mønstre forlængelse er slået til, en Mønstre sektion for dekorative overlejringer vises også i denne fane.
- Titel: farve og typografi til etiketten.
- Front Bar: farven og bredden af den fyldte del.
- Bag Bar: farven og bredden af 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.
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, en gang. Baren udfylder fra nul til dens værdi på cirka et sekund, når siden indlæses, ikke når den ruller til syne, så søjler placeret nær toppen viser bevægelsen bedst. Det fungerer på samme måde på forudindstillingerne for linje, cirkel og blæser.
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 passer til dit design. Se den for en oversigt og en sammenligning med Elementors egen Progress Bar Elementor cirkel fremdrift bar widget side. For relaterede widgets, se Progress Bars for færdighedsbarer, Læsning Progress Bar for en rulleindikator, den Counter Up widget og the Infoboks widget, gennemse hele Master Addons widgets og udvidelser, og kontrollere de prissætning side for hvad hver plan indeholder.
