Eén van de standaardfuncties van WordPress is het aanmaken van een menu. Met Elementor kun je bepalen waar en hoe een menu wordt weergegeven. Let op: deze functie is alleen beschikbaar in Elementor Pro.
Menu aanmaken met WordPress
Om je menu te kunnen bewerken met Elementor, heb je natuurlijk eerst een menu nodig. In deze video leer je in minder dan 5 minuten hoe je een menu aanmaakt:
Menu toevoegen in Elementor
Nu je een menu hebt gemaakt is het tijd om deze op de juiste plek op je website weer te laten geven. De meest gebruikte plek is de header, maar je kunt ook een menu toevoegen aan de footer of sidebar.
Voeg de menu-widget (deze heet Nav Menu) toe aan de kolom waar je deze wilt hebben.
Als je met verschillende menu’s werkt, dan kun je via het tabje Menu kiezen welk menu je wilt tonen. Dit is handig wanneer je bijvoorbeeld in de header een ander menu wilt gebruiken dan in de footer.
Menu instellen met Elementor
Onder het kopje Inhoud vind je allerlei mogelijkheden om je menu mee in te stellen. Hieronder leg ik alle opties kort uit.
Layout
Kies of het menu horizontaal of verticaal getoond moet worden.
Align
Kies of het menu links, rechts, gecentreerd getoond moet worden, of uitgerekt over de hele breedte van de kolom.
Pointer
Kies een animatie die wordt weergegeven wanneer iemand met de muis over het menu gaat. De pointer is bedoeld om te benadrukken dat het om een klikbaar item gaat. De meest gebruikte pointers zijn een lijn onder de tekst, een achtergrondkleur of tekst die groter wordt.
Je kunt er ook voor kiezen om geen animatie weer te geven, maar alleen de tekst een andere kleur te geven wanneer de muis over de tekst zweeft.
Wanneer je voor een animatie kiest, verschijnt er een extra veld waar je kunt aangeven hoe de animatie moet worden weergegeven.
Submenu indicator
Zoals je in de video hierboven vanaf minuut 3:49 kunt zien, kun je ook een submenu instellen. Dit is handig als je een menu-item hebt waar verschillende onderdelen aan hangen. Zo kun je onder het menu-item ‘Over ons’ bijvoorbeeld ook ‘Ons team’, ‘Onze geschiedenis’ en ‘Onze garanties’ hangen.
Om de gebruiker duidelijk te maken dat er subkopjes hangen onder een menu-item kies je een indicator. Meestal is dit een plusje of een pijltje naar beneden.
Breakpoint dropdown
Kies bij welke breedte het menu niet meer in z’n geheel, maar als uitklapbaar moet worden weergegeven (met een hamburgericoontje). Je kunt kiezen tussen mobiel, tablet of nooit (maar dat is erg ongebruikelijk). Of je kiest voor mobiel of tablet hangt af van het aantal menu-items en de lengte van daarvan.
Full width
Kies of je het uitklapmenu over de hele breedte wilt laten zien. Zet het schuifje om als je het menu over de hele breedte wilt weergeven. Zelf doe ik dit altijd.
Align
Kies of het uitklapmenu links of gecentreerd uitgelijnd moet worden.
Toggle button
Officieel heb je hier een keuze tussen ‘Geen’ en ‘Hamburger’, maar zelfs als je op dieet bent zou ik hier kiezen voor een hamburger. Je wilt tenslotte wel dat mensen het menu daadwerkelijk kunnen uitklappen.
Het heet een hamburger omdat het standaardicoontje voor een uitklapmenu op een hamburger lijkt (broodje-burger-broodje). Je kunt echter ook kiezen voor een ander icoontje. Tip: wees niet te creatief, want een gebruiker moet het icoontje wel als menu kunnen herkennen.
Toggle align
Kies of het menu-icoontje links, rechts of in het midden van de kolom getoond moet worden.
Menu vormgeven met Elementor
Met Elementor kun je het menu aanpassen naar de stijl van jouw website. Er zijn heel veel mogelijkheden die ik hieronder met je doorneem.
Main menu
Hiermee kun je de belangrijkste stijlaanpassingen doen.
Typografie
Als je een menu toevoegt aan een kolom, zul je zien dat het automatisch het standaardlettertype van je website gebruikt. Mocht je dit willen aanpassen, dan kan dat onder het kopje typografie. Ook de kleur, grootte en dikte van de tekst in het menu kun je hier wijzigen.
Scheiding
Kies of je een afscheiding tussen de verschillende menu-items wilt aanbrengen. Bijvoorbeeld een verticale lijn, of een stip.
Pointer width
Kies hoe breed de pointer (zie hierboven) weergegeven moet worden.
Padding
Je kunt zowel de horizontale als verticale padding (vulling) van de menu-items instellen. Dit is vooral van belang als je als pointer hebt gekozen voor ‘achtergrond’.
Space between
Kies hoeveel ruimte er tussen de menu-items moet zitten. Let op: zorg dat je menu altijd op één regel past. Een menu waarbij een of meerdere items op een volgende regel komen te staan is onduidelijk en niet gebruiksvriendelijk.
Dropdown
Hier vind je een aantal aanvullende stijlopties om het dropdown menu weer te geven. Dit zijn de uitklapvelden die verschijnen als je subitems onder een hoofditem hangt (zie uitleg hierboven). Je kunt bijvoorbeeld de achtergrondkleur aanpassen, maar ook de lettergrootte of tekstkleur.
Toggle button
Bepaal hier hoe het icoontje voor het uitklapmenu (zie uitleg hierboven) wordt weergegeven. Je kunt bijvoorbeeld een achtergrondkleur kiezen of de grootte van het icoontje aanpassen.
Elementor menu
Elementor heeft zelf een handige video tutorial gemaakt waarmee ze de (meeste) opties van het menu uitleggen: