Een machtig mooi mega menu

Een mooi mega menu voor je WordPress website

Ik heb al enkele malen geschreven over plugins voor mega menu’s en wanneer je deze wel of niet moet gebruiken. Ik heb zelfs een serie artikelen geschreven hoe je met Elementor je eigen mega menu kan bouwen. Maar tot voor kort ben ik nog geen manier voor het bouwen van een mega menu tegen gekomen, die zo eenvoudig is als het bouwen van een mega menu met Unlimited Elements. Unlimited Elements is een add on voor Elementor. Deze add-on bevat een groot aantal gratis Elementor widgets, maar voor deze ‘Mega Menu’ wizard heb je de betaalde versie van deze plugin nodig.

Aan de positieve kant, Unlimited Elements kost niet veel meer dan een gemiddelde betaalde plugin voor Mega Menu’s. En met Unlimited Elements maak je wel een machtig mooi mega menu.

Vers van de pers en zonder handleiding

Het grote nadeel van het Mega menu van Unlimited Elements is echter, dat er op het moment dat ik dit schrijf nog geen goede handleiding is hoe je met dit mega menu moet werken, en het heeft mij dan ook aardig wat hoofdbrekens gekost dit aan de praat te krijgen. Gelukkig levert de maker van de plugin ook goede support. Dit komt voornamelijk omdat op het moment dat ik dit schrijf het ‘Mega menu’ letterlijk nog geen week oud is!

Toch heb ik liever met dit mega menu te maken, dan met de vele andere die ik in de afgelopen jaren onder handen heb gekregen. Waarom?

Mega menu’s zijn complex

Een mega menu is vaak vrij complex. Dat komt, omdat men gebruik wilt maken van het menu systeem van WordPress. Wat natuurlijk heel terecht is. Maar iedere mega menu plugin heeft daar zijn eigen maniertjes’ voor bedacht. En dat kan van enigszins ingewikkeld tot ‘behoorlijk complex’ gaan. Met bijna iedere mega menu plugin die ik in het verleden besproken heb kan je een mooi mega menu maken, maar het is niet met iedere plugin even overzichtelijk te doen.

Het maken van een mega menu is onoverzichtelijk

Een deel van die complexiteit komt ook uit het feit dat het onoverzichtelijk is. Je hoeft mijn eerdere genoemde blogartikel over het zelf maken van mega menu’s met Elementor Pro er maar op na te slaan, om te begrijpen hoe onoverzichtelijk het vaak is. Ieder panel van je mega menu wordt afzonderlijk gecreëerd en je moet een goede administratie bijhouden om te onthouden welke panels nu bij welk menu horen.

Unlimited Elements heeft hier een compleet andere aanpak voor bedacht. Eén die het eenvoudig en overzichtelijk maakt een mega menu te gebruiken.

De Mega Menu widget van Unlimited Elements

De widget installeren

Om de Mega Menu widget van Unlimited Elements te kunnen gebruiken heb je natuurlijk allereerst de widget zelf nodig. En daarvoor moet je de betaalde versie van Unlimited Elements hebben. Heb je die geïnstalleerd, dan zal je als extra ook de Mega Menu widget moeten installeren. Zorg ervoor, dat je de nieuwste versie van de plugin hebt. Voor de Mega Menu widget heb je minimaal versie 1.5.18 nodig.

Heb je de juiste versie ga dan in het Dashboard naar ‘Unlimited Elements -> Widgets’ en kies op de ‘Widgets’ pagina voor de tab ‘Menu Widgets’. Zie ook de afbeelding hieronder. Denk er aan dat in nieuwere versies het beeld kan verschillen, indien er meer widgets zijn toegevoegd.

Op deze pagina ga je met je muis over ‘Mega Menu’ en je klikt dan op de knop ‘Install’ die verschijnt.

De widget wordt nu geïnstalleerd en je kan deze in Elementor gebruiken. Eventueel kan je de ‘Mega Menu Inner Links’ widget ook installeren. Deze is voor gebruik binnen een mega menu, om mooi geformatteerde links te krijgen.

De widget gebruiken – stap 1

Normaal gesproken zal je de widget in een header willen gebruiken. Dat is immers de plaats waar je een mooi mega menu verwacht, aan de bovenkant van iedere pagina.

Deze blogpost is geen cursus Elementor, dus ik leg je niet stap voor stap uit hoe je een header maakt (mocht je wel op zoek zijn naar een cursus Elementor, dan biedt WordXPression verschillende cursussen op dit gebied aan), maar wel hoe je de widget in de header kan gebruiken.

Je gaat dus eerst naar the Theme Builder, en opent een bestaande header om aan te passen, of maakt een nieuwe header aan.

De widgets van Unlimited Elements zal je normaal onderaan in het widgets panel aantreffen. De makkelijkste manier is om te zoeken op de term ‘mega’.

In mijn voorbeeld gebruik ik een header met drie kolommen, links ruimte voor het logo, rechts voor eventueel wat navigatie iconen (winkelwagen en login bijvoorbeeld) en in het midden het menu.

Ik sleep nu de widget ‘Mega Menu’ naar de middelste kolom van de header.

En hier kunnen we verschillende dingen in gaan stellen. Maar voor we dit doen, eerst wat meer informatie over hoe deze mega menu widget nu eigenlijk werkt.

Items en secties

Tot nu toe ziet het mega menu er niet echt spectaculair uit. Een grijze balk, en verder niets. Deze grijze balk -die overigens niet grijs zal blijven- zal straks het hoofdmenu bevatten. Dit hoofdmenu vul je met ‘items’. Deze items komen niet uit de WordPress menu editor, maar zal je binnen de widget zelf aanmaken.

Op deze header zal je straks ook een aantal secties aanmaken. Op het moment, dat je met je muis over een ‘item’ gaat, zal de bijbehorende sectie zichtbaar worden. Alles wat je wilt gebruiken in je mega menu zal je dus op deze pagina maken. Dat maakt het lekker overzichtelijk.

Het eerste wat we dus moeten gaan doen is items aanmaken. In ons voorbeeld zullen we drie items aanmaken, een ‘contact’ item, wat een ‘contact’ mega menu laat zien, een ‘producten’ item, wat een aantal productcategorieën laat zien, en een derde item dat direct ergens heen zal linken.

De widget gebruiken – stap 2 – De Items

Item 1 – Producten

Om de menu items te maken gaan we op de tab ‘Inhoud’ van het tool palet naar ‘Menu Items’. Hier klikken we op ‘Item Toevoegen’.

en dan krijg je vervolgens dit te zien:

Bij de titel vul je de tekst in die in de menubalk zichtbaar moet worden.

Bij ‘Item type’ kan je uit twee mogelijkheden kiezen : Section of Link. Het is mogelijk dat er in de toekomst een derde mogelijkheid bij komt: ‘Submenu’. Hier zou je dan een keuze voor een ‘gewoon WordPress menu’ kunnen maken. Ik heb dit als hint doorgegeven aan de ontwikkelaars, en ze vonden het een goed idee.

Voor dit menu item maken we gebruik van een sectie, dus we veranderen niets.

In het veld ‘Section ID’ vullen we een naam voor de sectie in: Alleen letters, cijfers, underscores (‘_’) en verbindingsstreepjes (‘-‘), mag niet met een streepje beginnen of eindigen.

Voor ons voorbeeld ‘producten’.

Tenslotte kunnen we nog kiezen hoe breed de dropdown moet worden. Dit kan je vooraf ingesteld hebben in de settings sectie ‘Menu Dropdown’, en dan kies je voor ‘default width’. Je kan ook voor de volledige breedte of een specifieke breedte kiezen.

Item 2 – Over ons

Het tweede menu item moet een denkbeeldige pagina ‘Over ons’ worden. Een enkelvoudige link dus. We klikken nogmaals op ‘Item toevoegen’ en vullen het als onderstaand voorbeeld in.

Omdat we hier voor item type ‘Link’ hebben gekozen, krijgen we een ander veld te zien, een veld om een URL in te vullen. Het veld ‘Dropdown Width’ is hier zonder betekenis.

Item 3 – Contact

Het aanmaken van het derde item lijkt sterk op het aanmaken van ons eerste item. Het verschil zit hem niet in het item zelf, maar in de manier waarop de sectie die we hieronder hangen eruit ziet.

De secties

Ik heb vaker geschreven dat de makers van Unlimited Elements heel snel reageren. Zo ook ditmaal. Toen ik mijn terugkoppeling over de nieuwe Mega Menu widget had gegeven en begonnen was met het schrijven van mijn blogartikel, kreeg ik al heel snel terugkoppeling op één van mijn ‘bezwaren’ tegen de Mega Menu Widget. Dat bezwaar zat hem namelijk in het feit dat de secties op dezelfde ‘pagina’ voor moeten komen als het menu. En hoewel ik de voordelen hiervan wel inzag, zag ik ook heel duidelijke nadelen in. Eén nadeel is dat wanneer de panels van de secties wat hoger worden, je in design mode in Elementor wel heel lange pagina’s krijgt, met veel informatie die er feitelijk niet toe doet.

Tijdens het schrijven van dit blogartikel kreeg ik een mailtje van Max, de lead developer van Unlimited Elements, dat er zojuist een nieuwe versie was klaargezet, waarbij je deze secties ook in een andere pagina kan plaatsen. Een groot deel van mijn blogpost moest dus opnieuw geschreven worden, maar ik ben wel heel blij, wanneer de ontwikkelaar van een plugin de klant zo serieus neemt.

De secties die verder in deze blogpost ga beschrijven kan je dus gewoon in de header opnemen, als je dat handig vindt, maar vind je het wat onoverzichtelijk worden -en ik vind dat eigenlijk zo- dan kan je dit ook in een aparte template aanmaken.

In het tool palet zien we onder ‘Inhoud’ een sectie ‘Template’. Hier kan je aangeven welk template je wilt gebruiken.

Maar om het te gebruiken, moeten we het eerst aanmaken, dus we slaan onze header even op en maken een nieuwe sectie template aan.

We gaan dus uit de builder, terug naar het ‘Templates’ menu onder Elementor en kiezen voor ‘Opgeslagen Templates’. Hier klikken we op de tab ‘Section’ en vervolgens op ‘Nieuwe toevoegen’

Ik noem mijn sectie ‘Mega Menu Template’. Dat maakt het makkelijk te onthouden waar het bij hoort.

In deze template ga ik twee secties aanmaken, ‘producten’ en ‘contact’.

De sectie producten

Een sectie voor een mega menu is exact hetzelfde als iedere andere sectie in Elementor. Je kan hier dus plaatsen wat je wilt! Indien je bijvoorbeeld een widget hebt om productcategorieën mooi te presenteren, of je wilt hier producten in een product carrousel plaatsen, het kan allemaal. Er zijn geen beperkingen op wat jij in het menu wilt plaatsen.

Om het je alvast makkelijk te maken hebben de makers van Unlimited Elements de Widget ‘Mega Menu Inter Links’ toegevoegd, die het in ieder geval makkelijk maakt om mooi opgemaakte links in een menu te plaatsen. Voor ieder item in het menu kan je een afbeelding of icoon, een titel en een beschrijving invoegen.

Zelf zou ik bij een bestaande webwinkel liever gebruik maken van bijvoorbeeld het WooCommerce Category Grid of de WooCommerce Category Carousel van Unlimited Elements. In mijn voorbeeld doe ik echter geen van de drie, maar voeg hier een drietal ‘icon lists’ met productcategorieën toe.

Ik maak dus een sectie van drie kolommen aan, zet een koptekst boven iedere kolom en een iconenlijst daaronder.

Nu moeten we nog twee dingen doen. De sectie heeft namelijk nog geen achtergrondkleur. De tekst en de iconen zouden dus dwars over de achtergrond worden geplaatst, wat natuurlijk niet de bedoeling is. Om dit te voorkomen geven we een heel lichte grijstint (#efefef) als achtergrondkleur

Bovendien, tot nu toe is dit een sectie, die niets met een mega menu te maken heeft. Om dit te veranderen, hoeven we maar één ding te doen.

Onder de ‘Advanced settings’ van de sectie geven we deze sectie een CSS ID die overeenstemt met de ID die we ook bij het menu item hadden opgegeven. In ons voorbeeld ‘producten’.

Zie hieronder voor het tussenresultaat.

De sectie contact

Een tweede sectie die we hier gaan maken is de ‘contact’ sectie. Op de meeste sites zie je dit als een pagina uitgevoerd. Dit heeft echter één nadeel: Op het moment, dat de bezoeker om wat voor reden dan ook contact met je op wilt nemen, of de contactgegevens wil bekijken, gaat deze weg van de pagina waar hij of zij is. Je mag alleen maar hopen, dat je bezoeker daar ook weer terug zal komen.

Laat je de contactgegevens via een mega menu zien, dan worden de contactgegevens over de huidige pagina geplaatst. De bezoeker gaat dus nergens van weg.

Wat ik wil bereiken is een ‘sectie’ die bestaat uit twee kolommen. Links de werkelijke contactgegevens, rechts een contactformulier.

Daaronder wil ik een ‘Google Maps’ kaartje.

En daarmee hebben we een -oplosbaar- probleem gecreëerd. Want het mega menu verwacht een sectie met een eigen ID om te kunnen tonen. We kunnen dus geen secties ‘aan elkaar plakken’.

Maar dat heeft ook helemaal niet, omdat Elementor ook de ‘Inner Section’ als widget kent.

We maken een nieuwe sectie aan binnen hetzelfde template, die uit één kolom bestaat. En in die sectie van één kolom plaatsen we een inner section.

Zoiets als in de afbeelding hieronder. Om het verschil duidelijk te maken, heb ik de sectie alvast een andere achtergrondkleur gegeven (#dedede). De ‘inner section’ krijgt de kleur #c0c0c0. In een werkelijk site design zou je waarschijnlijk dezelfde achtergrondkleur willen gebruiken voor alles.

De onderstaande afbeelding maakt hopelijk veel duidelijk

In de linkerkant van onze inner section slepen we de ‘icon list’ widget. We passen de iconen aan naar behoefte en voeren de informatie die we willen tonen in.

Zie onderstaande afbeelding. Je kan hier natuurlijk meer informatie in plaatsen

Het volgende wat we willen is een contactformulier toevoegen. Zoals eerder gezegd, dit is geen cursus Elementor Pro (maar als je er naar op zoek bent, dan vind je hier zeker wat je zoekt), dus ik ga je niet compleet uitleggen hoe je een formulier maakt in Elementor Pro, maar hieronder zie je hoe het complete ontwerp eruit ziet na het toevoegen van een eenvoudig contactformulier.

Om de presentatie iets prettiger te maken, heb ik de verticale uitlijning voor de inner sectie op ‘Verticale uitlijning : Midden’ gezet.

De laatste stap is de CSS ID onder ‘Geavanceerd’ op ‘contact’ te zetten.

We hebben nu beide secties die we voor ons mooie mega menu willen gebruiken gemaakt en slaan dit op door op ‘Publiceren’ te klikken.

Vervolgens keren we terug naar de Theme Builder en openen we de header. Tip: Wist je dat je direct vanuit dit scherm naar de Theme Builder kan gaan door op het hamburger-menu te klikken en voor ‘Thema bouwer’ te kiezen?

De template aan de header koppelen

Wat we nu nog moeten doen is de template met de header verbinden. We klikken daarom op de ‘Mega Menu’ widget en gaan naar de sectie ‘Template’ onder de tab ‘Inhoud’.

We kiezen hier de template met onze secties voor het mega menu. Wil je checken of je alles goed hebt gedaan, kan je dat op twee manieren doen.

Allereerst, wanneer je ‘Show Template Sections’ op ‘Yes’ zet, krijg je de inhoud van de template te zien.

Ten tweede, wanneer je kijkt naar de menubalk zelf, dan zie je dat naast alle opties die ‘verbonden’ zijn met een mega menu sectie een pijltje naast de titel hebben.

De menu optie ‘Over ons’ heeft dit niet, omdat deze direct naar een andere pagina verwijst, de overige twee menu opties hebben dit wel.

Meer instellingen

Deze widget heeft nog vele andere instellingen, die ik niet één voor één na zal lopen. De mogelijkheden om het menu te ‘stylen’ zijn feitelijk de standaard opties die Elementor biedt en daar ga ik verder niet op in (nogmaals, dit is geen Elementor cursus), maar ik wil toch even op twee secties onder de ‘inhoud’ tab wijzen.

General

Onder deze optie vind je een aantal algemene instellingen, waarvan ik er even twee onder de aandacht wil brengen.

De eerste is de instelling ‘Menu Item Open’. Hier geef je aan, of het menu moet openen wanneer je er met de muis overheen gaat (hover) of wanneer je er op klikt (click). De standaard bij mega menu’s is bij een ‘muis over’, maar mocht je dat niet willen, kan je dit dus ook op een klik doen.

De andere is de instelling ‘Responsive Mode Breakpoint’. Dit is het moment, dat je het menu niet standaard wilt tonen, maar als een ‘hamburger menu’ zoals gebruikelijk is voor mobiele toepassingen.

Menu links

Onder deze sectie wil ik slechts voor één instelling je aandacht vragen. Het ‘Hover effect’. Hier kan je aangeven hoe je aan wilt geven, dat er over een menu optie wordt gegaan. Dit is min of meer hetzelfde als de ‘Pointer’ in het gebruikelijk standaard NAV menu van Elementor Pro. In deze widget is de benaming echter anders, en het heeft mij even tijd gekost om die optie te vinden.

Die tijd wil ik jou graag besparen.

Meer over Unlimited Elements en Elementor

Het zal je niet ontgaan zijn, dat Elementor zo’n beetje de default page- en theme builder voor WordPress is geworden. Rond Elementor zijn er allerlei plugins ontwikkeld, waarvan veel plugins extra widgets aan Elementor toevoegen.

Unlimited Elements is een plugin die wat anders werkt dan de meeste andere van deze plugins. In diverse andere blogpost heb ik dit al aangekaart. Unlimited Elements is in de eerste plaats een platform om nieuwe widgets voor Elementor te ontwikkelen. Je kan met kennis van HTML, CSS en eventueel JavaScript je eigen plugins ontwikkelen zonder ook maar een regel PHP te hoeven schrijven. Die PHP wordt door de builder op de achtergrond voor je ontwikkeld.

Daarmee is de ontwikkeling van maatwerk widgets voor Elementor eigenlijk heel betaalbaar gemaakt.

Inmiddels heb ik dank zij deze plugin tientallen widgets op maat voor klanten mogen ontwikkelen voor slechts een fractie van de prijs die het had gekost, wanneer ik dit op de ’traditionele manier’ had moeten doen.

Unlimited Elements, Elementor en WordXPression

Wanneer je jouw website door WordXPression laat bouwen, dan zijn in de meeste pakketten Elementor Pro en Unlimited Elements een standaard onderdeel van je website. Wil je een website die je makkelijk later aan wilt kunnen passen, neem dan eens contact op over de mogelijkheden.

Meer leren over Elementor Pro en Unlimited Elements?

Wanneer je meer wilt leren over Elementor Pro, dan verwijs ik je graag naar de cursussen van WordXPression. Wil je meer over Unlimited Elements leren, kijk dan ook zeker eens naar de cursus Elementor Pro voor gevorderden.