Har du någonsin försökt skapa en vertikal framstegsspårare istället för en traditionell rullningslist? Om inte, bläddra i den här artikeln till slutet för att ta reda på hur du skapar den med Elementor Proffs.

Men innan vi tar itu med huvudtemat, låt oss först komma ihåg vad en framstegsmätare är.

En förloppsmätare är en förloppsindikator som informerar användaren om hur en pågående process fortskrider, som att installera en applikation, uppdatera, läsa en artikel, etc. . Och det finns två typer:

  • le linjär framstegsföljare
  • le cirkulär framstegsföljare

Du kan också läsa: Elementor: Hur man skapar ett effektkort från en portfölj

I den här handledningen kommer vi att visa dig hur du infogar en vertikal förloppsindikator steg för steg i en sektion som innehåller postarkiven.

Elementor hur man skapar en vertikal framstegsspårare

Skapa en framstegsmätare

På fliken element från verktygspanelenElementor, skriv i sökfältet Framstegsspårare. Dra sedan widgeten till ett avsnitt.

Elementor skapa framstegsspårare
Elementor skapa framstegsspårare

En förloppsindikator visas sedan. Som standard är den horisontellt orienterad. Men oroa dig inte, du kommer att se senare hur du arrangerar det vertikalt.

Elementor skapa framstegsspårare

Förloppsindikatorn som skapas, låt oss göra de nödvändiga ändringarna för att erhålla det önskade resultatet.

Se även: Elementor: Hur man skapar ett effektkort från en portfölj

Redigera innehållet i framstegsspåraren

Här väljer du vilken typ av tracker och vad den är relaterad till.

Elementor redigera framstegsspårningsinnehåll

Huvudinställningarna är:

  • typisk tracker: här är standardvärdet Horisontell. Men när du rullar ner i listan, typ circulaire erbjuds dig också. Behåll standardinställningen.
  • Framsteg i förhållande till: i denna andra inställning, välj värdet selektor. Detta val kommer att visa en ytterligare inställning: Väljare.
  • Väljare: Detta fält är avsett att ta emot identifieraren för objektet som spåraren ska kopplas till.
Elementor redigera framstegsspårningsinnehåll
Elementor redigera framstegsspårningsinnehåll

Låt oss välja publikationsarkivet eftersom det är det element som vår tracker är kopplad till.

Elementor redigera framstegsspårningsinnehåll

I dess inställningspanel, gå till fliken Avancerat och fyll sedan i ett värde i fältet CSS ID.

Elementor redigera framstegsspårningsinnehåll

Gå sedan tillbaka till spårningspanelen och fyll i fältet Väljare i menyn innehåll.

Elementor redigera framstegsspårningsinnehåll

Ställ slutligen in orienteringen för förloppsindikatorn till höger.

Elementor redigera framstegsspårningsinnehåll

Ändra stilen på förloppsmätaren

I det här steget kommer vi att konfigurera parametrarna för förloppsindikatorn samt bakgrunden till den senare.

Element eller ändra stil för förloppsföljare

Börja med att ställa in förloppsindikatorn.

Läs också: Elementor: Hur man skapar ett bildgalleri

  • Justering framstegsfärg låter dig välja mellan en klassisk progression och en gradient progression. I vårt exempel väljer du det första alternativet. Men oavsett valet, visas inställningen färg.
Element eller ändra stil för förloppsföljare
  • Ställ in lhar färg med hjälp av den globala färgpaletten eller färgväljaren.
Element eller ändra stil för förloppsföljare
Element eller ändra stil för förloppsföljare
  • Typen av bård: du har här sex förslag (ingen, full, dubbel, prickad, prickad, spår). Välj en hel kant.
  • bredd: Detta är för att ge tjocklek till gränsen för din framstegsindikator.
  • Gränsradien: Som standard ser förloppsindikatorn ut som en rektangel. Genom att modifiera dess radie blir dess extremiteter rundade.
Element eller ändra stil för förloppsföljare

Slutligen, ställ in pist bakgrundsinställningar. Man märker att det är nästan samma inställningar som kommer tillbaka. Begränsa därför till de som nämnts i förväg.

Element eller ändra stil för förloppsföljare

Ändra avancerade alternativ för förloppsspårning

För att slutföra vårt arbete kommer vi att ställa in följande flikar: rörelseeffekter, Transform och anpassad CSS.

Avancerade alternativ för Elementor change progress tracker

Låt oss börja med fliken först Anpassad CSS. Välj den och infoga sedan följande kod i lämpligt fält. Det gör det möjligt att definiera spårarens bredd. Så den ställer in bredden till 50 % av fönstrets höjd.

Avancerade alternativ för Elementor change progress tracker

Vrid sedan spåraren i vertikal riktning. För att göra detta, välj undermenyn Transformator, aktivera rotation och skriv sedan 90 i det tomma fältet. Detta kommer att rotera vår widget 90 grader vilket ger dig önskad vertikal position.

Avancerade alternativ för Elementor change progress tracker

För att anpassa vår widget på samma nivå som de första inläggen, tillämpa en offset på 145.

Element eller ändringsförloppsspårare avancerade alternativ4

På den här nivån, om vi rullar vår sida, kommer du att se att vår framstegsindikator försvinner medan vi rullar vår innehåll.

Avancerade alternativ för Elementor change progress tracker

För att lösa detta problem kommer du att öppna fliken Rörelseeffekter, släpp sedan ner kommandot Stift och välj en bas.

Avancerade alternativ för Elementor change progress tracker

Den här gången kan vi, när vi rullar nedåt, se hur vår framstegsspårare gradvis fylls i när vi går igenom vårt arkiv med inlägg.

Skaffa Elementor Pro nu!

Slutsats

Så ! Det är allt för den här artikeln som visar hur du skapar en vertikal framstegsspårare.

Lägga till interaktiva element som den vertikala framstegsindikatorn när du skapar din webbplats kan verkligen ta det till nästa nivå genom att göra det mer intuitivt. Dessutom kan den länkas till en hel sida eller till innehåll av en publikation och till och med till någon annan specifik del av en sida. Att veta hur man använder det skulle därför vara en extra fördel.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.