Har du nogensinde kigget efter at oprette en lodret fremskridtsmåler i stedet for en traditionel rullepanel? Hvis ikke, så gennemse denne artikel til slutningen for at finde ud af, hvordan du opretter den med Elementor Pro.
Men før vi tager fat på hovedtemaet, lad os først huske, hvad en fremskridtsmåler er.
En fremskridtsmåler er en fremskridtsindikator, der informerer brugeren om forløbet af en igangværende proces, såsom installation af en applikation, opdatering, læsning af en artikel osv. Og der er to typer:
- le lineær fremskridtsmåler
- le cirkulær fremskridtsmåler
Du kan også læse: Elementor: Sådan opretter du et effektkort fra en portefølje
I denne vejledning viser vi dig, hvordan du indsætter en lodret fremskridtsindikator trin for trin i en sektion, der indeholder postarkiverne.
Opret en fremskridtsmåler
I fanen elementer fra værktøjspaneletElementor, skriv i søgefeltet Fremskridt Tracker. Træk derefter widgetten ind i en sektion.
Derefter vises en fremskridtsindikator. Som standard er den orienteret vandret. Men bare rolig, du vil se senere, hvordan du arrangerer det lodret.
Fremskridtsindikatoren bliver oprettet, lad os foretage de nødvendige ændringer for at opnå det ønskede resultat.
Se også: Elementor: Sådan opretter du et effektkort fra en portefølje
Rediger indholdet i statussporing
Her vælger du hvilken type tracker, og hvad den er relateret til.
De vigtigste indstillinger er:
- typisk tracker: her er standardværdien Vandret. Men når du ruller ned på listen, skal du skrive circulaire tilbydes dig også. Behold standarden.
- Fremgang ift: Vælg værdien i denne anden indstilling selektor. Dette valg viser en yderligere indstilling: Vælger.
- Vælger: Dette felt er beregnet til at modtage identifikatoren for det objekt, som trackeren vil blive knyttet til.
Lad os vælge publikationsarkivet, da det er det element, som vores tracker er knyttet til.
Gå til fanen Avanceret i indstillingspanelet, og udfyld derefter en værdi i feltet CSS ID.
Vend derefter tilbage til sporingspanelet og udfyld feltet Vælger i menuen indhold.
Til sidst skal du indstille orienteringen af fremskridtsindikatoren til højre.
Skift stilen på fremskridtsmåleren
I dette trin konfigurerer vi parametrene for fremskridtsindikatoren samt baggrunden for sidstnævnte.
Start med at indstille statusindikatoren.
- Justering fremskridt farve giver dig mulighed for at vælge mellem en klassisk progression og en gradient progression. I vores eksempel skal du vælge den første mulighed. Men uanset valget, vises indstillingen farve.
- Sæt lhar farve ved hjælp af den globale farvepalet eller farvevælgeren.
- Typen af grænse: du har her seks forslag (ingen, fuld, dobbelt, prikket, prikket, rille). Vælg en fuld kant.
- Bredden: Dette er for at give tykkelsen til grænsen af din fremskridtsindikator.
- Grænseradius: Som standard ligner statusindikatoren et rektangel. Ved at ændre dens radius bliver dens ekstremiteter afrundede.
Indstil endelig piste baggrundsindstillinger. Du bemærker, at det næsten er de samme indstillinger, der kommer tilbage. Begræns derfor til dem, der er nævnt på forhånd.
Skift avancerede muligheder for fremskridtsporing
For at fuldføre vores arbejde vil vi indstille følgende faner: bevægelseseffekter, Transform og tilpasset CSS.
Lad os starte med fanen først Tilpasset CSS. Vælg det, og indsæt derefter følgende kode i det relevante felt. Det giver mulighed for at definere trackerens bredde. Så den indstiller bredden til at være 50 % af vinduets højde.
Drej derefter trackeren i lodret retning. For at gøre dette skal du vælge undermenuen Transformer, aktiver rotation, og skriv derefter 90 i det tomme felt. Dette vil rotere vores widget 90 grader, hvilket giver dig den ønskede lodrette position.
For at justere vores widget på samme niveau som de første indlæg skal du anvende en offset på 145.
På dette niveau, hvis vi ruller vores side, vil du se, at vores fremskridtsindikator forsvinder, mens vi ruller vores indhold.
For at overvinde dette problem åbner du fanen Bevægelseseffekter, og drop ned kommandoen Pin og vælg da bas.
Denne gang, når vi ruller ned, kan vi se vores fremskridtsmåler gradvist udfyldes, efterhånden som vi bevæger os gennem vores arkiv af indlæg.
Hent Elementor Pro nu!
Konklusion
Så! Det er det for denne artikel, der viser dig, hvordan du opretter en lodret fremskridtsmåler.
Tilføjelse af interaktive elementer såsom den vertikale fremskridtsindikator, når du opretter din websted kan virkelig tage det til næste niveau ved at gøre det mere intuitivt. Derudover kan den linkes til en hel side eller til indhold af en publikation og endda til ethvert andet specifikt element på en side. At vide, hvordan man bruger det, ville derfor være en ekstra fordel.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
