Du har en nettside med god informasjon, men besøkende leser og forsvinner uten å ta kontakt eller kjøpe noe. Det som mangler er en tydelig oppfordring til handling. En Call to Action-seksjon i WordPress forteller besøkende nøyaktig hva de bør gjøre videre, enten det er å kontakte deg, melde seg på nyhetsbrevet eller starte en prøveperiode. Forskjellen mellom en nettside som konverterer og en som ikke gjør det, handler ofte om akkurat dette.
Hva er en Call to Action i WordPress?
En Call to Action (CTA) er en seksjon som skiller seg visuelt ut fra resten av innholdet og inneholder en tydelig handlingsoppfordring. Typisk består den av en overskrift som fanger oppmerksomheten, en kort tekst som forklarer verdien, og en knapp som gjør det enkelt å handle.
I WordPress bygger du en CTA-seksjon med blokker. Det fine er at du ikke trenger en spesialisert utvidelse eller egendefinert kode. Med en kombinasjon av Gruppe-blokken, en overskrift, et avsnitt og en knapp lager du en profesjonell CTA som fungerer på alle skjermstørrelser.
Bygge en Call to Action med Gruppe-blokken
Start med å legge til en Gruppe-blokk. Skriv /gruppe i et tomt avsnitt i redigeringsverktøyet, eller finn den via plussikonet. WordPress ber deg velge en layout for gruppen. Velg Rad (row) hvis du vil plassere elementer side om side, eller standard Gruppe hvis du vil stable dem vertikalt.
En effektiv CTA-struktur er å bruke en Gruppe-blokk med vertikal stabling som ytterste beholder. Inne i denne legger du en Rad-blokk med en overskrift og et avsnitt side om side, og under raden plasserer du en Knapp-blokk. Resultatet er en overskrift og beskrivelse øverst, med en tydelig knapp under.
Du kan selvfølgelig variere denne strukturen etter behov. Noen foretrekker alt sentrert i en enkel kolonne. Andre vil ha knappen ved siden av teksten. Blokkredigereren gir deg fleksibiliteten til å eksperimentere uten begrensninger.
Stile Gruppe-blokken: bakgrunn og bredde
For at CTA-seksjonen skal skille seg visuelt ut, trenger den en annen bakgrunn enn resten av siden. Klikk på Gruppe-blokken og gå til Stiler i høyre sidefelt.
Mange temaer tilbyr forhåndsdefinerte gruppestiler (Stil 1, Stil 2, Stil 3) som gir blokken forskjellig bakgrunnsfarge og utseende med et klikk. Prøv de forskjellige stilene for å se hvilken som passer best med resten av designet ditt. Bruker du temastiler, oppdateres utseendet automatisk hvis du endrer temaets fargepalett senere.
Sett bredden til fullbredde i blokkverktøylinjen slik at CTA-seksjonen strekker seg over hele skjermbredden. En fullbredde CTA med en kontrastfarge skaper et tydelig visuelt brudd som fanger blikket.
Utfylling (padding) bestemmer avstanden mellom innholdet og kantene av Gruppe-blokken. God utfylling gir innholdet luft og gjør seksjonen lettere å lese. Du finner utfylling under Dimensjoner i stiler-panelet. Ikke forveksle utfylling med marg (margin). Utfylling er avstanden inni blokken, marg er avstanden utenfor.
Overskrift og tekst som overbeviser
Overskriften i CTA-seksjonen bør være handlingsorientert og konkret. "Kom i gang i dag" er bedre enn "Våre tjenester". "Få en gratis vurdering av nettsiden din" er enda bedre fordi den forteller besøkende nøyaktig hva de får.
For overskriften velger du vanligvis H3 eller H2 avhengig av hvor i sidehierarkiet CTA-seksjonen befinner seg. Under Stiler i høyre sidefelt kan du velge formateringsvalg som Display for ekstra synlighet eller justere størrelsen til XL for å gjøre overskriften mer fremtredende. Juster skrifttykkelsen til halvfet (semi-bold) for en moderne look som ikke er like tungt som helsvart.
Teksten under overskriften er kort og fokusert. En til to setninger som forklarer hva besøkende får ved å klikke. Unngå lange avsnitt. CTA-seksjonen handler om å drive handling, ikke om å informere. Informasjonen bør allerede være gitt i innholdet over.
Knappen: gjør det enkelt å handle
Skriv /knapper i redigeringsverktøyet for å legge til en Knapp-blokk. Skriv teksten som skal stå på knappen. Hold det kort og handlingsorientert: "Start nå", "Kontakt oss", "Last ned gratis" eller "Bestill time".
I stiler-panelet kan du justere knappens utseende. En effektiv tilnærming er å sette knappens bredde til 100 prosent. Dette gjør knappen bred og lett å klikke på, spesielt på mobil. Brede knapper har ofte høyere klikkrate enn smale knapper fordi de er mer synlige og enklere å treffe med fingeren.
Klikk på knappen og legg til lenken der besøkende skal sendes. Det kan være en kontaktside, et bestillingsskjema eller en landingsside. Sørg for at destinasjonssiden leverer det knappen lover.
Responsiv sjekk: fungerer CTA-en på mobil?
En CTA-seksjon som ser perfekt ut på en stor skjerm kan bli uleselig på mobil. Bruk forhåndsvisningen i verktøylinjen til å sjekke skrivebordsvisning, nettbrettvisning og mobilvisning. Se etter disse tingene:
- Er overskriften lesbar uten å scrolle horisontalt?
- Har teksten nok luft rundt seg, eller presses den mot kantene?
- Er knappen stor nok til å klikke med en finger?
- Stables rad-elementene pent oppå hverandre på smal skjerm?
Hvis noe ser feil ut på mobil, juster utfyllingen og tekststørrelsene. WordPress sine temaer håndterer mye av den responsive tilpasningen automatisk, men det er alltid lurt å verifisere.
Temafarger gir fremtidssikker design
Et gjennomgående prinsipp for Call to Action-blokker i WordPress er å bruke temafarger i stedet for egendefinerte farger. Når du velger bakgrunnsfarge for Gruppe-blokken, tekstfarge for overskriften og knappefarge, viser WordPress temapaletten øverst i fargevelgeren.
Velger du temafarger, betyr det at hele CTA-seksjonen oppdaterer seg automatisk hvis du endrer fargepaletten i temainnstillingene eller bytter til et helt nytt tema. Velger du egendefinerte farger med fargevelgeren, er fargene hardkodet. Det fungerer fint akkurat nå, men skaper ekstra arbeid hvis du gjør designendringer senere.
Dette prinsippet gjelder spesielt for CTA-seksjoner fordi de gjerne brukes på flere sider. Har du fem sider med samme CTA, og alle bruker temafarger, oppdateres alle fem automatisk ved en fargeendring. Med egendefinerte farger må du redigere alle fem manuelt.
Neste steg
Nå som du kan bygge en effektiv CTA-seksjon, kan du kombinere den med en visuelt slående omslagsside for å skape sider som virkelig fanger besøkendes oppmerksomhet. Vil du lære mer om hvordan du lager sider i WordPress fra bunnen av, har vi en komplett guide for det.
Denne videoen er hentet fra kurset WordPress - komplett guide på Utdannet.no. I det fulle kurset lærer du å bygge Call to Action-seksjoner som konverterer, designe komplette sidelayouter med WordPress sine innebygde blokker, og lage en nettside som driver resultater.
