Hur man lägger till en knapp i rubriken i WordPress

Om du vill lägga till en uppmaning till din WordPress-webbplats och placera den någonstans som är lätt att märka, är sidans rubrikområde ett perfekt ställe att göra det. Rubriken, som ligger överst på varje webbsida, är vanligtvis en av de första sakerna folk ser när de öppnar en sida. Detta gör det till en naturlig plats för att lägga till några viktiga element som din webbplatstitel och rubrik, din huvudwebbplatsnavigering, din varumärkeslogotyp och naturligtvis dina CTA-knappar.

Hela syftet med att lägga till en knapp är i första hand att få dina besökare att vidta önskad åtgärd och leda dem till en specifik sida på din webbplats (eller utanför din webbplats) genom att klicka på den. Därför måste du göra din knapp direkt synlig på din sida för att fånga dina besökares uppmärksamhet och få dem att klicka på den för att få fler konverteringar. Det betyder att utformningen av knappen bör tillåta att den sticker ut från andra standardlänkar som kan visas i din huvudmeny.

Nu, som standard, kommer WordPress inte med möjligheten att lägga till individuella knappar till ditt rubrikområde. Istället kan du lägga till en navigeringsmeny i din rubrik med länkar som har samma design. Ändå finns det ett sätt att ”omvandla” en menylänk i din huvudnavigeringsmeny och få den att visas som en knapp. Lyckligtvis är detta lätt att göra om du använd lite anpassad CSS. Så den här gången kommer vi att visa dig hur du lägger till en knapp i din WordPress-huvudnavigeringsmeny. Strax efter kommer vi också att visa hur man gör infoga och anpassa en knappwidget i valfritt annat huvudområde du väljer (förutom att lägga till det bredvid din navigeringsmeny) med brotemat. Så luta dig tillbaka, koppla av och läs vidare.

Lägga till en knapp i din WordPress-huvudmeny med hjälp av anpassad CSS

För att börja omvandla din menylänk till en knapp, bör du infoga den menylänk du vill använda med ska Utseende >> Menyer. Lägg sedan till en länk till en tidigare skapad navigeringsmeny.

Om din meny redan innehåller ett menyobjekt som du vill ändra till en knapp, tryck helt enkelt på pilen på ditt menyalternativ för att expandera och redigera det.

Om du ännu inte har skapat ditt menyalternativ kan du antingen hitta det till vänster på skärmen (genom att hitta det i sidor, inlägg etc. – beroende på om ditt menyalternativ leder till en sida, ett inlägg eller ett annat inlägg typ) och klicka sedan på Lägg till i menyn knapp. Om du vill länka till en sida utanför din webbplats kan du välja Anpassade länkar rullgardinsmenyn och infoga din URL och länktext manuellt, klicka sedan på Lägg till i menyn.

Se sedan till att ge en Navigationsetikett till ditt föremål (om du inte redan har gjort det).

När du har gjort detta bör du gå vidare och komma åt Skärmalternativ knappen (finns överst på skärmen). Se till att rutan som säger ”CSS Classes” är markerad. Detta gör att du kan lägga till en anpassad CSS-klass till din länk och sedan utforma den på vilket sätt du vill.

Nu, i menyalternativet inställningar, kommer du att kunna se det nya CSS-klassalternativet. Infoga ett namn för din menyklass (vår är header-meny-knapp, men du kan tilldela valfritt unikt namn här).

Slå Menyn Spara knappen för att spara dina inställningar.

Därefter bör du anpassa utseendet på din rubrikmenyknapp med hjälp av någon anpassad CSS-kod. Gå till Utseende >> Anpassa för att komma åt din WordPress-temaanpassare och slå Ytterligare CSS knapp.

Infoga din anpassade CSS-kod här och klicka sedan på Publicera. Du bör dock notera att detta omedelbart kommer att få alla dina ändringar att visas live, så se till att trycka på den här knappen först efter att du är helt nöjd med utseendet på din rubrikmenyknapp.

Om du vill kan du gärna infoga vår CSS-kod, eller ändra den på något sätt du vill för att passa dina designpreferenser (ändra dess kant- och kantradie, bakgrund och textfärg, och så vidare):

.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 valt den grönfärgade knappen (som perfekt matchar vår layout) och den vanliga vita färgen på knapptexten. Dessutom har vi ställt in en kantradie på 25px för att få vår knapp att ha lätt rundade kanter. Du bör notera att ju mer du minskar antalet pixlar, desto skarpare blir kanterna, medan ökning av antalet pixlar gör att din knapp får en mer rundad form.

Direkt efter att du lagt till din CSS-kod och tryckt Publicera, kommer du att kunna se hur din knapp kommer att se ut i förhandsgranskningen av webbplatsen.

Lägga till en knapp i din rubrik med hjälp av Qode-teman

Vi har nämnt i början att WordPress inte kommer med möjligheten att lägga till en knapp i ditt rubrikområde direkt. Som sagt, vissa WordPress-teman kommer med många ytterligare funktioner som är avsedda att ytterligare utöka funktionaliteten hos WordPress på olika sätt. Till exempel, när det gäller Qode-teman, finns det en widget som heter Qode-knapp som låter dig lägga till och anpassa en knapp direkt i ditt rubrikområde. Vi kommer att visa dig hur du gör detta med Bridge-temat, så se till att läsa vidare.

Nu, direkt, bör vi nämna att Bridge (liksom många andra Qode-teman) innehåller flera anpassade widgetområden som du kan använda för att lägga till olika widgets till din webbplats. När det kommer till webbplatshuvudet i synnerhet, består det av två huvudområden – header topp och header botten. Sedan delas dessa områden in ytterligare i Rubrik uppe till vänster, sidhuvud uppe till höger, sidhuvud nedre höger och sidhuvud nedre mitten widgetområde. Du kommer att kunna lägga till widgets till något av dessa områden genom att gå till Utseende >> Widgets.

Om du använder Bridge och du inte ser några av dessa områden i din lista över widgetområden, finns det en chans att ett av rubrikområdena (vanligtvis en Header Top) är avstängt. Du behöver se till att detta område visas genom att gå till Qode Alternativ >> Header i din WordPress-instrumentpanel.

Hitta sedan Header Top avsnitt och växla till Visa rubrikens övre område till Ja.

Det finns många andra alternativ här relaterade till ditt Header Top-område som du kan justera enligt dina preferenser, såsom bakgrundsfärgen, stoppning, möjligheten att dölja den på rullning och andra.

Naturligtvis hittar du också andra alternativ relaterade till området Rubrik Botten samt andra allmänna rubrikalternativ, som möjligheten att ändra dess kantfärg, transparens, ställa in den i rutnät och så vidare.

När du är nöjd med dina inställningar, tryck på Spara ändringar knapp.

Låt oss nu se hur du kan lägga till en knapp till ett av dessa widgetområden med hjälp av Qode-knapp widget. Du kan lägga till den här knappen till vilken rubrik som du vill. Vi kommer att demonstrera att lägga till en knapp till Rubrik Nederst till höger widgetområdet, vilket gör att vår knapp visas precis bredvid navigeringsmenyn för rubriken. Detta är ett av de vanligaste områdena för att lägga till en knapp på en webbplats, vilket är ganska logiskt eftersom själva navigeringsmenyn är ett av de mest lätt märkbara webbplatselementen.

För att göra detta, hitta en Qode-knapp widget, välj ditt widgetområde (sidhuvud längst ner till höger) och tryck på Lägg till widget knappen (eller helt enkelt dra den till widgetområdet till höger).

Med hjälp av Qode Button-widgetalternativen kommer du att kunna ställ in storleken på din knapp, lägg till din knapptext, länk, ändra dess färger (svävarfärg, bakgrundsfärg etc.) och mycket mer.

Slå Spara knapp när du är klar med att ställa in alternativen för knappwidgeten och gå vidare för att se hur din knapp ser ut live.

Naturligtvis, som vi redan har nämnt, kan du enkelt lägga till din knapp i alla andra tillgängliga rubrikwidgetområden. Så här ser vår knapp ut till exempel när vi har lagt till (och anpassat) vår Qode Button-widget i widgetområdet Header Uppe Left (på samma sätt som vi gjorde för vårt Header Bottom Right-område):

Som ni ser är vår knapp nu placerad ovanför logotypen till vänster.

Eller, här är utseendet på vår knapp när den läggs till i widgetområdet Header Uppe Right:

Naturligtvis kan du använda samma anpassade CSS-alternativ som vi använde i den första metoden på ett av våra teman (för att förvandla ditt menyobjekt till en knapp), men Qode Button-widgeten är ett mycket enklare alternativ eftersom det låter dig styla din knapp på vilket sätt du vill utan att använda någon kod. Dessutom, som du kan se från våra bildexempel ovan, kan du placera den var du vill i din rubrik.

Slutsats

Oavsett om du vill lägga till en länk till ett registreringsformulär, en köpknapp eller någon annan typ av CTA, är din rubrik ett av de bästa ställena för att uppmärksamma din knapp och motivera dina besökare att vidta åtgärder. I grund och botten är det enkelt att lägga till en knapp till din rubrikmeny – allt du behöver göra är att förvandla ditt befintliga menyobjekt genom att tilldela det en anpassad CSS-klass och sedan utforma din knapp med hjälp av Utseende >> Anpassa skärm. Ändå, om du använder (eller planerar att använda) ett av våra teman, kommer du att ha mycket fler anpassningsalternativ till ditt förfogande och även snabbt och enkelt kunna placera din knapp i valfritt widgetområde som du väljer (inte bara din rubrik meny). Så välj din föredragna metod och följ våra instruktioner noggrant så att du kan lägga till en framträdande CTA i din rubrik som hjälper till att förbättra användarupplevelsen och öka dina konverteringar.