Elementor mega menu maken: de 2 beste opties

Een megamenu wordt steeds populairder. Een Elementor mega menu is uitgebreider dan een standaard drop-down menu en bevat meer informatie en opties in een visueel aantrekkelijke en gebruiksvriendelijke lay-out. Niet zo gek dus dat een Elementor mega menu maken populair is. Maar hoe maak je een Elementor mega menu? Is het überhaupt mogelijk om een mega menu te maken met Elementor Pro zelf? Of heb je daarvoor nog extra plugins nodig?

In dit artikel leg ik twee beste mogelijkheden aan je voor: met popups of met JetMenu.

Waarom een Elementor mega menu maken?

Een megamenu zie je veel in webshops, maar zeker ook in andere branches of uitgebreide sites. Het zorgt voor betere navigatie omdat de bezoeker in één opslag alle relevante pagina’s (in een bepaalde categorie) kan bekijken. Maar een mega menu is ook prima in te zetten voor zakelijke website. Zo maakte ik onlangs een megamenu voor een klant in de zakelijke markt. Door gebruik te maken van afbeeldingen kun je meer de aandacht naar bepaalde producten of diensten trekken. Dit is zeer interessant voor marketeers.

Een megamenu maken kun je zo gek maken als je zelf wilt. Hieronder zie je een voorbeeld van een eenvoudig megamenu.

Maar als je een stapje verder wilt gaan kan dat ook. Zie hieronder een voorbeeld van een megamenu gemaakt met JetMenu (zie optie 2)

Twee manieren om een Elementor mega menu te maken

Je kunt dus op twee manieren een megamenu maken met Elementor: met Elementor Popups en met de addon JetMenu.

1) Elementor mega menu maken met popups

Een popup associeer je niet direct met een Elementor mega menu. Eerlijk gezegd was ik er zelf ook niet opgekomen om de popup functie van Elementor te gebruiken voor het maken van een megamenu. Soms moet je even op de juiste ideeën worden gebracht!

Een nadeel van het maken van een Elementor mega menu met de popup builder, is dat je bezoeker wel echt op het item moet klikken voordat het menu wordt getoond. Werk je met een addon, zoals JetMenu (optie 2), dan kun je dit wel realiseren met een hover. Dat is iets gebruiksvriendelijker voor je sitebezoeker. Let er wel op dat er enige vertraging zit wanneer het mega menu tevoorschijn komt. Anders kan het hinderlijk zijn dat het mega menu steeds verschijnt als je je muis verplaatst.

Een megamenu maken met Elementor popups doe je als volgt:

Stap 1: Maak een nieuwe popup

Ga naar Templates –> Popups en klik op ‘Nieuwe toevoegen’.

Stap 2: Bewerk de pop-up (ook voor mobiele apparaten)

Je krijgt nu een scherm te zien met daarin templates voor popups. Voor een megamenu zijn er nog niet zoveel templates beschikbaar, behalve de onderstaande. Deze kun je gebruiken of je maakt zelf een template.

Je kunt het megamenu nu gaan vormgeven met behulp van de Elementor editor. Je kunt hiervoor alle widgets gebruiken die je normaal ook gebruikt bij het opmaken van een pagina. Loop nog wel even de instellingen na van de popup (klik linksonderin op het tandwiel). Zet height bijvoorbeeld op ‘fit to content’ en stel de close button in.

Als je klaar bent vergeet het megamenu dan niet te optimaliseren voor mobiel.

Stap 3: De popup publiceren

Als je klaar bent klik je op ‘publiceren’. Je krijgt nu een aantal opties te zien voor het publiceren van de popup. Hier hoef je voor het maken van een megamenu niets te doen. Klik op ‘Next’ en dan ‘Save & close’. Het megamenu is nu opgeslagen.

Stap 4: Megamenu in header plaatsen

Nu je het megamenu hebt gemaakt, kun je het gaan instellen in je header. Heb je nog geen header gemaakt met Elementor? Doe dit dan eerst.

Ga naar Elementor –> Theme Builder –> tabblad ‘Header’. Klik op de header waar je het megamenu wilt instellen.

Verwijder het huidige menu uit je header. Je moet nu zelf een menu aanmaken. Dit kun je met verschillende widgets doen. Het makkelijkste is om de iconen widget te gebruiken, omdat je hiermee makkelijk de items naast elkaar kunt zetten. In het url veld, klik je vervolgens op ‘Dynamisch’ en klik onder ‘Actions’ op Popup.

(het screenshot hieronder toont de knop widget, maar deze instellingen vind je in alle widgets met een link / url veld)

• Selecteer vervolgens het mega menu en zet action op ‘Toggle’.
  
  

Je hebt nu het megamenu ingesteld. De makers van Elementor maakten hiervoor ook een tutorial:

2) Elementor mega menu maken met JetMenu plugin

De JetMenu plugin van Crocoblock is een premium plugin waarmee je ook een megamenu kunt maken met Elementor. Dit werkt op een iets andere manier. Met deze optie maak je het megamenu namelijk vanuit je WordPress menu. De vormgeving maak je wel gewoon met Elementor.

Stap 1: installeer de JetMenu plugin

Koop de Jetplugin en installeer deze op je WordPress website.

Stap 2: megamenu activeren bij menu item(s)

Als je de plugin hebt geïnstalleerd ga je in je WordPress omgeving naar ‘Weergave’ –> ‘Menu’. Als je nu met je muis over een menu-item gaat dan zie je het JetMenu icoontje verschijnen. Klik hierop.

Een nieuw scherm opent. Geef hier aan dat je een megamenu wilt gebruiken voor dit item. En klik vervolgens op ‘Edit mega menu item content’

Stap 3: megamenu maken

Als je hebt geklikt op ‘Edit mega menu item content’ opent de Elementor editor. Je kunt hier je megamenu maken. Hiervoor kun je gewoon alle Elementor widgets gebruiken. Als je klaar bent klik bewaar je het template en keer je terug naar het menu in WordPress.

Let op: als je een breed megamenu maakt is het handig om bij ‘Settings’ nog even de breedte in te stellen voor je megamenu. 

Stap 4: Megamenu widget in header plaatsen

Heb je al een header gemaakt in Elementor? Dan moet je het menu hierin aanpassen. Nog geen header gemaakt met Elementor? Doe dit dan eerst.

• Bewerk de editor met de Elementor editor
• Vervang de ‘Nav menu’ widget met de widget van Jetmenu ‘Megamenu’ en plaats deze op dezelfde plek. Als je een horizontaal megamenu hebt gemaakt, kun je de rechter gebruiker. Voor de verticale gebruik je de linker.

• Selecteer vervolgens het menu dat je wilt gebruiken:

Welke manier is beter om een Elementor mega menu te maken?

Het maken van een Elementor mega menu met popups van Elementor is nog een vrij nieuwe functie. Het is ook even de vraag of Google op die manier het ‘menu’ kan lezen. Zo niet, dan kan dit van invloed zijn op je vindbaarheid. Maar vooralsnog verwacht ik daar niet echt super veel problemen. Persoonlijk vind ik het altijd fijn als ik geen extra plugins nodig heb (en Elementor is hard op weg om dit te realiseren), maar ik vind het tonen van een mega menu op basis van een hover wel echt een belangrijk voordeel. Dus ik zou eerder een Elementor mega menu maken met JetMenu dan met de Elementor Popups.