Menu maken in wordpress | dropdown volgorde tekst kleur aanpassen

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 handleing hoe je WordPress menu kan maken en aanpassen of wijzigen.

1 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 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 2020

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 ‘usability’-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.

Veel content?

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:


2 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.


3 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 of lettergrootte veranderen in WordPress menu

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. Een class 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 custom Css van je thema te plaatsen. Lees indien nodig de volgende handleiding:
Handleding CSS en Classes maken
Wil je je tekst een kleur geven, gebruik dan deze CSS code:


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

Wil je je lettergrootte veranderen, gebruik dan deze CSS code:

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