Hvordan legge til en knapp i overskriften i WordPress

Hvis du vil legge til en handlingsfremmende oppfordring til WordPress-nettstedet ditt og plassere det et sted som er lett synlig, er nettstedets overskriftsområde et perfekt sted å gjøre det. Plassert øverst på hver nettside, er overskriften vanligvis noe av det første folk ser når de åpner en side. Dette gjør det til et naturlig sted for å legge til noen viktige elementer som nettstedets tittel og overskrift, hovednettstedets navigasjon, merkevarelogoen og selvfølgelig CTA-knappene.

Hele formålet med å legge til en knapp i utgangspunktet er å få de besøkende til å ta den ønskede handlingen og lede dem til en bestemt side på nettstedet ditt (eller utenfor nettstedet ditt) ved å klikke på den. Derfor må du gjøre knappen synlig på siden din umiddelbart for å tiltrekke oppmerksomheten til de besøkende og få dem til å klikke på den for å generere flere konverteringer. Dette betyr at utformingen av knappen skal tillate den å skille seg ut fra andre standard-utseende lenker som kan vises i overskriftsmenyen.

Nå, som standard, kommer ikke WordPress med muligheten til å legge til individuelle knapper i overskriftsområdet ditt. I stedet kan du legge til en navigasjonsmeny i overskriften med lenker som har samme design. Likevel er det en måte å «transformer» en menykobling i overskriftsnavigasjonsmenyen og få den til å vises som en knapp. Heldigvis er dette enkelt å gjøre hvis du bruk litt tilpasset CSS. Så denne gangen skal vi vise deg hvordan du legger til en knapp i navigasjonsmenyen for WordPress-overskrifter. Rett etter vil vi også demonstrere hvordan sett inn og tilpass en knappewidget i et hvilket som helst annet overskriftsområde du ønsker (bortsett fra å legge den til rett ved siden av navigasjonsmenyen) ved å bruke bro-temaet. Så len deg tilbake, slapp av og les videre.

Legge til en knapp i WordPress-overskriftsmenyen ved å bruke tilpasset CSS

For å begynne å transformere menykoblingen din til en knapp, bør du sette inn menykoblingen du vil bruke ved skal Utseende >> Menyer. Legg deretter til en lenke til en tidligere opprettet navigasjonsmeny.

Hvis menyen din allerede inneholder et menyelement som du vil endre til en knapp, trykker du bare på pilen på menyelementet for å utvide og redigere det.

Hvis du ennå ikke har opprettet menyelementet ditt, kan du enten finne det på venstre side av skjermen (ved å finne det i sider, innlegg osv. – avhengig av om menyelementet fører til en side, et innlegg eller et annet innlegg type) og deretter klikke på Legg til i menyen knapp. Hvis du ønsker å koble til en side utenfor nettstedet ditt, kan du velge Egendefinerte lenker rullegardinmenyen og sett inn URL-en og lenketeksten manuelt, og klikk deretter på Legg til i menyen.

Deretter må du sørge for å gi en Navigasjonsetikett til varen din (hvis du ikke allerede har gjort det).

Når du har gjort dette, bør du gå videre og få tilgang til Skjermalternativer -knappen (plassert øverst på skjermen). Pass på at boksen som sier «CSS Classes» er merket. Dette vil tillate deg å legge til en tilpasset CSS-klasse til lenken din og deretter style den slik du vil.

Nå, i menyelementinnstillingene, vil du kunne se det nye CSS-klassealternativet. Sett inn et navn for menyklassen din (vår er overskrift-meny-knapp, men du kan tilordne et hvilket som helst unikt navn du ønsker her).

Slå den Lagre meny for å lagre innstillingene.

Deretter bør du tilpasse utseendet til overskriftsmenyknappen ved å bruke en egendefinert CSS-kode. Gå til Utseende >> Tilpass for å få tilgang til din WordPress-tematilpasser og slå den Ekstra CSS knapp.

Sett inn din egendefinerte CSS-kode her og klikk deretter på publisere. Du bør imidlertid merke deg at dette umiddelbart vil få alle endringene dine til å vises live, så pass på å trykke på denne knappen først etter at du er helt fornøyd med utseendet til overskriftsmenyknappen.

Hvis du vil, kan du gjerne sette inn CSS-koden vår, eller endre den på en hvilken som helst måte for å passe dine designpreferanser (endre dens kant- og kantradius, bakgrunn og tekstfarge, og så videre):

.header-menu-button { 
background-color:#86af49;
border:1px;
border-radius:25px;
}
.header-menu-button a, .header-menu-button a:hover, .header-menu-button a:active { 
color:#fff !important;
}

Vi har valgt den grønnfargede knappen (som perfekt matcher layouten vår) og den rene hvite fargen på knappeteksten. Vi har også satt en kantradius på 25px for å få knappen vår til å ha litt avrundede kanter. Du bør merke deg at jo mer du reduserer antall piksler, desto skarpere blir kantene, mens økning av antall piksler vil gjøre at knappen din får en mer avrundet form.

Rett etter at du har lagt til CSS-koden og trykket publisere, vil du kunne se hvordan knappen din vil se ut i forhåndsvisningen av nettstedet.

Legge til en knapp i overskriften din ved å bruke Qode-temaer

Vi har nevnt helt i begynnelsen at WordPress ikke kommer med muligheten til å legge til en knapp i overskriftsområdet ditt ut av esken. Når det er sagt, kommer noen WordPress-temaer med mange tilleggsfunksjoner som er ment å utvide funksjonaliteten til WordPress ytterligere på forskjellige måter. For eksempel, når det gjelder Qode-temaer, er det en widget som heter Qode-knapp som lar deg legge til og tilpasse en knapp direkte i topptekstområdet. Vi vil vise deg hvordan du gjør dette ved å bruke Bridge-temaet, så sørg for å lese videre.

Nå, med en gang, bør vi nevne at Bridge (så vel som mange andre Qode-temaer) inneholder flere tilpassede widgetområder du kan bruke til å legge til forskjellige widgets til nettstedet ditt. Når det gjelder nettstedsoverskriften spesielt, består den av to hovedområder – topptekst og topptekst nederst. Deretter er disse områdene ytterligere delt inn i Topptekst øverst til venstre, topptekst øverst til høyre, topptekst nederst til høyre og topptekst nederst i midten widget-området. Du vil kunne legge til widgets i et av disse områdene ved å gå til Utseende >> Widgets.

Hvis du bruker Bridge og du ikke ser noen av disse områdene i listen over widgetområder, er det en sjanse for at ett av overskriftsområdene (vanligvis en topptekst) er slått av. Du trenger å sørg for at dette området vises ved å gå til Qode Alternativer >> Overskrift i WordPress-dashbordet ditt.

Deretter finner du Topptekst seksjon og bytt på Vis topptekstområdet til Ja.

Det er mange andre alternativer her relatert til topptekstområdet ditt som du kan justere i henhold til dine preferanser, for eksempel bakgrunnsfargen, polstring, muligheten til å skjule den på rulling og andre.

Selvfølgelig vil du også finne andre alternativer relatert til topptekstbunnområdet, så vel som andre generelle topptekstalternativer, for eksempel muligheten til å endre kantfarge, gjennomsiktighet, sette den til å være i rutenett, og så videre.

Når du er fornøyd med innstillingene dine, trykker du på Lagre endringer knapp.

La oss nå se hvordan du kan legge til en knapp til et av disse widgetområdene ved å bruke Qode-knapp widget. Du kan legge til denne knappen i et hvilket som helst Header-widgetområde du liker. Vi skal demonstrere å legge til en knapp til Topptekst nederst til høyre widget-området, som vil få knappen vår til å vises rett ved siden av overskriftsnavigasjonsmenyen. Dette er et av de vanligste områdene for å legge til en knapp på et nettsted, noe som er ganske logisk siden selve navigasjonsmenyen er et av de mest merkbare nettstedelementene.

For å gjøre dette, finn en Qode-knapp widget, velg widgetområdet ditt (overskrift nederst til høyre) og trykk på Legg til widget -knappen (eller ganske enkelt dra den til widgetområdet til høyre).

Ved å bruke Qode Button-widget-alternativene vil du kunne angi størrelsen på knappen, legg til knappen tekst, lenke, endre fargene (svevefarge, bakgrunnsfarge osv.), og mye mer.

Slå den Lagre knappen når du er ferdig med å angi alternativene for knappewidgeten, og gå videre for å se hvordan knappen ser ut live.

Selvfølgelig, som vi allerede har nevnt, kan du enkelt legge til knappen til et hvilket som helst annet tilgjengelig header-widgetområde. For eksempel, her er hvordan knappen vår ser ut når vi har lagt til (og tilpasset) vår Qode Button-widget i Header Top Venstre-widgetområdet (på samme måte som vi gjorde for Header Nederst til høyre):

Som du ser er knappen vår nå plassert over logoen til venstre.

Eller, her er utseendet til knappen vår når den er lagt til widgetområdet for topptekst øverst til høyre:

Selvfølgelig kan du bruke det samme tilpassede CSS-alternativet som vi brukte i den første metoden på et av temaene våre (for å gjøre menyelementet om til en knapp), men Qode Button-widgeten er et mye enklere alternativ da den lar deg style knappen din på den måten du vil uten å bruke noen kode. Dessuten, som du kunne se fra bildeeksemplene ovenfor, kan du plassere den hvor som helst i overskriften.

Konklusjon

Uansett om du vil legge til en lenke til et registreringsskjema, en kjøpsknapp eller en annen type CTA, er overskriften din et av de beste stedene for å trekke oppmerksomhet til knappen din og motivere de besøkende til å handle. I hovedsak er det enkelt å legge til en knapp i overskriftsmenyen – alt du trenger å gjøre er å transformere det eksisterende menyelementet ditt ved å tilordne det en egendefinert CSS-klasse og deretter style knappen ved å bruke Utseende >> Tilpass skjerm. Likevel, hvis du bruker (eller planlegger å bruke) et av temaene våre, vil du ha mye flere tilpasningsalternativer til din disposisjon, og du kan også raskt og enkelt plassere knappen i et hvilket som helst widgetområde du ønsker (ikke bare overskriften din) Meny). Så velg din foretrukne metode og følg instruksjonene våre nøye slik at du kan legge til en fremtredende CTA i overskriften din som vil bidra til å forbedre brukeropplevelsen og øke konverteringene dine.