Met Elementor Pro kun je eenvoudig een menu instellen in je header, footer of sidebar. In dit artikel leg ik je stap voor stap uit hoe je Elementor menu aanmaakt en de layout en stijl wijzigt met behulp van de ‘Nav menu’ widget.
Een megamenu maken met Elementor? Dat kan ook!
Stap 1: Menu aanmaken in WordPress
Om te beginnen moet je eerst een menu aanmaken in WordPress. Heb je al een menu? Dan kun je deze stap overslaan.
Ga naar ‘Weergave’ –> ‘Menu’s’. En stel hier een menu voor je website in.
Stap 2: menu instellen in Elementor
De volgende stap is om het menu op de juiste plek in te voegen op je website. Met de ‘Nav menu’ widget kun je het menu toevoegen waar je maar wilt. De meest gebruikelijke plekken zijn: header, footer en sidebar. In dit voorbeeld leg ik je uit hoe je een Elementor menu toevoegt aan je header.
Heb je nog geen header gemaakt met Elementor? Lees dan eerst dit artikel
- Sleep de ‘Nav menu’ widget naar de kolom waar je het menu wilt plaatsen
- Je kunt nu in het linkerscherm kiezen welk menu je wilt tonen (of hij toont automatisch al het juiste menu).
Stap 3: de lay-out aanpassen
Je kunt nu de lay-out van het menu aanpassen. Hiervoor heb je een aantal opties:
- Layout
Om te beginnen kun je kiezen of je een menu horizontaal of verticaal wilt weergeven. In een header is het gebruikelijk om te kiezen voor horizontaal. Voor een sidebar of footer kun je kiezen voor verticaal. Lees ook hoe je een verticaal menu instelt in Elementor. - Align
Hiermee geef je aan welke uitlijning het menu moet hebben binnen de kolom waar je het menu hebt geplaatst. - Pointer
Hier kun je aangeven wat er moet gebeuren als bezoekers met hun muis over het menu gaan. Je kunt hier bijvoorbeeld een underline instellen of een achtergrondkleur. Of je kunt de tekst groter maken als bezoekers er met de muis overheen gaan. - Submenu indicator
Dit is het icoontje dat wordt getoond naast het menu item, wanneer je ook een submenu hebt ingesteld. 
- Breakpoint Dropdown
Hier kun je instellen wanneer het menu over moet gaan in een hamburgermenu. Bij mobiele apparaten of bij een tablet. - Full width
Als de dropdown over de hele pagina moet worden weergegeven (wel aanbevolen) - Align
Geef aan hoe je het hamburgemenu wilt uitlijnen - Toggle button
Kun je op ‘Hamburger’ laten staan - Toggle align
De uitlijning van het hamburger icoon binnen de kolom
Lees ook hoe je de hele header kunt aanpassen voor mobiele apparaten.
Stap 4: De styling van het menu aanpassen
Je kunt het menu of veel verschillende manieren stijlen. Ga hiervoor naar het tabje ‘Stijl’. Wat je kunt aanpassen:
- Typografie aanpassen
Die staat standaard ingesteld op het lettertype dat je voor je website hebt ingesteld. Eventueel kun je dit hier aanpassen - Horizontal Padding
De horizontale afstand tussen de menu items - Vertical padding
De verticale afstand tussen menu items (voor verticale headers) - Space between
Doet eigenlijk hetzelfde als horizontal en vertical padding.
Deze opties kun je ook gebruiken voor het dropdown menu. Daarnaast heb je voor het dropdown menu nog een paar extra opties:
- Rand instellen
Geef aan of je een rand wilt instellen voor het dropdown menu en welke dikte. Ook kun je aangeven of de rand hoekig of juist rond moet zijn. - Scheiding
Een scheiding instellen tussen de verschillende menu items. Bijvoorbeeld met een witte lijn. - Distance
De afstand tussen het hoofdmenu en het dropdown menu.
Hieronder een (overdreven) voorbeeld:
Tot slot kun je de toggle button (het hamburgermenu icoon) nog aanpassen:
- Kleuren aanpassen
- Grootte aanpassen
- Randdikte en radius aanpassen
Ben je klaar? Dan kun je het menu (of eigenlijk de header) nu publiceren. Wil je items toevoegen aan het menu? Dan doe je dit gewoon in WordPress (check daarna wel even of het menu nog goed wordt getoond op mobiel).
6 Responses
Helder beschreven, fijn!
Wat me opvalt als ik het zo doe, dat ik als ik jou voorbeeld even aanhou, ik vanuit de menu ook op websites kan klikken en dan op die pagina kom, maar dat wil ik niet, ik wil dat alleen de onderliggende pagina’s in dat submenu aanklikbaar zijn, dus nieuwe websites, website uitbreiden etc. Waar kan ik dat instellen?
Hoi Ingrid,
Goede vraag! Ik begrijp dat je het hoofditem in het menu niet klikbaar wilt maken?
Dit stel je in via WordPress -> Weergave -> menu’s. Selecteer het juiste menu en voeg dan een nieuw menu item ‘Aangepaste link’ toe. Vul bij URL alleen ‘#’ in. En bij linktekst de naam voor het hoofditem.
Mooie uitleg over het menu
Helder beschreven,. Is dit alleen maar mogelijk in de pro versie?
Hoi,
Ja, dat is inderdaad alleen mogelijk met Elementor Pro! 🙂
Groetjes,
Sanne
Bedankt voor de reactie.
Een pagina titel staat in een en ik heb ontdekt dat de titel onzichtbaar gemaakt kan worden.. Is de rij waar de titel in staat ook te verbergen? Heeft dit te maken met het gebruikte template?
Het klopt inderdaad dat je de titel kunt uitschakelen. In principe is de rij dan ook weg. Mocht dit niet zo zijn, dan kun je inderdaad even de instellingen van je thema checken. Meestal zit daar een optie is om de titel te verbergen.