Progress Bar

Att integrera en Progress Bar i din Funnel eller Website är ett effektivt sätt att visuellt visa besökarens framsteg genom innehållet. Med många anpassningsalternativ tillgängliga på högersidan av sidan kan du enkelt skräddarsy Progress Bar efter dina specifika design- och funktionsbehov. I den här guiden går vi igenom dessa olika alternativ för att hjälpa dig skapa en smidig och engagerande upplevelse för dina kunder.

General Settings

Element Name/Title

Under sektionen General Settings hittar du alternativet Element Name/Title. Här visas standardnamnet/titeln för det redigeringsalternativ du för närvarande arbetar med. Du kan välja att lämna det som det är eller byta namn för enklare identifiering.

Background Color

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 tillgängliga alternativen eller ange en egen färgkod.

Typography Type

I alternativet Typography Type kan du anpassa typsnittet som används för din text/innehåll. Du kan välja att använda rubrik- eller innehållstypsnittet som är valt i dina inställningar, eller välja ett eget typsnitt från rullistan med typsnittsalternativ.

Text Options

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

Spacing Option

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

Advanced Settings

Border Option

• Border: Under fliken Advanced Settings hittar du funktionen Border Option. Här kan du bestämma vilken typ av kantlinje du vill ha genom att välja något annat alternativ än No Border, vilket öppnar fler alternativ för kantlinjestil.

• Border Style: Välj vilken typ av kantlinjestil du vill ha. Du kan välja mellan Solid, Dashed eller Dotted.

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

• Border Color: Välj en färg för din kantlinje bland de tillgängliga färgalternativen eller ange en egen färgkod i fältet.

• Border Radius: Om du inte vill att din kantlinje ska ha vassa hörn kan du välja bland radiealternativen för att göra den mer rundad.

• Radius Edge: Dessutom kan du välja vilken kant som ska justeras genom att välja mellan alternativen ”All edges, Top only, eller Bottom only”.

Shadow

• Box Shadow: Om du vill lägga till en boxskugga runt din Progress Bar, välj ”+”-ikonen och välj mellan dina alternativ för drop shadow eller inner shadow. Du kommer att se olika skuggintensiteter, så testa dig fram för att se vilken som passar dina behov bäst.

• Text Shadow: I alternativet Text Shadow kan du lägga till en skuggeffekt på din text/innehåll. Du kan välja skuggans styrka, från ingen skugga till lätt nedtoning, medelstark skugga och stark skugga.

Text Style

Under Text Style kan du välja stil för ditt typsnitt, antingen fetstil, kursiv eller fetstil och kursiv.

Text Align

Text Align ger dig möjlighet att flytta din text till olika positioner, till exempel vänster, centrerat, höger eller justerat.

Percent Width

Med rullistan Percent Width kan du välja hur bred du vill att din Progress Bar ska vara inom elementboxen. Du kan välja från 0 procent upp till 100 procent.

Sizes

Du kan även välja höjden på din Progress Bar med rullistan Sizes. Dina alternativ här är small, medium och large.

Offset Color

Om du vill ställa in offsetfärgen för din Progress Bar, som fyller den återstående delen av elementboxen (om din Progress Bar inte är inställd på 100%), kan du välja bland alternativen i rullistan. Här kan du välja att offsetfärgen ska vara vit, transparent vit, svart eller transparent svart.

Visibility

Under alternativet Visibility kan du välja om ett visst redigeringsalternativ ska vara synligt på mobila enheter, datorer eller båda genom att klicka på motsvarande ikon.

Custom Class

För att skapa egna klasser kan du använda utrymmet Custom Class som finns tillgängligt.

CSS Selector

Om du behöver kopiera den anpassade CSS-koden klickar du bara på ”Copy”-ikonen till höger om referenskoden.

En väldesignad Progress Bar förbättrar användarupplevelsen genom att ge tydlig visuell feedback om deras resa. Med rätt anpassningsalternativ kan du enkelt anpassa den till ditt varumärke och dina funktionsbehov, för en smidig och engagerande navigeringsprocess.