Het toevoegen van een CSS class aan een menu-item in een WordPress website kan handig zijn voor het opmaken en stylen van specifieke menu-items. Bijvoorbeeld, je kunt de laatste menu-item omvormen tot een call-to-action (CTA) knop om het beter te laten opvallen.
Waarom Custom CSS toevoegen?
CSS classes geven je de flexibiliteit om individuele menu-items aan te passen zonder dat dit invloed heeft op andere delen van het menu. Dit is vooral nuttig wanneer je een bepaald item wilt onderscheiden, zoals een CTA-knop die gebruikers aanzet tot actie. Een duidelijke, aantrekkelijke CTA-knop kan de aandacht van je bezoekers trekken en de betrokkenheid verhogen.
CSS class toevoegen aan een menu item in WordPress
- Ga naar het menu: Log in op je WordPress-dashboard en ga naar “Weergave” > “Menu’s”.
- Menu-instellingen: Klik op het menu waaraan je de CSS class wilt toevoegen.
- Scherminstellingen: Bovenaan de pagina vind je de “Schermopties“. Klik hierop en zorg ervoor dat de optie “CSS classes” is aangevinkt. Hierdoor wordt een veld voor CSS classes zichtbaar bij de menu-items.
- CSS class toevoegen: Scroll naar het menu-item waaraan je de CSS class wilt toevoegen en klik erop om de instellingen uit te vouwen. Je ziet nu een veld genaamd “CSS classes (optioneel)”. Voeg hier de gewenste class toe, bijvoorbeeld “cta-knop”.
- Menu opslaan: Klik op “Menu opslaan” om je wijzigingen toe te passen.
CSS class stijlen
Nu je de CSS class hebt toegevoegd, kun je deze stylen. Voeg jouw eigen CSS-code toe aan je WordPress thema of aan de extra CSS-sectie in de Customizer: