Share on email
Share on whatsapp
Share on twitter
Share on linkedin

Megamenu maken met Elementor op 2 manieren

Een megamenu maken met Elementor kun je op twee manieren doen. In dit artikel leg ik beide manieren even uit en geef ik aan welke manier je het beste kunt gebruiken.

Waarom een megamenu maken?

Een megamenu zie je veel in webshops. 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 wij 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.

Twee manieren om een megamenu te maken met Elementor

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

1) Megamenu maken met popups van Elementor

Een popup associeer je niet direct met een megamenu. Eerlijk gezegd waren we er zelf ook niet opgekomen om de pop-up functie van Elementor te gebruiken voor het maken van een megamenu. Soms moet je even op de juiste ideeën worden gebracht! 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. Hiervoor maak je gebruik van de widget ‘Knop’. Bij meerdere menu items, maak je dus meerdere kolommen.

  • Bewerk de knop / button
  • Ga naar ‘links’ en klik op ‘dynamische content’ en klik onder ‘Actions’ op Popup.
  • 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) Een megamenu 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. Het grootste verschil met de eerste optie is dat je bij deze plugin gebruik maakt van de ‘Nav menu’ widget. Of eigenlijk van het menu dat je hebt aangemaakt in WordPress (zoals je gewend bent als je veel werkt met WordPress).

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?

Het maken van een megamenu met de 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). De plugins van Crocoblock (JetMenu) zijn ook nog volop in ontwikkeling. Probeer het eerst met Elementor, als het niet werkt kun je altijd nog de JetMenu plugin aanschaffen om een megamenu te maken met Elementor.

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites voor mkb'ers en zzp'ers. Daarnaast ondersteunt ze bedrijven bij de inzet van marketing- en communicatieactiviteiten.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Geef een reactie

Hulp nodig?

We helpen je graag! Stel hieronder je vraag:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.