Hoe maak je een mobiel-geschikt responsief WordPress menu?

Wil je een mobiel-ready responsive WordPress menu maken? Meer dan de helft van al het websiteverkeer komt van mobiele apparaten. Als je navigatiemenu niet goed werkt op smartphones en tablets, dan kan een groot deel van je publiek moeite hebben om de weg op je site te vinden.

In deze handleiding laten we je zien hoe je een mobiel responsief WordPress menu kunt maken. Het is wel handig als je eerst de basis van een WordPress menu weet. Lees daarvoor de handleiding “WordPress menu maken”:

Waarom een mobiel aanpasbaar WordPress menu maken?

Een goed ontworpen navigatiemenu helpt bezoekers hun weg te vinden op je website. Het is echter niet omdat je menu er goed uitziet op desktop computers, dat het er ook goed uitziet op smartphones en tablets.

Mobiele gebruikers maken meer dan 60% uit van al het internetverkeer.

Als je menu er dus niet goed uitziet of niet goed werkt op mobiele apparaten, loop je het risico dat je de helft van je publiek kwijtraakt. Dit maakt het moeilijk om belangrijke doelen te bereiken, zoals het uitbreiden van je e-maillijst, het verkrijgen van verkoop en het laten groeien van je bedrijf.

Dit gezegd hebbende, laten we eens kijken hoe je een mobiel responsief menu kunt maken dat er geweldig uitziet op smartphones en tablets. Gebruik de snelkoppelingen hieronder om direct naar de methode te gaan die je wilt gebruiken.

Methode 1: Mobiel menu met WordPress thema

Kijk of je WordPress thema de mogelijkheid heeft om een goed responsive menu te maken. Zoniet dan kun je beter switchen. Alle goede thema’s hebben de optie wel. Bekijk evt tips voor de beste thema’s:

Apart mobiel menu maken

Om een apart mobiel menu te maken doe je het volgende:

• Ga naar WP Dashboard > Weergave > Menu
• Maak een nieuw menu met de menu-items voor mobiel
• Ga dan naar het tabje “Locaties beheren”. Je ziet dan zoiets als hieronder:

De opties die je nu ziet zijn afhankelijk van je WordPress thema.
Je ziet wel dat er een primair menu is. Dit is je menu voor desktop.

In de afbeelding hierboven is het thema Astra gebruikt. Dan heb je de optie “menu buiten het canvas”. Dit is je mobiele menu voor op telefoons. Selecteer hier het menu dat je voor mobiel hebt gemaakt.

Controleer op je telefoon of smartphone of het werkt.

Methode 2: Maak een mobiel-geschikt menu met slider

Een responsief slider is een navigatiemenu dat op het scherm schuift wanneer een bezoeker op een toggle tikt of klikt.

Een schuifbaar zijpaneelmenu in WordPress
Op deze manier is het menu altijd binnen handbereik, maar neemt het standaard geen ruimte in op het scherm. Dit is vooral belangrijk omdat smartphones en tablets veel kleinere schermen hebben dan desktopcomputers.

Als het menu voortdurend wordt uitgebreid, dan kan een mobiele gebruiker de links per ongeluk activeren met het aanraakscherm van zijn apparaat. Daarom zijn schuifpanelen een goede keuze voor een mobiel menu.

De eenvoudigste manier om een mobiel-geschikt diapaneel toe te voegen is door Responsive Menu te gebruiken.

Responsive Menu – Create Mobile-Friendly Menu

Methode 3. Maak een mobiel-geschikt schermvullend menu

Een andere optie is om een fullscreen responsive menu toe te voegen. Dit is een menu dat zich automatisch aanpast aan verschillende schermformaten, zodat het navigatiemenu er altijd goed uitziet, ongeacht het apparaat dat de bezoeker gebruikt.

Omdat het menu alle beschikbare ruimte inneemt, is het makkelijker navigeren op smartphones en tablets, hoe klein het scherm ook is.

De makkelijkste manier om een schermvullend menu te maken is door FullScreen Menu – Mobile Friendly and Responsive te gebruiken. Met deze plugin kun je een schermvullend menu maken voor alleen mobiele apparaten, of je kunt hetzelfde menu weergeven op smartphones, tablets en desktopcomputers, zodat alle bezoekers dezelfde ervaring hebben.

Fullscreen Menu

Methode 4. Gebruik betaalde plugin voor menu

Gebruik betaalde plugin en service voor menu:
https://demo.responsive.menu

Of gebruik de Ubermenu plugin:

Methode 5. Handmatig menu maken met HTML en CSS

Je kan ook handmatig menu maken met HTML. Moet je wel ervaring hebben. Hier enkele tips. Je kan dit ook leren in een WordPress training.

See the Pen Hamburger Menu – Base File by Kevin (@kevinpowell) on CodePen.

https://code.tutsplus.com/how-to-make-a-drop-down-menu-in-wordpress–cms-32991t

https://stackoverflow.com/questions/73181158/how-to-use-javascript-in-the-wordpress-menu

https://github.com/WebDevSimplified/css-only-hamburger-menu/commit/39ae86119c00371c369e3fdee135b728bafd74b5

Mobiel menu toevoegen aan landingspagina’s

Als je een landingspagina of verkooppagina maakt, wil je dat het ontwerp er op mobiele apparaten net zo goed uitziet als op desktop.

Met dat in gedachten raden we je aan de pagina te maken met SeedProd. SeedProd is de prima plugin voor paginabouwers en wordt geleverd met meer dan 180 professioneel ontworpen sjablonen.

Een sjabloon kiezen voor menu

Nadat je een ontwerp hebt gemaakt met SeedProd, kun je een mobiel menu aan de pagina toevoegen met behulp van het kant-en-klare Nav Menu-blok van SeedProd. Met dit blok kun je aparte menu’s maken voor zowel menuapparaten als desktop.

Op deze manier kun je een andere lay-out gebruiken en zelfs verschillende links tonen, afhankelijk van het apparaat van de gebruiker.