Nadat je een menu hebt aangemaakt en er links aan hebt toegevoegd, wil je misschien het uiterlijk van het menu aanpassen. In deze handleiding behandelen we veelvoorkomende wijzigingen die je aan het menuontwerp kunt aanbrengen.
Met site-editorthema’s kun je het menuontwerp volledig aanpassen in de Editor onder Weergave in je dashboard. Klassieke thema’s hebben beperkte opties voor het menuontwerp, die je vindt in het Aanpassingsmenu onder Weergave in je dashboard.
Om te bepalen welk gedeelte van deze handleiding je moet volgen, ga je naar je WordPress.com-dashboard en kijk je onder Weergave aan de linkerkant. Zie je Editor, volg dan het gedeelte over de site-editor in deze handleiding. Zo niet, volg dan de instructies voor het Aanpassingsmenu.
Als je thema de site-editor gebruikt (d.w.z. je ziet Weergave → Editor in je dashboard), kun je het menuontwerp beheren via de instellingen van het Navigatieblok door de volgende stappen te volgen:
- Ga vanuit het dashboard van je site naar Weergave → Editor.
- Selecteer Templates en kies een template dat je menu bevat, zoals Home of Voorpagina.
- Open de Lijstweergave in de linkerbovenhoek van je scherm (dat is het pictogram dat lijkt op drie horizontale lijnen boven elkaar).
- Selecteer het Navigatieblok in de Lijstweergave.
- Als je geen Navigatieblok ziet, kun je er een aanmaken.
- Bekijk de instellingen van het Navigatieblok aan de rechterkant van het scherm.
- Pas de stijlen van het Navigatieblok aan via het instellingenpictogram of het stijlenpictogram.
- Klik op de knop Opslaan om je wijzigingen op te slaan.
Lees meer over het gebruik van elke instelling in onze handleiding voor de instellingen van het Navigatieblok, waaronder:
- Stijlen van het Navigatieblok, zoals kleur, typografie en afmetingen.
- Lay-outinstellingen van het Navigatieblok, zoals uitlijning, oriëntatie en menuweergave.
In deze video zie je hoe je het Navigatieblok opent en de instellingen en stijlen aanpast. Deze functie is beschikbaar in onze volledig aanpasbare site-editorthema’s. Je kunt de video versnellen of vertragen met de knoppen rechtsonder nadat je op Afspelen hebt geklikt.
Dit gedeelte is van toepassing op sites die zijn gemaakt met de AI-websitebouwer (alle betaalde abonnementen) of sites waarop de WordPress-agent is ingeschakeld (alle betaalde abonnementen). Open de WordPress-agent door op het AI-pictogram (een vierhoekige ster) onderaan het scherm te klikken.
De WordPress-agent kan rechtstreeks wijzigingen aanbrengen in het uiterlijk en gedrag van je menu. Hier zijn een paar dingen die je kunt vragen:
- “Pas de kleur van mijn navigatiemenu aan zodat het bij mijn merk past.”
- “Stel mijn uitklapmenu’s in zodat ze openen bij een klik in plaats van bij hover.”
- “Toon mijn menu als hamburgermenu op alle schermformaten.”
- “Voeg een CSS-klasse met de naam ‘featured-link’ toe aan het menu-item Contact.”
In alle site-editorthema’s kun je de positie van het menu wijzigen. Met site-editorthema’s heb je in de Editor onder Weergave volledige controle over de lay-out, inclusief de locatie van het menu op je site.
Hoewel de menupositie in een site-editorthema volledig aanpasbaar is, kan het handig zijn om eerst een thema te zoeken dat het menu op een positie weergeeft die je bevalt. Lees meer over hoe je van thema wisselt.
Als je al een site-editorthema hebt gekozen en de positie van het menu wilt wijzigen, heb je een aantal opties:
- Lees hoe je het Navigatieblok selecteert en verplaatst, of ga direct naar de instructievideo.
- Voeg een nieuw menu toe aan je template.
- Voeg sitenavigatie toe aan een individuele pagina of bericht met het Paginalijstblok.
- Voeg navigatie binnen een pagina of bericht toe met het Inhoudsopgaveblok.
Als je een thema gebruikt dat de Editor onder Weergave in je dashboard niet heeft, bekijk dan onze volledig aanpasbare site-editorthema’s.
Op desktopschermen wordt een menu meestal weergegeven als een lijst met tekstlinks op één regel. Op kleinere schermen (tablet en mobiele apparaten) is er onvoldoende ruimte om alle tekstlinks weer te geven zodat mobiele bezoekers er eenvoudig op kunnen tikken.
In plaats daarvan worden de menu-items vaak ingeklapt achter een knop die een “overlay”- of “hamburger”-menu wordt genoemd (omdat de drie horizontale lijnen op een hamburger lijken).
In de instellingen van het Navigatieblok in de site-editor kun je de weergave van het overlay-menu aanpassen. Volg deze stappen om de weergave van het overlay-menu aan te passen:
- Ga vanuit het dashboard van je site naar Weergave → Editor.
- Selecteer Templates en kies een template dat je menu bevat, zoals Startpagina of Voorpagina.
- Open de Lijstweergave in de linkerbovenhoek van je scherm (dat is het pictogram dat lijkt op drie horizontale lijnen boven elkaar).
- Selecteer het Navigatieblok in de Lijstweergave.
- Bekijk de instellingen van het Navigatieblok aan de rechterkant van het scherm.
- Klik op het pictogram Instellingen (het tandwielpictogram).
- Kies onder Weergave je instellingen voor het overlay-menu:
- Mobiel: De standaardinstelling. Het overlay-menu wordt alleen weergegeven op schermen met een mobiel formaat.
- Uit: Geen overlay-menu weergeven.
- Altijd: Het overlay-menu altijd weergeven, ongeacht het schermformaat.
- Met de overlay-template kun je het schermvullende mobiele overlay-menu aanpassen. Bekijk onze handleiding over het aanpassen van de navigatie-overlay.
- Klik op de knop “Opslaan” om je wijzigingen te bewaren.
Internetgebruikers zijn gewend aan een pictogram of hamburgermenu op mobiele apparaten. Als je het desktopmenu weergeeft (dus het overlay-menu uitschakelt), kan het voor bezoekers lastig worden om op mobiele apparaten door je site te navigeren.
Bekijk de handleiding over het Navigatieblok voor meer informatie over alle functies van dit blok.
Klassieke thema’s en thema’s van derden kunnen hun eigen standaardinstellingen hebben voor de weergave van het menu op mobiele apparaten. Raadpleeg de documentatie van het thema dat je hebt gekozen voor meer informatie.
Je kunt instellen of een dropdown-menu opent wanneer een bezoeker over een menu-item hovert of erop klikt, of dat het altijd zichtbaar blijft.
Volg deze stappen om de zichtbaarheid van submenu’s in te stellen:
- Ga vanuit het dashboard van je site naar Weergave → Editor.
- Selecteer Templates en kies een template dat je menu bevat, zoals Startpagina of Voorpagina.
- Open de Lijstweergave in de linkerbovenhoek van je scherm.
- Selecteer je Navigatieblok.
- Klik in de zijbalk met blokinstellingen op het pictogram Instellingen (het tandwielpictogram).
- Zoek onder Weergave de instelling “Zichtbaarheid van submenu’s” en kies een van de volgende opties:
- Hover: Het dropdown-menu opent wanneer een bezoeker over het bovenliggende menu-item hovert. Je kunt eventueel de instelling uitschakelen om een pijltje naast het menu weer te geven.
- Klik: Het dropdown-menu opent wanneer een bezoeker op het bovenliggende menu-item klikt.
- Klik op de knop Opslaan om je wijzigingen te bewaren.
Dit gedeelte van de handleiding is van toepassing op sites met onze WordPress.com Persoonlijk-, Premium-, Business- en Commerce-abonnementen. Voor gratis sites kun je je abonnement upgraden om toegang te krijgen tot deze functie.
CSS-klassen zijn een geavanceerde menu-eigenschap waarmee je een CSS-klasse aan individuele menu-items kunt toevoegen.
Om te bepalen welk gedeelte van deze handleiding je moet volgen, ga je naar je WordPress.com-dashboard en kijk je onder Weergave aan de linkerkant. Als je Editor ziet, volg dan het gedeelte Blokthema’s van deze handleiding. Volg anders de instructies voor Klassieke thema’s.
Volg deze stappen om een CSS-klasse toe te voegen in de site-editor:
- Ga vanuit het dashboard van je site naar Weergave → Editor.
- Selecteer Templates en kies een template dat je menu bevat, zoals Startpagina of Voorpagina.
- Open de Lijstweergave in de linkerbovenhoek van je scherm (dat is het pictogram dat lijkt op drie horizontale lijnen boven elkaar).
- Selecteer het Navigatieblok in de Lijstweergave.
- Als je geen Navigatieblok ziet, kun je er een aanmaken.
- Bekijk de instellingen van het Navigatieblok aan de rechterkant van het scherm.
- Klik op het tandwielpictogram ⚙️ voor Instellingen en open het gedeelte “Geavanceerd”.
- Voeg je CSS-klasse toe.
Je kunt ook een CSS-klasse instellen voor afzonderlijke links in het Navigatieblok. Selecteer de afzonderlijke link voordat je naar Geavanceerd gaat.
Bekijk onze handleiding over het Navigatieblok voor meer informatie over alle functies van dit blok.
Meer informatie over het toevoegen van aangepaste CSS.
Ondersteuning 