[PRO] INVOERING VAN HET MEGAMENU IN ELEMENTOR MET DE NIEUWE MENU-WIDGET
Elementor 3.12 introduceert het langverwachte Mega Menu. Met de nieuwe Menu widget kun je een veel hoger niveau van ontwerp, aanpassing en creativiteit bereiken dan met de Nav Menu widget (nu omgedoopt tot WordPress Menu). Met de nieuwe Menu widget zul je ook een Mega Menu kunnen maken, een uitbreidbaar menu waarin je elke gewenste indeling kunt maken. Binnen het menu kun je elk type widget gebruiken, elk type inhoud weergeven, en linken naar elke pagina. Megamenu’s zijn ideaal om de bezoekerservaring in websites met een complexe navigatiearchitectuur te verbeteren, en ook om mooi vormgegeven menu’s weer te geven die opvallen.
De nieuwe Menu-widget is beschikbaar zodra je het experiment Container, Geneste elementen en Menu activeert. Met deze nieuwe widget kun je een eenvoudig menu maken zonder dropdown-inhoud of je kunt de dropdown-inhoud per item inschakelen. Door de dropdown-inhoud in te schakelen maak je een Container voor het inhoudsgebied van elk menu-item. Binnen deze container kun je elke gewenste opmaak maken door elementen binnen de container te plaatsen en containers te nesten.
Navigatie instellen
Terwijl de Nav Menu widget (nu omgedoopt tot WordPress Menu) automatisch de menu-items aanmaakte en koppelde aan de pagina’s op basis van je Menus scherm in WordPress, kun je met de Menu widget je Menu-items vanaf nul aanmaken. Je kunt elk Menu-item een naam naar keuze geven, en het zelf aan elke pagina koppelen, waardoor je meer flexibiliteit hebt om de navigatie van je website te structureren. Als je eenmaal je menu hebt gemaakt, kun je ook bepalen hoe bezoekers omgaan met dropdown menu’s en ze openen – bij zweven of klikken, en of het openen van een dropdown menu wordt geanimeerd of niet.
Styling van je menu
De nieuwe Menu widget bevat veel stylingmogelijkheden, waarmee je het perfecte menu voor je website kunt maken. Je kunt de styling van het hoofdmenu instellen met alle styling mogelijkheden die je in het widget paneel tot je beschikking hebt, inclusief de Menu Items, Menu Toggle, Dropdown Menu, en meer. In toekomstige versies zul je ook pictogrammen kunnen toevoegen aan de titels van je menu-items. Als je een dropdown menu gebruikt, zul je, omdat het gebaseerd is op Containers, ook alle styling en instellingen van Containers kunnen gebruiken om de stijl van je dropdown inhoud aan te passen.
Responsive instellingen
Om websitebezoekers een goede ervaring te bieden, kun je het breekpunt kiezen waarop het menu een menu toggle wordt. Vervolgens kun je de pictogrammen die je gebruikt voor de menuknoppen in de normale en actieve toestand aanpassen.
ELEMENTOR 3. 12 INTERFACE VERNIEUWING
Elementor 3.12 markeert het 6,5-jarig bestaan van Elementor en daarmee is het interfaceontwerp van de Editor even oud geworden. In de loop der jaren zijn honderden nieuwe functies en widgets geïntroduceerd, en in de wereld is de gebruikersinterface (UI) en gebruikerservaring (UX) van software veranderd om tegemoet te komen aan nieuwe verwachtingen en behoeften.
In 2023 wordt de interface van Elementor geleidelijk vernieuwd, waarbij een nieuw ontwerpsysteem wordt aangenomen dat gebruik maakt van betere kleursemantiek. De aanpassingen aan de interface van Elementor zullen best-practices voor het maken van websites met Elementor bevorderen, de toegankelijkheid ervan verbeteren, de workflow versnellen en je mogelijkheden vergroten door de introductie van nieuwe functies in de toekomst.
EEN NIEUW KLEURENSCHEMA VOOR ELEMENTOR 3.12
Elementor 3.12 introduceert de eerste verandering in de interface van de Editor die de nieuwe kleursemantiek volgt die wordt ingevoerd. Als onderdeel van deze update zijn de Editor en andere schermen van Elementor opnieuw ingekleurd en vereenvoudigd. De nieuwe kleuren zijn beter aangepast aan de Dark en Light modus, en zijn geoptimaliseerd voor toegankelijkheid. Het nieuwe kleurenschema heeft geen invloed op de functionaliteiten van het product.
EXPERIMENT: NIEUWE BOVENBALK
Elementor 3.12 introduceert als experiment een nieuwe Top Bar, die standaard is uitgeschakeld. Deze versie demonstreert de eerste fase van de nieuwe Top Bar in de Editor, gebouwd in React voor betere prestaties en om nieuwe mogelijkheden in de toekomst mogelijk te maken. De Bovenbalk volgt best-practices uit de industrie en consolideert alle veelvoorkomende acties die je op je website moet uitvoeren op een centrale en toegankelijke plaats.
Je activeert de nieuwe Top Bar door naar Elementor → Instellingen → Functies te gaan en het Top Bar experiment te activeren. Omdat dit nog maar de eerste fase is, zijn nog niet alle mogelijkheden volledig geïntegreerd en is het niet aan te raden dit op live websites te activeren.
[PRO] ELEMENTOR 3.12 DIVERSIFIEER JE ONTWERP MET EEN LOOP ALTERNATE TEMPLATE
Om het ontwerp van je website te verbeteren en je in staat te stellen het uiterlijk van je items in een loop grid te diversifiëren, bevat Elementor 3.12 ook een nieuwe functie in de Loop Grid widget, “Pas een alternatief sjabloon toe” waarmee je een ander sjabloon kunt maken of toepassen binnen je Loop Grid.
Als je de toggle aanzet, kun je een lussjabloon kiezen of een nieuw lussjabloon maken vanuit de Theme Builder. Het sjabloon kan worden gemaakt met alle widgets van Elementor en stelt je in staat een heel ander ontwerp toe te passen op specifieke items in je lus.
Als onderdeel van deze versie overschrijft het toepassen van een alternatief sjabloon het ontwerp op het item op een specifieke plaats in je lusraster, volgens jouw keuze. Als je het bijvoorbeeld instelt op het item op de 2e positie, wordt je alternatieve sjabloon toegepast op het bericht of product dat op de 2e positie in het raster wordt weergegeven (met inhoud van de query die je kiest voor het lusraster). Je kunt dan kiezen of je de alternatieve sjabloon binnen het raster wilt laten herhalen. Je kunt bijvoorbeeld een alternatieve sjabloon toepassen op het item op de 2e positie in je loop grid, en de alternatieve sjabloon laten toepassen op elk 2e item in je grid.
COLUMN SPAN
Als onderdeel van de layout van je loop grid kun je kiezen hoeveel kolommen en items je op de pagina wilt weergeven. Wanneer je echter een alternatief sjabloon toepast, kun je ervoor kiezen om het alternatieve sjabloon over meer dan één kolom te laten lopen. Bijvoorbeeld, als je een raster van 3 kolommen hebt, kun je de alternatieve sjabloon over 2 kolommen laten lopen. Als je dan het alternatieve sjabloon instelt op het item op de 2e positie, en je stelt het in op een overspanning van 2 kolommen, dan neemt de weergave van je tweede bericht 2 kolommen in de eerste rij in beslag.
Conclusie over Elementor 3.12
We hebben eindelijk weer eens een grote update te pakken waarbij je ook visueel goed de verschillen gaat zien. En heel eerlijk, daar waren we na 6,5 jaar ook wel aan toe. Ik hoop zelf dat ze dit ieder jaar of om de paar jaar blijven meepakken zodat de inferface modern blijft aanvoelen. Ben je ook enthousiast geworden over deze wijzigingen en wil je zelf Elementor (Pro) gaan gebruiken. Klik op de button hieronder die meteen op de juiste plek brengt. Heb je nog vragen of zoek je ondersteuning bij Elementor neem dan zeker ook contact met ons op. Met onze jarenlange ervaring kunnen we je altijd helpen.
Bovenstaande knop is een affiliate link. Wanneer je via deze button een aankoop doet bij Elementor dan kost dat jou niets extra’s maar krijgen wij een kleine commissie. Met deze commissie zorgen we ervoor dat al onze artikelen gratis kunnen blijven. Zo kunnen wij dus meer mensen blijven helpen!