{"id":113119,"date":"2023-04-04T10:45:40","date_gmt":"2023-04-04T10:45:40","guid":{"rendered":"https:\/\/elementor.com\/blog\/introductie-van-elementor-3-12-ontwerp-prachtige-en-geavanceerde-megamenus\/"},"modified":"2025-12-28T06:30:58","modified_gmt":"2025-12-28T04:30:58","slug":"introductie-van-elementor-3-12-ontwerp-prachtige-en-geavanceerde-megamenus","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/introductie-van-elementor-3-12-ontwerp-prachtige-en-geavanceerde-megamenus\/","title":{"rendered":"Introductie van Elementor 3.12 – Ontwerp prachtige en geavanceerde megamenu’s"},"content":{"rendered":"\n

Elementor 3.12 bevat een aantal interessante functies, waaronder een nieuwe Menu widget, waarmee je visueel geavanceerde Mega Menu’s kunt maken in Elementor.\nDeze versie bevat ook een nieuwe functie waarmee je de lijsten op je website verder kunt aanpassen en een alternatieve sjabloon kunt maken in de Loop Grid widget.\nTen slotte breidt deze versie ook de bestaande mogelijkheden uit en biedt je extra ontwerp- en aanpassingsopties. <\/p>\n\n

\"\"<\/figure>\n\n

[Pro] Maak kennis met het Mega Menu in Elementor met de nieuwe Menu Widget<\/h2>\n\n

Deze versie introduceert een van de meest gevraagde functies – het Mega Menu, beschikbaar met de nieuwe Menu widget.\nMet de nieuwe Menu widget kun je een uitbreidbaar menu maken waarmee je meer inhoud kunt weergeven.\nDit verbetert de bezoekerservaring doordat het voor bezoekers gemakkelijker wordt om bepaalde categorie\u00ebn en subcategorie\u00ebn te vinden, en stelt je in staat om websiteontwerpen te maken die uniek zijn en opvallen.\nOm de nieuwe menu widget te gebruiken, moet je de Menu, Flexbox Containers en Nested Elements functies inschakelen door naar je WordPress Dashboard \u2192 Elementor \u2192 Functies te gaan. <\/p>\n\n

De navigatie van je website instellen<\/h3>\n\n

Met de nieuwe Menu widget kun je zoveel menu-items maken als je wilt, vanuit het niets – zonder dat je per se menu’s hoeft te maken in het WordPress Menus scherm.\nElk menu-item kan worden gekoppeld aan elke pagina, waardoor je meer flexibiliteit hebt om de navigatie van je website te structureren.\nVoor een optimale navigatie is het aan te raden om de dynamische Internal URL<\/a> tag te gebruiken om ervoor te zorgen dat je menu-items altijd linken naar de pagina die je bedoelde. <\/p>\n\n

Voor elk menu-item kun je beslissen of het dropdown-inhoud bevat waar je subcategorie\u00ebn kunt toevoegen, of niet, en een pictogram kiezen voor de dropdown-indicator.\nAls je ervoor kiest om dropdown-inhoud toe te voegen, kun je een dropdown-effect instellen om het menu-item te openen bij zweven of klikken, en kiezen of je wilt dat de dropdown-inhoud vervaagt met een animatie-effect. <\/p>\n\n

Maak een Mega Menu met Dropdown-inhoud<\/h3>\n\n

Door de Dropdown-inhoud per menu-item in te schakelen en gebruik te maken van de kracht van Containers en Nested Elements, kun je prachtige en verfijnde Mega Menu’s maken.\nAls je de dropdown-inhoud inschakelt op een menu-item, wordt er een nieuwe container toegevoegd aan het menu-item, waarin je elke widget kunt slepen, het inhoudsgebied kunt stylen en elke gewenste lay-out kunt ontwerpen, wat leidt tot een betere bezoekerservaring en een grotere betrokkenheid.\nLeer hier<\/a> hoe je een Mega Menu maakt. <\/p>\n\n

Responsieve instellingen<\/h2>\n\n

Om de bezoekerservaring aan te passen aan elk apparaat, kun je het breekpunt kiezen waarop het menu een wisselmenu wordt en de manier waarop vervolgkeuzemenu’s worden ontworpen aanpassen aan het scherm waarop ze worden bekeken. <\/p>\n\n

Let op:<\/strong> Als onderdeel van deze update is de Nav Menu widget omgedoopt tot WordPress Menu, maar je kunt deze nog steeds op elk moment gebruiken, zelfs binnen je Menu widget om menu’s te maken op basis van het menu scherm in WordPress. <\/p>\n\n

\"\"<\/figure>\n\n

[Pro] Diversifieer je ontwerp met een Loop Alternate Template<\/strong><\/h2>\n\n

Met Loop Alternate Template<\/a>, een nieuwe functie in de Loop Grid widget, kun je een hoger niveau van ontwerpflexibiliteit bereiken door een andere sjabloon toe te passen op specifieke items binnen een loop grid. <\/p>\n\n

Voeg een alternatieve sjabloon toe om items te laten opvallen<\/h3>\n\n

Om een ander sjabloon toe te voegen aan je loop grid, zet je de schakelaar ‘Een alternatief sjabloon toepassen’ aan.\nAls je klikt op Maak een sjabloon, kom je in de Theme Builder<\/a>, waar je een nieuw Loop Item kunt ontwerpen. Je kunt ook een van de Loop Item Sjablonen die je eerder hebt gemaakt kiezen als alternatieve sjabloon.\nJe kunt tot 20 verschillende sjablonen maken voor elk Loop Rooster op je website. <\/p>\n\n

Als je de sjabloon hebt gekozen die je wilt gebruiken, kun je bepalen op welke positie in het raster je de sjabloon wilt toepassen en of je de sjabloon wilt laten herhalen of niet.\nJe kunt bijvoorbeeld een alternatieve sjabloon toepassen op het item op de 2e positie in het raster en dan bepalen of je het alleen op het 2e item wilt laten verschijnen, of op elk 2e item wilt laten herhalen. <\/p>\n\n

Opmerking: <\/strong>In deze versie overschrijft het toepassen van een alternatieve sjabloon het ontwerp van specifieke items in je loop grid, gebaseerd op de query die je hebt geselecteerd voor het hele grid.\nHet is nog niet mogelijk om een item te injecteren dat extern is aan de query. <\/p>\n\n

Neem meer ruimte in met kolommen<\/h3>\n\n

Stel een kolomoverspanning in op de alternatieve sjabloon om specifieke lusitems nog meer te laten opvallen.\nZo kun je een sjabloon ontwerpen dat meer ruimte inneemt in je lusraster.\nAls je bijvoorbeeld een lusraster hebt met 3 kolommen, kun je een alternatieve sjabloon maken die 2 kolommen beslaat.\nDit betekent dat als je de alternatieve sjabloon toepast op het 2e item en instelt dat het 2 kolommen beslaat, het 2e item 2 kolommen in beslag neemt in de eerste rij. <\/p>\n\n

\"\"<\/figure>\n\n

[Pro] Kickstart je workflow met voorontworpen loopsjablonen<\/strong><\/h2>\n\n

Versnel je workflow en laat je inspireren door 10 nieuwe loop-sjablonen in de bibliotheek.\nDeze versie bevat 6 sjablonen voor berichten en 4 voor WooCommerce<\/a> producten.\nJe kunt de sjablonen vinden door te klikken op het sjabloonbibliotheek pictogram in het canvas wanneer je een nieuw loopsjabloon maakt.\nDe sjabloonbibliotheek toont je sjablonen voor berichten of producten op basis van het ‘sjabloontype’ dat je kiest op het inhoudstabblad van het lusraster. <\/p>\n\n

Als je eenmaal de sjabloon hebt gekozen die je wilt gebruiken, kun je deze verder aanpassen en de inhoud en query kiezen die je wilt weergeven. <\/p>\n\n

Let op<\/strong>: Loop Templates zijn gebaseerd op containers en zijn alleen beschikbaar voor websites waarop Containers zijn ingeschakeld. <\/p>\n\n

\"\"<\/figure>\n\n

Elementor interface vernieuwen<\/strong><\/h2>\n\n

Elementor bestaat al bijna 7 jaar en dat is ook het jaar waarin de interface van de Editor voor het eerst werd ontworpen.\nIn de loop der jaren zijn er talloze nieuwe functies en widgets toegevoegd, waardoor het voor Elementor belangrijk is om wijzigingen aan te brengen in de gebruikersinterface (UI) en gebruikerservaring (UX) om toekomstige groei van het product mogelijk te maken. <\/p>\n\n

In de komende releases zal de interface van Elementor een geleidelijke vernieuwing ondergaan, die zal worden gebouwd in REACT.\nDe veranderingen aan de interface stimuleren best practices in het maken van websites met Elementor, verbeteren de toegankelijkheid, stroomlijnen workflows en maken de introductie van nieuwe functies in de toekomst mogelijk. <\/p>\n\n

Een nieuw kleurenschema voor Elementor <\/strong><\/h3>\n\n

In Elementor 3.12 heeft de interface van de Editor zijn eerste update ondergaan om in lijn te komen met het nieuwe kleurenschema.\nAls onderdeel van deze update zijn de kleuren in de editor vereenvoudigd.\nDe nieuwe kleuren zijn geoptimaliseerd voor de Dark en Light modus, hebben een betere toegankelijkheid en zorgen ervoor dat je je kunt concentreren op de inhoud van je website, zonder de functionaliteit van het product te be\u00efnvloeden. <\/p>\n\n

Experiment: Nieuwe bovenbalk<\/strong><\/h3>\n\n

In Elementor 3.12 wordt de nieuwe Top Bar ge\u00efntroduceerd als een experiment dat je kunt inschakelen (via WordPress Dashboard \u2192 Elementor \u2192 Features).\nDeze versie laat de eerste fase zien van de nieuwe Top Bar in de Editor, die is gebouwd met REACT om de prestaties te verbeteren en toekomstige mogelijkheden mogelijk te maken.\nDe Topbalk brengt alle essenti\u00eble acties die nodig zijn voor het maken van websites samen op een centrale en gemakkelijk toegankelijke plek. <\/p>\n\n

Als onderdeel van deze versie bevat de Bovenbalk de volgende items en mogelijkheden: <\/p>\n\n