Wordpress Menu maken dropdown volgorde tekst kleur

Het WordPress hoofdmenu kun je heel simpel zelf aanpassen. In deze handleiding leer je je menu maken voor desktop en mobiel. Plus handige tips.

Logo cursus traing wordpress

WordPress Menu maken dropdown volgorde tekst kleur

WordPress Menu maken in simpele stappen

In WordPress kun je zelf menu’s maken. Je kunt je menu vullen met links naar pagina’s, berichten, categorieën en eventueel aangepaste links.

Lees in deze handleiding hoe je WordPress menu kan maken en aanpassen of wijzigen.

Maak indeling van je menu op papier

10-20 minuten

Maak op papier, een A4-tje, een schetsje van je website met onderverdeling. Je kan ook het onderstaande schema gebruiken dat door ons is ontwikkeld. Het is handig om je menu als uitgangspunt te nemen voor de structuur van je website. Gebruik het horizontale grijze balkje. De andere vakjes hoef je niet in te vullen. ‘Home’ en ‘Contact’ zijn al ingevuld. Je hoeft dit natuurlijk niet te gebruiken, maar het is een goed vertrekpunt.
handleiding cursus wordpress website basisopzet

Tips voor het maken van je WordPress menu

Dropdown menu maken in WordPress

Als je een uitgebreide website hebt, kan je menu meerdere niveaus hebben. Dan kun je dus ook gebruikmaken van een zogenaamde ‘drop down’ menu. Je hebt dan een menu-item met daaronder een sub-menu met meerdere menu items.

WordPress menu Trend in 2025

De trend in webdesignland anno het jaar 0 A.D. (After Distancing) is dat de menu’s steeds simpeler worden. Dus gewoon 1 hoofdmenu, zonder dropdown. Dit onder invloed van mobiele telefoons.

Waarom een simpel WordPress menu gebruiken?

Een als het even kan een simpel WordPress menu gebruiken? Om de volgende redenen:

  • Het menu van je WordPress website is overzichtelijker met minder menu-items. Het menu neemt ook minder ruimte in.
  • Bezoekers hebben steeds minder tijd om veel te zoeken en maken sneller intuïtief keuzes.
  • Bij teveel items is uit onderzoek gebleken dat teveel menu-items een vorm van keuzestress opleveren bij de website-bezoeker. Vanuit zogenaamd ‘‘-oogpunt kun je beter minder links in je menu hebben.
    Lees meer over usabilty en gebruikerservaring

Gebruik maximaal 7 menu-items in WordPress

Tip: gebruik maximaal 7 menu-items. Dus het liefst met 5, 6 of 7 links. Bij meer items wordt het menu te groot. Bij een grotere website moet je bij je webdesign dus goed nadenken hoe je je menu zo efficient mogelijk indeelt.

Waarom maximaal 7 menu-items in je WordPress-menu

In een studie uit 1956 ontdekte de Amerikaanse psycholoog George A. Miller dat mensen een gemiddelde van 7 informatie-eenheden plus of min 2 in het kortetermijngeheugen nauwkeurig kunnen opslaan. Meer dan 7 eenheden wordt lastig, helemaal als we ouder worden.

Ons brein kan de complexiteit dus alleen begrijpen als het wordt opgedeeld in kleine, gemakkelijk te begrijpen eenheden. Je leert hier overigens meer over in een usability en training:

Te veel inhoud in je menu of wordt je WordPress menu te groot?

Heb je veel content en web-pagina’s dan kun je binnen je website ‘landingpagina’s’ maken van waaruit je verder door je website kunt navigeren. Je kan ook je hoofdmenu opsplitsen in 2 menu’s die je bovenin je website toont. Een voorbeeld vind je op een website die ik een keer gemaakt heb:
Voorbeeld 2 menu’s in de header op www.exsion.nl


Hoe je dit doet leer je tijdens een WordPress cursus:


Menu maken in WordPress

10 minuten

Ga in WordPress naar Weergave > Menu’s (of in de Engelse versie naar Appearance > Menus). Hier een nieuw menu aanmaken of een bestaand WordPress menu aanpassen.

Klik op ‘een nieuw menu aanmaken’. Je komt in het volgende scherm. Vul een naam in voor je menu, meestal ‘hoofdmenu’. Klik vervolgens op ‘Menu aanmaken’. Er wordt nu een menu aangemaakt in WordPress dat je zelf kan vullen met de juiste webpagina’s. Dit nieuwe menu is nog niet direct zichtbaar op je website.

WordPress menu activeren

Je moet je menu nog wel activeren. Vink bij ‘Locaties tonen’ je Hoofdmenu aan. Menu opslaan en dan moet het werken.

Pagina’s of berichten toevoegen in WordPress menu

Pagina’s of berichten toevoegen in je WordPress menu doe je door links pagina’s uit te klappen. Selecteer je pagina’s en klik op ‘aan menu toevoegen’. Menu opslaan.

Je menu ziet er dan zo uit in WordPress:

Submenu of drop down menu maken in WordPress

Zet webpagina’s in je menu en sleep ze een klein stukje naar rechts, zoals hieronder bij ‘Projects’ en ‘Services’. Dit wordt je dropdown. Vergeet niet op te slaan om het te bekijken.

Categorieën toevoegen aan WordPress menu

Je kan ook categorieën toevoegen aan WordPress menu. Werkt hetzelfde als pagina’s alleen dan met categorieën. Klik wel links het tabje ‘categorieën’ open. Selecteer en voeg categorieën toe.

WordPress menu activeren of ander menu selecteren

Je kan eventueel een ander menu selecteren als dit nodig is. Dit kan bij het 2e tabje ‘Locaties beheren’. Het is afhankelijk van het thema wat je hier kan invullen en selecteren.


Apart mobiel menu maken in WordPress

Om een mobiel menu te maken dat anders is dan je menu voor desktop doe je het volgende:

  • Ga eerst 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:
responsive mobiel menu smartphone mobile maken wordpress website
mobiel menu smartphone mobile maken wordpress website

De opties die je nu ziet zijn afhankelijk van je .
Je ziet in de afbeelding 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”. Soms staat er ook “mobile menu”. Dit is je mobiele menu voor op telefoons. Selecteer hier het menu dat je voor mobiel hebt gemaakt en opslaan. Controleer op je telefoon of smartphone of het werkt.

Gevorderde handelingen bij WordPress menu’s

Tekst wijzigen of veranderen in WordPress menu

Je kan tekst wijzigen of veranderen in je WordPress menu. Klap een menu-item uit en verander de naam bij ‘navigatielabel’. Verander de naam van je menu onderdeel. Zoals hieronder bij contact:

Tekstkleur, kleur, lettertype, lettergrootte menu veranderen

Menu aanpassen in WordPress thema

Je kunt je menu’s ook aanpassen in de WordPress Customizer. Deze vind je onder Weergave > Customizer.  Het is afhankelijk van je thema hoe dit eruit ziet. Het voordeel van de Customizer is dat je direct kunt zien hoe je wijzigingen er uit zien op je website. Pas als je  op “Publiceren” klikt werkt het ook echt en staat je menu live.

CSS-classes aan je menu-item toevoegen

Je kunt ook CSS-classes aan je menu-items toevoegen. Ga helemaal rechtsbovenin naar ‘Scherminstellingen’ en vink je ‘CSS-classes’ aan (zie screenshot hieronder).

CSS classes toevoegen in menu-item

Je kunt dan CSS classes aan je menu-item toevoegen. Dit is handig als je sommige menu items er anders wilt laten uitzien.

Een is een soort stijl. In het bovenstaande voorbeeld heb ik de class ‘jouw-menu-stijl’ toegevoegd aan het menu-item ‘Neem contact op’.

Er gebeurt niet direct wat wanneer je een dergelijke class toevoegt. Je moet de volgende stap nog doen in deze handleiding.

CSS classes toevoegen in WordPress thema

De onderstaande code dien je nog in de van je thema te plaatsen. Lees indien nodig de volgende handleiding:
Handleiding CSS en Classes maken

Lettertype in menu aanpasssen met class

Wil je je tekst een geven, gebruik dan deze CSS code:

 .jouw-menu-stijl {
color: #ffffff;
}

Wil je je veranderen, gebruik dan deze CSS code:

 .jouw-menu-stijl {
 font-size: 18px;
 } 

Meer informatie en tips over WordPress menu

Meer informatie en tips over WordPress menu leer je tijdens een WordPress training of cursus:


Succes met het maken van je menu in WordPress!


[aw_icon icon="icon: book" color="#0ba1bf" text_color="#333333" size="28" shape_size="20" radius="36" text_size="16" margin="0px 1px 1px 0px" url="https://www.cursuswp.com/groepscursus-wp-beginners-basis-training-workshop/" target="blank"][/aw_icon]

Meer weten over Wordpress Menu maken dropdown volgorde tekst kleurof info?

Wil je meer informatie? Veel cursisten met interesse in Wordpress Menu maken dropdown volgorde tekst kleur bekeken ook de onderstaande handleidingen en artikelen:


[aw_icon icon="icon: graduation-cap" color="#0ba1bf" text_color="#333333" size="28" shape_size="20" radius="36" text_size="16" margin="0px 1px 1px 0px" url="https://www.cursuswp.com/groepscursus-wp-beginners-basis-training-workshop/" target="blank"][/aw_icon]

WordPress training onderhoud

De meeste problemen met WordPress sites en webshops ontstaan door een combinatie van factoren. Van webhosting tot de inrichting van je site. Ik heb de laatste 15 jaar vele WordPress websites vast zien lopen, langzaam of gehackt zien worden door de verkeerde aanpak.

Deze problemen, ellende en schade is te vermijden door de juiste aanpak en strategie. Het is even werk en vergt een investering in tijd, geld en energie maar daarna heb je gegarandeerd minder problemen, meer plezier, meer controle en een betere WordPress website.

WordPress cursus onderhoud en beheer

Leer hoe je websites beter kan beheren en beveiligen in de speciale onderhoudscursus:
WordPress cursus Onderhoud en beheer

WordPress Bootcamp

Leer hoe je je website sneller en gestroomlijnder kan bouwen in de WordPress Bootcamp:
Web-development in WordPress Bootcamp

[aw_icon icon="icon: question" color="#0ba1bf" text_color="#333333" size="28" shape_size="20" radius="36" text_size="16" margin="0px 1px 1px 0px" url="https://www.cursuswp.com/groepscursus-wp-beginners-basis-training-workshop/" target="blank"][/aw_icon]

Nog vragen over Wordpress Menu maken dropdown volgorde tekst kleur?

Neem eventueel contact op met Arthur als je nog vragen hebt over onderhoud, beveiliging, Wordpress Menu maken dropdown volgorde tekst kleur en websites.

WordPress expert

Arthur Wentzel, web-developer

06 20 83 05 83

Scroll naar boven