{"id":4795,"date":"2025-08-29T12:01:42","date_gmt":"2025-08-29T12:01:42","guid":{"rendered":"\/nl\/tutorials\/?p=4795"},"modified":"2025-12-18T13:20:39","modified_gmt":"2025-12-18T13:20:39","slug":"wordpress-mega-menu","status":"publish","type":"post","link":"\/nl\/tutorials\/wordpress-mega-menu\/","title":{"rendered":"Zo maak je een WordPress mega menu (met \u00e9n zonder plug-in)"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Bij het ontwerpen van een website is een WordPress mega menu essentieel voor een soepele navigatie. Vooral bij e-commerce websites met een breed aanbod aan productcategorie&euml;n is dit superhandig.<\/p><p class=\"wp-block-paragraph\">Met een WordPress mega menu kun je menu inhoud overzichtelijk in meerdere kolommen of rijen tonen. Zo organiseer je grote hoeveelheden informatie makkelijk, en vinden bezoekers sneller wat ze zoeken zonder steeds door verschillende pagina&rsquo;s te moeten klikken.<\/p><p class=\"wp-block-paragraph\">In deze uitgebreide <a href=\"\/nl\/tutorials\/wordpress-handleiding\/\">WordPress tutorial<\/a> laten we je zien hoe je een mega menu toevoegt, zowel met een plug-in als handmatig door code te bewerken. Daarnaast geven we tips voor de beste mega menu plug-ins en stappen om dropdown menu&rsquo;s te maken als alternatief.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                     Wat is een WordPress mega menu?                 <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Een WordPress mega menu geeft website-eigenaren de mogelijkheid om meerdere kolommen, media en aangepaste stijlen toe te voegen. In vergelijking met traditionele menu&rsquo;s maken mega menu&rsquo;s het een stuk makkelijker om door complexe websites te navigeren. Bezoekers vinden zo sneller en effici&euml;nter de informatie die ze zoeken. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Een WordPress mega menu bestaat meestal uit meerdere niveaus:<\/p><ul class=\"wp-block-list\">\n<li><strong>Top level:<\/strong> Dit is het belangrijkste menu dat bezoekers zien zodra ze op je website komen. Het bevat vaak de hoofdcategorie&euml;n of secties, zoals een <strong>Productpagina.<\/strong><\/li>\n\n\n\n<li><strong>Tweede level:<\/strong> Dit menu wordt zichtbaar als gebruikers over een item in het hoofdniveau hoveren of klikken. Bijvoorbeeld, bij een modewebsite zie je onder Producten vaak <strong>Kleding<\/strong> als tweede niveau.<\/li>\n\n\n\n<li><strong>Derde level:<\/strong> Dit zijn submenu&rsquo;s die verschijnen als bezoekers met een item uit het tweede niveau interactie hebben. Voor Kleding kunnen dat bijvoorbeeld <strong>Shirts, Truien <\/strong>en<strong> Jassen<\/strong> zijn.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Je kunt meer submenu niveaus maken, maar houd het bij drie om te voorkomen dat bezoekers overweldigd raken.<\/p><h2 class=\"wp-block-heading\" id=\"h-hoe-maak-je-een-mega-menu-in-wordpress\"><strong>Hoe maak je een mega menu in WordPress<\/strong><\/h2><p class=\"wp-block-paragraph\">De makkelijkste manier om een mega menu in WordPress te maken, is met een plug-in. Als je wat technische kennis hebt, kun je ook handmatig een mega menu toevoegen met een custom CSS-code.<\/p><p class=\"wp-block-paragraph\">In dit deel leggen we beide methodes stap voor stap uit. Je kunt meteen naar de methode gaan die jouw voorkeur heeft.<\/p><h3 class=\"wp-block-heading\" id=\"h-hoe-maak-je-een-wordpress-mega-menu-met-de-max-mega-menu-plug-in\"><strong>Hoe maak je een WordPress mega menu met de Max Mega Menu plug-in<\/strong><\/h3><p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/plugins\/megamenu\/\" target=\"_blank\" rel=\"noopener\">Max Mega Menu<\/a> is een uitgebreide menu plug-in waarmee je meerdere menu locaties kunt beheren. Dankzij deze flexibiliteit kun je voor verschillende onderdelen van je website aparte mega menu&rsquo;s instellen.<\/p><p class=\"wp-block-paragraph\">Voordat we dieper ingaan op hoe Max Mega Menu precies werkt, beginnen we eerst met de installatie en configuratie van de plug-in.<\/p><p class=\"wp-block-paragraph\"><strong>1. Max Mega Menu plug-in installeren<\/strong><\/p><p class=\"wp-block-paragraph\">Log in op je WordPress dashboard en ga naar <strong>Plug-ins &rarr; Nieuwe plug-in<\/strong>. Typ <strong><em>Max Mega Menu <\/em><\/strong>in de zoekbalk, klik op <strong>Nu installeren<\/strong> en vervolgens op <strong>Activeren<\/strong> zodra je de juiste plug-in hebt gevonden.<\/p><h4 class=\"wp-block-heading\" id=\"h-\"><\/h4><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                     Pro tip                 <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Voordat je verdergaat, publiceer eerst alle belangrijke pagina&rsquo;s en maak een custom navigatiemenu aan. Voeg daarna die pagina&rsquo;s toe aan de menu-items in WordPress. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Ga daarna naar <strong>Mega Menu<\/strong> in de linker sidebar om de standaardinstellingen aan te passen. Wil je bijvoorbeeld een menulocatie toevoegen? Volg dan deze stappen:<\/p><ol class=\"wp-block-list\">\n<li>Ga naar <strong>Weergave &rarr; Menu&rsquo;s<\/strong>.<\/li>\n\n\n\n<li>Klik op <strong>Menulocaties<\/strong> en kies <strong>Nog een menulocatie toevoegen<\/strong>.<\/li>\n\n\n\n<li>Geef aan waar op je website je het menu wilt laten zien, zoals de header, footer of sidebar.<\/li>\n\n\n\n<li>Selecteer het custom menu dat je eerder hebt aangemaakt.<\/li>\n\n\n\n<li>Klik op <strong>Menulocatie toevoegen<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e6e019\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e6e019\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXeOenTZ0QZVHE6GAIo2EOi6c-J42H1SD_Xqu9e_Ap4pw432z5vNRyIuzN8AoZuxAznKKV-qMCWE-0uuHci6POSHGNd6Kh6GdC_RuuQR5smb3Zhif2VrIBxLa5tKQAqHsz-ucPPf-A?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Klik op Menulocatie toevoegen.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Vink na het aanmaken het vakje <strong>Ingeschakeld<\/strong> aan onder <strong>Algemene instellingen<\/strong>.<\/p><p class=\"wp-block-paragraph\">Kies vervolgens bij <strong>Gebeurtenis<\/strong> &eacute;&eacute;n van de drie hoofdopties om het menu te activeren:<\/p><ul class=\"wp-block-list\">\n<li><strong>Hover Intent<\/strong>: de gebruiker moet een paar seconden met de muis over het hoofdmenu zweven voordat het tweede niveau verschijnt. Deze vertraging helpt om per ongeluk openen te voorkomen.<\/li>\n\n\n\n<li><strong>Hover<\/strong>: submenu&rsquo;s openen direct zodra de gebruiker met de muis over het bovenliggende menu gaat. Door het ontbreken van vertraging zorgt dit voor soepele navigatie.<\/li>\n\n\n\n<li><strong>Klik<\/strong>: bezoekers moeten op het menu klikken of tikken om het tweede niveau te openen. Ideaal voor touchscreens of als nauwkeurig met de muis werken lastig is.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Als je <strong>Klik<\/strong> selecteert, ga dan naar het tabblad <strong>Geavanceerd<\/strong> &rarr; <strong>Klik Evenement Gedrag<\/strong>. Kies vervolgens een van deze opties om te bepalen wat er gebeurt wanneer bezoekers op het mega menu klikken:<\/p><ul class=\"wp-block-list\">\n<li>De eerste klik opent het submenu, en de tweede klik sluit het weer.<\/li>\n\n\n\n<li>De eerste klik opent het tweede niveau van het menu, en de volgende klik volgt de pagina link.<\/li>\n\n\n\n<li>De eerste klik opent direct de pagina link.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e6e73b\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e6e73b\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXd5cltC2OMWgLmFi-VCdlRkRg9vne2qFnl3WR1d7Oxcp6-l2Y74cOR2Z-v2w3c5zRnZt_HDrpW3AHytwG2qCTZheK7bHZhFEVWYFWNZTFbKEsx37f5X9_41lAR0zRoQjpRKwa7SeQ?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Ga naar het tabblad Geavanceerd &rarr; Klik Evenement Gedrag.\n\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Ga daarna terug naar het tabblad <strong>Algemene instellingen<\/strong> en ga naar <strong>Effect<\/strong>.<\/p><p class=\"wp-block-paragraph\">Hier kun je een animatietype voor je mega menu kiezen, zoals fade, fade up, slide of slide up. Je kunt ook de snelheid van de animatie instellen op snel, gemiddeld of langzaam.<\/p><p class=\"wp-block-paragraph\">Om animatie voor je mobiele menu in te schakelen, kies je een stijl naast <strong>Effect (Mobiel)<\/strong> &ndash; slide down, slide left of slide right.<\/p><p class=\"wp-block-paragraph\">Let op: het gebruik van interactieve elementen kan je website op mobiele apparaten of bij trage internetverbindingen vertragen.<\/p><p class=\"wp-block-paragraph\">Ben je tevreden met de instellingen? Klik dan op <strong>Wijzigingen opslaan<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e6ebfc\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e6ebfc\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXf710XwcUsFzQ7C8RrNtC0XO5aQ4eQ0V6LQS3pjPamwWMrjfXjdAt32f7YPVYMBWsBKmrUsL1LoFRwdz4Y9Wv5-4fx0UDIGfEJVpQ_UuWggFnOClcNYAqUb_nf35rkKhpxJthyUmQ?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Klik op Wijzigingen opslaan.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>2. Menu lay-out en uiterlijk instellen<\/strong><\/p><p class=\"wp-block-paragraph\">Max Mega Menu biedt een standaard menu thema dat je meteen kunt gebruiken. Maar als je liever een eigen thema maakt, kun je het mega menu eenvoudig personaliseren.<\/p><p class=\"wp-block-paragraph\">Ga hiervoor naar <strong>Menu Thema&rsquo;s<\/strong> in de Max Mega Menu instellingen. Klik op het <strong>drie puntjes pictogram <\/strong>naast <strong>Selecteer een thema om te bewerken <\/strong>en kies <strong>Nieuw thema toevoegen<\/strong>.<\/p><p class=\"wp-block-paragraph\">Onder <strong>Algemene Instellingen <\/strong>kun je de titel van het nieuwe thema aanpassen, een pijltjesstijl kiezen, de algemene regelhoogte instellen voor submenu items en een schaduw toepassen op je mega menu lay-outs.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e6f0cc\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e6f0cc\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXdCQpg_2xx5mDvn42ya4O1-bvJFDOj_2lF_cK5caKvAoS-E-QPIaCjOwTdRodZD8uHIX7igUamZhC6P-Jx7tCB7kV6qDi8_H3iTTbWmGbwK8QjCRbW37UnNK-qpuaxrrQRhfUaBlw?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Onder Algemene Instellingen kun je alle instellingen aanpassen.\n\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Open daarna de <strong>Menu Bar <\/strong>tab om je top level menu te personaliseren. Dit bepaalt hoe bezoekers je navigatiemenu zien in de verkleinde weergave.<\/p><p class=\"wp-block-paragraph\">Bovenaan deze tab vind je instellingen om de hoogte van het menu en de achtergrondkleur aan te passen. Je kunt ook custom padding instellen voor de gewenste lay-out en randen toevoegen rond menu-items voor een duidelijker visueel onderscheid.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e6f4fb\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e6f4fb\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXdZldyenIHZuFJTK7imwgiRMg2oVOLudSUPvkQVkKfRZ4wPrSUDp5ypO_ibK6RRQLBQ7emRAIO4eBi7AkWm2y1G8HMWcHPXA_NGmAQGRCTPvraK0CTDuqmVF9HGbUzuwsQ2MExMMw?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Open de Menu Bar tab om je top level menu te personaliseren.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Als je naar beneden scrolt, is er ook een speciale sectie om je top level menu-items aan te passen:<\/p><ul class=\"wp-block-list\">\n<li><strong>Uitlijning menu-items.<\/strong> Plaats alle menu-items links, in het midden of rechtsboven op je website.<\/li>\n\n\n\n<li><strong>Lettertype item.<\/strong> Pas de typografie van het menu aan zodat het aansluit bij het ontwerp van je website &ndash; van lettertype en grootte tot gewicht, kleur en stijlopties.<\/li>\n\n\n\n<li><strong>Achtergrond item.<\/strong> Verander de achtergrondkleur van elk menu-item. Laat het transparant als je al een achtergrond voor het menu hebt ingesteld.<\/li>\n\n\n\n<li><strong>Afstand item.<\/strong> Pas de ruimte en padding rond elk item aan om je mega menu lay-out precies goed te krijgen.<\/li>\n\n\n\n<li><strong>Rand item.<\/strong> Bepaal de kleur, breedte en radius van de rand om verschillende visuele effecten te cre&euml;ren.<\/li>\n\n\n\n<li><strong>Markeer huidig item.<\/strong> Als dit aanstaat, wordt het huidige menu-item gemarkeerd wanneer gebruikers er met de muis overheen gaan, wat de navigatie intu&iuml;tiever maakt.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e6fa50\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e6fa50\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXdZphSk6tQUOLhFudDruphHnutTiDKihV6uojuAbuYdcdu10UUmN2svIBENWNACyrOv28XE8vFwk-vJHidebfiCTRm8VSa2gkzvciu9EQ56MN5w7VYM6zCcpZE_V9kDnUCtvZ_83Q?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Speciale sectie om je top level menu-items aan te passen.\n\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Als je het bovenste menu hebt ingesteld, ga je verder naar het tabblad <strong>Mega Menu<\/strong>. Hier kun je het lettertype, de achtergrondkleur, de ruimte en de rand aanpassen van je tweede- en derde level menu-items.<\/p><p class=\"wp-block-paragraph\">Geef het hoofdmenu en de submenu&rsquo;s een ander kleurenschema om ze visueel van elkaar te onderscheiden. Gebruik wel dezelfde typografie om de stijl van je website consistent te houden.<\/p><p class=\"wp-block-paragraph\">Vergeet niet je wijzigingen op te slaan als je klaar bent.<\/p><p class=\"wp-block-paragraph\"><strong>3. Content toevoegen aan het WordPress menu<\/strong><\/p><p class=\"wp-block-paragraph\">Max Mega Menu werkt met een handige drag-and-drop interface, waarmee je makkelijk nieuwe content toevoegt. Naast tekstlinks kun je ook WooCommerce producten, afbeeldingen en zoekfilters in je menu plaatsen.<\/p><h4 class=\"wp-block-heading\" id=\"h-\"><\/h4><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                     Pro tip                 <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Wil je producten toevoegen aan je WordPress website en direct online verkopen? Lees dan deze uitgebreide WooCommerce tutorial. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Begin door naar <strong>Weergave &rarr; Menu&rsquo;s<\/strong> te gaan om een nieuw menu aan te maken of je bestaande menu te bewerken. Volg daarna deze stappen:<\/p><ol class=\"wp-block-list\">\n<li>Vink het vakje <strong>Inschakelen<\/strong> aan in het <strong>Max Mega Menu instellingenpanel<\/strong> links. Hiermee kun je ook de menustanden voor meerdere locaties instellen.<\/li>\n\n\n\n<li>Scroll naar <strong>Pagina&rsquo;s<\/strong>, selecteer alle pagina&rsquo;s en klik op <strong>Aan menu toevoegen<\/strong>.<\/li>\n\n\n\n<li>Herhaal dit proces voor <strong>Berichten<\/strong>, <strong>Categorie&euml;n<\/strong> en <strong>Productcategorie&euml;n<\/strong>.<\/li>\n\n\n\n<li>Onder <strong>Menustructuur<\/strong> kun je subcategorie&euml;n slepen naar de juiste hoofdcategorie. Je maakt een derde niveau door een menu-item iets naar rechts te slepen onder een tweede niveau, enzovoort.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e700e3\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e700e3\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXcuWILIBHTmKv_tKIMJ3fzZeI-Tm6fEVUSHj8qnM3C1sIfo5fIt58d6Pi8dsN3JEVLRKqDFYC-vjwuVyJTTl_FxEJQ3LMJ7hj3lCAQRp5CMj2zvt7T4uRasx4R4SZw8ikzlvcxv8Q?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Ga naar Weergave &rarr; Menu&rsquo;s te gaan om een nieuw menu aan te maken of je bestaande menu te bewerken.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Standaard gebruikt deze plug-in een flyout of dropdownmenu stijl. Om een mega menu te maken, beweeg met je muis over een van je pagina&rsquo;s en klik op de knop <strong>Mega Menu<\/strong>.<\/p><p class=\"wp-block-paragraph\">Er verschijnt dan een pop-up waarin je de weergavemodus van het submenu instelt op <strong>Raster Lay-out<\/strong> of <strong>Standaard Lay-out<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e70431\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e70431\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXfVUABFaJOvmtIbCKFN9zxC0UYfIOs6WCMXBnYTQ1QdfLf1a7r5FKTgKk2Ki5rvr773kAqLdr3TOgJhLdFOnK0SeB5fJBfossUy-cIdGxmBQW8VblwALbgwZ1GnanpKuZBtU780dA?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Beweeg met je muis over een van je pagina&rsquo;s en klik op de knop Mega Menu.\n\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Met de raster lay-out van het mega menu kun je een menu maken met meerdere kolommen en rijen.<\/p><p class=\"wp-block-paragraph\">Bij de standaard lay-out kun je alleen het aantal kolommen aanpassen.<\/p><p class=\"wp-block-paragraph\">Wil je je menu visueel aantrekkelijker maken? Klik dan op <strong>Selecteer een widget om toe te voegen aan het panel<\/strong> en kies iets uit de lijst. Je kunt bijvoorbeeld een zoekbalk, afbeeldingsgalerij, kalender, audiofragment, video of product filters toevoegen.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e707b4\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e707b4\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXchE5gXUVWrp698YJ-myWsDT21H7pQAcdoKJeY7zi_u7pkytFYWGfIni6Nr8-ZDgLkj0SWHnYgsHrN-caQde06Nen3Nw3qOJXhGX6pp7cev6iVLc9sjdf5pv2a39_eGn5FdOid6?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Klik op Selecteer een widget om toe te voegen aan het panel en kies iets uit de lijst.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Heeft je website een complex menu met veel links? Wijs dan een icoon toe aan elk item om de gebruikservaring te verbeteren. Ga naar <strong>Pictogrammen<\/strong> in de linker sidebar en kies pictogrammen uit verschillende platformen.<\/p><p class=\"wp-block-paragraph\">Sluit daarna het <strong>Mega Menu <\/strong>pop-upvenster en herhaal dit proces voor elke top level pagina.<\/p><p class=\"wp-block-paragraph\">Als je alle instellingen hebt geconfigureerd, klik je op <strong>Menu opslaan<\/strong> om het mega menu op je website te activeren.<\/p><h3 class=\"wp-block-heading\" id=\"h-hoe-maak-je-handmatig-een-wordpress-mega-menu-door-middel-van-coderen\"><strong>Hoe maak je handmatig een WordPress mega menu door middel van coderen<\/strong><\/h3><p class=\"wp-block-paragraph\">Een mega menu handmatig toevoegen via coderen geeft je volledige controle over het ontwerp en de werking. Maar deze methode vereist wel dat je weet hoe je met custom CSS werkt &eacute;n dat je je themabestanden kunt aanpassen.<\/p><p class=\"wp-block-paragraph\">Volg deze uitleg om een mega menu toe te voegen aan je WordPress website:<\/p><p class=\"wp-block-paragraph\"><strong>1. Bereid je ontwikkelomgeving voor<\/strong><\/p><p class=\"wp-block-paragraph\"><a href=\"\/nl\/tutorials\/wordpress\/\">WordPress is<\/a> een open source contentmanagementsysteem (CMS), wat betekent dat je eigen code kunt gebruiken om thema&rsquo;s en plug-ins aan te passen.<\/p><p class=\"wp-block-paragraph\">Maar: code bewerken op je live website kan tot onverwachte problemen leiden. Maak daarom eerst een <a href=\"\/nl\/tutorials\/wordpress-backup\/\">back-up van je WordPress website<\/a> en werk in een veilige testomgeving.<\/p><p class=\"wp-block-paragraph\">Als je <a href=\"\/nl\/wordpress-hosting\">managed website hosting voor WordPress<\/a> gebruikt via Hostinger, zit dat goed: de beheerde WordPress hosting biedt automatische back-ups om je bestanden veilig te houden. De <strong>Business<\/strong>&ndash; en <strong>Cloud Startup<\/strong>-plannen bevatten bovendien een WordPress staging tool, waarmee je een kopie van je website kunt maken om aanpassingen te testen voordat je ze live zet.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/nl\/wordpress-hosting\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-160\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/28\/2024\/06\/NL-New-WP_in-text-banner-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p class=\"wp-block-paragraph\"><a href=\"\/nl\/tutorials\/wordpress-staging-omgeving\/\">Zo stel je een WordPress staging omgeving in<\/a> met Hostinger:<\/p><ol class=\"wp-block-list\">\n<li>Log in op hPanel en ga naar <strong>Websites<\/strong>.<\/li>\n\n\n\n<li>Selecteer je domeinnaam en klik op <strong>Beheren<\/strong>.<\/li>\n\n\n\n<li>Ga in de linker sidebar naar <strong>WordPress &rarr; Staging<\/strong>.<\/li>\n\n\n\n<li>Open het tabblad <strong>Staging<\/strong> en klik op <strong>Staging aanmaken<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e72302\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e72302\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXdn0v_PHpi_aQMzTF2U05Exi__RAnjJyeoRgW5HeMrXPwoUW7DucAjBh5DKoG7C0aR7vC6B0mqjZaZuBTm0Ywu9NOyFvlD1f7QiWPS4KJOl-0u-xJYSRvZKCJhO6JEOEsp3N6U5Wg?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Open het tabblad Staging en klik op Staging aanmaken.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Maak een subdomein aan voor je staging omgeving. Het proces kan tot 15 minuten duren om af te ronden.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e72620\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e72620\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXcaYeRuN4pK7NqfUq3quxl1inXngQcPUvhrbOPdxf3V6GDX51IsW_FNRAKQckL9ms39_PeGSkmW1IHL8ag0pxH76F083JH66jXUIAL4Gnby_QdYFm3aEe9_cv8S7IRbCHKiAqtwyA?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Maak een subdomein aan voor je staging omgeving.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>2. Open het stylesheet bestand van je thema<\/strong><\/p><p class=\"wp-block-paragraph\">De volgende stap is het aanpassen van het bestand <strong>style.css<\/strong> van je thema op de staging website die je net hebt aangemaakt.<\/p><h4 class=\"wp-block-heading\" id=\"h-\"><\/h4><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                     Pro tip                 <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Om het risico op fouten tijdens het testen te verkleinen, raden we aan om een WordPress child theme te maken in plaats van het parent theme te gebruiken. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Bij de meeste hostingproviders moet je verbinding maken via een externe FTP-client. Gelukkig kunnen Hostinger gebruikers dit gemakkelijk doen via hPanel:<\/p><ol class=\"wp-block-list\">\n<li>Ga naar <strong>Bestanden &rarr; Bestandsbeheer<\/strong> en kies <strong>Toegang tot bestanden van (jouw domein)<\/strong>.<\/li>\n\n\n\n<li>Open de map <strong>public_html &rarr; staging &rarr; wp_content &rarr; thema&rsquo;s<\/strong>.<\/li>\n\n\n\n<li>Kies het WordPress thema dat je wilt aanpassen en open de map.<\/li>\n\n\n\n<li>Dubbelklik op het bestand <strong>style.css<\/strong> om wijzigingen aan te brengen.<\/li>\n\n\n\n<li>Scroll naar de onderkant van de teksteditor en voeg daar deze code toe:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.main-navigation ul:hover li ul,\n.main-navigation ul:hover li ul li ul {\n    display: inherit;\n}<\/pre><p class=\"wp-block-paragraph\">Hierdoor worden je tweede en derde level items zichtbaar zodra bezoekers er met de muis overheen bewegen.<\/p><p class=\"wp-block-paragraph\"><strong>3. Pas het mega menu aan<\/strong><\/p><p class=\"wp-block-paragraph\">Wil je het menu verder stylen? Voeg dan je eigen code toe aan de stylesheet van je thema. Hieronder vind je een paar veelgebruikte CSS snippets voor een WordPress mega menu:<\/p><p class=\"wp-block-paragraph\">Kolommen maken in het mega menu:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.mega-menu li.mega-menu-column {\n  width: 25%; \/* for a 4-column layout *\/\n  float: left;\n  padding: 10px;\n}<\/pre><p class=\"wp-block-paragraph\">Kleuren, padding en tekststijl aanpassen per menu-item:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.mega-menu ul.mega-sub-menu li a {\n  color: #555;\n  padding: 8px 15px;\n  display: block;\n  text-decoration: none;\n}<\/pre><p class=\"wp-block-paragraph\">Menu lay-out optimaliseren voor weergave op mobiel:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width: 767px) {\n  .mega-menu li.mega-menu-column {\n    width: 100%;\n    float: none;\n  }\n}<\/pre><p class=\"wp-block-paragraph\">Of deze codefragmenten goed werken, hangt af van de rest van de CSS en HTML-structuur van je website. Daarom is het belangrijk om elke code te testen en waar nodig aan te passen.<\/p><h2 class=\"wp-block-heading\" id=\"h-beste-wordpress-mega-menu-plug-ins\"><strong>Beste WordPress mega menu plug-ins<\/strong><\/h2><p class=\"wp-block-paragraph\">Hoewel je ook handmatig een mega menu in WordPress kunt maken, is die methode niet geschikt voor wie geen ervaring heeft met coderen. Ben je een beginner? Dan kun je het beste een WordPress plug-in gebruiken om het proces een stuk makkelijker te maken.<\/p><p class=\"wp-block-paragraph\">Naast Max Mega Menu zijn dit drie van de <a href=\"\/nl\/tutorials\/beste-wordpress-plugins\/\">beste WordPress plug-ins<\/a> om een mega menu mee te maken. <strong>QuadMenu<\/strong> kun je rechtstreeks installeren via de WordPress plug-in directory. <strong>WP Mega Menu<\/strong> Pro en <strong>JetMenu<\/strong> zijn alleen verkrijgbaar via externe marktplaatsen.<\/p><p class=\"wp-block-paragraph\"><strong>1. QuadMenu<\/strong><\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e72dc1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e72dc1\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXfqvMQRYbgi9N3f7L9t2bGcND8bAtspwEcz-aaC-20sPMWnvwqUzdS_VCSGMLY05KDFI4UqCnjLRXeZUDSCGB_nIMEc1koWSrNla5ggYWZtITRm8_HmSeoUZXBi_fFzdm9TvVoqMQ?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"QuadMenu startpagina\n\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/plugins\/quadmenu\/\" target=\"_blank\" rel=\"noopener\">QuadMenu<\/a> is een open source mega menu plug-in die volledig native draait binnen WordPress. Je krijgt toegang tot een brede selectie aan thema&rsquo;s en menu-locaties.<\/p><p class=\"wp-block-paragraph\">Met de gratis versie kun je onder andere een navigatie widget binnen je menu tonen, zelf bepalen wanneer het menu inklapt (breakpoints instellen) en kiezen uit verschillende mega menu stijlen. Denk aan off-canvas, sticky, horizontale of verticale mega menu&rsquo;s.<\/p><p class=\"wp-block-paragraph\">De betaalde plannen beginnen vanaf $49 per jaar. Daarmee krijg je extra functies zoals tabbladen, login en registratieopties, sociale media menu&rsquo;s en carrousel menu&rsquo;s.<\/p><p class=\"wp-block-paragraph\"><strong>2. WP Mega Menu Pro<\/strong><\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e7318b\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e7318b\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXdoKcqN5qNsWch0NAGKRblVunFJ1cOfoGm4-Intz6INmlUwLm-0QJFbuNi5pAbg3pjYUyqcRUyZqoZkQOLhFsgPH3iPZcJkFc8xrHSPOVRaAYRIyfmjPiCLRkJBkIEffuUAo445xg?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"WP Mega Menu Pro startpagina\n\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><a href=\"https:\/\/mythemeshop.com\/plugins\/wp-mega-menu\/\" target=\"_blank\" rel=\"noopener\">WP Mega Menu<\/a> is een gebruiksvriendelijke mega menu bouwer, ideaal voor beginners. Je kunt snel aan de slag en meteen responsieve mega menu&rsquo;s maken.<\/p><p class=\"wp-block-paragraph\">Hoewel het makkelijk in gebruik is, biedt deze WordPress mega menu plug-in toch uitgebreide opties om je menu aan te passen. Denk aan het wijzigen van lettertypes, menutypes, post-meta gegevens, kleurenschema&rsquo;s en animaties.<\/p><p class=\"wp-block-paragraph\">WP Mega Menu is alleen beschikbaar als premium versie en kost <strong>$19 per licentie,<\/strong> geldig voor een onbeperkte hoeveelheid aan websites met &eacute;&eacute;n jaar updates en hulp met prioriteit.<\/p><p class=\"wp-block-paragraph\"><strong>3. JetMenu<\/strong><\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e734c9\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e734c9\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXd5_gTicQV_4aOs_C-WhQB06B6iMKthxyYHDHiL7fEleKMyJL4Q8bWn11STO9yZKLzloGramag-iseX_Rsf0zo9IQn12cCvb7Dv7tRTVm-PIgDp9_JAIIkxqbzOnl7C9xlXuKp1Jg?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"JetMenu startpagina\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><a href=\"https:\/\/crocoblock.com\/plugins\/jetmenu\/\" target=\"_blank\" rel=\"noopener\">JetMenu<\/a> is een premium plug-in waarmee je een WordPress mega menu maakt met afbeeldingen, video&rsquo;s, audio-opnames en andere interactieve content.<\/p><p class=\"wp-block-paragraph\">Voor <strong>$43 per jaar<\/strong> krijg je toegang tot een drag-and-drop bouwer en verschillende menu-indelingen &mdash; zoals hamburger-, horizontale en verticale menu&rsquo;s.<\/p><p class=\"wp-block-paragraph\">Een opvallende functie is de preset manager, waarmee je meerdere templates kunt maken en opslaan voor verschillende menu&rsquo;s.<\/p><h2 class=\"wp-block-heading\" id=\"h-voordelen-van-het-gebruik-van-een-wordpress-mega-menu\"><strong>Voordelen van het Gebruik van een WordPress mega menu<\/strong><\/h2><p class=\"wp-block-paragraph\">In vergelijking met traditionele menu&rsquo;s heeft een mega menu in WordPress verschillende voordelen voor je website:<\/p><ul class=\"wp-block-list\">\n<li><strong>Betere organisatie.<\/strong> Heeft je WordPress website veel content of productcategorie&euml;n? Een mega menu helpt die netjes te ordenen en overzichtelijk aan gebruikers te presenteren.<\/li>\n\n\n\n<li><strong>Verbeterde uitstraling.<\/strong> Mega menu&rsquo;s kun je helemaal aanpassen aan je website branding, zodat het design strak en samenhangend blijft.<\/li>\n\n\n\n<li><strong>Meer betrokkenheid.<\/strong> Gebruikers blijven eerder op je website als ze makkelijk vinden wat ze zoeken. Een mega menu maakt navigeren eenvoudiger, waardoor bezoekers langer blijven en er meer interactie is met je content.<\/li>\n\n\n\n<li><strong>Effici&euml;nt ruimtegebruik.<\/strong> Met een mega menu laat je veel opties zien zonder dat de lay-out rommelig wordt.<\/li>\n\n\n\n<li><strong>Concurrentievoordeel.<\/strong> Een mega menu kan jouw website laten opvallen vergeleken met concurrenten en laat zien dat je inzet op een geweldige gebruikerservaring.&nbsp;<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-wordpress-mega-menu-alternatief\"><strong>WordPress mega menu alternatief<\/strong><\/h2><p class=\"wp-block-paragraph\">Hoewel een WordPress mega menu je helpt een uitgebreide menustructuur te laten zien, kun je ook kiezen voor een simpelere optie met dropdown of flyout menu&rsquo;s.<\/p><p class=\"wp-block-paragraph\">Dit is vooral handig als je een overzichtelijke menu hi&euml;rarchie hebt en de website strak en rustig wilt houden.<\/p><h3 class=\"wp-block-heading\" id=\"h-hoe-maak-je-dropdown-menu-s-met-een-klassiek-thema\"><strong>Hoe maak je dropdown menu&rsquo;s met een klassiek thema<\/strong><\/h3><p class=\"wp-block-paragraph\">Als je een klassiek thema gebruikt, kun je zo <a href=\"\/nl\/tutorials\/wordpress-dropwdown-menu\/\">een dropdown menu maken<\/a> via de WordPress Customizer:<\/p><ol class=\"wp-block-list\">\n<li>Log in op je WordPress dashboard en ga naar <strong>Weergave &rarr; Customizer.<\/strong><\/li>\n\n\n\n<li>Kies in de Customizer voor<strong> Menu&rsquo;s <\/strong>en selecteer je bestaande menu. Maak anders een nieuw menu aan.<\/li>\n\n\n\n<li>Klik op <strong>Items Toevoegen<\/strong> om nieuwe pagina&rsquo;s of berichten toe te voegen.<\/li>\n\n\n\n<li>Rangschik de submenu&rsquo;s door ze iets naar rechts onder het bovenliggende menu-item te slepen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e73cc1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e73cc1\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXd4qg2Hy82Lb60LA-FJH3cQk7f1TEPO0gf18IJM2PNCrhRmKEJkm_6DSuMUbGB4PfEYU9YdV1ASHz1OSl8_5aJA7ynLjC25v-g8b4nW6-p0GVg2-45gZyOPBycQJ1GSFMOwpgYQ?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Rangschik de submenu&rsquo;s door ze iets naar rechts onder het bovenliggende menu-item te slepen.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Als je klaar bent, ga je naar <strong>Menu Locaties <\/strong>en wijs je je dropdownmenu toe aan de gewenste plek.<\/li>\n\n\n\n<li>Klik op <strong>Publiceren<\/strong> om je wijzigingen op te slaan.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e740c2\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e740c2\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXf6MhgdsId2yuvmDl5sIBeDX848sP9EFGstUSfrpLpDSrSdlLmIqTqQjyerDs7IJBXb1DcKBAenfhmMnusSXmHoU-nfGGU4iFZf35CNXmkTrCjhF-3-7vMRvt_2n_whhYmGfuQTug?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Klik op Publiceren om je wijzigingen op te slaan.\n\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-zo-maak-je-dropdown-menu-s-met-de-blok-editor\"><strong>Zo maak je dropdown menu&rsquo;s met de Blok Editor<\/strong><\/h3><p class=\"wp-block-paragraph\">Voor gebruikers van een blok thema maak je een dropdown menu met de Gutenberg Editor:<\/p><ol class=\"wp-block-list\">\n<li>Ga in je WordPress dashboard naar <strong>Weergave &rarr; Editor<\/strong>.<\/li>\n\n\n\n<li>Klik in de Blok Editor bovenaan op het plus (+) icoon en kies <strong>Blokken<\/strong>.<\/li>\n\n\n\n<li>Zoek het <strong>Navigatie<\/strong> blok en sleep het naar de plek waar je het wilt plaatsen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e745af\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e745af\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXeDR65isHH4Nb2scrEv4vdV679IjjDbuKMR_9DAl-jfKLN9ZR0AggYzIoVKJ8ovtFyJuQlGMmBf_IkBEaXA1QZnD9-A2EQcy8SvOZF91vuI4cpVJn2rI8CNdna8wlO2-ru2pCMj?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Zoek het Navigatie blok en sleep het naar de plek waar je het wilt plaatsen.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Als je het Navigatie blok hebt toegevoegd, ga dan naar de rechter sidebar en open het panel met <strong>Blok instellingen<\/strong>.<\/li>\n\n\n\n<li>Klik op het <strong>plus (+) icoon <\/strong>en kies <strong>Pagina link <\/strong>om je hoofdpagina&rsquo;s en submenu items toe te voegen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e749e1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e749e1\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXetnNMhWvSeGlo25ORS-9ZYa5hEGCZQ6Aw3wpdBjpBkseqPoMwdqQYfVrd5Jy02Hcuro44KYNQuutJeTxb4BVtw8EPhiJbra8Qz_8tbmFM7CAqNaf-Z66Uy5r_wsPCTANsgPio7RA?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Klik op het plus (+) icoon en kies Pagina link om je hoofdpagina&rsquo;s en submenu items toe te voegen.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"6\" class=\"wp-block-list\">\n<li>Om een dropdownmenu te maken, sleep je submenu items iets naar rechts onder het bovenliggende item. Of klik op het driepuntjes pictogram naast je bestaande menu&rsquo;s en kies <strong>Submenu link toevoegen<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a9b743e74cfc\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a9b743e74cfc\" class=\"aligncenter wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXeOckh7MtVE7lCD6RCruvw9yLm0xQqwKKBYQhvT14CI0KOgcK1KEuh4oWS3AS92fqUrd4GuLXE6PoP482Etlu8KrumJ_XJe1_MM6kEsfL-j-_NPU2h4pIwX1qbapGE9phUKZZwQDg?key=v4JoOHczPW9HoNeFFxnEcw\" alt=\"Of klik op het driepuntjes pictogram naast je bestaande menu&rsquo;s en kies Submenu link toevoegen.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"7\" class=\"wp-block-list\">\n<li>In het tabblad <strong>Instellingen<\/strong> kun je de menu lay-out aanpassen en het menu verticaal of horizontaal weergeven.<\/li>\n\n\n\n<li>Als je tevreden bent met het uiterlijk en de werking van het dropdownmenu, klik je op <strong>Publiceren<\/strong> of <strong>Bijwerken<\/strong> om je wijzigingen op te slaan.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-conclusie\"><strong>Conclusie<\/strong><\/h2><p class=\"wp-block-paragraph\">Voordat je je WordPress website lanceert, is het belangrijk dat de navigatie intu&iuml;tief is. Voor webshops en websites met veel pagina&rsquo;s is een mega menu de ideale oplossing.<\/p><p class=\"wp-block-paragraph\">In tegenstelling tot het standaard menu kun je met een mega menu complexe informatie op een eenvoudige en toch visueel aantrekkelijke manier ordenen.<\/p><p class=\"wp-block-paragraph\">Er zijn twee manieren om een mega menu aan je website toe te voegen. Voor beginners raden we aan om Max Mega Menu of andere plug-ins te gebruiken.<\/p><p class=\"wp-block-paragraph\">Ben je een gevorderde gebruiker die meer flexibiliteit wil? Gebruik dan CSS-code om het mega menu helemaal naar wens aan te passen. Om tijd en moeite te besparen, kun je het beste kiezen voor een betrouwbare hostingprovider zoals Hostinger, die een WordPress staging tool en een ingebouwde code-editor biedt.<\/p><p class=\"wp-block-paragraph\">We hopen dat deze WordPress mega menu tutorial je de juiste handvatten heeft gegeven om een betere gebruikerservaring te bieden op jouw website. Heb je nog vragen? Laat dan gerust een reactie achter hieronder.<\/p><h2 class=\"wp-block-heading\" id=\"h-wordpress-mega-menu-faq-s\"><strong>WordPress mega menu FAQ&rsquo;s<\/strong><\/h2><p class=\"wp-block-paragraph\">Vind hier de antwoorden op veelgestelde vragen over WordPress mega menu&rsquo;s.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-6943ffa7a6e2a\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Heb ik een mega menu nodig voor mijn WordPress website?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Mega menu&rsquo;s zijn ideaal voor websites met een complexe structuur of veel informatie. Als je website meerdere categorie&euml;n, subcategorie&euml;n of uitgebreide navigatie nodig heeft, helpt een mega menu bezoekers sneller de juiste content te vinden.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffa7a6e2e\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Heeft een WordPress mega menu invloed op de prestaties van mijn website?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Een goed geoptimaliseerd mega menu heeft meestal weinig invloed op de snelheid van je WordPress website. Gebruik effici&euml;nte code en zorg dat afbeeldingen en media in het mega menu goed gecomprimeerd en geoptimaliseerd zijn. Zo blijft je website snel en gebruiksvriendelijk.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffa7a6e2f\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Kan ik een WordPress mega menu mobielvriendelijk maken?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ja, er zijn veel responsive mega menu plug-ins die goed werken op verschillende schermformaten. Kies een plug-in die expliciet mobielvriendelijk is en test het mega menu goed op verschillende apparaten om zeker te zijn dat alles soepel werkt.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div><p class=\"wp-block-paragraph\"><strong>Alle educatieve content op deze website wordt zorgvuldig gecontroleerd en voldoet aan de hoge redactionele standaarden van Hostinger.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bij het ontwerpen van een website is een WordPress mega menu essentieel voor een soepele navigatie. Vooral bij e-commerce websites met een breed aanbod aan productcategorie&euml;n is dit superhandig. Met een WordPress mega menu kun je menu inhoud overzichtelijk in meerdere kolommen of rijen tonen. Zo organiseer je grote hoeveelheden informatie makkelijk, en vinden bezoekers [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/nl\/tutorials\/wordpress-mega-menu\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":538,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Hoe maak je een WordPress mega menu: 2 effectieve methodes","rank_math_description":"Ontdek hoe je een WordPress mega menu maakt met een plug-in of handmatige code.","rank_math_focus_keyword":"wordpress mega menu","footnotes":""},"categories":[134,116],"tags":[],"class_list":["post-4795","post","type-post","status-publish","format-standard","hentry","category-personalisatie-en-ontwerp","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-mega-menu\/","default":1},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/mega-menu-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-mega-menu\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-mega-menu\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-mega-menu\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-mega-menu\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-mega-menu\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-mega-menu\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-mega-menu\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-mega-menu\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/4795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/users\/538"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/comments?post=4795"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/4795\/revisions"}],"predecessor-version":[{"id":5287,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/posts\/4795\/revisions\/5287"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/media?parent=4795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/categories?post=4795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/nl\/tutorials\/wp-json\/wp\/v2\/tags?post=4795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}