Sådan tilføjer du en knap til overskriften i WordPress

Hvis du ønsker at tilføje en opfordring til handling til dit WordPress-websted og placere det et sted, der let kan ses, er dit websteds header-område et perfekt sted at gøre det. Placeret øverst på hver hjemmesideside, er overskriften normalt en af ​​de første ting, folk ser, når de åbner en side. Dette gør det til et naturligt sted at tilføje nogle vigtige elementer, såsom din sidetitel og overskrift, din primære hjemmesidenavigation, dit brandlogo og selvfølgelig dine CTA-knapper.

Hele formålet med at tilføje en knap er i første omgang at få dine besøgende til at foretage den ønskede handling og føre dem til en bestemt side på dit websted (eller uden for dit websted) ved at klikke på den. Du skal således gøre din knap synlig på din side med det samme for at tiltrække dine besøgendes opmærksomhed og få dem til at klikke på den for at få flere konverteringer. Det betyder, at knappens design skal gøre det muligt for den at skille sig ud fra andre standardudseende links, der kan vises i din overskriftsmenu.

Nu kommer WordPress som standard ikke med muligheden for at tilføje individuelle knapper til dit overskriftsområde. I stedet kan du tilføje en navigationsmenu til din sidehoved med links, der har det samme design. Alligevel er der en måde at gøre det på “transformer” et menulink i din overskriftsnavigationsmenu og få det til at blive vist som en knap. Heldigvis er dette nemt at gøre, hvis du bruge noget tilpasset CSS. Så denne gang vil vi vise dig, hvordan du tilføjer en knap til din WordPress-header-navigationsmenu. Lige efter vil vi også demonstrere, hvordan man indsæt og tilpas en knap-widget i et hvilket som helst andet overskriftsområde efter eget valg (bortset fra at tilføje det lige ved siden af ​​din navigationsmenu) ved hjælp af bro-temaet. Så læn dig tilbage, slap af og læs videre.

Tilføjelse af en knap i din WordPress-hovedmenu ved hjælp af tilpasset CSS

For at begynde at omdanne dit menulink til en knap, skal du indsætte det menulink, du vil bruge ved går til Udseende >> Menuer. Tilføj derefter et link til en tidligere oprettet navigationsmenu.

Hvis din menu allerede indeholder et menupunkt, som du vil ændre til en knap, skal du blot trykke på pilen på dit menupunkt for at udvide og redigere det.

Hvis du endnu ikke har oprettet dit menupunkt, kan du enten finde det i venstre side af din skærm (ved at finde det i Sider, Indlæg osv. – afhængigt af om dit menupunkt fører til en side, et indlæg eller et andet indlæg type) og derefter klikke på Føj til menu knap. Hvis du vil linke til en side uden for dit websted, kan du vælge Brugerdefinerede links dropdown og indsæt din URL og linktekst manuelt, og klik derefter på Føj til menu.

Dernæst skal du sørge for at give en Navigationsmærke til din vare (hvis du ikke allerede har gjort det).

Når du har gjort dette, skal du gå videre og få adgang til Skærmindstillinger knap (placeret øverst på skærmen). Sørg for, at boksen, der siger “CSS Classes” er markeret. Dette giver dig mulighed for at tilføje en tilpasset CSS-klasse til dit link og derefter style det på den måde, du vil.

Nu, i menupunktets indstillinger, vil du være i stand til at se den nye CSS-klasseindstilling. Indsæt et navn til din menuklasse (vores er overskrift-menu-knap, men du kan tildele et hvilket som helst unikt navn efter eget valg her).

Tryk på Gem menu knappen for at gemme dine indstillinger.

Dernæst skal du tilpasse udseendet af din overskriftsmenuknap ved hjælp af en tilpasset CSS-kode. Gå til Udseende >> Tilpas for at få adgang til din WordPress-tematilpasning og ramte Yderligere CSS knap.

Indsæt din brugerdefinerede CSS-kode her, og klik derefter på Offentliggøre. Du skal dog bemærke, at dette øjeblikkeligt vil få alle dine ændringer til at vises live, så sørg for at trykke på denne knap, når du er helt tilfreds med udseendet af din overskriftsmenuknap.

Hvis du vil, kan du være velkommen til at indsætte vores CSS-kode eller ændre den på en hvilken som helst måde, så den passer til dine designpræferencer (ændre dens kant- og kantradius, baggrund og tekstfarve, 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ønfarvede knap (der passer perfekt til vores layout) og den almindelige hvide farve på knapteksten. Vi har også indstillet en kantradius på 25px for at få vores knap til at have let afrundede kanter. Du skal bemærke, at jo mere du reducerer antallet af pixels, jo skarpere vil kanterne være, mens en forøgelse af antallet af pixels vil få din knap til at få en mere afrundet form.

Lige efter at du har tilføjet din CSS-kode og trykket Offentliggøre, vil du være i stand til at se, hvordan din knap vil se ud i forhåndsvisningen af ​​webstedet.

Tilføjelse af en knap til din sidehoved ved hjælp af Qode-temaer

Vi har nævnt i begyndelsen, at WordPress ikke kommer med muligheden for at tilføje en knap til dit overskriftsområde ud af boksen. Når det er sagt, kommer nogle WordPress-temaer med mange ekstra funktioner, der skal udvide funktionaliteten af ​​WordPress yderligere på forskellige måder. For eksempel, i tilfælde af Qode-temaer, er der en widget kaldet Qode knap der giver dig mulighed for at tilføje og tilpasse en knap direkte i dit overskriftsområde. Vi vil vise dig, hvordan du gør dette ved hjælp af Bridge-temaet, så sørg for at læse videre.

Lige fra starten bør vi nævne, at Bridge (såvel som mange andre Qode-temaer) indeholder flere brugerdefinerede widgetområder, du kan bruge til at tilføje forskellige widgets til dit websted. Når det især kommer til hjemmesidens header, består den af ​​to hovedområder – header top og header bund. Derefter opdeles disse områder yderligere i Overskrift øverst til venstre, Overskrift øverst til højre, Overskrift nederst til højre og Overskrift nederst i midten widget område. Du vil være i stand til at tilføje widgets til et hvilket som helst af disse områder ved at gå til Udseende >> Widgets.

Hvis du bruger Bridge, og du ikke kan se nogle af disse områder på din liste over widgetområder, er der en chance for, at et af headerområderne (normalt en Header Top) er slået fra. Du skal sørg for, at dette område vises ved at gå til Qode Indstillinger >> Overskrift i dit WordPress-dashboard.

Find derefter Header Top afsnit og skifte til Vis overskrifts øverste område til Ja.

Der er mange andre muligheder her relateret til dit Header Top-område, som du kan justere i henhold til dine præferencer, såsom baggrundsfarven, polstring, evnen til at skjule den på scroll og andre.

Selvfølgelig vil du også finde andre muligheder relateret til Header Bottom-området såvel som andre generelle header-indstillinger, såsom muligheden for at ændre dens kantfarve, gennemsigtighed, indstille den til at være i gitter, og så videre.

Når du er tilfreds med dine indstillinger, skal du trykke på Gem ændringer knap.

Lad os nu se, hvordan du kan tilføje en knap til et af disse widgetområder ved hjælp af Qode knap widget. Du kan tilføje denne knap til et hvilket som helst Header-widget-område, du kan lide. Vi vil demonstrere tilføjelse af en knap til Overskrift nederst til højre widget-området, som får vores knap til at blive vist lige ved siden af ​​overskriftens navigationsmenu. Dette er et af de mest almindelige områder for tilføjelse af en knap til et websted, hvilket er ret logisk, da selve navigationsmenuen er et af de mest let mærkbare webstedselementer.

For at gøre dette skal du finde en Qode knap widget, vælg dit widgetområde (overskrift nederst til højre) og tryk på Tilføj widget knappen (eller blot træk den til widgetområdet til højre).

Ved at bruge Qode Button-widgetindstillingerne vil du være i stand til indstil størrelsen på din knap, tilføj din knaptekst, link, skift dens farver (hoverfarve, baggrundsfarve osv.) og meget mere.

Tryk på Gemme knap, når du er færdig med at indstille dine knap-widget-indstillinger, og gå videre for at se, hvordan din knap ser ud live.

Som vi allerede har nævnt, kan du selvfølgelig nemt tilføje din knap til ethvert andet tilgængeligt header-widget-område. Sådan ser vores knap f.eks. ud, når vi har tilføjet (og tilpasset) vores Qode-knap-widget til widget-området for overskrift øverst til venstre (på samme måde, som vi gjorde for vores område for overskrift nederst til højre):

Som du kan se, er vores knap nu placeret over logoet til venstre.

Eller her er udseendet af vores knap, når den er føjet til widgetområdet Overskrift øverst til højre:

Selvfølgelig kan du bruge den samme brugerdefinerede CSS-mulighed, som vi brugte i den første metode på et af vores temaer (for at gøre dit menupunkt til en knap), men Qode Button-widgetten er en meget enklere mulighed, da den giver dig mulighed for at style din knap på den måde du vil uden at bruge nogen kode. Desuden, som du kunne se fra vores billedeksempler ovenfor, kan du placere den hvor som helst i din header.

Konklusion

Lige meget om du vil tilføje et link til en tilmeldingsformular, en købsknap eller enhver anden type CTA, er din header et af de bedste steder at henlede opmærksomheden på din knap og motivere dine besøgende til at handle. I bund og grund er det nemt at tilføje en knap til din overskriftsmenu – alt du skal gøre er at transformere dit eksisterende menupunkt ved at tildele det en tilpasset CSS-klasse og derefter style din knap ved hjælp af Udseende >> Tilpas skærmen. Alligevel, hvis du bruger (eller planlægger at bruge) et af vores temaer, vil du have meget flere tilpasningsmuligheder til din rådighed, og du kan også hurtigt og nemt placere din knap i et hvilket som helst widgetområde efter eget valg (ikke kun din header menu). Så vælg din foretrukne metode og følg vores instruktioner omhyggeligt, så du kan tilføje en fremtrædende CTA til din header, der vil hjælpe med at forbedre brugeroplevelsen og booste dine konverteringer.