hoe Headers aan te passen in WordPress: Beginner’ s Guide

op zoek naar een eenvoudige manier om de WordPress header aan te passen?

omdat uw header bovenaan elke pagina staat, speelt deze een essentiële rol bij het brandmerken van uw website, het helpen van uw bezoekers bij het navigeren en het promoten van uw belangrijkste inhoud.

echter, om de meeste voordelen van de header van uw site te krijgen, moet u een manier om het te bewerken, die veel thema ‘ s niet bieden.

in dit bericht zullen we een aantal verschillende tactieken delen die u kunt gebruiken om de header in WordPress aan te passen met behulp van zowel eenvoudige drag-and-drop interfaces als uw eigen code.

de makkelijkste optie is om het Astra-thema en de drag-and-drop-header builder te gebruiken, maar we zullen ook een aantal andere tactieken delen die werken met een WordPress thema.

Wat Is de WordPress Header?

de WordPress header is het deel van uw site dat bovenaan elke pagina verschijnt. Typisch, het omvat ten minste twee elementen op het absolute minimum:

• Logo/identiteit van de Site
• navigatiemenu (s)

bijvoorbeeld, hier is hoe de header eruit ziet op de Astra blog. U kunt zien dat het het Astra-logo bevat, evenals twee afzonderlijke navigatiemenu ‘s:

afhankelijk van uw behoeften, kunt u ook andere elementen zoals sociale media pictogrammen, een zoekvak, promo’ s, uw telefoonnummer en andere informatie.

Als u ooit wilt zien hoe het werkt, is de WordPress header opgenomen in de header.php-bestand in uw WordPress thema.

hoe de WordPress Header aan te passen met Astra

als u volledige controle over uw WordPress header wilt, geeft het gratis Astra thema u een drag-and-drop, geen-code manier om uw WordPress header volledig aan te passen.

u kunt uw wijzigingen direct zien op een live preview van uw website en u kunt eenvoudig verschillende soorten inhoud toevoegen, zoals knoppen, sociale pictogrammen, een zoekvak en meer.

om te beginnen, wilt u het Astra-thema installeren en activeren. U kunt ook importeren een van de honderden vooraf gebouwde demo sites om snel up and running. Als u een helpende hand nodig heeft met een van deze stappen, hebben we tal van gidsen om u te helpen:

• Hoe installeer je Astra
• Hoe importeer je starter sites

als je eenmaal je basic site klaar hebt, kun je hier je header aanpassen met Astra.

1. Open de Astra Header Builder

om te beginnen, ga naar uiterlijk → aanpassen in uw WordPress dashboard om de native WordPress Customizer te starten. Selecteer vervolgens de Header Builder optie:

zodra u de header builder start, ziet u een nieuwe reeks opties waar u de lay-out van uw header kunt controleren:

2. Voeg en organiseer Header Content

nu voor het leuke gedeelte-content toevoegen. U kunt zien dat u drie rijen in de header builder. Elke rij bepaalt de inhoud voor een ander deel van de header:

1. boven header
2. primaire header-hier plaats je je “main” inhoud.
3. onder kop

u zult absoluut inhoud in de primaire koptekst willen opnemen, en dan hebt u de optie om inhoud boven of onder dat toe te voegen volgens uw behoeften.

om inhoud toe te voegen, kunt u klikken op de plek waar u inhoud wilt toevoegen. Dit opent een reeks opties:

• primair menu
• secundair menu
• Logo
• knop
• zoeken
• sociaal
• HTML 1
• HTML 2

merk op dat, als je inhoud toevoegt, je minder opties ziet. U kunt uw logo bijvoorbeeld maar één keer toevoegen, zodat die optie verdwijnt zodra u al een logo aan uw header hebt toegevoegd:

zodra u wat inhoud hebt toegevoegd, kunt u op die inhoud klikken om de instellingen te openen. Als u bijvoorbeeld een knop toevoegt, kunt u de knop tekst en link bedienen.

u kunt ook de Ontwerpinstellingen openen om dingen verder aan te passen:

Als u uw inhoud wilt herschikken of verplaatsen naar een andere rij, hoeft u alleen maar te slepen en neerzetten:

3. Header lay-out aanpassen

hierboven hebben we u laten zien hoe u de afzonderlijke elementen in uw header kunt aanpassen. Je hebt ook verschillende opties om je header als geheel aan te passen.

Ten eerste kunt u naar het tabblad Design van de hoofdkopbouwer gaan om de breedte en afstand van uw koptekst te bepalen. U kunt ook op het tandwielpictogram voor elke header-rij klikken om de hoogte en het ontwerp aan te passen:

4. Experimenteer met verschillende typen Headers

afhankelijk van of u de gratis versie van Astra of Astra Pro gebruikt, krijgt u ook toegang tot andere typen headers, zoals transparante headers (gratis) en sticky headers (Pro).

u kunt dezelfde kop-en voettekstbouwer hierboven gebruiken om uw transparante of kleverige koptekst te ontwerpen. Je ziet deze opties onder de header Types sectie. U kunt op hen klikken om de instellingen uit te breiden en het ontwerp van die verschillende header types:

drie andere manieren om de WordPress Header

aan te passen terwijl Astra ‘ s drag-and-drop header builder de gemakkelijkste manier biedt om de WordPress header aan te passen, zijn er ook andere tactieken die u kunt gebruiken, ongeacht welk thema u gebruikt.

hier zijn enkele van de beste strategieën…

1. Gebruik uw thema ’s Customizer Instellingen

de meeste WordPress thema’ s geven u enige controle over de header van uw site in de native WordPress Customizer. Het is onwaarschijnlijk dat u het detailniveau krijgt dat Astra u geeft, maar u krijgt een aantal opties om te bepalen hoe uw header eruit ziet en functioneert.

deze opties variëren afhankelijk van uw thema, maar u kunt ze meestal openen door te klikken op het blauwe potloodpictogram naast de elementen in uw header. Bijvoorbeeld, in de nieuwe Twenty Twenty-One standaard thema, kunt u zien dat u in staat bent om uw:

• Logo
• sitekop
• Menu

Als u wat extra hulp nodig hebt, kunt u de documentatie van uw thema-ontwikkelaar raadplegen.

2. Gebruik Elementor en een gratis aangepaste Header Plugin

Als u niet bekend bent met Elementor, is het een visueel, drag-and-drop design tool die u kunt gebruiken om inhoud op uw site te maken. Met de gratis Elementor-Header, Footer & blokken sjabloon aangepaste koptekst WordPress plugin, kunt u de gratis versie van Elementor gebruiken om uw eigen WordPress aangepaste koptekst te ontwerpen.

deze plugin werkt perfect met de gratis Astra thema, evenals alle andere WordPress thema dat u zou kunnen gebruiken.

om te beginnen, installeer en activeer de gratis plugin van WordPress.org. je moet ook de gratis versie van Elementor installeren als je dat nog niet hebt gedaan.

als je dat gedaan hebt, ga dan naar Appearance → Header Footer & Blocks en klik op Nieuwe Toevoegen:

geef uw sjabloon een naam en kies Header onder Type sjabloon. U kunt ook de Opties Display On of User Roles gebruiken om uw header te richten op specifieke inhoud/gebruikers.

Publiceer vervolgens uw header en klik op Bewerken met Elementor om de Visual builder te openen:

Nu, u kunt uw header volledig aanpassen met behulp van Elementor ‘ s visuele drag-and-drop interface. De plugin geeft u ook nieuwe Koptekst, voettekst & blokkeert widgets die u kunt gebruiken om belangrijke site-elementen toe te voegen, zoals het logo van uw site of een navigatiemenu:

voor meer informatie over het gebruik van Elementor, Bekijk onze volledige Elementor tutorial of Elementor beoordeling.

3. Gebruik aangepaste Code (Geavanceerd)

Als u een gevorderde gebruiker bent, kunt u ook de WordPress-header aanpassen met uw eigen code. Om dit te doen, heb je op zijn minst een praktische kennis van HTML, PHP en CSS nodig, dus dit is geen optie voor niet-technische gebruikers.

als u deze codeertalen niet kent, wilt u vasthouden aan een van de vorige methoden in deze lijst.

er zijn twee delen om code te gebruiken om uw header aan te passen:

• HTML / PHP-dit controleert de werkelijke inhoud in uw header.
• CSS – dit bepaalt de opmaak van uw header.

zoals eerder vermeld, bevindt de headerinhoud van uw site zich in de header.php bestand. Dus om de inhoud van uw header aan te passen, moet u direct met dit bestand werken. Of, sommige thema ‘ s, zoals Astra, bieden ook haken die u kunt gebruiken om inhoud toe te voegen aan de header.

In de Astra visual hooks guide kunt u zien dat u een aantal opties hebt om de header aan te passen:

Als u de header van uw thema wilt bewerken.php-bestand direct, moet u een kind thema te gebruiken om ervoor te zorgen dat u niet uw wijzigingen overschrijven wanneer u uw thema bijwerken.

aan de andere kant, als u hooks gebruikt, hoeft u geen dochterthema te gebruiken zolang u een plugin zoals Astra Hooks of codefragmenten gebruikt. Als u uw haken direct aan de functies van uw thema toe te voegen.php-bestand, moet u nog steeds gebruik maken van een kind thema, hoewel.

met Astra Pro hebt u ook de mogelijkheid om haken toe te voegen met behulp van de aangepaste lay-outfunctie van Astra Pro.

het leuke aan de aangepaste lay-outs van Astra Pro is dat u schermregels kunt gebruiken om precies te bepalen wanneer de wijzigingen worden weergegeven. U kunt bijvoorbeeld aangepaste inhoud toevoegen aan uw header die alleen wordt weergegeven voor ingelogde gebruikers.

zo past u de inhoud van uw header aan – maar hoe zit het met de styling?

om de stijl van uw header aan te passen, kunt u de stijl bewerken.css-bestand direct als u gebruik maakt van een kind thema. Of, u kunt de extra CSS gebied in de WordPress Customizer gebruiken om uw eigen aangepaste stijlen toe te voegen aan de header.

pas vandaag uw WordPress Header aan

uw WordPress header speelt een essentiële rol in het succes van uw site. Het helpt het merk van uw website, begeleiden uw bezoekers naar belangrijke inhoud, het bevorderen van belangrijke informatie of sociale profielen, en nog veel meer.

de makkelijkste manier om volledige controle over de header van uw site te krijgen is door het gratis Astra-thema te gebruiken. Met Astra krijg je toegang tot een visuele, drag-and-drop header builder. U hoeft geen code of externe plugins nodig-je krijgt 100% controle over uw header van rechts binnen de WordPress Customizer.

in andere situaties kunt u ook de aangepaste instellingen van een ander thema gebruiken, de Elementor – Header, Footer & Blocks Template plugin, of uw eigen code als u de technische kennis hebt.