Bij het ontwerpen van een WordPress-website is het essentieel om je te concentreren op het creëren van het mooiste megamenu in WordPress. Dit is belangrijk, vooral voor e-commerce of grote bedrijven die een grote verscheidenheid aan producten of categorieën op hun website willen weergeven.
Een WordPress-megamenu helpt deze categorieën te ordenen, zodat gebruikers er gemakkelijk doorheen kunnen navigeren. Hoe? Een WordPress-megamenu is een geweldige manier om veel inhoud te organiseren en weer te geven in één eenvoudig te navigeren menu. Hiermee kunt u menu-items in meerdere kolommen of rijen indelen, zodat gebruikers snel verschillende delen van uw site kunnen vinden zonder eindeloos door pagina's te hoeven klikken.
Dit kan een groot verschil maken in hoe bezoekers uw site ervaren door de navigatie soepeler en toegankelijker te maken in webontwerp. In deze handleiding leiden we u door de eenvoudige stappen om een megamenu aan uw WordPress-site toe te voegen, zodat iedereen gemakkelijk kan vinden wat hij of zij zoekt.
Megamenu begrijpen in WordPress?
Wat zou een megamenu in WordPress kunnen zijn, en waarom heb ik het echt nodig? Misschien denk je dit. Met een WordPress-megamenu kunnen eigenaren van WordPress-sites een verscheidenheid aan kolommen, media-inhoud en aanpassingen toevoegen aan de manier waarop ze hun websitemenu vormgeven. Vroeger waren de traditionele megamenu's complex om te navigeren, maar na verloop van tijd is het gemakkelijker geworden om meerdere categorieën te structureren en te organiseren met megageld in WordPress.
Over het algemeen bevat WordPress een drag-and-drop- builder waarmee u eenvoudig verschillende soorten menu’s kunt maken, zoals vervolgkeuzelijsten, headermenu’s en meer. Bovendien zijn er plug-ins waarmee u navigatiemenu's in WordPress-thema's .
Maar als uw site veel inhoud bevat, volstaat een gewoon menu wellicht niet. Dan is een megamenu een prima optie. Met een megamenu kunt u vervolgkeuzelijsten met meerdere kolommen toevoegen aan uw WordPress-menu, zodat u de inhoud onder verschillende kopjes en subkoppen kunt ordenen. Zo kunnen bezoekers snel vinden wat ze zoeken, zonder in de war te raken.
Herkenbaar: hoe WordPress te repareren Kan pagina niet aan menu toevoegen?
Een megamenu maken in WordPress hoeft niet ingewikkeld te zijn
Maak contact met onze professionele WordPress-ontwikkelaars en ontvang het mooiste megamenu in WordPress.
Hoe u het best uitziende megamenu kunt maken in WordPress
Nu zit er geen rocket science achter het creëren van het mooiste megamenu in WordPress. Het enige wat je nodig hebt is de Max Mega Menu Plugin en je megamenu is klaar.
Als u echter bekend bent met de technische kant van het maken van een megamenu, kunt u dit ook handmatig maken. In dit gedeelte behandelen we zowel de plug-in als de handmatige methode voor de beste resultaten.
Dus laten we beginnen:
Hoe u het uitziende megamenu in WordPress kunt maken met de plug-in
De eenvoudigste manier om een megamenu aan uw WordPress-site toe te voegen is met de Max Mega Menu-plug-in. Met deze tool kunt u uw menu's verbeteren door rijke inhoud , zoals video's, afbeeldingsgalerijen, zoekbalken en meer.
Met Max Mega Menu kunt u menu's maken die georganiseerd, visueel aantrekkelijk en nuttig zijn voor uw bezoekers.
Stap 1: Installeer en configureer de Max Mega Menu-plug-in
Om te beginnen logt u in op uw WordPress-dashboard en gaat u naar Plug-ins → Nieuw toevoegen . Typ 'Max Mega Menu' in de zoekbalk en klik vervolgens op Nu installeren en activeren .
Snelle tip : zorg ervoor dat u, voordat u erin duikt, alle essentiële pagina's heeft gepubliceerd en er een aangepast navigatiemenu mee heeft gemaakt.
Eenmaal geactiveerd, navigeert u naar Mega Menu in de linkerzijbalk om toegang te krijgen tot de instellingen. Volg deze stappen om een menulocatie in te stellen:
- Ga naar Weergave → Menu's .
- Selecteer Menulocaties en klik op Nog een menulocatie toevoegen .
- Kies waar u uw menu wilt laten verschijnen (bijvoorbeeld koptekst, voettekst, zijbalk).
- Wijs uw aangepaste menu toe en klik vervolgens op Menulocatie toevoegen .
in de Algemene instellingen uw megamenu in en stel in hoe het wordt geopend. U kunt kiezen tussen:
- Hover Intent : Opent na een kleine vertraging, waardoor onbedoelde klikken worden voorkomen.
- Hover : Opent onmiddellijk wanneer u zweeft, waardoor een soepele ervaring ontstaat.
- Klik : Vereist een klik of tik, ideaal voor apparaten met touchscreen.
Als u voor 'Klik' kiest, onderzoek dan de opties onder Geavanceerd → Klikgebeurtenisgedrag om te bepalen wat er gebeurt bij volgende klikken.
Je kunt ook enkele animatie-effecten toevoegen onder de Effectinstellingen . Opties zijn onder meer fade , slide of fade up , met snelheidsinstellingen van snel tot langzaam.
Stap 2: Pas de menu-indeling en het uiterlijk aan
Max Mega Menu wordt geleverd met een standaardthema, maar u kunt ook uw eigen thema ontwerpen. Om een aangepast uiterlijk te creëren:
- Ga naar Menuthema's in de Max Mega Menu-instellingen.
- Klik op het pictogram met de drie stippen om het thema te selecteren en kies ervoor om een nieuw thema toe te voegen .
- Pas in Algemene instellingen zaken aan zoals de pijlstijl, lijnhoogte en menuschaduw.
onder Menubalk de weergave van het menu op het hoogste niveau door de hoogte, achtergrondkleur, opvulling en randen aan te passen. Stel voor elk menu-item opties in zoals:
- Uitlijning : Plaats items naar links, midden of rechts.
- Lettertypestijl : Pas de typografie aan het ontwerp van uw site aan.
- Achtergrond en afstand : stel achtergrondkleuren, marges, opvulling en randen in voor een verzorgd uiterlijk.
Stap 3: Voeg inhoud toe aan uw menu
Inhoud toevoegen is eenvoudig met de drag-and-drop-interface van Max Mega Menu. U kunt tekstlinks, WooCommerce-producten, afbeeldingen en zelfs zoekfilters toevoegen.
- Ga naar Weergave → Menu's om een menu te maken of te bewerken.
- In de Max Mega Menu-instellingen aan de linkerkant vinkt u Inschakelen voor de door u gekozen locatie.
- Voeg pagina's, berichten, categorieën en producten toe aan de menustructuur.
- Sleep items en zet ze neer om ze op meerdere niveaus te ordenen.
Om een megamenu te maken, beweegt u de muis over een pagina en klikt u op Megamenu . Stel de weergavemodus in op Rasterindeling voor organisatie met meerdere kolommen of Standaardindeling voor eenvoudigere menu's. Gebruik voor extra flair widgets zoals een zoekbalk, afbeeldingengalerij of productfilter. U kunt zelfs pictogrammen aan elk item toevoegen door ze in het Pictogrammen .
Nadat je alles hebt aangepast, klik je op Menu opslaan om je megamenu live te maken!
Lees: Migreren van Drupal naar WordPress: complete handleiding
Hoe u handmatig een megamenu in WordPress kunt maken
In de eerste methode hebben we gezien hoe je een megamenu in WordPress kunt maken met behulp van de Max Mega Menu Plugin. Nu zullen we onderzoeken hoe u een mooi megamenu in WordPress kunt maken met behulp van CSS-code.
Deze methode kan nuttig zijn voor degenen die meer flexibiliteit en controle willen over hun menuontwerpelementen. Je hebt echter goede CSS- kennis nodig om de beste resultaten uit deze methode te halen.
Stap 1: Stel uw stagingomgeving in
Voordat u wijzigingen aan uw site aanbrengt, kunt u het beste in een veilige ruimte werken waar u kunt experimenteren zonder dat dit gevolgen heeft voor de live site. U kunt elke beheerde WordPress-hosting die een stagingtool biedt waarmee u een kopie van uw website kunt maken om eerst de wijzigingen te testen.
Een staging-omgeving maken:
- Log in op hPanel en selecteer Websites .
- Kies uw domein en klik op Beheren .
- Ga naar WordPress → Staging in het linkermenu.
- Klik op Staging maken onder het tabblad Staging en volg de aanwijzingen om een subdomein in te stellen voor uw testomgeving.
Leren: Hoe ongebruikte CSS in WordPress verwijderen?
Stap 2: Open en bewerk het stylesheet van uw thema
Zodra u uw testsite gereed heeft, kunt u veilig de stylesheet van uw thema bewerken om uw menu aan te passen.
Opmerking : maak indien mogelijk een onderliggend thema in plaats van het hoofdthema te bewerken om te voorkomen dat uw aanpassingen verloren gaan wanneer het thema wordt bijgewerkt.
Om toegang te krijgen tot het stylesheet in uw hostingbestandsbeheerder:
- Ga naar Bestanden → Bestandsbeheer in hPanel.
- Selecteer public_html en navigeer vervolgens naar Staging → wp_content → thema's .
- Open de map van uw thema en dubbelklik op style.css om deze te bewerken.
Voeg deze code toe om submenu-items zichtbaar te maken als u er met de muis overheen beweegt:
| .main-navigation ul: zweef li ul,.main-navigation ul: zweef li ul li ul {display: erven;} |
Leer: hoe u de staging-site kunt laten leven zonder de database in WordPress te overschrijven
Stap 3: Pas uw Mega-menu aan
Laten we het megamenu nu een unieke stijl geven. Hier zijn een paar CSS-fragmenten om u op weg te helpen:
Maak kolommen binnen het megamenu:
| .mega-menu li.mega-menu-kolom {breedte: 25%; /* voor een lay-out met 4 kolommen */float: left;padding: 10px;} |
Pas de kleur, opvulling en tekststijl van menu-items aan:
| .mega-menu ul.mega-sub-menu li a {kleur: #555; opvulling: 8px 15px; display: blok; tekstdecoratie: geen;} |
Optimaliseren voor mobiel:
| @mediascherm en (max-breedte: 767px) {.mega-menu li.mega-menu-column {breedte: 100%;float: geen;}} |
Deze fragmenten zijn een goed startpunt, maar zorg ervoor dat u ze test en zo nodig aanpast, zodat ze passen bij het ontwerp van uw site. Zodra u tevreden bent met uw aanpassingen, kunt u uw wijzigingen van de testsite naar uw live site pushen.
Leren: hoe kan ik voorkomen dat mediaquery's niet werken in WordPress?
Beste Mega Menu-plug-ins om een best uitziend Mega-menu te maken in WordPress
We wedden dat je nu volledig bent uitgerust met de kennis om een megamenu in WordPress te maken, met een plug-in of met behulp van CSS-code. Het gebruik van een plug-in is echter zonder twijfel de beste manier om een megamenu in WordPress te maken. Het is gemakkelijk, minder tijdrovend en het beste voor WordPress-beginners .
Daarom hebben we een aantal topplug-ins uitgekozen die u kunt gebruiken om naast de Max Mega Menu-plug-in een mooier megamenu voor uw WordPress-website te maken.
UberMenu
UberMenu is een topkeuze onder WordPress-gebruikers voor het toevoegen van flexibele, responsieve megamenu's en vervolgmenu's. Met deze premium plug-in heeft u volledige controle over overgangen, lettertypen, menuoriëntatie (horizontaal of verticaal) en achtergrondkleur. Bovendien worden de zeer aanpasbare opties allemaal beheerd via een eenvoudig te gebruiken beheerdersdashboard.
Hier kunt u kolombreedtes instellen, widgets, shortcodes en aangepaste HTML toevoegen en wijzigingen in realtime bekijken met de live preview-modus. UberMenu is een krachtig hulpmiddel voor iedereen die een aantrekkelijke, dynamische menu-indeling wil creëren.
QuadMenu
QuadMenu is een open-source WordPress-megamenu-plug-in boordevol opties en thema's. Met de gratis versie kun je een navigatiewidget toevoegen, aangepaste breekpunten instellen voor het samenvouwen van menu's en diverse menustijlen maken, zoals off-canvas, sticky, horizontale en verticale megamenu's. Deze flexibiliteit maakt het eenvoudig om een navigatie-ervaring te ontwerpen die past bij de stijl van uw site, zonder dat u geld hoeft uit te geven aan een premiumoptie.
GutenKit
GutenKit is een krachtige Gutenberg-plug-in die het maken van een megamenu met behulp van blokken vereenvoudigt. Het wordt geleverd met kant-en-klare patronen en sjablonen, zodat u direct een ontwerp kunt kiezen en dit naar wens kunt aanpassen.
Met volledige controle over inhoud, stijl en geavanceerde aanpassingen maakt de gebruiksvriendelijke interface van GutenKit het een uitstekende keuze voor degenen die sites willen bouwen en verfijnen in een blokeditor.
Naast de megamenufunctie biedt het meer dan 60 blokken en 25+ modules voor veelzijdige aanpassingen binnen Gutenberg – een ideaal alternatief voor ElementsKit voor op blokken gebaseerde sites.
JetMenu
JetMenu is een premium plug-in voor het maken van interactieve WordPress-megamenu's met inhoudrijke opties zoals afbeeldingen, video's en audio. Voor $ 43 per jaar krijg je toegang tot een drag-and-drop-builder en meerdere menu-indelingen, waaronder hamburger-, horizontale en verticale oriëntaties.
Een opvallende functie is de presetmanager, waarmee u meerdere sjablonen voor verschillende menu's kunt opslaan, ideaal voor sites die flexibele, aantrekkelijke navigatieopties nodig hebben.
Heldenmenu
Hero Menu van Hero Plugins is een opvallende premiumoptie voor het maken van aangepaste WordPress-menu's. Het beschikt over een soepele drag-and-drop-builder met een kleurgecodeerde interface, waardoor het gemakkelijk wordt om de hiërarchie van menu-items te organiseren en te visualiseren. Het toevoegen van speciale elementen zoals een logo, zoekbalk of pictogrammen is net zo eenvoudig als een klik.
Hero Menu wordt ook geleverd met meerdere menustijlen en 60 vooraf ingestelde kleurencombinaties, waardoor u tijd bespaart bij het ontwerpen. Menu's gemaakt met Hero Menu zijn volledig responsief en compatibel met WooCommerce, waardoor het een uitstekende keuze is voor e-commercesites.
Bovendien is het getest om naadloos samen te werken met populaire WordPress-thema's zoals Divi en Avada, waardoor een soepele integratie met het ontwerp van uw site wordt gegarandeerd.
Inpakken
Nu u weet hoe u een megamenu in WordPress kunt maken, zelfs als uw thema er geen heeft, bent u klaar om het navigeren op uw inhoudrijke site een fluitje van een cent te maken. Megamenu's zijn perfect voor het organiseren van grote hoeveelheden inhoud, zodat bezoekers gemakkelijker kunnen vinden wat ze zoeken, wat de algehele gebruikerservaring verbetert.
Voordat u uw WordPress-site lanceert, is het van cruciaal belang dat de navigatie natuurlijk en intuïtief aanvoelt. Voor e-commercesites of websites met veel pagina's kan een megamenu een gamechanger zijn. In tegenstelling tot standaardmenu's kunt u met megamenu's complexe informatie op een duidelijke en visueel aantrekkelijke manier ordenen.
