Knapp

Knappar är viktiga för att öka funktionaliteten och fånga leads uppmärksamhet. Låt oss gå igenom detaljerna så att din knapp verkligen sticker ut. Börja med att dra knappelementet på plats genom att välja det från elementmenyn.

När den är placerad kan du anpassa utseende och funktion så att de matchar dina designmål genom att klicka på elementet och öppna inställningarna till höger. Inställningarna är uppdelade i tre kategorier.

Allmänna inställningar

Elementnamn

Redigeringsverktygsfältet för det valda elementet visas på vänster sida i editorn. Du kan byta namn på standardnamnet eller titeln som visas högst upp på skärmen för enklare navigering när du skapar din funnel-sida.

Textalternativ

1. Text: Här redigerar du texten på knappen.
2. Undertext: Om du vill lägga till en undertext på knappen skriver du den här.

Typografi

Här kan du redigera typsnittet för knappens innehåll. Tillgängliga alternativ:

1. Typ: Välj ett nytt typsnitt från rullgardinsmenyn.
2. Textstorlek: Justera textstorleken med reglagen.
3. Undertextstorlek: Justera storleken på undertexten.
4. Teckensnittsvikt: Ändra tjockleken på knapptexten. Välj till exempel light, regular, bold eller extra bold.

5. Undertextens teckensnittsvikt: På samma sätt som huvudtexten kan du justera tjockleken på undertexten.
6. Teckenavstånd: Bestäm hur brett tecknen ska vara.
7. Texttransform: Ändra texten till versaler, gemener eller kapitalisera varje ord.

Knappåtgärder

Välj vart du vill länka knappen. Alternativen är:

• Öppna popup: En förinställd popup visas.
• Webbplats-URL: Kontakter omdirigeras till den konfigurerade webbplatsen. Du kan också välja om URL:en ska öppnas i en ny flik.
• Ladda ner fil: Ladda upp eller välj en fil från mediebiblioteket som laddas ner vid klick.
• Dölj element: Ange vilka element som ska döljas.
• Visa element: Ange vilka element som ska visas.
• Scrolla till element: Välj vilket element sidan ska scrolla till.
• Steg: Välj vilket steg som ska visas vid klick.
• Nästa steg: Omdirigerar till nästa steg i funneln eller på webbplatsen.
• Ring: Initierar ett samtal till det valda numret.
• SMS: Initierar ett SMS till det konfigurerade numret.
• E-postadress: Initierar ett e-postmeddelande till den konfigurerade adressen.
• Medlemskap: Omdirigerar kontakter till kundportalen så att de kan gå med i dina kurser eller communities.

Färgalternativ

1. Bakgrundsfärg: Ändra knappens bakgrundsfärg.
2. Färg: Justera textfärgen i knappen, till exempel texten “Klicka för att registrera dig”.
3. Undertextfärg: När du lägger till undertext justerar du färgen här.
4. Ikonfärg: Justera färgen på ledande och avslutande ikon.

Ikon

Lägg till en ikon genom att välja bland tillgängliga alternativ eller söka efter en specifik ikon.

1. Ledande ikon: Placerar en ikon före texten på knappen.
2. Avslutande ikon: Ikonen placeras efter texten i knappen.

Stilar

Knappens utseende

Använd dessa alternativ för att ändra knappens utseende direkt.

1. Full bredd: Gör knappen lika bred som elementrutan eller låt den vara flexibel.
2. BG-stilar: Behåll bakgrunden eller ta bort den så att endast texten visas.
3. Vertikalt och horisontellt utrymme: Öka eller minska knappens höjd och bredd.

Avståndsalternativ

Det finns olika avståndsalternativ beroende på vilket redigeringsalternativ du arbetar med.

• Padding: Fyra reglage flyttar innehållet åt vänster, höger, upp eller ner.
• Marginal upp och ner: Justera topp- eller bottenmarginalen.

Kantalternativ

• Kant: Välj typ av kant. När du väljer en kanttyp visas kantinställningarna.
• Stil: Solid, streckad eller prickad kant.
• Bredd: Ökar kantens tjocklek.
• Färg: Ändra kantfärgen.
• Radie: Justerar hur rundade hörnen blir.
• Radiakant: Välj vilka hörn som ska rundas.

Knappjustering

Justera knappens text och ikoner till vänster, center eller höger.

Skugga

• Boxskugga: Lägg till en skugga så att knappen sticker ut.
• Textskugga: Välj hur stark eller svag skuggan på texten ska vara.

Synlighet

Ändra knappens synlighet för mobil- och desktopversioner av sidorna.

Anpassad klass

Lägg till en anpassad klass genom att skriva önskat klassnamn i fältet Custom Class.

CSS-väljare

Klicka på kopieringsikonen till höger om referensnumret för att kopiera CSS-väljaren.

Animationsinställningar

Entréanimation

Välj en animationseffekt när knappen först visas på sidan, till exempel fade-in eller slide-up.

Klicka på Adjust Animation för att anpassa skala, varaktighet, fördröjning och easing.

Hover-animation

Lägg till en effekt som aktiveras när användare hovrar över knappen.

Och så är det klart! Med dessa steg kan du enkelt lägga till och anpassa en knapp som både ser bra ut och driver handling.