Inhoudsopgave
Je kunt het met ons eens zijn dat geen enkele website compleet is zonder header. Wist je dat je twee verschillende opties hebt om een header te maken in WordPress? In deze tutorial leggen we de individuele verschillen uit.
Echte kopafbeelding
De klassieke WordPress header zoals je die kent, wordt gebruikt op alle verschillende pagina's. Het is meestal een breed rechthoekig vak van links naar rechts. Binnenin staat een logo of websitenaam, een slogan en menu-items. Je kunt er ook een achtergrondafbeelding invoegen die headerafbeelding wordt genoemd. Een headerafbeelding is ideaal om de aandacht van bezoekers te trekken en de algemene look & feel van de website te creëren. Het is aan jou om te beslissen of je een discrete headerafbeelding gebruikt of een dominante afbeelding die de aandacht van bezoekers op de websitenavigatie vestigt.
Hoe de koptekst bewerken in de WordPress Customizer
Standaard kan de headerafbeelding worden gewijzigd via de WordPress Customizer. Je hebt er toegang toe vanuit zowel de WordPress admin als vanuit je website:
- Navigeer rechtstreeks vanuit WP admin naar Uiterlijk -> Aanpassen
- Klik op de voorkant op "Aanpassen" in de bovenste balk als je bent ingelogd
Customizer bevat alle basisinstellingen voor het uiterlijk van je huidige actieve thema. Daarom waar je header image instellingen te vinden is afhankelijk van uw actieve thema. In Citadela thema kunt u toevoegen en bewerken header afbeelding in aanpassen -> Uiterlijk -> Achtergrond koptekst.
Instellingen koptekstafbeelding
Welke headerafbeelding je ook kiest, je kunt deze naar wens configureren. Je kunt een interessant effect bereiken met "Header Image Repeat". Je kunt de volgende opties configureren:
- Tegel
- Horizontaal tegelen
- Verticaal tegelen
- No Repeat (als je de afbeelding niet wilt herhalen)
Andere instellingen in WordPress - Afbeeldingsgrootte koptekst
Een andere optie om de koptekst te bewerken en de afbeelding aan te passen is het instellen van een geschikte grootte. Het formaat van de headerafbeelding heeft de volgende drie opties:
- Origineel - het behoudt de originele afbeeldingsgrootte
- Omslag - De geüploade afbeelding wordt verkleind zodat deze van links naar rechts past. De afbeelding kan ook worden bijgesneden om te passen.
- Bevat - De grootte van de headerafbeelding wordt zo aangepast dat de hele afbeelding zichtbaar is.
Je kunt ook de afbeeldingspositie binnen de koptekst instellen en de achtergrond fixeren.
Afdekblok dat werkt als koptekst
Zoals we aan het begin van dit artikel al hebben vermeld, zijn er verschillende manieren om de koptekst in WordPress editor te bewerken. Naast het gebruik van de Customizer kun je ook gebruik maken van een van de WordPress kernblokken genaamd Cover blok. Dus wat is het verschil?
Een klassieke header die is gemaakt met Customizer heeft betrekking op de hele website, terwijl je met het blok Cover een omslagafbeelding kunt toevoegen die in feite werkt als een headerafbeelding voor elke pagina of post. Je kunt het zelfs meerdere keren gebruiken op één pagina of bericht met verschillende instellingen.
Waar Cover block gebruiken
Coverblok is breder toepasbaar op websites in vergelijking met de klassieke websiteheader. Coverblok voegt een brede, volledige titelafbeelding toe aan de inhoud. Je kunt het gebruiken om inhoud in blogberichten visueel te scheiden. Elke postsectie krijgt zijn eigen headerafbeelding die kan worden verbonden met de volgende inhoud. Een geweldige functie is dat je tekst kunt schrijven binnen het Cover-blok. Deze tekst wordt boven de afbeelding weergegeven.
Homepage
Het Cover-blok kan ook worden gebruikt in plaats van de header van de website als je een originele look wilt. Omdat het Cover-blok verschillende uitlijningsopties biedt, kun je het instellen op inhoudsbreedte of op volledige breedte. De header kan ook worden gebruikt als grote achtergrondafbeelding. Maar vergeet niet om Paginatitel uit te schakelen in Citadela thema. Deze stap is noodzakelijk als je het Cover-blok wilt gebruiken als website-header.
Koptekst maken met Cover-blok
Als eerste moet je Cover-blok toevoegen. Je kunt het op de volgende manier aan een pagina of bericht toevoegen:
Klik op het "+"-teken in de bovenste balk of op een "+"-teken ergens in de inhoud. Zoek daarna gewoon naar Cover block.
Een andere snelle manier is om een blok toe te voegen met "/" na de naam van het blok.
Na het toevoegen van het Cover-blok krijg je ruimte om afbeeldingen of video's te uploaden. Je kunt ook een afbeelding selecteren uit de mediabibliotheek. De geselecteerde afbeelding of video wordt gebruikt als koptekst.
Titel
Interessant aan de header die is toegevoegd met Cover-blok is dat je een tekst kunt schrijven over de titel van de afbeelding. Deze titel kan ook worden gebruikt als koptekst voor een sectie, bijvoorbeeld in blogberichten. Het is ook mogelijk om een URL toe te voegen.
Dekselblok uitlijnen
Coverblok kan worden uitgelijnd met de blokwerkbalk. Het kan binnen het inhoudsgebied naar links, rechts of in het midden worden uitgelijnd. Het kan ook worden ingesteld als breed of volledig breed. Deze opties moeten worden ondersteund door het actieve thema dat je gebruikt om je website te bouwen.
Instellingen coverafbeelding
Het uiterlijk van de omslagafbeelding kan worden aangepast in Inspector. Als je het instelt als vaste achtergrond, zal de afbeelding niet mee scrollen met de rest van de inhoud op je pagina, maar zal het de hele tijd op zijn plaats blijven.
Met Focal Point Picker kun je kiezen welk deel van de afbeelding wordt weergegeven in de koptekst. Je kunt de afbeelding nog verder bewerken. Je kunt bijvoorbeeld de kleur van de overlay en de ondoorzichtigheid van de achtergrond instellen. Beide instellingen helpen je om de header af te werken. Als je het Cover-blok in je blogbericht gebruikt, kun je met het juiste kleurenschema en de juiste transparantie de gewenste sfeer aan je bericht geven. Wees voorzichtig met deze instellingen omdat de titeltekst duidelijk zichtbaar moet zijn.
Video header maken
Coverblok kan ook worden gebruikt om video af te spelen in de header van je website. Zo kun je de aandacht van bezoekers trekken of een product of dienst promoten. Er zijn verschillende ondersteunde videoformatenDe meest gebruikelijke die je kunt gebruiken is .mp4.
Het mooie is dat je ook een titel over de video kunt schrijven, deze kunt uitlijnen, de volledige breedte kunt maken of Kleur overlay kunt instellen. Instellingen voor Cover-blok zijn hetzelfde voor alle mediatypen.
Wat is jouw ervaring met kopteksten? Heb je Cover block al geprobeerd om een header te maken? Geef je de voorkeur aan een klassieke websiteheader met de WordPress customizer? Laat het ons weten in de reacties hieronder.