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\u00ebren. 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.<\/p>\n\n\n
![\"WordPress](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-simple.jpg\")
<\/a><\/span><\/a>Hoe de koptekst bewerken in de WordPress Customizer<\/span><\/h3>\n\n\n\nStandaard kan de headerafbeelding worden gewijzigd via de WordPress Customizer. Je hebt er toegang toe vanuit zowel de WordPress admin als vanuit je website:<\/p>\n\n\n\n
- Navigeer rechtstreeks vanuit WP admin naar Uiterlijk <\/i>-> Aanpassen<\/li>
- Klik op de voorkant op \"Aanpassen\" in de bovenste balk als je bent ingelogd<\/li><\/ul>\n\n\n\n
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 <\/i>-> Uiterlijk <\/i>-> Achtergrond koptekst<\/i>.<\/p>\n\n\n\n![\"Koptekst](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-customizer.gif\")
<\/a>Koptekst toevoegen via Customizer<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Instellingen koptekstafbeelding<\/span><\/h4>\n\n\n\nWelke 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:<\/p>\n\n\n\n
- Tegel<\/li>
- Horizontaal tegelen<\/li>
- Verticaal tegelen<\/li>
- No Repeat (als je de afbeelding niet wilt herhalen)<\/li><\/ul>\n\n\n\n
![\"Functie](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-repeat.jpg\")
<\/a>Tegeleffect van headerafbeelding<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Andere instellingen in WordPress - Afbeeldingsgrootte koptekst<\/span><\/h4>\n\n\n\nEen 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:<\/p>\n\n\n\n
- Origineel<\/b> - het behoudt de originele afbeeldingsgrootte<\/li>
- Omslag<\/b> - De ge\u00fcploade afbeelding wordt verkleind zodat deze van links naar rechts past. De afbeelding kan ook worden bijgesneden om te passen.<\/li>
- Bevat<\/b> - De grootte van de headerafbeelding wordt zo aangepast dat de hele afbeelding zichtbaar is.<\/li><\/ul>\n\n\n\n
![\"3](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-sizes.jpg\")
<\/a>Bekijk hoe verschillende kopteksten eruit kunnen zien aan de hand van het formaat - origineel, omslag en bevatten formaat<\/figcaption><\/figure>\n<\/div>\n\n\nJe kunt ook de afbeeldingspositie binnen de koptekst instellen en de achtergrond fixeren.<\/p>\n\n\n\n
<\/span><\/a>Afdekblok dat werkt als koptekst<\/span><\/h3>\n\n\n\nZoals 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?<\/p>\n\n\n\n
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 \u00e9\u00e9n pagina of bericht met verschillende instellingen.<\/p>\n\n\n\n
<\/span><\/a>Waar Cover block gebruiken<\/span><\/h4>\n\n\n\nCoverblok 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.<\/p>\n\n\n
\n![\"Coverafbeelding](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/post-cover-blocks.jpg\")
<\/a>Blogpost met headerafbeelding toegevoegd via Cover-blok<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Homepage<\/span><\/h4>\n\n\n\nHet 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.<\/p>\n\n\n
\n![\"Koptekst](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-cover.jpg\")
<\/a>Koptekst over de volledige breedte op de homepage<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span><\/a>Koptekst maken met Cover-blok<\/span><\/h3>\n\n\n\nAls eerste moet je Cover-blok toevoegen. Je kunt het op de volgende manier aan een pagina of bericht toevoegen:<\/p>\n\n\n\n
Klik op het \"+\"-teken in de bovenste balk of op een \"+\"-teken ergens in de inhoud. Zoek daarna gewoon naar Cover block.<\/p>\n\n\n
\n![\"Voeg](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-button-add.png\")
<\/a>Dekking toevoegen met \"+\"<\/figcaption><\/figure>\n<\/div>\n\n\nEen andere snelle manier is om een blok toe te voegen met \"\/\" na de naam van het blok.<\/p>\n\n\n
\n![\"Schuine](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-shortcut.gif\")
<\/a>Voeg een schuine streep toe en typ Cover-blok om dit blok toe te voegen aan het inhoudsgebied<\/figcaption><\/figure>\n<\/div>\n\n\nNa 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.<\/p>\n\n\n\n
<\/span>Titel<\/span><\/h4>\n\n\n\nInteressant 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.<\/p>\n\n\n
\n![\"Titel](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-text.png\")
<\/a>Titel in headerafbeelding<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Dekselblok uitlijnen<\/span><\/h4>\n\n\n\nCoverblok 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.<\/p>\n\n\n
\n![\"Uitlijning](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-align.gif\")
<\/a>Je kunt je Cover-blok op verschillende manieren uitlijnen om de perfecte look van je header te krijgen<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Instellingen coverafbeelding<\/span><\/h4>\n\n\n\nHet 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n
\n![\"Kleur](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-colors.gif\")
<\/a>Door de juiste kleur overlay te kiezen, kun je opvallende headers maken.<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span><\/a>Video header maken<\/span><\/h4>\n\n\n\nCoverblok 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 videoformaten<\/a>De meest gebruikelijke die je kunt gebruiken is .mp4.<\/p>\n\n\n\nHet 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.<\/p>\n\n\n\n
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 <\/i>-> Uiterlijk <\/i>-> Achtergrond koptekst<\/i>.<\/p>\n\n\n 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:<\/p>\n\n\n\n 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:<\/p>\n\n\n\n Je kunt ook de afbeeldingspositie binnen de koptekst instellen en de achtergrond fixeren.<\/p>\n\n\n\n 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?<\/p>\n\n\n\n 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 \u00e9\u00e9n pagina of bericht met verschillende instellingen.<\/p>\n\n\n\n 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.<\/p>\n\n\n 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.<\/p>\n\n\n Als eerste moet je Cover-blok toevoegen. Je kunt het op de volgende manier aan een pagina of bericht toevoegen:<\/p>\n\n\n\n Klik op het \"+\"-teken in de bovenste balk of op een \"+\"-teken ergens in de inhoud. Zoek daarna gewoon naar Cover block.<\/p>\n\n\n Een andere snelle manier is om een blok toe te voegen met \"\/\" na de naam van het blok.<\/p>\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n 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.<\/p>\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n 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 videoformaten<\/a>De meest gebruikelijke die je kunt gebruiken is .mp4.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n<\/a><\/span>Instellingen koptekstafbeelding<\/span><\/h4>\n\n\n\n
<\/a><\/span>Andere instellingen in WordPress - Afbeeldingsgrootte koptekst<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>Afdekblok dat werkt als koptekst<\/span><\/h3>\n\n\n\n
<\/span><\/a>Waar Cover block gebruiken<\/span><\/h4>\n\n\n\n
<\/a><\/span>Homepage<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>Koptekst maken met Cover-blok<\/span><\/h3>\n\n\n\n
<\/a><\/a><\/span>Titel<\/span><\/h4>\n\n\n\n
<\/a><\/span>Dekselblok uitlijnen<\/span><\/h4>\n\n\n\n
<\/a><\/span>Instellingen coverafbeelding<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>Video header maken<\/span><\/h4>\n\n\n\n