Har du noen gang sett etter å lage en vertikal fremdriftsmåler i stedet for en tradisjonell rullefelt? Hvis ikke, så bla gjennom denne artikkelen til slutten for å finne ut hvordan du lager den med Elementor Pro.
Men før vi tar tak i hovedtemaet, la oss først huske hva en fremdriftsmåler er.
En fremdriftsmåler er en fremdriftsindikator som informerer brukeren om fremdriften til en pågående prosess, for eksempel å installere en applikasjon, oppdatere, lese en artikkel osv. Og det er to typer:
- le lineær fremdriftssporer
- le sirkulær fremdriftsmåler
Du kan også lese: Elementor: Hvordan lage et effektkort fra en portefølje
I denne opplæringen vil vi vise deg hvordan du setter inn en vertikal fremdriftsindikator trinn for trinn i en seksjon som inneholder postarkivene.
Lag en fremdriftsmåler
I fanen elementer fra verktøypaneletElementor, skriv inn i søkefeltet Fremdriftssporing. Dra deretter widgeten inn i en del.
En fremdriftsindikator vises deretter. Som standard er den orientert horisontalt. Men ikke bekymre deg, du vil se senere hvordan du arrangerer det vertikalt.
Fremdriftsindikatoren blir opprettet, la oss gjøre de nødvendige modifikasjonene for å oppnå ønsket resultat.
Se også: Elementor: Hvordan lage et effektkort fra en portefølje
Rediger innhold i fremdriftssporing
Her velger du type tracker og hva den er relatert til.
Hovedinnstillingene er:
- typisk tracker: her er standardverdien Horisontal. Men når du ruller nedover listen, typen circulaire tilbys deg også. Behold standarden.
- Fremgang i forhold til: i denne andre innstillingen, velg verdien velger. Dette valget vil få opp en ekstra innstilling: Velger.
- Velger: Dette feltet er ment å motta identifikatoren til objektet som sporingen skal knyttes til.
La oss velge publikasjonsarkivet siden det er elementet som sporingen vår er knyttet til.
Gå til fanen Avansert i innstillingspanelet, og fyll deretter inn en verdi i feltet CSS ID.
Deretter går du tilbake til sporingspanelet og fyller ut Velger-feltet i menyen innhold.
Til slutt setter du retningen til fremdriftsindikatoren til høyre.
Endre stilen til fremdriftsmåleren
I dette trinnet vil vi konfigurere parametrene til fremdriftsindikatoren så vel som bakgrunnen til sistnevnte.
Start med å stille inn fremdriftsindikatoren.
Les også: Elementor: Hvordan lage et bildegalleri
- Justering fremdriftsfarge lar deg velge mellom en klassisk progresjon og en gradientprogresjon. I vårt eksempel velger du det første alternativet. Men uansett valg, vises det innstillingen farge.
- Sett lhar farge ved å bruke den globale fargepaletten eller fargevelgeren.
- Typen grense: du har her seks forslag (ingen, full, dobbel, prikket, prikket, spor). Velg en full kant.
- bredde: Dette er for å gi tykkelse til grensen til fremdriftsindikatoren din.
- Grenseradius: Som standard ser fremdriftsindikatoren ut som et rektangel. Ved å modifisere radiusen blir ekstremitetene avrundet.
Til slutt setter du inn piste bakgrunnsinnstillinger. Du merker at det er nesten de samme innstillingene som kommer tilbake. Begrens derfor til de som er nevnt på forhånd.
Endre avanserte alternativer for fremdriftsporing
For å fullføre arbeidet vårt setter vi følgende faner: bevegelseseffekter, Transform og tilpasset CSS.
La oss starte med fanen først Tilpasset CSS. Velg den, og sett inn følgende kode i det aktuelle feltet. Den lar deg definere bredden på sporeren. Så den setter bredden til å være 50 % av høyden på vinduet.
Deretter roterer du trackeren i vertikal retning. For å gjøre dette, velg undermenyen Transformator, aktiver rotasjon, og skriv deretter 90 i det tomme feltet. Dette vil rotere widgeten vår 90 grader og gi deg ønsket vertikal posisjon.
For å justere widgeten vår på samme nivå som de første innleggene, bruk en offset på 145.
På dette nivået, hvis vi ruller siden vår, vil du se at fremdriftsindikatoren vår forsvinner mens vi ruller vår innhold.
For å løse dette problemet, åpner du fanen Bevegelseseffekter, og slipp deretter ned kommandoen Pin og velg no bas.
Denne gangen, når vi ruller nedover, kan vi se at fremdriftssporeren vår gradvis fylles ut mens vi beveger oss gjennom arkivet med innlegg.
Få Elementor Pro nå!
konklusjonen
Så! Det er det for denne artikkelen som viser deg hvordan du lager en vertikal fremdriftsmåler.
Legge til interaktive elementer som den vertikale fremdriftsindikatoren når du oppretter din nettside kan virkelig ta det til neste nivå ved å gjøre det mer intuitivt. I tillegg kan den kobles til en hel side eller til innhold av en publikasjon og til og med til et hvilket som helst annet spesifikt element på en side. Å vite hvordan du bruker det vil derfor være en ekstra fordel.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
