Hoppa till huvudinnehåll

Hur fungerar knappar?

Allt om knappwidgeten: global knappdesign och stilmallar för knappar och länkar dina knappar.

Börja med att ställa in dina globala knappar i webbplatsens globala inställningar. Efter detta kan du enkelt använda knappwidgeten för att lägga in en knapp där du önskar i byggaren, kanaler och bloggen - och välja i knappinställningarna om du vill använda en av dina sparade globala stilar för knappar (du kan skapa flera) - eller anpassa en fritt.

Observera!

Knappar i mejlbyggaren när du ska skicka mejl används inte via widget knapp utan där används färdiga systemmallar med knappar som redan finns i mallarna. Här har du lite mindre designfrihet men kan använda nedan guide för att förstå hur du väljer att länka knappen i mejlet. Gäller din fundering just nu att länka en knapp i ett mejl kan du trycka här för att komma till rätt ställe i guiden direkt.

Såhär ställer du in global knappdesign

Gå till globala stilar genom att trycka på penseln till vänster i byggaren

Och sedan välja Knappar

Nu öppnas en inställningsvy där du kan skapa stilmallar för dina knappar.


Följande inställningar kan du göra i globala knappar:

  • Döpa stilmallen för din knapp

  • Byta namn på stilmallen

  • Ta bort stilmallen

  • Förhandsgranska den i förhandsgranskningsvyn

  • Anpassa globala knappstilar mellan desktop/mobil


  • Ställa in

    • Knappfärg

    • Kantfärg (frivilligt att ha)

    • Lägga till ev. gradientfärg

    • Ställa in textstil så som: typsnitt, textstorlek och teckenavstånd

    • Lägga till ev. skugga

    • Ställa in utfyllnad (luft mellan textinnehåll och ytterkant av knappen)

    • Ställa in kantradie

    • Ställa in kantstorlek

    • Om knappen ska vara i expanderat läge eller ej (innebär den går kant till kant i den kolumn den placeras i).

    • Justering om knappen ska vara centrerad eller höger-/vänsterjusterad

    • Eventuell hovereffekt när man hovrar med muspekaren över knappen.


När du är nöjd med din knapp >> Spara genom att trycka på Bekräfta.

Knappwidget

Nu varje gång du placerar en knappwidget på din webbplats (observera att detta ej gäller email byggaren) så kommer knappen automatiskt visas i den globala designen.

Vill du byta design?

Tryck då på penseln vid din knappwidget (eller på den lilla svarta knappen som säger Utseende när du är inne i knappens inställningar. Och välj bland dina färdiga knappmallar.

Observera!

Om du vill skräddarsy din knapps design från din vanliga designmall för knapp vald. Då måste du först gå in i knappens utseendeinställningar (via penseln) och ändra till Anpassad i stilmallen. Annars kommer t.ex. inte textstorlek och liknande slå igenom.

Så redigerar du din knappwidget

När du placerat din knapp kan du trycka på den och då kommer en meny synas som ger dig olika alternativ.

Knappens huvudinställningar > Tryck på Redigera

Här fyller du i den text som ska synas på knappen.

Du kan välja att lägga till en andra linje. Likt nedan exempel:


​Välj om texten i knappen ska justeras centrerat, vänster eller till höger.


Du kan också välja att lägga till en ikon före eller efter texten om du önskar.

Länka din knapp (dit den ska leda). Läs mer om det nedan.

OBS!
Valet om länkning kommer du även till om du trycker på länksymbolen i menyn när du trycker på knappen.

Länka din knapp

När du trycker på en plats för att välja länk i en knapp kommer nedan vy upp. Du kan under bilden läsa om vad varje val innebär.

Detta innebär varje val:

  • Sida: Här ser du alla sidor som finns i din webbplats sorterat i sidgrupper du placerat dem i. Välj den sida du önskar knappen ska leda till.

  • Butik: Här hittar du direktlänkar till kategorier och/eller produkter i din butik om du vill att kunden ska komma direkt dit när hen trycker på knappen.

  • Funnel: Här ser du funnels du har inom din webbplats. Välj Funnel och sedan funnelsteg. Obs! Ser du inte fin funnel här ligger den sannolikt placerad utanför din webbplats, du kan läsa mer om det i den här guiden.

  • Kanal: Här kan du länka till valfri sida i en av dina kanaler.

  • Extern länk: Detta är när din länk ska leda till en plats utanför din webbplats. Till exempel ett annat företags hemsida eller en funnel utanför din webbplats.

  • Ankarpunkt: Är när du vill leda besökaren till en specifik plats på en sida. T.ex. längre ned på befintlig sida eller vid ett särskilt block på annan sida. Läs mer om ankarpunkter.

  • Fil: Här får du välja en fil som du har (eller laddar upp vid tillfället) i din filhanterare. Det innebär att när personen trycker på knappen får de direkt tillgång till filen. Tänk därför på att om det t.ex. är en freebie eller liknande att följa den här guiden så att själva filen levereras i ett nästa steg istället för direkt i knappen i formuläret när de registrerar sig.

  • Popup: Själva popupen skapar du separat. Sedan kan du välja bland dina popups i detta val. Läs om hur du skapar popups här.

  • Länka en knapp till en E-post eller ett Telefonnummer: Här skriver du in en emailadress eller ett telefonnummer. När någon trycker på dessa kommer vid e-post besökarens e-post klient öppnas med den inskrivna e-posten ifylld som mottagare. Telefonnummer så öppnas det upp frågan om man vill ringa numret om man klickar på sin mobiltelefon.


    Gällande E-post kan det vara bra att veta att det fungerar dock bara om den som tycker på länken har detta inställt hos sig, så länge de har det så kommer deras mailklient att öppnas direkt till ett nytt mail.

  • Öppnas i samma flik eller nyflik? Det rekommenderas att använda att det öppnas i samma flik om det är sidor inom din webbplats som driver besökaren framåt så som till säljsidor, kassan eller registreringssidor. Leder länken till externa sidor, e-post adresser eller bort från din säljsida rekommenderas att öppnas i ny flik så inte kunden kommer bort från din viktiga säljsida.

  • Vad är nofollow länk? Det är sällsynt man använder sig av denna funktionalitet och rekommenderar som standard att inte bocka i den. I principen innebär det att när någon klickar på den länk du länkar - så vill inte du att Google ska följa klicket = i SEO språk rekommenderar du inte till Google den sidan länken leder till. Och för mottagaren är det alltid positivt med länkar till sin sida som inte är markerade som nofollow - det innebär för den sajten att andra rekommenderar den och det i sin. tur bidrar till positiv SEO ranking.

Lägg till två knappar bredvid varandra med ett enkelt knapptryck

Markera Lägg till en andra knapp och få två knappar bredvid varandra på ett enkelt vis. Du kan sedan välja om knapparna ska staplas över varann eller placeras sida vid sida.

Viktigt att tänka på med knappar sida vid sida

Om du ställer in att knapparna ska expandera i full bredd i knappinställningarna kommer inte detta fungera när två knappar är i bredd. I sådant fall måste du först kryssa ur "Expandera till full bredd" innan du aktiverar layout: sida vid sida på dina knappar.

Vill du de ser exakt likadana ut kan du längst ned i knappinställningarna markera den andra knappen ska matcha den primära knappens stil.

När du sedan öppnar knappens designvy kan du enkelt växla mellan den primära knappen och den andra knappen för att anpassa dem var för sig.


Designa din knapp

Via penseln får du upp en designvy där du kan redigera både text och knappdesignen.

Observera!

Om du vill skräddarsy din knapps design från din vanliga designmall för knapp vald. Då måste du först gå in i knappens utseendeinställningar (via penseln) och ändra till Anpassad i stilmallen. Annars kommer t.ex. inte textstorlek och liknande slå igenom.

  • Överst väljer du knappens färg + eventuell kantfärg

  • Med gradientfärg får knappen ett utseende som övergår från en färg till en annan.

  • Textstil väljer du textfärg, typsnitt, teckenstorlek och teckenavstånd.

  • Textstil rad 2 syns om du har 2 rader och har samma funktion som ovan punkt.

  • Skugga så kan du skapa en skuggeffekt på din knapp. Välj mellan flera inställningar.

  • Utfyllningens storlek är luftutrymmet i knappen runtom knapptexten.

  • Kantradie är där du ställer in hur kantiga/runda hörn din knapp skall ha.

  • Kantstorlek så reglerar du om du vill ha en linjerad kant runt knappen. Färgen för detta ställer du in näst längst upp i inställningarna under Knappfärg.

  • Expandera till fullbredd innebär att din knapp blir lika bred som fältet den finns i.

  • Hover effekt är olika effekter din knapp kan ha när någon hovrar med muspekaren över den. T.ex. byta färg, växa i storlek med mera.

Justeringsinställningar

Här väljer di om knappen ska vara vänsterjusterad eller centrerad

Animera din knapp

Här kan du ställa in om din knapp t.ex. skall flyta in i skärmen när man skrollar sig fram till den, blinka eller snurra in på skärmen.

Kopiera eller släng

Kopiera din knapp och klistra in på fler ställen för att slippa behöva designa allt från början. Då behöver du bara ställa in rätt text och länk så är knappen klar. Önskar du slänga din knapp gör du det på papperskorgen.

Fick du svar på din fråga?