Hoe kan ik het menu aanpassen in Elementor (WordPress)?

Een navigatiemenu is essentieel voor je website. Een overzichtelijk menu zorgt ervoor dat bezoekers eenvoudig naar de juiste pagina kunnen navigeren, en de benodigde informatie kunnen vinden. In dit blog lees je hoe je pagina’s in het menu kan zetten, hoe je het menu kan opmaken en leren we je hoe je een mega menu kan opzetten.

Om een menu juist in te stellen moet je de gewenste pagina’s aan het menu toevoegen in WordPress. Daarna moet je het menu aan de header toevoegen met Elementor. We beginnen met het instellen van het menu in WordPress.

Voordat je een menu aan je Elementor website kan toevoegen, moet Elementor eerst weten welke pagina’s er in het menu moeten komen. Dit doe je met de volgende stappen:

1. Ga in het WordPress-dashboard naar ‘Weergaven > Menu’s’.
2. Kies voor ‘Nieuw menu aanmaken’ of selecteer het huidige menu om deze aan te passen.
3. Selecteer de gewenste pagina’s in de linkerkolom en klik daarna op ‘Aan menu toevoegen’.
4. Zet de pagina’s nu in de gewenste volgorde en klik op ‘Opslaan’.
   
   

Wil je jouw pagina’s in een dropdown menu weergeven? Zorg er dan voor dat je de pagina’s schuin onder de hoofdpagina plaatst. Op die manier wordt de bovenste pagina de hoofdpagina en vallen de andere pagina’s daaronder (ouder-kindrelatie).

In het voorbeeld hierboven is ‘Diensten’ een ouder van ‘Zoekmachinemarketing’. En ‘Zoekwoorden onderzoek’ is dan weer een kind van ‘Zoekmachinemarketing’.

Je kan, naast je pagina’s, ook ‘Aangepaste links’ toevoegen aan je menu. Dit zijn weblinks die niet onder je bestaande pagina’s vallen. Je kunt bijvoorbeeld een link maken naar een externe website.

Daarnaast kan het voorkomen dat je in het menu bijvoorbeeld wel een ‘Diensten’ ouder wilt hebben, maar dat deze pagina helemaal niet bestaat. Het ‘Diensten’ menu-item dient dan slechts als uitklapmenu. Als je een hoofdmenu-item wilt maken voor een dropdown menu dat zelf geen pagina of link is, kun je een hashtag (#) als link invoeren. De website zal dan niet naar een andere pagina navigeren.

Nu de pagina’s in de juiste volgorde in het WordPress-menu zijn opgenomen, kunnen we het navigatiemenu aan de website toevoegen. Dit doen we door in Elementor een header template te maken waarin we het menu verwerken. Dit template zal vervolgens over de hele website getoond worden.

1. Ga in het WordPress dashboard naar ‘Templates > Thema bouwer’.
2. Maak hier een nieuwe header aan of bewerk je huidige header.
3. Plaats de widget ‘WordPress menu’
4. Koppel het aangemaakte menu met de menu widget. Klik hiervoor op de menu widget en geef onder de tab ‘inhoud > Lay-out > Menu’ het zojuist aangemaakte menu aan.
5. Geef de widget de gewenste styling. 
6. Open je website om het resultaat te bekijken.
   
   

Met de thema bouwer is het ook mogelijk om de footer van je website maken. Wil je meer weten over het aanmaken van de footer, of over welke informatie er in een footer moet staan? Lees het hier in onze blog over het aanmaken van een footer in WordPress.

Het WordPress-menu wordt in Elementor automatisch responsive gemaakt voor mobiele apparaten. Het menu verandert in een knop waar het menu uitklapt (dit wordt ook wel een hamburger menu genoemd).

Je kan in Elementor bij het tabblad ‘Inhoud’ > ‘Mobiele dropdown’ aangeven vanaf welke schermgrootte je het menu als hamburger menu wil tonen. Wij raden aan het hamburger menu vanaf ‘Tablet Portrait’ in te zetten. Je bent dan zeker dat het menu op een tablet met klein scherm ook leesbaar is.

Daarnaast moet dit mobiele menu nog een styling worden meegegeven. Dit doe je door in de Elementor interface de ‘Dropdown’ en ‘Toggle button’ de gewenste styling mee te geven in het ‘Stijl’ tabje.

Met een sticky menu bedoelen we dat het menu altijd in beeld blijft als je over de pagina scrollt. Dit is handig voor lange pagina’s. De bezoeker heeft dan altijd de mogelijkheid om via het sticky menu naar een andere pagina te navigeren.

Volg de volgende stappen om jouw menu sticky te maken:

1. Open je header template in Elementor.
2. Selecteer de menu widget of de container waar de widget in zit om deze te kunnen bewerken.
3. Ga bij de instellingen naar het tabblad ‘Geavanceerd’ en scroll naar ‘Bewegingseffecten’.
4. Zet hier ‘Sticky’ op ‘Boven’ en geef aan voor welke apparaten (mobiel, tablet) dit moet gebeuren. Afhankelijk van het design kan je de ‘offset’ opgeven. Dit heeft invloed op hoe ver de bezoeker moet scrollen voordat het element mee scrollt.

Het menu is nu sticky, maar er is een kans dat het menu onder andere elementen gaat zitten tijdens het scrollen. Hierdoor verdwijnt het menu bijvoorbeeld onder teksten of afbeeldingen, waardoor het menu niet meer zichtbaar is en dus ook niet meer gebruikt kan worden.

Om dit te voorkomen ga je in Elementor bovenaan de ‘Geavanceerd’ tab naar de dropdown ‘Geavanceerd’. En zet de Z-index op 99. Het menu zal nu over alle elementen heen zweven die een lagere Z-index waarde hebben.

Wil je afwijken van het standaard hoofdmenu en meer visuele elementen in je menu kunnen gebruiken? Dan is er in Elementor de mogelijkheid om een mega menu te maken.

Op het moment van schrijven zijn de functies om elementen samen te voegen (Geneste Elementen) en de widget om het mega menu te maken nog in bèta. Dit betekent dat de functionaliteit nog niet 100% af is. Er kunnen dus nog wijzigingen of bugs in optreden. Houd hier rekening mee.

Volg de volgende stappen om bèta-functionaliteit te activeren:

1. Ga in het WordPress dashboard naar ‘Elementor > Instellingen’ en open de tab ‘Functies’.
2. Zoek hier naar ‘Geneste elementen’ en zet deze op ‘Actief’.
3. Zoek naar de functie ‘Menu’ en zet ook deze op ‘Actief’.
4. Scroll vervolgens naar onderaan de pagina en druk op ‘Wijzigingen opslaan’.

Het bouwen van het mega menu doen we met Elementor. Ga in het WordPress-dashboard naar ‘Templates > Thema bouwer’. Maak een nieuw header template aan of bewerk de huidige.

Plaats de widget ‘Menu’ in je header.

De Menu widget is daarentegen helemaal leeg. Deze kan je zelf naar wens invullen.

Om het menu te vullen klik je de menu widget aan die je zojuist aan je header hebt toegevoegd. Onder de tab ‘Inhoud > Layout’ kan je menu items toevoegen. Hier kan je handmatig een titel en link toevoegen (en eventueel een icoon voor de titel).

Het mega menu onderscheidt zich van een normaal menu door de content in de dropdown. Om de content in de dropdown te kunnen aanpassen, moet je de knop ‘Dropdown content’ aanzetten.

Open de navigator door rechts onderin op de 3 gestapelde vierkantje te drukken (cmd + i voor Mac en Windows + i voor Windows). Zorg dat je in de ‘Navigator’ het menu-item hebt aangeklikt en zet hier de gewenste widgets zoals een submenu of een afbeelding in. Je zou zelfs per menu item een WordPress-menu kunnen aanmaken. Met deze functionaliteit kan je het menu heel uitgebreid maken, maar zorg dat het op alle apparaten soepel werkt en overzichtelijk blijft.

Met bovenstaande stappen kan je een menu in Elementor maken met de gewenste pagina’s erin. Wil je meer uit je menu halen met bijvoorbeeld een opvallende call-to-action button of je menu animeren bij het scrollen? Neem dan vrijblijvend contact met ons op.