Hoe kan ik headers in WordPress eenvoudig bewerken en aanpassen?

De header is het eerste gedeelte van een website dat bezoekers zien. Het aanpassen van de tekst in de header is erg belangrijk voor WordPress-websitebouwers die creatieve, unieke ontwerpen willen. Het bewerken en aanpassen van headers in WordPress kan echter een uitdaging zijn. Het vereist inzicht in het correct gebruik van de WordPress-thema-aanpasser, code-editors en andere tools. 

Een gepersonaliseerde header versterkt je merk, verbetert de navigatie op je website met menu's en trekt meer bezoekers aan met visuele elementen zoals logo's. Van het ontwerpen van aangepaste logo- layouts tot het coderen van geavanceerde dropdownmenu's: het beheersen van de WordPress-headeraanpassing geeft je volledige controle over hoe de homepage van je website eruitziet en functioneert, afgestemd op jouw specifieke behoeften. In dit artikel gaan we daar dieper op in. 

Een kort overzicht van de WordPress-header 

De WordPress-header verschijnt bovenaan de website en is het eerste onderdeel dat de aandacht van bezoekers trekt. Het is belangrijk om tijdens WordPress-onderhoud omdat deze belangrijke elementen bevat zoals:

1. Navigatiemenu – Hiermee kunnen bezoekers gemakkelijk doorklikken naar verschillende pagina's op uw website.
2. Logo – Het logo van uw bedrijf waarmee mensen uw merk herkennen.
3. Andere handige elementen – Denk aan pictogrammen voor sociale media, knoppen om een ​​actie uit te voeren (zoals 'Nu kopen'), zoekbalken, contactgegevens, enzovoort.

De header moet een goede eerste indruk maken en bezoekers direct toegang geven tot alle informatie die ze nodig hebben.

Gelukkig kun je met de nieuwe functie 'Volledige sitebewerking' van WordPress je header nu helemaal naar wens ontwerpen en aanpassen. Er zijn veel verschillende soorten WordPress-headers:

• Globale koptekst – Een consistente koptekst die op elke pagina wordt weergegeven.
• Vaste koptekst – De koptekst blijft bovenaan zichtbaar wanneer u naar beneden scrollt.
• Header op volledig scherm – Vult het hele scherm met grote afbeeldingen/video's.
• Schuifmenu – Op mobiele apparaten schuift het menu vanaf de zijkant naar binnen.
• Schuifbare koptekst – Schuift naar beneden terwijl u scrollt om meer opties weer te geven.
• Verticaal menu – Het menu staat verticaal aan de zijkant in plaats van horizontaal.
• Transparante header – Een header die door de pagina-inhoud heen te zien is.
• Gedraaide koptekst – De koptekst is 90 graden gedraaid voor een unieke look.
• Mega Menu – Uitbreidbare categorieën, ideaal voor webshops

De keuze voor een bepaalde header hangt af van het ontwerp, de inhoud en de gewenste gebruikerservaring van je website. Sommige headers zijn beter geschikt voor creatieve portfolio's, andere voor contentwebsites, webwinkels, enzovoort. De juiste header kan de ervaring van je bezoekers aanzienlijk verbeteren.

Hoe u het uiterlijk van de header kunt aanpassen

Wil je het uiterlijk van je header moeiteloos veranderen door het lettertype, de grootte en de kleur aan te passen aan de esthetiek van je website? We laten je drie methoden zien om dat goed te doen

Methode 1: Via de thema-aanpasser

De thema-aanpasser is een ingebouwde tool in WordPress waarmee gebruikers verschillende aspecten van het thema van hun website in realtime kunnen aanpassen. Het biedt een gebruiksvriendelijke interface waarmee je elementen zoals kleuren, lettertypen, lay-outs, widgetsen meer kunt wijzigen, zonder dat je code hoeft te kennen. Deze intuïtieve functie stelt website-eigenaren in staat om het uiterlijk van hun site te personaliseren en de wijzigingen direct te bekijken voordat ze live worden toegepast. 

Volg de onderstaande stappen om de visuele aantrekkingskracht van uw WordPress-website te verfijnen met behulp van de thema-aanpasser en het uiterlijk van uw header tot in de perfectie af te stemmen. 

Stap 1: Toegang tot de WP-website

Meld je aan bij je WordPress-dashboard met je beheerdersgegevens om te beginnen. Je kunt de inlogpagina ook bereiken door 'wp-admin' aan het einde van je websiteadres toe te voegen. Als de inlogpagina afwijkt, zijn er verschillende manieren om de URL van je WordPress-inlogpagina.

Stap 2: Ga naar de thema-aanpasser

Om het uiterlijk van je website te veranderen, ga je naar de linkerkant van je WordPress-dashboard en klik je op 'Uiterlijk'. Kies vervolgens 'Aanpassen' uit de opties die verschijnen. Hiermee open je de thema-aanpasser, waar je allerlei ontwerpaanpassingen kunt maken.

Lees meer: ​​Worden WordPress-wijzigingen niet weergegeven? Los het eenvoudig op!

Stap 3: Zoek de koptekstinstellingen

Waar je de header kunt bewerken, kan verschillen afhankelijk van je thema. Meestal vind je de opties voor de header in secties met de naam Header, Header & Navigatieof Headeropties. Klik op de sectie die over de header gaat om deze te openen en de instellingen te bekijken die je kunt wijzigen.

Stap 4: Headerelementen aanpassen

Afhankelijk van je thema en de aanpassingsmogelijkheden kun je meestal de volgende onderdelen van de header wijzigen:

1. Sitetitel/Logo: U kunt de titel van uw site aanpassen of een eigen logo toevoegen.
2. Site Slogan: Wijzig of verberg de slogan van uw site.
3. Headerafbeelding/Verloop: Sommige thema's bieden de mogelijkheid om een ​​afbeelding of een kleurverloop toe te voegen aan de headerachtergrond.
4. Navigatiemenu: Je kunt zelf bepalen welk menu bovenaan de website verschijnt, waar het komt te staan ​​en hoe het eruitziet.
5. Indeling van de koptekst: Wijzig de breedte, hoogte en positie van de koptekst.
6. Koptekst en kleuren: Pas de kleur aan van de tekst, links en andere stijlelementen in de koptekst.

Stap 5: Bekijk een voorbeeld van je wijzigingen

Wanneer je aanpassingen maakt in de WordPress Customizer, zie je een live voorbeeld van hoe je header eruit zal zien. Neem de tijd om te controleren of je de wijzigingen mooi vindt voordat je ze publiceert. Zo weet je zeker dat alles er goed uitziet voordat het live op je website verschijnt.

Stap 6: Sla je wijzigingen op

Zodra je de header naar wens hebt aangepast, klik je op de Publiceren of Opslaan en publiceren . Hiermee worden je wijzigingen opgeslagen en direct op je website weergegeven.

Lees meer: ​​Los het WordPress-probleem "Publiceren mislukt. Het antwoord is geen geldig JSON-antwoord" op.

Stap 7: Controleer op de website

Om te zien hoe je header er na de wijzigingen uitziet, open je de URL in een nieuw tabblad van je webbrowser. Houd er rekening mee dat je mogelijk een paar keer heen en weer moet gaan om alles goed te krijgen. Terwijl je hiermee bezig bent, is het een goed idee om de cache van je WordPress-site te wissen. Dit zorgt ervoor dat je de meest recente updates correct ziet.

Pro-tip: Verschillende thema's bieden verschillende mogelijkheden om je header aan te passen. Als je huidige thema niet genoeg opties voor de header biedt, overweeg dan om over te stappen naar een nieuw thema. 

U kunt ook contact opnemen met onze ontwerpafdeling voor extra hulp bij het aanpassen van de header aan uw wensen.

Methode 2: De header bewerken met de volledige site-editor

Als je je header in WordPress op een meer geavanceerde en flexibele manier wilt aanpassen, probeer dan de volledige site-editor te gebruiken in plaats van de standaard customizer. Je kunt de volledige site-editor via de nieuwe WordPress-functies of vanuit de moderne WordPress-blokeditor, Gutenberg. 

Zo bewerk je de header met de volledige site-editor:

Stap 1: Ga naar de WordPress-website

U krijgt toegang tot uw WordPress-beheerpaneel door in te loggen.

Stap 2: Ga naar de volledige site-editor

Ga in het WordPress-dashboardmenu naar 'Uiterlijk '. Selecteer vervolgens 'Site-editor' in het下拉菜单 (dropdownmenu). Hiermee wordt de volledige site-editor geopend.

Stap 3: Selecteer het koptekstblok

De live preview van de website wordt nu weergegeven en u vindt alle bewerkingsopties aan de linkerkant. Zoek naar het headergedeelte, dat zich meestal bovenaan de site bevindt. Het wordt waarschijnlijk aangeduid als ' Header' of 'Site Header'. Klik op het headergedeelte om verder te gaan.

Stap 4: Bewerk de koptekst

Zodra je het koptekstgedeelte hebt gekozen, zie je verschillende bewerkingsopties in de zijbalk. Afhankelijk van het thema en de functies van de blokeditor kun je de koptekst op de volgende manieren aanpassen:

1. Logo wijzigen: Upload een eigen logo of vervang het huidige logo.
2. Blokken toevoegen: Gebruik deze geavanceerde tool om tekst, afbeeldingen, knoppen of andere inhoud in de header te integreren en te ordenen.
3. De hoogte van de header aanpassen: bepaal zelf hoe prominent de site op de pagina verschijnt door de header hoger of lager te maken, afhankelijk van uw webdesignbehoeften.
4. Koptekstblokken: Gebruik blokken om verschillende contentelementen in de koptekst te integreren. Tekstblokken, afbeeldingsblokken, knoppen, socialemediapictogrammen en zoekbalken worden vaak gebruikt.
5. Uitlijning van koptekstelementen: Lijn elk blok links, in het midden of rechts uit. U kunt ook de uitlijning en plaatsing van koptekstelementen zoals het logo, de sitetitel en het navigatiemenu beheren.
6. Vaste koptekst: Activeer of deactiveer de functie voor een vaste koptekst, waardoor de koptekst bovenaan de pagina zichtbaar blijft wanneer gebruikers naar beneden scrollen.

Ontdek designinzichten: het belang van kerning in webdesign

Stap 5: Bekijk een voorbeeld van je wijzigingen en publiceer ze

Met de WordPress Full Site Editor kunt u een live voorbeeld van de header van uw website bekijken. Controleer de wijzigingen om er zeker van te zijn dat ze aansluiten bij uw ontwerpvoorkeuren en aan uw eisen voldoen.

Stap 6: Controleer uw website

Ga naar je website en bekijk de vernieuwde header. 

Over het algemeen biedt de WP Full Site Editor een visuelere en flexibelere manier om je eigen header te ontwerpen in vergelijking met de Theme Customizer. De beschikbare functies en aanpassingsmogelijkheden kunnen echter variëren afhankelijk van het thema en de geïnstalleerde plugins.

Methode 3: De header bewerken met behulp van de header-plugin

Voor de meest effectieve manier om de header van je WordPress-website te verbeteren, kun je overwegen een plugin te gebruiken. Plugins bieden een scala aan aanpassingsmogelijkheden, waardoor je je header perfect kunt afstemmen. 

Bovendien worden ze vaak regelmatig bijgewerkt, waardoor compatibiliteit met de nieuwste WordPress-versies gegarandeerd is en je nieuwe functies kunt ontdekken. Dus waarom zou je deze dynamische tools niet gebruiken om een ​​header te creëren die echt opvalt en meegroeit met de behoeften van je website?

Lees verder: De beste WordPress-websitebouwers voor bedrijven met een one-page website

Volg deze stappen:

Stap 1: Installeer Elementor Header and Footer Builder

Om je WordPress-site te verbeteren, ga je naar je WordPress-beheerpaneel. Ga vervolgens naar het gedeelte Plugins. Klik daarna op ' Nieuw toevoegen' en zoek naar de Elementor Header & Footer Builder-plugin. 

Zodra je het gevonden hebt, klik je op de Installeren . Na de installatie klik je op Activeren om de plugin te activeren. Door deze stappen te volgen, zorg je ervoor dat de Elementor Header & Footer Builder plugin actief is en klaar voor gebruik.

Stap 2: Een headersjabloon maken

Zodra je in je WordPress-dashboard bent , ga je naar het gedeelte 'Sjablonen' . Kies daar voor de functie 'Themabouwer' . Om een ​​nieuw headersjabloon te maken, klik je op de knop 'Nieuw toevoegen' . Selecteer vervolgens het sjabloontype 'Header' om te beginnen

Stap 3: Kies een koptekststructuur

Elementor biedt kant-en-klare headerontwerpen. Maar als je dat liever hebt, kun je ook zelf een volledig aangepaste header ontwerpen. Zodra je je keuze hebt gemaakt, wordt de Elementor-editor geopend, zodat je je gekozen ontwerp verder kunt verfijnen.

Stap 4: Ontwerp je header

Gebruik de Elementor-editor om je headerontwerp tot in de perfectie te creëren. Dankzij de intuïtieve interface kun je moeiteloos elementen zoals logo's, navigatiemenu's, tekst, knoppen, afbeeldingen en zelfs shortcodes toevoegen en personaliseren door ze vanuit de selectie in het linkerpaneel te slepen. 

Elementor biedt bovendien uitgebreide aanpassingsmogelijkheden voor stijl, kleuren, typografie en afstand, waardoor je elk element perfect kunt afstemmen op je ontwerpvisie. Ontdek de widgets en functies van Elementor om je header dynamischer en interactiever te maken en hem echt te laten opvallen.

Lees verder: Hoe je de WordPress-footer bewerkt in 5 eenvoudige methoden (stapsgewijze handleiding)

Stap 5: Bekijk een voorbeeld van je header

Met Elementor kun je een voorproefje krijgen van de header die je hebt gemaakt door simpelweg op het oogpictogram naast de 'Publiceren . Zo kun je je ontwerp bekijken en eventuele aanpassingen maken zonder dat dit je live webpagina's beïnvloedt.

Stap 6: Sla de headersjabloon op

Wanneer u op de knop 'Publiceren' klikt, verschijnt er een dialoogvenster waarin u kunt kiezen waar de door u gemaakte koptekst moet worden weergegeven. Als u vergeet een optie te selecteren in dit pop-upvenster, ga dan gewoon verder naar de volgende stap.

Stap 7: Wijs de header toe aan uw website

Om je gepersonaliseerde header op je website weer te geven, moet je deze aan specifieke pagina's of voorwaarden toewijzen. Ga eerst naar je WordPress-dashboard en vervolgens naar Sjablonen. Je vindt verschillende opties onder de naam die je aan het gedeelte Header hebt gegeven. Klik op Bewerken in dat paneel. Scroll naar beneden en selecteer Weergavevoorwaarden, waar je de weergaveregels kunt configureren om de header in te voegen.

Meer lezen: WordPress-toegankelijkheidsgids: naleving van de WCAG-normen

Stap 8: Publiceer je headersjabloon

Nadat je de weergavevoorwaarden hebt ingesteld, activeer je de aangepaste header op je website door op de 'Publiceren .

Je nieuwe header is nu live! De Header Footer-plugin van Elementor is veelzijdig en visueel aantrekkelijk voor het ontwerpen en personaliseren van headers. Met deze plugin kun je headers maken die statisch, vast of zelfs transparant zijn.

Lees meer: ​​Elementor blijft hangen op het laadscherm? Hier zijn meer dan 25 praktische oplossingen!

De WordPress-header aanpassen met behulp van de volledige sitebewerkingsfunctie

Volledige sitebewerking in WordPress biedt een frisse kijk op personalisatie en gaat verder dan de beperkingen van de oude thema-aanpasser. Hoewel je de aanpasser nog steeds kunt gebruiken, is de site-editor de nieuwe grens – een canvas voor creatieve vrijheid (hoewel nog in bèta). Bijvoorbeeld, bij het werken met het Twenty Twenty-Three-themais de site-editor van onschatbare waarde voor het aanpassen van de lettertypen, kleuren, knopstijlen en meer van je header.

Bekijk dit: 25 beste Elementor SaaS WordPress-thema's 

De WordPress-header openen in de site-editor

• Ga in je WordPress-beheerpaneel naar Weergave > Site-editor
• Bij het opstarten van de editor kom je terecht op het startscherm
• Om de headerinstellingen te openen, klikt u op het WordPress-logo (linksboven) of op het uitklapmenu en kiest u vervolgens ' Alle sjablonen bekijken'.
• Selecteer vervolgens 'Sjabloononderdelen' in het WordPress-menu.
• Klik ten slotte op Header om de header van uw site te bewerken.

De header vormgeven

Het Twenty Twenty-Three-thema wordt geleverd met een basisstructuur voor de header. Je kunt echter naar wens WordPress-blokken toevoegen of verwijderen. Laten we eens kijken hoe je dit sjabloononderdeel om een ​​eenvoudige, aangepaste header te maken:

• Klik op het 'Lijstweergave' om de structuur van de koptekst te bekijken.
• Je vindt een Groep-blok met daarin een Rij met twee subblokken: Paginatitel en Navigatie.
• De rij is al verticaal gecentreerd en ingesteld op volledige breedte

De header aanpassen

• Verwijder het 'Sitetitel' door het menu met de drie puntjes uit te klappen en 'Sitetitel verwijderen'
• Voeg het blok 'Sociale pictogrammen' toe door op het pluspictogram naast 'Navigatie' te klikken en te zoeken naar 'sociale pictogrammen'.
• Voeg de gewenste pictogrammen van sociale mediaplatformen (Facebook, Instagram, enz.) toe via het pop-upvenster
• Geef het blok met sociale media-pictogrammen vorm door de lay-out, uitlijning, oriëntatie, linkgedrag, kleuren en afstand aan te passen
• Voeg een achtergrondkleur toe aan het rijblok via Aanvullende instellingen > Achtergrond
• Voeg een nieuw rijblok in voor extra koptekstelementen
• Verplaats het navigatieblok naar de nieuwe rij door het te slepen
• Voeg een knopblok toe aan de eerste rij en pas de stijl ervan aan (tekst, kleur, randradius)
• Voeg het blok 'Site Logo' toe aan de tweede rij, upload uw logo en configureer de instellingen
• Zorg ervoor dat de tweede rij de volledige breedte heeft en dat de uitlijning is ingesteld op 'ruimte tussen items'
• Stel de rijuitlijning in op 'midden uitlijnen'.

Door blokken zorgvuldig te rangschikken en hun stijlen aan te passen, krijgt u gedetailleerde controle over elk aspect van uw WordPress-header. Zo kunt u een aangepaste header creëren die perfect aansluit bij uw huisstijl en tegelijkertijd een optimale gebruikerservaring biedt.

Conclusie

Vergeet niet dat het aanpassen van je WordPress-header een blijvende indruk achterlaat op bezoekers en de unieke identiteit van je merk weerspiegelt. Of je nu de Theme Customizer, de Full Site Editor of gespecialiseerde plugins gebruikt, profiteer van de krachtige tools die tot je beschikking staan. Experimenteer met verschillende lay-outs, kleuren en elementen om een ​​visueel aantrekkelijke, gebruiksvriendelijke header te creëren die betrokkenheid en conversies stimuleert. Wees creatief, geef prioriteit aan functionaliteit en blijf je header continu verfijnen om de concurrentie voor te blijven.