Animerade CTA-knappar till Divi Elegant Themes CTA-knapp

8 animerade CTA-knappar till Divi

3 jun, 2020
Chrille Hedberg
Animerade CTA-knappar | Divi

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!

Animerade CTA knappar till Divi Elegant Themes

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.

Animerade CTA knappar till Divi Elegant Themes

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.

Animerade CTA knappar till Divi Elegant Themes

Du kan också välja att importera globalt sidhuvud och sidfot som statiska layouter.

Animerade CTA knappar till Divi Elegant Themes

Klicka på knappen redigera för att ändra sidhuvudet.

CTA #1 – Studseffekt

Animerade CTA knappar till Divi Elegant Themes

 

Inställningar för knapp:

Animerade CTA knappar till Divi Elegant Themes

  • Animationsstil: Studs
  • Aminationsriktning: Ner
  • Animations varaktighet: 1100 ms
  • Animationsfördröjning: 1500 ms
  • Animations startopacitet: 100%

CTA #2 – Verical Flip

Animerade CTA knappar till Divi Elegant Themes

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

Animerade CTA knappar till Divi Elegant Themes

Inställningar för knapp:

Animerade CTA knappar till Divi Elegant Themes

  • Animationsstil: Studs
  • Aminationsriktning: Centrerad
  • Animations varaktighet: 1500 ms
  • Animationsfördröjning: 1000 ms
  • Animationsintensitet: 400%
  • Animations startopacitet: 100%

CTA #3 – Horisontell Flip

Animerade CTA knappar till Divi Elegant Themes

Den horisontella flippen liknar den vertikala, för den enda skillnaden är riktningen.

Samma CSS-kod:

perspective: 150px

Animerade CTA knappar till Divi Elegant Themes

Öppna sedan inställningarna för knapp och se till att justeringen är centrerad:

Animerade CTA knappar till Divi Elegant Themes

Inställningar för knapp:

Animerade CTA knappar till Divi Elegant Themes

  • 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

Animerade CTA knappar till Divi Elegant Themes

 

I denna animation ligger en liten fördröjning innan knappen trillar ner och studsar.

Animerade CTA knappar till Divi Elegant Themes

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;

Animerade CTA knappar till Divi Elegant Themes

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

Animerade CTA knappar till Divi Elegant Themes

Här får man kombinera en slide-animation med en roll-animation.

Animerade CTA knappar till Divi Elegant Themes

Kolumninställningar:

  • Animationsstil: Slide
  • Aminationsriktning: Ned
  • Animationsfördröjning: 1000 ms
  • Animations startopacitet: 100%

Och lite CSS-kod:

perspective: 150px;

Animerade CTA knappar till Divi Elegant Themes

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

Animerade CTA knappar till Divi Elegant Themes

Här transformeras knappen och använder zoom-animation.

Animerade CTA knappar till Divi Elegant Themes

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

Animerade CTA knappar till Divi Elegant Themes

Här kombinerar vi att zooma in och zooma ut.

Animerade CTA knappar till Divi Elegant Themes

Kolumninställningar:

  • Animationsstil: Zoom
  • Aminationsriktning: Centrerad
  • Animations varaktighet: 1000 ms
  • Animationsfördröjning: 2000 ms
  • Animationsintensitet: -100%
  • Animations startopacitet: 100%

Animerade CTA knappar till Divi Elegant Themes

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

Animerade CTA knappar till Divi Elegant Themes

Här lägger vi en slide-animation på kolumnen och en 720-graders flip på knappen.

Animerade CTA knappar till Divi Elegant Themes

Kolumninställningar:

  • Animationsstil: Slide
  • Aminationsriktning: Vänster
  • Animations varaktighet: 2000 ms
  • Animationsfördröjning: 2000 ms
  • Animationsintensitet: 100%
  • Animations hastighetskurva: Linjär

Animerade CTA knappar till Divi Elegant Themes

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

Animerade CTA knappar till Divi Elegant Themes

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!

Chrille Hedberg

Chrille Hedberg

Jag har jobbat med WordPress i dryga 10 års tid, främst på hobbynivå. Jag har blivit lite av en mästare på att knyta ihop olika tillägg för att få funktioner att lira ihop som de ska. Jag har också blivit rätt bra på det! Har nu startat ITprojekt.se främst för att hjälpa småföretagare som sitter illa till på grund av coronasituationen. Tillsammans med kollegan Martin tar vi olika uppdrag inom just området ITprojekt, men vi taggas lite extra av att kombinera teknik med försäljning. Har bakgrund från vården innan jag skolade om mig till ingenjör och sedan trillade in på bana som säljare. Jobbar nu med teknisk försäljning och är regionansvarig för motsvarande halva Sveriges yta.

0 kommentarer

Skicka en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Dela detta