Header aanpassen in WordPress met Elementor in 6 stappen

Als ik ergens een hekel aan heb, dan is het geklooi met een header aanpassen in WordPress. Hoewel de meeste (betaalde) thema’s wel veel opties bieden, ben je er altijd langer mee bezig dan je eigenlijk wilt. Heb je het eindelijk voor elkaar dat ie mooi wordt getoond op desktop, blijkt de mobiele versie een ramp te zijn. Het logo is of te groot of te klein, het menu staat niet mooi uitgelijnd of het menu is gewoon niet geschikt voor mobiel. Of je wilt gewoon de (hover)kleuren eenvoudig kunnen aanpassen. Kortom, als je zelf een website aan het bouwen bent, loopt je nogal eens tegen wat dingen aan.

Met Elementor Pro zijn al deze frustraties verleden tijd. Je header aanpassen in WordPress met Elementor is namelijk heel eenvoudig met de Theme Builder en biedt bovendien ook nog eens veel mogelijkheden. (let op: dit kan alleen met Elementor Pro en dus niet met de gratis versie). In dit artikel neem ik stap voor stap met je door hoe je een header aanpast in WordPress met behulp van Elementor.

Tip: Lees ook hoe je de footer instelt met Elementor

Stap 1: Een menu aanmaken

Begin met het aanmaken van een menu. Dit kun je gewoon doen in je WordPress omgeving, zoals je gewend bent (via Weergave → Menu’s). Of misschien heb je al een menu. Dan kun je deze stap overslaan. Start je net met de bouw van je websites? Dan is het handig om alvast de pagina’s die je wilt toevoegen aan het menu klaar te zetten onder ‘pagina’s’.

Stap 2: Logo uploaden in je thema

Als het goed is biedt het thema dat je gebruikt de mogelijkheid om een logo te uploaden. Kijk hiervoor bijvoorbeeld in de customizer. Sinds Elementor 3.0 kun je het logo nu ook uploaden in Elementor onder Site Instellingen:

Als je dit al hebt gedaan kun je deze optie overslaan. Lukt het niet? Dan kun je ook verder gaan naar stap 3.

Stap 3: de header aanmaken in Elementor

Navigeer in je WordPress menu naar ‘Templates → Theme builder’.

Klik op ‘Nieuwe toevoegen’

Kies voor het template ‘Header’ en vul een naam in. Bijvoorbeeld ‘Header’.

Je krijgt nu templates te zien van Elementor die je zo kunt gebruiken. Als dit de eerste keer is dat je met Elementor werkt, zou ik je adviseren om gebruik te maken van een template zodat je kunt zien hoe het werkt.

Kies een template die je aanspreekt en klik op ‘invoegen’

Header elementen

De header bestaat doorgaans uit verschillende Elementen. De meest voorkomende elementen:

• Het logo

Als je deze hebt geüpload bij je thema-opties of in Elementor bij Site Instellingen, zie je deze hier automatisch staan. Heb je dit niet gedaan, dan zie je een afbeelding ‘Site logo’. Dit komt doordat de widget ‘Site logo’ hier is geplaatst.

Als je de optie voor het uploaden van een logo niet kunt vinden in je thema, kun je deze widget er ook uitgooien en de afbeelding widget toevoegen. Plaats hierin je logo en vergeet niet om een link naar je homepage te plaatsen achter de afbeelding. Dit kun je doen door gebruik te maken van de dynamische tag. Klik hiervoor op het stapelicoontje rechts in het url veld en selecteer vervolgens ‘Site url’.

• Het navigatiemenu

Het menu wat je hebt ingesteld wordt automatisch geladen. Heb je meerdere menu’s en wil je een ander menu tonen? Dan kun je dit eenvoudig aanpassen door deze widget te bewerken.

Menu opsplitsen

Heb je een groot menu? Dan is het wellicht handig om je menu op te splitsen, zodat je ze op verschillende plekken in de header kunt laden. Zoals hieronder in het voorbeeld hieronder. Hier hebben we op twee plekken in de header menu’s ingesteld. Op onze eigen site gebruiken we in de blogomgeving ook twee menu’s. Je kunt dus ook meerdere headers instellen voor je website.

• Social media iconen
  Sommige websites kiezen ervoor om te linken naar hun social media kanalen in de header. Hiervoor kun je iconen gebruiken die beschikbaar zijn in de fontawesome bibliotheek (standaard gekoppeld in Elementor). Ik zou dit alleen doen als je hier ook actief op bent, anders heeft het weinig toegevoegde waarde.

• Contactgegevens
  Indien gewenst kun je ook je contactgegevens in de header plaatsen. Bijvoorbeeld in de topbar (hiervoor dien je een extra sectie aan te maken, als deze er nog niet is).

• Zoekformulier
  Bied je veel content aan op je website en wil je zoekgedrag van je bezoekers stimuleren? Dan kun je ervoor kiezen om ook een zoekformulier op je website te plaatsen.

Stap 4: de header aanpassen

De header aanpassen in WordPress met behulp van Elementor werkt eigenlijk op dezelfde manier als waarop je pagina’s vormgeeft met Elementor. Je kunt het zo gek maken als je zelf wilt. Met meerdere kolommen, secties etc. Alles wat je nu op deze pagina maakt, komt in je header te staan en is op iedere pagina te zien (afhankelijk van je publicatie condities, zie ook stap 6).

Het menu aanpassen

Onder tabje ‘stijl’ kun je meerdere aanpassingen doen in het menu:

• Kleuren aanpassen
• Hover animatie instellen
• Uitlijning instellen
• Lettertypes aanpassen
• Mobiele opties instellen

Probeer gewoon even het een en ander uit.

Het logo aanpassen

Net als een afbeelding kun je de grootte van de afbeelding aanpassen. Ga hiervoor naar het tabje ‘Stijl’. Overigens kun je een logo altijd het beste in het formaat uploaden waarin je hem ook op de website wilt tonen. Je header wordt namelijk op iedere pagina getoond en is daarmee een belangrijke factor in de laadtijd van je website. Als je een heel groot logo uploadt heeft dit dus effect op de laadtijd van je website.

Stap 5 (optioneel): Sticky header inschakelen

Als je wilt dat het menu in beeld blijft als mensen scrollen, kun je ervoor kiezen om de header ‘sticky’ te maken. Als je gebruikt maakt van een template van Elementor is dit waarschijnlijk al het geval.

Als je dit wilt instellen, doe je dit als volgt:

• Selecteer de sectie in de header die je sticky wilt maken
• Ga naar het tabblad Geavanceerd →Bewegingseffecten

Je kunt hier instellen of je de header sticky wilt maken boven of onderin je website (bovenin is het meest gebruikelijk). Bij de offset hoef je nu niets in te vullen. Je wilt dat de header aan de bovenkant van je website blijft ‘plakken’.

Stap 6: Condities instellen voor de header

Over het algemeen toon je een header op je hele website. Maar als je de header op bepaalde pagina’s liever niet toont, kan dit ook. Op je blogpagina wil je bijvoorbeeld een ander menu tonen dan op je productpagina’s. Een aantal klanten van ons heeft een webshop in de website zitten. Vaak maken we voor de webshop ook een aparte header (met winkelwagen, veelgestelde vragen etc).

Klik op ‘Publiceren’. Een nieuw scherm opent. Je kunt hier de publicatie condities instellen.

Publiceer de header. De header wordt nu op je website getoond. Zo eenvoudig is het dus om je header aan te passen met Elementor!

Header aanpassen in WordPress bij scrollen

Als er nog een klein minpuntje is aan header aanpassen in WordPress met Elementor, dan is het dat het nog niet mogelijk is om je header aan te passen bij het scrollen. Bij het scrollen wil je bijvoorbeeld dat óf de achtergrondkleur verandert of het logo kleiner wordt. Uiteraard zijn hier wel Elementor add-ons voor te vinden.

Houd je wel van een beetje klooien met css codes? Dan kun je daarvoor ook deze handleiding volgen. 

Header ook aanpassen voor mobiel? Lees dan dit artikel!

Veel succes!