Framstegsindikator

Att integrera en förloppsindikator i din tratt eller webbplats är ett effektivt sätt att visuellt visa användarens framsteg genom innehållet. Med många anpassningsalternativ tillgängliga till höger på sidan kan du enkelt skräddarsy förloppsindikatorn för att passa dina specifika design- och funktionalitetsbehov. I den här guiden kommer vi att utforska dessa olika alternativ för att hjälpa dig skapa en sömlös och engagerande upplevelse för dina kunder.

Allmänna inställningar

Elementnamn/titel

Under avsnittet Allmänna inställningar hittar du alternativet Elementnamn/Titel. Detta visar standardnamnet/titeln för redigeringsalternativet du för närvarande arbetar med. Du kan välja att lämna den som den är eller byta namn på den för enklare identifiering.

Bakgrundsfärg

För att ändra bakgrundsfärgen på din knapp, välj innehållet du vill justera och välj en färg från de givna alternativen eller ange en anpassad färgkod.

Typografityp

I alternativet Typografityp kan du anpassa typsnittet som används för din text/innehåll. Du kan välja att använda rubriken eller innehållsteckensnittet som valts i dina inställningar, eller så kan du välja ett anpassat teckensnitt genom att välja från rullgardinsmenyn med teckensnittsalternativ.

Textalternativ

• Percent: Under textalternativsektionen kan du lägga till eller ändra texten som visas på din knapp.

Avståndsalternativ

• Margin & Padding: Under Avståndsalternativ kan du anpassa de övre och nedre marginalerna för ditt innehåll. Dessa inställningar kommer endast att tillämpas på det specifika redigeringsalternativet som du arbetar med.

Avancerade inställningar

Kantalternativ

• Border: Under fliken Avancerade inställningar hittar du funktionen Kantalternativ. Här kan du bestämma vilken typ av gränslinje du vill ha genom att välja valfritt alternativ förutom Ingen gräns, vilket kommer att rulla ner fler gränsstylingsalternativ.

• Border Style: Välj den typ av kantlinjestil du vill ha. Du kan välja mellan solid, streckad eller prickad.

• Border Width: Klicka här för att välja hur tjock du vill att gränslinjen ska visas.

• Border Color: Välj en färg för din gränslinje från de givna färgalternativen eller skriv in en anpassad färgkod i det angivna fältet.

• Border Radius: Om du inte vill att din kant ska ha skarpa hörn kan du välja från radiealternativen för att göra den mer rundad.

• Radius Edge: Dessutom kan du välja vilken kant du vill justera genom att välja bland alternativen “Alla kanter, Endast upptill eller Endast nederkant”.

Skugga

• Box Shadow: Om du vill lägga till en boxskugga runt din förloppsindikator, välj “+”-ikonen och välj bland alternativen för skugga eller inre skugga. Du kommer att se olika intensiteter av skuggor, så lek med dem för att se vilken som passar dina behov bäst.

• Text Shadow: I alternativet Text Shadow kan du lägga till en skuggeffekt till din text/innehåll. Du kan välja styrkan på skuggan, allt från ingen skugga till ljus blekning, mellanskugga och stark skugga.

Textstil

Under Textstil kan du välja stil för ditt teckensnitt, antingen fetstil, kursiv eller fetstil och kursiv.

Text Align

Textjustering ger dig möjlighet att flytta din text i olika positioner, till exempel vänster, mitten, höger eller som justerad.

Procent bredd

Med rullgardinsmenyn Procent bredd kan du välja hur bred du vill att din förloppsindikator ska vara inom elementrutan. Du kan välja mellan 0 procent upp till 100 procent.

Storlekar

Du kan också välja höjden på din förloppsindikator med rullgardinsmenyn Storlekar. Dina alternativ här är små, medelstora och stora.

Offset färg

Om du vill ställa in förskjutningsfärgen för din förloppsindikator, som fyller i den återstående delen av din elementbox (om du inte har din förloppsindikator inställd på 100%), kan du välja från alternativen i rullgardinsmenyn. Här kan du välja att offsetfärgen ska vara vit, transparent vit, svart eller transparent svart.

SynlighetUnder alternativet Synlighet kan du välja om du vill göra ett visst redigeringsalternativ synligt på mobila enheter, stationära datorer eller båda genom att klicka på motsvarande ikon.

Anpassad klass

För att skapa anpassade klasser kan du använda utrymmet för anpassad klass.

CSS-väljare

Om du behöver kopiera Custom CSS klickar du bara på ikonen “Kopiera” till höger om referenskoden.

En väldesignad förloppsindikator förbättrar användarupplevelsen genom att ge tydlig visuell feedback på deras resa. Med rätt anpassningsalternativ kan du sömlöst anpassa det till ditt varumärke och funktionalitetsbehov, vilket säkerställer en smidig och engagerande navigeringsprocess.