Wat is een hero menu
Hero Menu is primair een populaire WordPress-plugin van HeroPlugins. Het is een tool waarmee je geavanceerde navigatiemenu’s (zogenaamde ‘Mega Menu’s’) kunt bouwen zonder dat je hoeft te programmeren.
Hoewel de term soms verward wordt met een ‘Hero Section’ (de grote visuele banner bovenaan een website), doelt men in een technische context bijna altijd op de plugin.
Wat het doet
Het transformeert een standaard WordPress-menu naar een visueel rijk menu. De belangrijkste kenmerken zijn:
-
Mega Menu-functionaliteit: Je kunt kolommen, afbeeldingen, iconen en zelfs kaarten of formulieren in je dropdown-menu’s plaatsen.
-
Drag-and-drop Builder: Een visuele interface om de structuur van je menu te slepen en neer te zetten.
-
Volledig Responsive: Het menu past zich automatisch aan voor mobiel en tablet.
-
WooCommerce Integratie: Je kunt direct producten of categorieën met afbeeldingen in het menu tonen.
Hoe kan ik dit met elementor pro maken
Om een “Hero Menu” (Mega Menu) functionaliteit te maken met Elementor Pro, heb je tegenwoordig geen externe plugins meer nodig. Elementor heeft een ingebouwde Menu-widget die gebruikmaakt van “Nested Elements”.
We gaan dit stap voor stap aanpakken.
Stap 1: De benodigde functies activeren
Voordat de widget werkt zoals een Hero Menu, moeten we drie specifieke functies aanzetten in de instellingen van Elementor.
-
Ga in je WordPress dashboard naar Elementor > Instellingen.
-
Klik op het tabblad Functies (Features).
-
Zorg dat de volgende drie opties op Actief staan:
-
Flexbox Container (essentieel voor de lay-out).
-
Geneste elementen (Nested Elements).
-
Menu (dit is de nieuwe widget die Mega Menu’s ondersteunt).
-
-
Scroll naar beneden en klik op Wijzigingen opslaan.
Stap 2: De Menu-widget plaatsen en Dropdown Content activeren
Nu de functies aanstaan, kunnen we de visuele ‘Hero’ structuur gaan bouwen in je header.
-
Ga naar Templates > Theme Builder en open je Header (of maak een nieuwe aan).
-
Zoek in de linkerpaneel naar de widget Menu (let op: gebruik de widget genaamd ‘Menu’, niet ‘WordPress Menu’). Sleep deze in je sectie.
-
In de instellingen van de widget zie je onder het tabblad ‘Content’ de lijst met Menu Items.
-
Klik op het item dat je wilt transformeren naar een Mega Menu (bijvoorbeeld ‘Producten’).
-
Zet de schakelaar Dropdown Content op Aan (Activeer).
-
In je editor zie je nu een kleine pijl naast het menu-item. Als je daarop klikt, opent er een leeg canvas (een container) binnen het menu.
Tip van de expert: Je kunt nu elke willekeurige Elementor-widget (zoals afbeeldingen, secties met iconen of zelfs video’s) rechtstreeks in dat dropdown-veld slepen. Dit is precies wat de “Hero Menu” look creëert.
Dat is exact de functie die we nodig hebben. De “nested capabilities” betekenen dat elk menu-item een container wordt waar je andere widgets in kunt plaatsen.
Stap 3: De Dropdown Lay-out en Breedte bepalen
Om die indrukwekkende “Hero” uitstraling te krijgen, moet de dropdown vaak de volledige breedte van het scherm vullen.
-
Klik op de Menu-widget in je editor.
-
Ga in het paneel naar Content > Menu Items.
-
Zorg dat de optie Dropdown Content op ‘Aan’ staat voor je belangrijkste item.
-
Zoek direct daaronder naar de instelling Content Width.
-
Zet deze op Full Width. Hiermee zorg je ervoor dat de dropdown over de hele breedte van de browser loopt, ongeacht de positie van het menu-item zelf.
-
Klik nu in de visuele editor op het menu-item. Er verschijnt een roze omlijnd gebied. Sleep hier een Container in om kolommen te maken (bijvoorbeeld 3 of 4 kolommen voor je links en afbeeldingen).
Je moet dus eerst een container plaatsen je kunt niet een bestaand menu mega menu maken
Klopt. De traditionele ‘WordPress Menu’ widget (die zijn data ophaalt uit Weergave > Menu’s) ondersteunt geen Mega Menu-functionaliteit. De nieuwe ‘Menu’ widget werkt fundamenteel anders:
-
Geen koppeling: Je koppelt niet langer een vooraf gemaakt WordPress-menu.
-
Handmatige opbouw: Je voegt elk menu-item handmatig toe in de widget-instellingen.
-
Containers: Alleen door deze handmatige methode krijgt elk item een eigen ‘container’ waar je de “Hero” content in kunt bouwen.
Stap 4: Je eerste menu-item inrichten
Omdat je nu met een leeg canvas werkt binnen je menu-item:
-
Klik op het menu-item in de editor zodat de container opent.
-
Sleep een Container widget in dat vak.
-
Stel deze container in op Rij (Horizontal) als je kolommen wilt, of gebruik de Grid widget voor een strakke verdeling van je links en afbeeldingen.
Efficiëntietip: Als je een groot bestaand menu hebt, hoef je alleen de items die een “Mega Menu” nodig hebben op deze manier te doen. De overige items voeg je simpelweg toe als tekstlinks in dezelfde widget.
Kan je ook producten met foto in het menu krijgen?
Zeker, dat kan juist heel goed met deze methode. Omdat de dropdown nu een “leeg canvas” (container) is, kun je daar elke widget in plaatsen die je wilt, inclusief specifieke producten met hun foto’s.
Je hebt hier twee goede opties voor:
Stap 4: Producten toevoegen aan je menu
Om individuele producten te tonen, gebruik je een van deze widgets binnen de menu-container:
-
De Loop Grid widget (Aanbevolen): Hiermee kun je een eigen ontwerp maken voor hoe een product eruitziet (bijv. foto boven, titel eronder, prijs in een afwijkende kleur). Dit geeft de echte “Hero” uitstraling.
-
De ‘Products’ widget: Dit is de standaard WooCommerce grid. Hiermee toon je simpelweg een selectie van je nieuwste of best verkochte producten in een raster.
Zo doe je het:
-
Open de dropdown van je menu-item in de editor.
-
Zoek in het widget-paneel naar ‘Loop Grid’ (voor een uniek design) of ‘Products’ (voor een snel overzicht).
-
Sleep deze widget in de container van je menu-item.
-
Gebruik de instelling Query bij de widget om te bepalen welke producten je wilt zien (bijv. ‘Latest Products’, ‘Sale’ of handmatig geselecteerde producten).
Heb je genoeg informatie om een product-grid in je menu te slepen, of zullen we de diepte in gaan over hoe je zo’n ‘Loop Template’ maakt voor een uniek product-design?
