Guiden för att bygga CTA-knappar till Divi skrevs ursprungligen av Jason Champagne för Elegant Themes och nås på denna länk.
Vad är en CTA-knapp?
CTA är förkortning för Call To Action och är en uppmaning i knappform. ”BESTÄLL”, ”Klicka här för …”, ”Prova nu” och liknande är exempel på CTA-knappar.
Dessa knappar används ofta på webbplatser som jobbar med handel (fysiska produkter eller tjänster) eller med information (bloggar, sidor med innehåll för nedladdning, osv).
Varför använda animerade CTA-knappar?
Tanken med en CTA-knapp är att den skall dra ögonen till sig. Färgen på knappen skall gärna sticka ut och stå i kontrast till webbplatsens övriga färgschema. Har du en webbplats i grått och vitt – välj en knapp i till exempel rött eller rosa! Genom att lägga på en animering kommer ögonen automatiskt att dras till det som rör sig – det är lite så våra kroppar fungerar. Men, det är under förutsättning att det inte är mer som rör sig på skärmen.
Generellt sett är jag väldigt emot saker och ting som hoppar och rör sig på skärmen. Det är otroligt sällan jag använder videos, och om jag gör det så lägger jag alltsom oftast in en knapp så besökaren själv kan välja att klicka på play.
Men, en CTA-knapp är lite annorlunda och den vill vi ska sticka ut!
Såhär kommer knapparna se ut när de är färdiga, och de kommer att ligga i sidhuvudet/menyraden på webbplatsen.
Ladda ner layouter
Du kan antingen välja att bygga din knapp själv, eller så laddar du ner en färdig importfil med layouter.
Du behöver ha Divi installerat och aktiverat, men det var kanske ingen jätteöverraskning? Denna guide bygger också på denna temamall där 404-sidan är den som används.
Gå till Divi > Theme Builder (beroende på språkinställningar kan det också heta Temabyggare). Välj import/export (Portability, märkt med siffran 2 i bilden ovan. I popup-fönstret väljer du sedan filen theme-builder-pack-2-404-page-template.json som du laddat ner (och packat upp) . Klicka sedan på Importera.
Du kan också välja att importera globalt sidhuvud och sidfot som statiska layouter.
Klicka på knappen redigera för att ändra sidhuvudet.
CTA #1 – Studseffekt
Inställningar för knapp:
- Animationsstil: Studs
- Aminationsriktning: Ner
- Animations varaktighet: 1100 ms
- Animationsfördröjning: 1500 ms
- Animations startopacitet: 100%
CTA #2 – Verical Flip
För att lägga till denna animering behöver du lägga till en CSS-egenskap i den överliggande kolumnens (kolumn 2) inställningar:
perspective: 150px
Inställningar för knapp:
- Animationsstil: Studs
- Aminationsriktning: Centrerad
- Animations varaktighet: 1500 ms
- Animationsfördröjning: 1000 ms
- Animationsintensitet: 400%
- Animations startopacitet: 100%
CTA #3 – Horisontell Flip
Den horisontella flippen liknar den vertikala, för den enda skillnaden är riktningen. Samma CSS-kod:
perspective: 150px
Öppna sedan inställningarna för knapp och se till att justeringen är centrerad:
Inställningar för knapp:
- Animationsstil: Vikning
- Aminationsriktning: Centrerad
- Animations varaktighet: 1500 ms
- Animationsfördröjning: 2000 ms
- Animationsintensitet: 400%
- Animations startopacitet: 100%
- Animations hastighetskurva: Linjär
CTA #4 – Studs + Flip
I denna animation ligger en liten fördröjning innan knappen trillar ner och studsar.
Kolumninställningar:
- Animationsstil: Studs
- Aminationsriktning: Ned
- Animationsfördröjning: 2000 ms
- Animations startopacitet: 100%
Du behöver också lägga in CSS-kod:
perspective: 150px;
Inställningar för knapp:
- Animationsstil: Flip
- Aminationsriktning: Centrerad
- Animations varaktighet: 1500 ms
- Animationsfördröjning: 1000 ms
- Animationsintensitet: 400%
- Animations startopacitet: 100%
CTA #5 – Nedglid + rotation
Här får man kombinera en slide-animation med en roll-animation.
Kolumninställningar:
- Animationsstil: Slide
- Aminationsriktning: Ned
- Animationsfördröjning: 1000 ms
- Animations startopacitet: 100%
Och lite CSS-kod:
perspective: 150px;
Inställningar för knapp:
- Animationsstil: Roll/rullning
- Aminationsriktning: Ned
- Animations varaktighet: 1500 ms
- Animationsfördröjning: 1000 ms
- Animations startopacitet: 100%
CTA #6 – Zoom
Här transformeras knappen och använder zoom-animation.
Inställningar för knapp:
- Transformeringsskala: 175%
- Animationsstil: Zoom
- Aminationsriktning: Centrerad
- Animations varaktighet: 1500 ms
- Animationsfördröjning: 1000 ms
- Animations startopacitet: 100%
CTA #7 – Puls + Zoom
Här kombinerar vi att zooma in och zooma ut.
Kolumninställningar:
- Animationsstil: Zoom
- Aminationsriktning: Centrerad
- Animations varaktighet: 1000 ms
- Animationsfördröjning: 2000 ms
- Animationsintensitet: -100%
- Animations startopacitet: 100%
Inställningar för knapp:
- Animationsstil: Zoom
- Aminationsriktning: Centrerad
- Animations varaktighet: 1500 ms
- Animationsfördröjning: 1000 ms
- Animationsintensitet: 50%
- Animations startopacitet: 100%
CTA #8 – Skruva in
Här lägger vi en slide-animation på kolumnen och en 720-graders flip på knappen.
Kolumninställningar:
- Animationsstil: Slide
- Aminationsriktning: Vänster
- Animations varaktighet: 2000 ms
- Animationsfördröjning: 2000 ms
- Animationsintensitet: 100%
- Animations hastighetskurva: Linjär
Inställningar för knapp:
- Animationsstil: Flip
- Aminationsriktning: Centrerad
- Animations varaktighet: 2000 ms
- Animationsfördröjning: 2000 ms
- Animationsintensitet: 800%
- Animations startopacitet: 100%
Våra 8 animerade CTA-knappar till Divi
Nu borde du ha något av följande 8 resultat som CTA-knapp! Nu ligger ju dessa i sidhuvudet, men är inget absolut måste – naturligtvis. Knapparna kan placeras prcis var som helst.Tänk dock på mina inledande ord: När det är för mycket som snurrar och rör på sig blir man generellt sett mer trött och less än engagerad. Använd animationer sparsamt!
