Hur man anpassar din WordPress-rubrik (nybörjarguide)

Du känner den där känslan när du besöker en WordPress-webbplats och den bara ser… generisk ut? Som om den kom direkt från en mall, utan något personligt eller minnesvärt?

Det är precis det intryck du ger när du behåller standardrubriken i WordPress, och det kan kosta dig trovärdighet hos varje besökare.

Din rubrik är det första folk ser när de landar på din webbplats, så den måste göra ett starkt intryck. Genom att anpassa den kan du lägga till viktiga element som navigeringslänkar, sociala ikoner och ett sökfält.

Dessa funktioner gör din webbplats mer användarvänlig och hjälper dig att lämna ett bestående, professionellt intryck. Dessutom har vi sett hur en anpassad sidhuvud kan öka både förtroende och engagemang.

I den här guiden visar vi dig exakt hur du anpassar din WordPress-header, även om du är en komplett nybörjare. Du kommer att lära dig flera metoder som inte kräver någon kodning, så att du kan bygga en header som sticker ut och tjänar dina besökare bättre. 🌟

Vad är rubriken i WordPress?

Webbplatsens sidhuvud är den övre sektionen på varje sida på din WordPress-webbplats och är förmodligen det första besökarna ser. Det visar ofta din webbplatslogotyp och titel, navigeringsmenyer och andra viktiga element som du vill att användarna ska se först.

Till exempel, här är vårt sidhuvuds-område på WPBeginner som miljontals läsare ser varje månad.

Genom att anpassa din webbplats rubrik kan du ge den en unik touch och göra den mer användbar för dina besökare. Du kan länka till dina mest populära sidor, visa sociala ikoner eller ditt företagsnummer, och visa knappar för uppmaningar till handling för fler konverteringar.

I följande avsnitt visar vi hur du enkelt anpassar ditt WordPress-sidhuvud. Du kan använda följande länkar för att hoppa till det avsnitt du vill läsa:

• Anpassa headern med hjälp av WordPress temaanpassare
• Anpassa sidhuvudet med hjälp av WordPress Full Site Editor
• Skapa anpassade sidhuvuden och sidlayouter med SeedProd
• Lägg till en anpassad header för varje kategori
• Lägg till ett widgetområde i din WordPress-rubrik
• Lägg till slumpmässiga header-bilder till din WordPress-blogg
• Lägg till kod i din webbplats rubrik (avancerat)
• Bonustips: Testa olika sidhuvudstilar (med A/B-testning)
• Vanliga frågor: Anpassa ditt WordPress-sidhuvud
• Ytterligare resurser: Fler tips om WordPress-design och navigering

Redo? Låt oss börja.

Anpassa headern med hjälp av WordPress temaanpassare

Populära WordPress-teman låter dig använda WordPress temaanpassare för att göra ändringar i din webbplats sidhuvudsdel. Den här funktionen kallas ibland för ett anpassat sidhuvud, men notera att inte alla teman stöder det.

Du bör börja med att navigera till Utseende » Anpassa i ditt WordPress-adminområde.

Ditt tema kan inkludera en sektion för 'Header' i anpassaren eller erbjuda header-alternativ under sektionen 'Färg'. Detta varierar dock från tema till tema. Här är några exempel.

Vissa teman, som Twenty Twenty-One, erbjuder inga anpassningsalternativ för sidhuvudet alls. I det här fallet rekommenderar vi att du använder ett dra-och-släpp-temabyggarplugin som SeedProd, som vi kommer att gå igenom nedan.

Twenty Sixteen-temat låter dig lägga till en bakgrundsbild i headern och till och med lägga till slumpmässiga headerbilder.

Vissa gratis och premium WordPress-teman erbjuder ännu fler anpassningsmöjligheter för temat.

Till exempel kan du ändra din rubriks teckensnittsstil, layout, färger och mycket mer. Men det kommer fortfarande att skilja sig från tema till tema, och du är begränsad till vad temautvecklaren tillåter dig att göra.

Till exempel har Sydney ett dedikerat alternativ för 'Header Builder' i sitt anpassningspanel till vänster.

Här hittar du olika inställningar för att redigera sidhuvudets utseende och stil. Du kan bygga ett anpassat sidhuvud genom att lägga till block, precis som när du redigerar ett blogginlägg eller en sida i WordPress innehållsredigerare.

För att börja, hovra helt enkelt över ett tomt område i sidhuvudet och klicka på '+' ikonen för att lägga till ett sidhuvudsblock – oavsett om det är i den övre, mellersta eller nedre raden.

Därefter kan du välja valfritt block som du vill lägga till i din anpassade sidhuvud. Du kan till exempel lägga till ett widget-block, ett konto-block, ett sök-block och mer.

Rubrikbyggaren låter dig också dra och släppa block för att placera dem ovanför eller under rubriken.

Sedan kan du ytterligare anpassa varje block som du lägger till i rubriken.

Till exempel ger valet av blocket 'Webbplatstitel & Logotyp' dig möjlighet att ladda upp en webbplatstitel och logotyp, ändra logotypens bredd, visa en webbplatstagline och mer.

Dessutom kan du också ändra bakgrundsfärgen på rubriken eller lägga till en bakgrundsbild som visas i rubriken.

När du är klar med att redigera det anpassade sidhuvudet klickar du helt enkelt på knappen 'Publicera'.

För mer information, se vår ultimata guide om hur du använder WordPress temaanpassare.

Anpassa sidhuvudet med hjälp av WordPress Full Site Editor

WordPress lade till redigering av hela webbplatsen till WordPress i version 5.9. Om ditt tema stöder den nya funktionen ersätter den temaanpassaren. Men för närvarande finns det bara ett fåtal teman som fungerar med redigeraren för hela webbplatsen.

När du använder ett kompatibelt tema kan du anpassa din sidhuvud genom att navigera till Utseende » Redigerare. Detta startar redigeraren för hela webbplatsen, som liknar blockredigeraren som du använder för att skriva WordPress-inlägg och sidor.

När du klickar på sidhuvudet kommer du att märka att namnet på mallen överst på sidan ändras till 'Sidans sidhuvud'.

Nu, när du klickar på ikonen 'Inställningar' i verktygsfältet, ser du alternativ för att anpassa rubrikens layout, färg, kantlinje och dimensioner.

Som ett exempel kommer vi att ändra headerns bakgrundsfärg. Först måste du expandera sektionen 'Färg' och sedan klicka på alternativet 'Bakgrund'.

I popup-fönstret som visas väljer du först en enfärgad färg eller en gradient.

Sedan kan du välja mellan ett antal förinställda färger. När du klickar på en färg ändras bakgrunden på din header omedelbart.

Du kan hitta fler anpassningsalternativ genom att klicka på ikonen 'Stilar' längst upp till höger på sidan. Detta låter dig ändra sidhuvudets teckensnitt, färger och layout.

För att lära dig mer om hur hela webbplatsredigeraren fungerar, se vår nybörjarguide om hur du anpassar ditt WordPress-tema.

Skapa anpassade sidhuvuden och sidlayouter med SeedProd

Vill du ha total kontroll över dina sidhuvuden, sidfötter och sidofält för att ge din webbplats en unik design? Då rekommenderar vi att du använder SeedProd, den bästa WordPress-temabyggarpluginet.

SeedProd låter dig enkelt skapa ett anpassat WordPress-tema utan att skriva någon kod. Detta inkluderar att skapa headers, footers och allt annat som behövs för ett attraktivt WordPress-tema.

Du kan till och med skapa flera anpassade sidhuvudstilar för olika sidor och sektioner på din webbplats.

Några av våra partner varumärken använder SeedProd för att bygga sina webbplatser, och det har gjort ett fantastiskt jobb för dem. För att lära dig mer om det kan du kolla in vår fullständiga SeedProd-recension.

Först rekommenderar vi att du följer vår guide om hur du enkelt skapar ett anpassat WordPress-tema utan kod. När du har gjort detta kan du börja anpassa din sidhuvud i SeedProd-redigeraren.

För att komma åt redigeraren behöver du bara klicka på länken ‘Edit Design’ som finns under sidhuvudet.

Detta öppnar headern i SeedProds dra-och-släpp-redigerare.

Härifrån kan du enkelt anpassa din rubrik genom att lägga till nya block.

Det finns block för malltaggar som en webbplatslogotyp eller dina WordPress-widgetar, och avancerade block som en nedräkningstimer, navigeringsmeny eller knappar för social delning.

Det bästa är att du kan anpassa varje block ytterligare med hjälp av temabyggaren. Du kan till exempel ändra storlek och justering på din logotyp eller välja vilka sidor som ska visas i navigeringsmenyn. Det låter dig till och med lägga till en bild i sidhuvudet.

Med SeedProd kan du också lägga till en komplett sektion i ditt temas sidhuvudsmall.

Sektioner är grupper av block som du kan använda för olika områden på din webbplats. Dessa inkluderar sidhuvuden, sidfötter, funktioner, kundrecensioner, uppmaningar till handling och mer.

För att använda en sidhuvudsektion vill du växla till fliken 'Sektioner' i panelen 'Design'.

Välj därefter en sidhuvudsektion som du vill använda för din webbplats. SeedProd erbjuder mallar med flera sektioner som du kan använda.

Fortsätt och börja anpassa sidhuvudssektionen.

När du är nöjd med ditt anpassade sidhuvud, se till att du klickar på knappen 'Spara' för att lagra dina ändringar.

Nu är du redo att publicera ditt anpassade sidhuvud.

Gå helt enkelt till SeedProd » Temabyggare från din WordPress-administrationspanel och klicka på reglaget bredvid alternativet 'Aktivera SeedProd-tema' till 'Ja'.

När du aktiverar alternativet kommer SeedProd att ersätta ditt standard WordPress-tema med ett nytt anpassat tema och sidhuvud.

Du kan nu besöka din webbplats för att se den nya anpassade headern i aktion.

Skapa olika anpassade rubriker för varje sida

Dessutom gör SeedProd det superenkelt att designa anpassade rubriker för specifika sidor på din webbplats.

Temabyggaren låter dig lägga till anpassade rubriker för varje sida på din WordPress-webbplats. På så sätt kan du visa en anpassad rubrik för olika kategorier, taggar, inläggstyper, sidtyper och mer.

För att börja behöver du gå till SeedProd » Temabyggare från din WordPress-administrationspanel och klicka på knappen 'Lägg till ny temamall'.

Ett nytt popup-fönster där du behöver ange detaljerna för temamallen kommer att visas.

Ange ett namn för din temamall. Välj sedan ‘Header’ som malltyp från rullgardinsmenyn. Du kan lämna fältet ‘Priority’ tomt.

Därefter behöver du ange visningsvillkoren för ditt anpassade sidhuvud. Till exempel använde vi villkoren där det skulle visas på alla inlägg och sidor som tillhör kategorin handledningar.

Glöm inte att klicka på knappen ‘Spara’ när du är klar.

Därefter kan du redigera den anpassade rubriken med SeedProd dra-och-släpp-temabyggare.

När du är klar med att redigera det anpassade sidhuvudet klickar du helt enkelt på knappen 'Spara' högst upp.

Du kan se fler idéer om hur du anpassar ditt sidhuvud med SeedProd i vår nybörjarguide om hur du enkelt skapar ett anpassat WordPress-tema med hjälp av SeedProd-temabyggaren.

Lägg till en anpassad header för varje kategori

De flesta webbplatser visar samma header på alla inlägg, sidor, kategorier och arkivsidor. Du kan dock visa en annan header för varje WordPress-kategori.

Detta kan göras genom att lägga till kod i dina temafiler, men du får mer kontroll genom att använda en temabyggare.

Vi visade dig tidigare hur du anpassar din rubrik med hjälp av pluginet SeedProd theme builder. Nu låter SeedProd dig också skapa flera anpassade rubriker och visa dem för olika kategorier med hjälp av villkorsstyrd logik.

För att skapa en ny header behöver du navigera till SeedProd » Temabyggare och klicka på den orange knappen 'Lägg till ny temamall'. Alternativt kan du duplicera din nuvarande header och använda den som utgångspunkt.

Ett popup-fönster kommer att visas, där du kan ge temamallen ett namn och välja 'Sidhuvud' från rullgardinsmenyn Typ.

Du måste också ange en prioritet. Så om mer än ett sidhuvud uppfyller villkoren för en viss sida, kommer sidhuvudet med den högsta prioriteten att visas.

Standard sidhuvudet har en prioritet på 0, så se till att du anger 1 eller högre.

Därefter behöver du ställa in ett eller flera villkor. Detta talar om för SeedProd när en viss header ska visas. Du väljer helt enkelt villkoren från rullgardinsmenyerna.

På de två första menyerna måste du välja 'Inkludera' och sedan 'Har kategori'. I det sista fältet ska du skriva namnet på kategorin där du vill att rubriken ska visas.

Du kan enkelt visa samma sidhuvud för flera kategorier genom att klicka på knappen 'Lägg till villkor' och inkludera en annan kategori. När du är klar, se till att du klickar på knappen 'Spara' för att spara det nya sidhuvudet.

Nu kan du anpassa designen på varje nytt sidhuvud med SeedProds dra-och-släpp-redigerare som vi visade dig tidigare.

För att lära dig mer, inklusive hur du gör detta med kod, se vår guide om hur man lägger till en anpassad header, footer eller sidofält för varje kategori.

Lägg till ett widgetområde i din WordPress-rubrik

Om du bygger ett anpassat tema från grunden med kod, kanske du vill lägga till en WordPress-widget i ditt sidhuvud för att fånga dina besökares uppmärksamhet.

Widgetar låter dig enkelt lägga till innehållsblock i specifika delar av ditt tema, men notera att inte alla teman inkluderar ett widget-område för sidhuvudet.

Vi nämnde tidigare hur enkelt det är att lägga till widgets i ditt sidhuvud med hjälp av SeedProd tema-byggare. Men vad händer om du vill lägga till en widget i sidhuvudet på ett vanligt WordPress-tema?

Vissa teman, som Sydney-temat, låter dig göra detta med hjälp av WordPress temaanpassare. Sydney lägger till ett alternativ som kallas 'Header Builder' för att helt anpassa sidhuvudet, inklusive att lägga till widgets.

Om ditt WordPress-tema inte har ett widgetområde i sidhuvudet för närvarande, måste du lägga till det manuellt.

Medan det allmänna tillvägagångssättet är att lägga till kodavsnitt i functions.php-filen, är det enklare och säkrare tillvägagångssättet att använda WPCode. Det är det bästa pluginet för att lägga till kodavsnitt utan att bryta din webbplats.

Några av våra partner varumärken använder WPCode för att lägga till och hantera sina anpassade kodavsnitt. Vi hör bra saker om pluginet, och du kan också läsa vår detaljerade WPCode-recension för att lära dig mer om det.

För att komma igång, låt oss se till att du har WPCode-pluginet för kodavsnitt installerat och aktiverat på din WordPress-webbplats. Om du behöver hjälp, se gärna vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering vill du navigera till Kodsnuttar » + Lägg till snuttar.

Nu är det första du behöver göra att skapa snuttens titel. Till exempel döper vi vår till 'Lägga till en WordPress-widget i sidhuvudsytan'. Det andra steget är att expandera rullgardinsmenyn för kodtyp och välja 'PHP-snutt'.

När du är klar, kopiera helt enkelt följande kod och klistra in den i avsnittet 'Kodförhandsgranskning'.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Den här koden registrerar ett nytt sidhuvud eller ett widget-redo område för ditt tema.

Så här kan det se ut i din WPCode-redigerare:

För att aktivera kodavsnittet kan du växla reglaget bredvid den blå knappen ‘Save Snippet’ till ‘Active.’ Glöm sedan inte att klicka på knappen ‘Save Snippet’ för att spara dina ändringar.

När du har aktiverat omkopplaren och sparat dina ändringar, bör redigeraren se ut så här:

Om du nu går till Utseende » Widgetar, så ser du ett nytt widgetområde märkt 'Anpassat sidhuvud widgetområde'.

Det är här du lägger till dina widgets. Om du behöver hjälp kan du se vår guide om hur man lägger till och använder widgets i WordPress.

Beroende på ditt tema kan du också behöva lägga till CSS i WordPress för att styra hur widgetområdet visas.

För detaljerade instruktioner kan du kolla in vår guide om hur man lägger till en WordPress-widget i din webbplats sidhuvud.

Lägg till slumpmässiga header-bilder till din WordPress-blogg

Ett annat sätt du kan göra dina WordPress-headers mer attraktiva är genom att lägga till slumpmässiga bilder i header-sektionen.

Att visa slumpmässigt ändrade bilder hjälper till att fånga dina besökares uppmärksamhet och göra ditt innehåll mer engagerande.

För att lägga till slumpmässiga rubrikbilder till din WordPress-blogg kan du använda temaanpassaren och ladda upp bilder till rubriksektionen. Detta alternativ kan variera beroende på vilket WordPress-tema du använder.

Gå sedan vidare och välj alternativet 'Slumpmässiga uppladdade headers'.

Om du vill ha mer kontroll och flexibilitet när du visar slumpmässiga bilder i sidhuvudssektionen, kan du också använda ett WordPress-plugin.

För mer information, se vår guide om hur du lägger till slumpmässiga sidhuvudsbilder till din WordPress-blogg.

Lägg till kod i din webbplats sidhuvud (Avancerat)

Slutligen, om du vill lägga till anpassad kod i din webbplats sidhuvud, kan du enkelt göra det från din WordPress-instrumentpanel. Denna metod rekommenderas för avancerade användare och kanske inte är lämplig för nybörjare eftersom den innebär redigering av kod och kräver teknisk kunskap.

Du hittar ditt temas sidhuvudfiler genom att gå till Utseende » Temas filredigerare från WordPress adminpanel. I 'style.css' temafiler kan du skrolla ner till avsnittet för webbplatsens sidhuvud och lägga till eller ta bort kod.

Ett enklare sätt att lägga till anpassad kod för att redigera din webbplats sidhuvud är att använda WPCode, det bästa kodsnuttpluginet på marknaden.

Installera och aktivera först det kostnadsfria WPCode-pluginet. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till Code Snippets » Header & Footer från din WordPress-instrumentpanel. Ange sedan helt enkelt den anpassade koden i avsnittet ‘Header.’

Efter att ha angett koden, klicka på knappen ‘Spara ändringar’.

För mer information kan du se vår guide om hur du lägger till kod i sidhuvud och sidfot i WordPress.

Det är allt!

Bonustips: Testa olika sidhuvudstilar (med A/B-testning)

Efter att ha anpassat ditt sidhuvud är det helt okej att undra, *”Är detta den bästa versionen för mina besökare?”* Det är där A/B-testning kommer in.

Det låter dig jämföra olika versioner av din header, oavsett om det är en layoutändring, knappfärg eller ett tillagt element som ett sökfält, och se vilken som faktiskt presterar bättre.

Du kommer att kunna fatta designbeslut baserade på verkligt användarbeteende, inte bara gissningar.

Oroa dig inte, du behöver inte vara utvecklare för att göra detta.

Med nybörjarvänliga verktyg som Thrive Optimize och Nelio AB Testing kommer du att testa som ett proffs på nolltid. Detta tillvägagångssätt hjälper ditt sidhuvud att förbättras med varje justering.

För fullständiga detaljer, se vår guide om hur du gör A/B-delningstestning i WordPress.

Vanliga frågor: Anpassa ditt WordPress-sidhuvud

Har du fortfarande frågor om att anpassa ditt WordPress-sidhuvud? Oroa dig inte; vi har dig täckt! Här är några vanliga frågor som nybörjare ofta ställer:

Vad är en WordPress-header och varför är den viktig?

Sidhuvudet är den övre delen av din WordPress-webbplats, och det är det första besökare ser. Det inkluderar vanligtvis din webbplats logotyp, navigeringsmeny och andra viktiga element. Ett välutformat sidhuvud hjälper dig att göra ett bra första intryck och guidar besökare till de viktigaste delarna av din webbplats.

Behöver jag kunna koda för att anpassa mitt WordPress-sidhuvud?

Inte alls! Du behöver inga kodningskunskaper. Många WordPress-teman och plugins (som SeedProd) låter dig anpassa din rubrik med en enkel dra-och-släpp-byggare – perfekt för nybörjare.

Vilka är fördelarna med att använda ett plugin som SeedProd för rubriker?

SeedProd gör det enkelt att designa anpassade sidhuvuden utan att röra någon kod. Du får full kontroll över utseende och layout, plus avancerade alternativ för att matcha din webbplats stil och förbättra den övergripande användarupplevelsen.

Hur kan det förbättra min webbplats att lägga till en widget i mitt sidhuvud?

Att lägga till widgets i din rubrik, som ett sökfält, sociala ikoner, eller kontaktinformation, gör viktiga funktioner lättare att hitta. Detta hjälper besökare att navigera på din webbplats snabbare och ger din webbplats en mer polerad, professionell känsla.

Kan jag ha olika sidhuvuden för olika sidor eller inlägg?

Ja! Med rätt verktyg, som SeedProd, kan du lägga till anpassade rubriker till olika sidor, inlägg, kategorier eller till och med taggar. Detta ger dig mer kontroll över hur din webbplats ser ut och känns i olika sektioner.

Ytterligare resurser: Fler tips om WordPress-design och navigering

Vi hoppas att den här handledningen har hjälpt dig att lära dig hur du anpassar din WordPress-header. Därefter kanske du också vill kolla in våra guider om:

• Hur man lägger till bilder korrekt i WordPress
• Hur man lägger till en teckenstorleksändrare i WordPress för tillgänglighet
• Hur man stylar varje WordPress-inlägg olika
• Hur man skapar en utfällbar sidomeny i WordPress
• Hur man visar olika sidofält för varje WordPress-inlägg och sida
• Hur man skapar en viral väntelista landningssida i WordPress
• Nyckelelement för design av en effektiv WordPress-webbplats
• Ultimata guiden: Hur du korrekt ändrar ett WordPress-tema

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.