Slik legger du til en knapp i WordPress-editoren [tutorial].

Hvorfor er WordPress' knappeblokk så viktig?

Navigasjon på nettstedet er viktig for besøkende og kunder. Vi ønsker å sende dem fra en underside til en annen. Veilede dem gjennom hele kjøpsprosessen. Derfor er det viktig å sette inn viktige lenker på riktig måte i sideinnholdet.

I utgangspunktet har vi to alternativer. Bruk standardlenke eller knapp. Det er ulike meninger om når man skal bruke det første og det siste alternativet. Det er vanlig at det er flere mulige handlinger på en side. Vi må være sikre på hvilken som er primær og hvilken som er sekundær. Vi anbefaler at du kun bruker knappen til den primære handlingen. På den måten oppnår du større synlighet for den primære handlingen. Du retter de besøkendes oppmerksomhet mot denne handlingen. Vi kan også kalle det en call-to-action-knapp. Ikke opprett for mange knapper på én underside.

Hva er de viktigste knappefunksjonene?

• Knapper kan tiltrekke seg besøkendes oppmerksomhet - call to action
• De separerer innholdet på siden eller innlegget og gjør det mer lesbart.
• Hjelp til å orientere deg på siden. Mange besøkende skanner siden kun visuelt med øynene.
• Navigere besøkende til andre sider ved hjelp av hyperkoblinger

Det er mange parametere som avgjør om en knapp blir vellykket. Viktige parametere er for eksempel størrelse, plassering og farge. Det er nødvendig å følge standard UI- og UX-prinsipper. Grønn farge brukes for knapper med positiv handling, for eksempel for å kjøpe noe. Rød farge brukes til negative handlinger - for eksempel å melde seg av nyhetsbrevet. Korrekt utformede knapper kan på denne måten direkte påvirke de besøkendes handlinger.

Legge til en knapp på en side eller et innlegg i WordPress

Situasjonen før WordPress 5

Å legge til knapper var en ganske komplisert prosess før WordPress Block Editor ble oppfunnet. Fordi denne funksjonen ikke var naturlig i WordPress. Du kan bruke et tema med Page Builder eller en tredjeparts plugin. Kortkoder oppretter knapper i dette tilfellet.

I våre eldre WordPress-temaer kan du legge til knapper ved hjelp av kortkoder i visuell redigering. Når du har klikket på Sett inn kortkode -> Knapp, kan du angi ulike innstillinger i modalvinduet. Tekst, tekstfarge, knappfarge, url, justering og så videre. Takket være disse avanserte innstillingene kan du enkelt og raskt legge til en knapp uten programmering.

Hvordan bruker jeg knappeblokken i WordPress-editoren?

Takket være WordPress 5 finnes det en annen måte. Mye enklere. WordPress' visuelle redigeringsprogram inneholder mange nyttige blokker. For å opprette en knapp på nettstedet kan du nå bruke WordPress Button-blokken i redigeringsprogrammet.

Steg-for-steg-guide til hvordan du legger til en knapp i WordPress-editoren

1. Først må du bestemme hvor du ønsker å sette inn knappen.
2. Knappeblokken kan legges til på ulike måter:
- ved å klikke på "+" i den øverste linjen eller hvor som helst i blokkeredigeringsverktøyet der du velger knappeblokk.

- Du kan også finne en hvilken som helst blokk ved hjelp av søkefeltet, bare skriv "knapp".

- ved å skrive "/" som gir deg tilgang til alle tilgjengelige blokker.

3. Opprettet knappeblokk kan konfigureres ytterligere

Legg til knappetekst og URL-adresse

Så snart WordPress Block-knappen er opprettet, kan du skrive inn tekst i den. Husk at det er best å bruke en kort tekst med et tydelig budskap i en call to action-knapp. Du kan angi at teksten skal være fet, kursiv eller understreket. Alle disse endringene kan gjøres ved å klikke på verktøylinjen. Du kan også justere knappen til siden eller sentrere den.

Knappen peker vanligvis til en annen side eller et eksternt nettsted. Derfor er det rett under knappen en inngang for å legge til en URL-adresse. Fordelen er at det ikke er nødvendig å velge tekst for å legge til URL-adressen.

Endre farge på knappene

Med den nye editoren kan du endre WordPress-knappeblokken på noen få sekunder. Bare bruk innstillingene i sidepanelet på høyre side. Du kan endre knappens bakgrunnsfarge eller tekstfarge inne i knappen. Det finnes grunnleggende forhåndsdefinerte farger, eller du kan velge dine egne. Alle endringer er synlige med en gang, slik at du kan se om fargekombinasjonen er riktig.

En god funksjon er at hvis du velger feil kombinasjon, for eksempel grå bakgrunn og hvit tekstfarge, vil WordPress Block Editor advare deg om at knappen ikke kan leses på nettstedet ditt.

Finn din egen knappestil

For å opprette eller endre knappen raskt og enkelt kan du bruke en av de forberedte stilene. På den måten kan knappen endres til for eksempel avrundet, kantet eller rektangulær. Prøv deg frem til det som passer best til stilen eller designet på nettstedet ditt.

Redigering av knapp med tilpasset CSS

Enda større tilpasning kan oppnås ved hjelp av egendefinerte CSS-klasser. På den måten kan du legge til dine egne CSS-stiler og style-knappen i WordPress-editoren akkurat slik du ønsker.

Som vi kan se, er det mye enklere enn å bruke knappekortkode. WordPress Button-blokken kan brukes i alle temaer som er kompatible med WordPress Block Editor. Les mer om vårt splitter nye WordPress-tema Citadela. Det er spesialdesignet og utviklet for WordPress Block Editor.

Ekstra tips på slutten

Glem ikke å overvåke WordPress-knappeblokken og selve knappesuksessen. Hvis du bruker Google Analytics, kan du opprette en unik URL. For å spore besøkendes klikk kan du legge til Google UTM-parameter. URL-adressen kan opprettes ved hjelp av URL-byggeren. Ved å legge til parametere kan du identifisere kilden til besøket. Det er svært nyttig hvis du ønsker å vite hvor de besøkende kom til shopping-siden din.

Hva er det største problemet du har med WordPress' knappeblokk? La oss diskutere i kommentarfeltet nedenfor. Del dine erfaringer med bruk av knapper på nettstedet.