Hur lägger man till en header i WordPress? Använd WordPress Customizer eller Cover-block för att anpassa din header-bild

Hur lägger man till en header i WordPress? Använd WordPress Customizer eller Cover-block för att anpassa din header-bild

Du kan hålla med oss om att ingen webbplats är komplett utan header. Visste du att du har två olika alternativ för att skapa sidhuvud i WordPress? I den här guiden förklarar vi de individuella skillnaderna.

Äkta Header-bild

Klassiskt WordPress-header som du känner till det används på alla olika sidor. Det är vanligtvis en bred rektangulär ruta från sida till sida. Inuti finns en logotyp eller webbplatsnamn, tagline och menyalternativ. Du kan också infoga där en bakgrundsbild som kallas header image. Header-bilden är utmärkt för att locka besökarnas uppmärksamhet och för att skapa webbplatsens övergripande utseende och känsla. Det är upp till dig att bestämma om du använder en diskret headerbild eller en dominant bild som fokuserar besökarnas uppmärksamhet på webbplatsens navigering.

WordPress rubrikbild
Den mest använda rubriktypen - rubrikbild överst på webbplatsen

Så här redigerar du rubriken i WordPress Customizer

Som standard kan header-bilden ändras via WordPress Customizer. Du kan komma åt den både från WordPress-admin och från din webbplats:

  • Direkt från WP-admin, navigera bara till Utseende -> Anpassa
  • På frontend, om du är inloggad, klicka på "Anpassa" i det övre fältet

Customizer innehåller alla grundläggande utseendeinställningar för ditt för närvarande aktiva tema. Var du hittar inställningarna för header-bilden beror därför på ditt aktiva tema. I Citadela-temat kan du lägga till och redigera header-bilden i Anpassning -> Utseende -> Bakgrund för sidhuvud.

Lägg till rubrik via Customizer
Lägga till rubrik via Customizer

Inställningar för rubrikbild

Oavsett vilken header-bild du väljer kan du konfigurera den efter dina behov. En intressant effekt kan uppnås med hjälp av "Header Image Repeat". Du kan konfigurera följande alternativ:

  • Kakel
  • Kakel horisontellt
  • Kakelplattor vertikalt
  • No Repeat (om du inte vill att bilden ska upprepas)
Aktiverad funktion för upprepning av header-bild
Kakeleffekt för rubrikbild

Andra inställningar i WordPress - Storlek på header-bild

Ett annat alternativ för att redigera rubriken och justera bilden är att ställa in lämplig storlek. Bildstorleken för sidhuvudet har följande tre alternativ:

  • Original - den behåller den ursprungliga bildstorleken
  • Omslag - uppladdad bild kommer att ändras för att passa från sida till sida, bilden kan också skäras för att passa
  • Innehåller - header-bildstorleken kommer att justeras på det sättet, så att hela bilden blir synlig
3 alternativ för storlek på rubrikbild
Se hur olika rubriker kan se ut beroende på storlek - original, omslag och innehållsstorlek

Du kan också ställa in bildens position i sidhuvudet och ställa in bakgrundsfixering.

Täckblock som fungerar som rubrik

Som vi redan nämnde i början av den här artikeln finns det flera sätt att redigera rubriken i WordPress-redigeraren. Förutom att använda Customizer kan du också använda ett av WordPress kärnblock som kallas Cover-block. Så vad är skillnaden?

Klassisk header skapad med Customizer avser hela webbplatsen, medan Cover-blocket låter dig lägga till omslagsbild som i princip fungerar som header-bild till vilken sida eller inlägg som helst. Du kan till och med använda det flera gånger på en sida eller ett inlägg med olika inställningar.

Var du kan använda Cover block

Cover block har bredare tillämpning över hela webbplatsen jämfört med klassisk webbplatshuvud. Cover-blocket lägger till en bred titelbild i full bredd i innehållet. Du kan använda det för att visuellt separera innehåll i blogginlägg. Varje inläggsavsnitt får sin egen rubrikbild som kan kopplas till följande innehåll. En bra funktion är att du kan skriva text direkt inuti Cover-blocket. Denna text kommer att visas över bilden.

Omslagsbild som rubrikbild i blogginlägget
Bloggpost med rubrikbild som lagts till via Cover-blocket

Rubrik på startsidan

Cover-blocket kan också användas i stället för webbplatsens rubrik om du vill uppnå ett originellt utseende. Eftersom Cover-blocket erbjuder olika justeringsalternativ kan du ställa in det på innehållsbredd eller göra det i full bredd. Rubriken i full bredd kan också användas som en stor bakgrundsbild. Men glöm inte att stänga av sidtiteln i Citadela-temat. Detta steg är nödvändigt om du vill använda Cover-blocket som webbplatshuvud.

Header som bakgrundsbild i full bredd
Rubriker i full bredd på startsidan

Hur man skapar rubrik med hjälp av Cover-block

Som första sak måste du lägga till Cover-blocket. Du kan lägga till det på vilken sida eller inlägg som helst på följande sätt:

Klicka på "+" -tecknet i det övre fältet eller "+" -tecknet var som helst i innehållet. Därefter söker du helt enkelt efter Cover block.

Lägg till täckblock genom att klicka på "+"
Lägga till täckblock med hjälp av "+"

Ett annat snabbt sätt är att lägga till block genom att använda "/" efter blocknamnet.

Använda snedstreck för att lägga till Cover block
Lägg till snedstreck och skriv Cover block för att lägga till detta block i innehållsområdet

När du har lagt till Cover-block får du ett utrymme för att ladda upp bild eller video. Du kan också välja bild från mediebiblioteket. Den valda bilden eller videon kommer att användas som rubrik.

Rubrikens titel

En intressant sak med rubriken som läggs till med Cover-blocket är att du kan skriva en texttitel över bilden. Denna titel kan också användas som rubrik för avsnitt, till exempel i blogginlägg. Det är också möjligt att lägga till en URL där.

Titel i rubrikbild
Titel i rubrikbild

Rikta in täckblocket

Omslagsblocket kan justeras med hjälp av blockverktygsfältet. Det kan justeras inom innehållsområdet till vänster, höger eller i mitten. Det kan också ställas in som bred eller full bredd. Dessa alternativ måste stödjas av det aktiva tema som du använder för att bygga din webbplats.

Inriktning av täckblock
Du kan rikta in ditt Cover-block på många olika sätt för att få ett perfekt utseende på din header

Inställningar för omslagsbild

Omslagsbildens utseende kan ändras i Inspektören. Om du ställer in den som fast bakgrund kommer bilden inte att rulla med resten av innehållet på din sida utan den kommer att ligga kvar på sin plats hela tiden.

Med hjälp av Focal Point Picker kan du välja vilken del av bilden som ska visas i sidhuvudet. Du kan arbeta med bilden ännu mer. Du kan t.ex. ställa in Overlay color och Background opacity. Båda inställningarna hjälper dig att lägga sista handen vid din header. Om du använder Cover-blocket i blogginlägget kan du med hjälp av rätt färgschema och transparens lägga till önskad atmosfär i ditt inlägg. Var försiktig med dessa inställningar eftersom rubriktexten måste vara tydligt synlig.

Ställ in färgöverlagring och opacitet
Genom att välja rätt färgöverlägg kan du skapa iögonfallande sidhuvud

Skapa videohuvud

Cover block kan också användas för att spela upp video i sidhuvudet på din webbplats. Du kan fånga besökarnas uppmärksamhet eller marknadsföra produkter eller tjänster. Det finns flera flera videoformat som stödsDet vanligaste du kan använda är .mp4.

Det bästa är att du också kan skriva titeln över videon, justera den, göra den fullbredd eller ställa in färgöverlägg. Inställningarna för Cover-blocket är desamma för alla medietyper.

Vad är din erfarenhet av rubriker? Har du redan provat Cover block för att skapa header? Föredrar du klassiska sidhuvud med WordPress Customizer? Låt oss veta i kommentarerna nedan.