En enkelt statuslinje fortæller én historie. Et stablet sæt af dem viser et helt færdighedssæt, en serviceopstilling eller et projekts status uden at få læseren til at arbejde for det. Den Progress Bars widget i Master Addons til Elementor er bygget til det tilfælde. Det grupperer flere animerede barer i én widget, så du tilføjer så mange som du har brug for og style dem sammen eller en ad gangen.
Tænk på det som multi-bar følgesvend til den selvstændige Progress Bar-widget. I stedet for at droppe en separat widget for hver metrik, administrerer du hele gruppen fra ét panel. Hver bjælke får sin egen titel, procent og farve, mens en delt fane Style styrer sættets udseende.
Foretrækker du at se først? Denne korte tutorial går gennem widgetten fra ende til anden, fra at trække den ind til styling af barerne:
Hvad gør Progress Bars-widgetten #
Widgetten gengiver en liste over vandrette bjælker, der animerer fra nul til deres indstillede værdi, når de ruller til visning. Hver bjælke viser en titel til venstre, en procentsats og et farvet fyld, der vokser, så det svarer til det tal, du indtaster.
Forskellen fra single bar widget er struktur. Her bor barerne inde i en repeater kaldet Stats Barer, så du tilføjer, duplikere, omarrangere, og slette barer uden at røre lærredet. Én widget, ét sæt stil kontrolelementer, og et vilkårligt antal barer.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- En side åben i Elementor-editoren, hvor søjlerne vil gå.
Sådan tilføjes Progress Bars-widgetten #
I Elementor-editoren skal du åbne Elementer panel og søg efter Progress Bars, eller rul ned til Master Addons sektionen. Se navnene her: der er to widgets, der læser næsten det samme. Progressbar er en enkelt bar, og Progressbars er gruppen. Træk Progressbars ind på din side.
Den falder ind med tre prøvebjælker, der allerede er udfyldt, så du ser et arbejdsresultat med det samme og redigerer derfra i stedet for at starte tomt.
Rediger hver enkelt bjælke på fanen Indhold #
Åbn Content faneblad, og du finder Stats Barer repeater. Hver række er én søjle. Klik på en række for at udvide den, og du får tre indstillinger:
- Stats Titel: etiketten vist over bjælken, som “Web Design” eller “WordPress”. Dette felt tager Elementor dynamiske tags, så du kan trække titlen fra et postfelt, forfattermeta eller en anden dynamisk kilde ved hjælp af tagikonet.
- Procentværdi: et tal fra 0 til 100, der indstiller, hvor langt bjælken fyldes, og hvad etiketten læser. Enter
87og baren fylder til 87 procent. - Bar Farve: en valgfri farve til denne ene bjælke. Lad den være tom for at bruge den globale Active Bar Color, eller indstil den her for at tilsidesætte gruppefarven for en enkelt bjælke.
Per-bar farve er det, der gør gruppen fleksibel. Hold hver bjælke på én mærkefarve, eller giv hver metrik sin egen nuance, så de er nemme at skelne fra hinanden med et øjeblik.
Tilføj ubegrænsede barer #
Hvis du vil tilføje en anden bjælke, skal du klikke på Tilføj vare nederst i repeateren. En ny bjælke vises med standardværdier, du kan omdøbe og indstille. Der er ingen hætte, så byg så mange ud, som indholdet har brug for. Kopiikonet på enhver række duplikerer en bjælke med dens indstillinger intakte, og X-ikonet fjerner en.
Fanen Indhold har også en Hjælp Docs link til hurtig reference og en Wrapper Link mulighed (en Pro-funktion), der gør hele widget klikbar. Den kommer til nytte, når barerne sidder på et kort, der linker et sted.
Style hver bjælke fra fanen Style #
Skift til Style faneblad til at styre, hvordan hele gruppen ser ud. Disse indstillinger gælder for hver enkelt bjælke på én gang, og det er netop derfor, at tilsidesættelserne pr. bjælke i fanen Indhold er værd at vide om. Fanen Stil bryder ind Stats Bar, Stats Titel, Stats Procent, og Mønstre.
Stats Bar #
- Bar BG Farve: farven på det tomme spor bag hver fyldning.
- Aktiv Bar Farve: standardfyldfarven for enhver bjælke, der ikke har sit eget bjælkefarvesæt på fanen Indhold.
- Lodret afstand: mellemrummet mellem stablede stænger.
- Bar Højde: hvor tykke stængerne er, i pixels.
- Stats Bar Border Radius: runder hjørnerne. Sammenkæd de fire værdier for en lige radius, eller indstil Top, Højre, Bund og Venstre separat.
Stats Titel #
Dette afsnit styler etiketten over hver bjælke.
- Justering: venstre, center eller højre for titelteksten.
- Farve: titelfarven.
- Typografi: fuld kontrol over skrifttypefamilie, størrelse, vægt, transformation og resten af Elementors typemuligheder.
Stats Procent #
Procentmærket får sine egne Farve- og Typografikontroller, så du kan gøre tallet fed og stort eller holde det stille. Under den sidder den Mønstre sektion, en Pro-mulighed for at tilføje stribede eller teksturerede fyld til søjlerne.
Resultatet på siden #
Udgiv eller forhåndsvisning af siden, og søjlerne animerer fra nul op til deres indstillede værdier, når sektionen går ind i viewport. Stylingen fortsætter: brugerdefinerede stregfarver, titelfarve, procentstørrelse, afstand og højde vises alle på live-siden.
Almindelige brugstilfælde #
- Færdighedsbarer på en om eller genoptag side (design, udvikling, marketing).
- Servicestyrker på en bureauside, en bar pr. tilbud.
- Projekt- eller kampagnestatus vist som fuldførelsesprocenter.
- Feature scores i en sammenligningsblok, parret med en sammenligningstabel.
- Statens højdepunkter ved siden af animerede numre fra Counter Up widget.
Tips til at arbejde med Progress Bars #
- Indstil gruppe styling først, og tilsidesæt derefter. Vælg din Active Bar Color og Bar Height én gang, og tilføj derefter kun en per-bar farve, hvor du vil have en bar til at skille sig ud.
- Hold procenterne ærlige. Tallet er også etiketten, så en bjælke sat til 76 lyder “76%”. Match fyldet til den reelle figur.
- Stil højde og radius sammen. En højere stang med en matchende radius lyder som en afrundet pille; en tynd stang med en stor radius kan se klippet ud.
- Brug dynamiske titler i skabeloner. Når søjlerne sidder i en post- eller arkivskabelon, skal du overføre statistiktitlen til et dynamisk tag, så hver post mærker sig selv.
- Duplikere i stedet for at genopbygge. Kopiikonet kloner en bjælke med dens farve og typografi, som slår opsætningen af et nyt element i hånden.
Ofte stillede spørgsmål #
Hvad er Progress Bars-widget i Master Addons?
Det er en Elementor-widget, der grupperer flere animerede statuslinjer i ét element. Du tilføjer søjler gennem Stats Bars-repeateren, giver hver en titel, procent og valgfri farve og styler hele sættet fra fanen Stil. Det er flertaktsversionen af den enkelte Progress Bar-widget.
Hvordan er Progress Bars forskellig fra den enkelte Progress Bar-widget?
Den enkelte Progress Bar widget viser en bar per widget. Progress Bars widget holder en repeater, så du tilføjer ubegrænsede barer inde i en widget og administrere dem sammen. Brug den enkelte til en selvstændig metrisk og Progress Bars for en stablet sæt.
Hvor mange statuslinjer kan jeg tilføje?
Der er ingen grænse. Klik på Tilføj element i gentagelsen af statistikbjælker for at tilføje så mange bjælker, som du har brug for. Hver ny bjælke starter med standardværdier, du kan omdøbe og justere, og du kan duplikere eller slette bjælker til enhver tid.
Kan hver statuslinje have en anden farve?
Ja. Indstil den aktive stregfarve på fanen Stil som gruppestandard, og åbn derefter en vilkårlig streg på fanen Indhold, og brug dens stregfarvefelt til at tilsidesætte den ene streg. Lad feltet være tomt for at holde en streg på gruppefarven.
Animerer fremskridtsbjælkerne?
Ja. Hver bjælke udfylder fra nul til sin indstillede procent, når sektionen ruller til syne på live-siden. Animationen kører af sig selv, så der er ingen ekstra opsætning ud over at indtaste procentværdien.
Indpakning #
Progress Bars-widgetten forvandler en stak metrics til én ryddelig, animeret blok. Tilføj søjler i Stats Bars-repeateren, indstil hver titel og procentdel, farvelæg dem individuelt eller som en gruppe, og form hele sættet fra fanen Stil. For en enkelt selvstændig bjælke skal du række ud efter Progress Bar-widget i stedet. Gennemse hele Master Addons widgets og udvidelser for at se, hvad du ellers kan bygge, og tjekke prissætning side til Pro-funktioner som indpakningslinks og stregmønstre.
