Hvordan tilføjer man header i WordPress? Brug WordPress Customizer eller Cover block til at tilpasse dit header-billede

Hvordan tilføjer man header i WordPress? Brug WordPress Customizer eller Cover block til at tilpasse dit header-billede

Du kan være enig med os i, at ingen hjemmeside er komplet uden header. Vidste du, at du har to forskellige muligheder for at oprette en header i WordPress? I denne vejledning vil vi forklare de individuelle forskelle.

Ægte overskriftsbillede

Klassisk WordPress-header, som du kender den, bruges på tværs af alle forskellige sider. Det er normalt en bred rektangulær boks fra side til side. Indeni er der et logo eller hjemmesidens navn, tagline og menupunkter. Du kan også indsætte et baggrundsbillede, der kaldes header image. Headerbilleder er gode til at tiltrække besøgendes opmærksomhed og til at skabe hjemmesidens overordnede look & feel. Det er op til dig at beslutte, om du vil bruge et diskret header-billede eller et dominerende billede, der fokuserer de besøgendes opmærksomhed på hjemmesidens navigation.

WordPress header-billede
Den mest brugte headertype - headerbillede i toppen af hjemmesiden

Sådan redigerer du header i WordPress Customizer

Som standard kan headerbilledet ændres via WordPress Customizer. Du kan få adgang til det både fra WordPress-administrator og fra din hjemmeside:

  • Direkte fra WP-administrationen skal du bare navigere til Udseende -> Tilpas
  • Hvis du er logget ind på forsiden, skal du klikke på "Tilpas" i den øverste bjælke.

Customizer indeholder alle grundlæggende indstillinger for udseendet af dit aktuelt aktive tema. Derfor afhænger det af dit aktive tema, hvor du finder indstillingerne for headerbilledet. I Citadela-temaet kan du tilføje og redigere headerbilledet i Tilpasning –> Udseende –> Baggrund for overskrift.

Tilføj header via Customizer
Tilføjelse af header via Customizer

Indstillinger for overskriftsbillede

Uanset hvilket headerbillede du vælger, kan du konfigurere det efter dine behov. En interessant effekt kan opnås ved hjælp af "Header Image Repeat". Du kan konfigurere følgende muligheder:

  • Fliser
  • Fliser vandret
  • Fliser lodret
  • No Repeat (hvis du ikke ønsker at gentage billedet)
Aktiveret funktion til gentagelse af headerbillede
Fliseeffekt af headerbillede

Andre indstillinger i WordPress - Størrelse på overskriftsbillede

En anden mulighed for at redigere headeren og justere billedet er at indstille en passende størrelse. Størrelsen på headerbilledet har følgende tre muligheder:

  • Original - Den beholder den oprindelige billedstørrelse
  • Omslag - uploadet billede vil blive ændret, så det passer fra side til side, billedet kan også klippes til, så det passer
  • Indeholder - header-billedets størrelse justeres på den måde, at hele billedet bliver synligt
3 muligheder for størrelse på headerbillede
Se, hvordan forskellige header kan se ud efter størrelse - original, cover og containerstørrelse

Du kan også indstille billedets position i headeren og indstille baggrundsfiksering.

Forsideblok, der fungerer som overskrift

Som vi allerede har nævnt i begyndelsen af denne artikel, er der flere måder at redigere header på i WordPress-editoren. Ud over at bruge Customizer kan du også bruge en af WordPress' kerneblokke, der hedder Cover block. Så hvad er forskellen?

Klassisk header oprettet med Customizer relaterer til hele hjemmesiden, mens Cover-blokken giver dig mulighed for at tilføje coverbillede, der grundlæggende fungerer som headerbillede til enhver side eller ethvert indlæg. Du kan endda bruge det flere gange på en side eller et indlæg med forskellige indstillinger.

Hvor skal man bruge Cover block

Cover block har en bredere anvendelse på hele hjemmesiden sammenlignet med den klassiske header. Cover-blokken tilføjer et bredt titelbillede i fuld bredde til indholdet. Du kan bruge den til visuelt at adskille indhold i blogindlæg. Hvert indlæg får sit eget headerbillede, som kan forbindes med det efterfølgende indhold. En god funktion er, at du kan skrive tekst lige inde i Cover-blokken. Denne tekst vil blive vist over billedet.

Coverbillede som headerbillede i blogindlæg
Blogpost med headerbillede tilføjet via Cover-blokken

Hjemmeside-overskrift

Cover-blokken kan også bruges i stedet for hjemmesidens header, hvis du vil opnå et originalt look. Fordi coverblokken giver forskellige justeringsmuligheder, kan du indstille den til indholdsbredde eller gøre den til fuld bredde. En header i fuld bredde kan også bruges som et stort baggrundsbillede. Men glem ikke at slå sidetitel fra i Citadela-temaet. Dette trin er nødvendigt, hvis du gerne vil bruge Cover-blokken som hjemmesidens header.

Header som baggrundsbillede i fuld bredde
Overskrift i fuld bredde på hjemmesiden

Sådan opretter du en header ved hjælp af Cover-blokken

Som noget af det første skal du tilføje Cover-blokken. Du kan tilføje den til enhver side eller ethvert indlæg på følgende måde:

Klik på "+"-tegnet i den øverste bjælke eller "+"-tegnet hvor som helst i indholdet. Derefter skal du blot søge efter Cover block.

Tilføj Cover-blok ved at klikke på "+"
Tilføjelse af coverblok ved hjælp af "+"

En anden hurtig måde er at tilføje en blok ved at bruge "/" efter bloknavnet.

Brug skråstreg til at tilføje Cover-blok
Tilføj skråstreg og skriv Cover block for at tilføje denne blok i indholdsområdet

Når du har tilføjet en coverblok, får du plads til at uploade et billede eller en video. Du kan også vælge et billede fra mediebiblioteket. Det valgte billede eller video vil blive brugt som header.

Overskriftens titel

Det interessante ved header tilføjet med Cover block er, at du kan skrive en teksttitel over billedet. Denne titel kan også bruges som overskrift for en sektion, f.eks. i blogindlæg. Det er også muligt at tilføje en hvilken som helst URL.

Titel i headerbillede
Titel i headerbillede

Justering af dækblok

Coverblokken kan justeres ved hjælp af blokværktøjslinjen. Den kan justeres inden for indholdsområdet til venstre, højre eller i midten. Den kan også indstilles som bred eller fuld bredde. Disse muligheder skal understøttes af det aktive tema, som du bruger til at bygge din hjemmeside.

Justering af dækblok
Du kan justere din Cover-blok på mange måder for at opnå det perfekte udseende af din header

Indstillinger for forsidebillede

Forsidebilledets udseende kan ændres i Inspector. Hvis du indstiller det som fast baggrund, vil billedet ikke rulle med resten af indholdet på din side, men det vil blive på sin plads hele tiden.

Med Focal Point Picker kan du vælge, hvilken del af billedet der skal vises i overskriften. Du kan arbejde endnu mere med billedet. For eksempel kan du indstille Overlay color og Background opacity. Begge indstillinger hjælper dig med at sætte prikken over i'et på din header. Hvis du bruger Cover-blokken i dit blogindlæg, kan du ved hjælp af det korrekte farveskema og gennemsigtighed tilføje den ønskede atmosfære til dit indlæg. Vær forsigtig med disse indstillinger, da titelteksten skal være tydeligt synlig.

Indstil farveoverlejring og opacitet
Ved at vælge den rigtige farveoverlejring kan du skabe iøjnefaldende header

Oprettelse af videooverskrift

Cover block kan også bruges til at afspille video i din hjemmesides header. Du kan fange de besøgendes opmærksomhed eller promovere et produkt eller en tjeneste. Der findes flere understøttede videoformaterDen mest almindelige, du kan bruge, er .mp4.

Det fantastiske er, at du også kan skrive titel over videoen, justere den, gøre den fuld bredde eller indstille farveoverlejring. Indstillingerne for Cover-blokken er de samme for alle medietyper.

Hvad er din erfaring med overskrifter? Har du allerede prøvet Cover block til at skabe header? Foretrækker du klassisk website-header ved hjælp af WordPress customizer? Lad os vide det i kommentarerne nedenfor.