Het uiterlijk van je website bepaalt voor een groot deel de eerste indruk die een bezoeker krijgt van je bedrijf. Een van de belangrijkste onderdelen van elke website is het navigatiemenu, omdat dit de wegwijzer is voor je potentiële klanten. Soms wil je echter net dat beetje extra doen, zoals een specifieke knop in je menu een opvallende kleur geven of een uniek lettertype toewijzen aan een enkel item. Hoewel de standaardinstellingen van de populaire paginabouwer veel opties bieden, loop je soms tegen grenzen aan. Gelukkig is er een krachtige methode om volledige controle te krijgen over elk afzonderlijk onderdeel van je navigatie. In dit artikel ontdek je hoe je met een kleine technische aanpassing jouw menu naar een professioneel niveau tilt.

Wat zijn css classes en waarom zijn ze handig voor je menu?

Voordat we diep in de praktijk duiken, is het essentieel om te begrijpen wat we precies gaan doen. De term css staat voor cascading style sheets. Dit is de taal die wordt gebruikt om het uiterlijk van webpagina’s te bepalen. Zie het als de verf en de decoratie van een huis, terwijl de structuur (html) de muren en het dak vormt. Een class is simpelweg een label of een naam die je aan een specifiek onderdeel van je website geeft. Door een menu-item een eigen naam te geven, kun je tegen de browser zeggen: dit specifieke item met deze naam moet er anders uitzien dan de rest.

Dit is bijzonder nuttig wanneer je bijvoorbeeld een call to action wilt maken in je navigatiebalk. Denk aan een knop met de tekst ‘neem contact op’ die eruit moet springen tussen de gewone tekstlinks. Door gebruik te maken van deze techniek hoef je niet alle menu-items aan te passen, maar richt je je specifiek op dat ene onderdeel. Dit zorgt voor een schone code en een snellere website, wat weer goed is voor de gebruikerservaring.

Stap 1: css classes activeren in wordpress

Standaard is de optie om namen aan menu-items te geven verborgen in de achterkant van je website. Veel beheerders weten niet eens dat deze functie bestaat, omdat wordpress de interface zo overzichtelijk mogelijk wil houden voor beginners. Om te beginnen moet je deze optie zichtbaar maken.

• Log in op je dashboard en navigeer naar weergave en vervolgens naar menu’s.
• Kijk helemaal rechtsboven in je scherm naar het tabblad scherminstellingen.
• Klik op dit tabblad om een uitklapmenu te openen met verschillende vinkjes.
• Zoek naar de optie css-classes onder het kopje ‘geavanceerde menu-eigenschappen tonen’ en vink deze aan.
• Sluit de scherminstellingen door er nogmaals op te klikken.

Nu je deze functie hebt geactiveerd, zul je zien dat er een nieuw invoerveld is verschenen bij elk menu-item dat je openklapt. Dit veld stelt je in staat om een unieke naam in te vullen die we later gaan gebruiken voor de vormgeving.

Stap 2: een unieke naam geven aan je menu item

Nu de voorbereiding is getroffen, is het tijd om daadwerkelijk een label toe te kennen. Stel dat je van de link ‘gratis advies’ een opvallende knop wilt maken. Je klapt dit item open in je menu-overzicht en zoekt naar het veld genaamd css-classes (optioneel). Hier vul je een naam in, bijvoorbeeld menu-knop-opvallend. Het is belangrijk dat je hier geen spaties gebruikt en geen vreemde tekens. Gebruik bij voorkeur kleine letters en koppeltekens om woorden te scheiden.

Vergeet na het invullen van de naam niet om op de blauwe knop menu opslaan te klikken. Zonder deze actie worden je wijzigingen niet doorgevoerd en zal de code die we straks gaan schrijven niet werken. Het mooie van deze methode is dat je dezelfde naam aan meerdere items kunt geven als je wilt dat ze er allemaal hetzelfde uitzien, of juist unieke namen voor verschillende stijlen.

Stap 3: de styling toepassen in de divi omgeving

Nu je het menu-item een naam hebt gegeven, moeten we de instructies schrijven voor hoe dit item eruit moet zien. Dit doen we met een klein stukje code. Je hoeft hiervoor geen programmeur te zijn; het is vaak een kwestie van kopiëren en aanpassen naar jouw smaak. Wanneer je werkt met de divi theme builder header voor je website, heb je verschillende plekken waar je deze code kunt plaatsen.

De meest gebruikelijke plek is bij de thema opties. Ga in je dashboard naar het menu van de bouwer en kies voor de algemene instellingen. Helemaal onderaan vind je een vak voor aangepaste css. Hier plak je de code die begint met een punt, gevolgd door de naam die je zojuist hebt gekozen. De punt vertelt de browser dat het om een class gaat.

.menu-knop-opvallend a {
    background-color: #ff6600;
    color: #ffffff !important;
    padding: 12px 25px !important;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}
.menu-knop-opvallend a:hover {
    background-color: #333333;
}

In dit voorbeeld hebben we een oranje achtergrondkleur gegeven, de tekst wit gemaakt en de hoeken een beetje afgerond. De term padding zorgt voor de ruimte rondom de tekst, waardoor het daadwerkelijk op een knop gaat lijken. De transition zorgt ervoor dat de kleurverandering soepel verloopt wanneer iemand met de muis over de knop beweegt.

Uitleg van technische termen voor beginners

Het kan zijn dat de bovenstaande code wat intimiderend overkomt als je nog nooit met techniek hebt gewerkt. Laten we daarom een paar termen kort toelichten zodat je precies begrijpt wat je aan het doen bent. Een hex-code is de code die begint met een hekje (#) en een kleur aanduidt. Elke kleur op het internet heeft zo’n unieke code. De term important wordt soms gebruikt om de browser te dwingen jouw instelling te gebruiken in plaats van de standaardinstellingen van het thema.

De toevoeging van de letter a na je class-naam is cruciaal. In de wereld van websites staat de ‘a’ voor een link. Omdat een menu-item altijd een link is, moeten we de styling toepassen op de link zelf en niet alleen op het lijstitem waar de link in zit. Als je dit vergeet, kan het zijn dat de achtergrondkleur wel verschijnt, maar dat de tekstkleur niet verandert of dat de knop niet goed klikbaar is.

Geavanceerde tips voor een professioneel resultaat

Als je eenmaal de basis onder de knie hebt, kun je gaan experimenteren met meer complexe vormen van vormgeving. Je kunt bijvoorbeeld een schaduw toevoegen aan je menu-item om het meer diepte te geven. Dit doe je met de eigenschap box-shadow. Ook kun je spelen met de letterafstand of zelfs een kleine animatie toevoegen die wordt geactiveerd zodra de pagina wordt geladen. Dit is vergelijkbaar met hoe je divi knoppen styling globaal aanpassen kunt in de instellingen, maar dan met nog meer vrijheid.

Een ander belangrijk aspect is de leesbaarheid. Zorg er altijd voor dat er voldoende contrast is tussen de tekstkleur en de achtergrondkleur van je nieuwe knop. Als je een donkere kleur gebruikt voor de achtergrond, kies dan voor een lichte tekstkleur. Dit is niet alleen prettig voor je bezoekers, maar het helpt ook bij de toegankelijkheid van je website voor mensen met een visuele beperking.

Mocht je de styling slechts op één specifieke pagina willen toepassen in plaats van op de gehele website, dan kun je de divi custom css toevoegen aan specifieke pagina optie gebruiken. Dit vind je in de instellingen van de pagina zelf onder het tabblad geavanceerd. Dit is handig voor landingspagina’s waar de navigatie een andere rol speelt dan op de rest van de site.

Het belang van consistentie in je ontwerp

Hoewel het verleidelijk is om elk menu-item een andere kleur te geven omdat het nu technisch mogelijk is, raden we aan om terughoudend te zijn. Een goed ontwerp kenmerkt zich door rust en een duidelijke hiërarchie. Gebruik de speciale styling alleen voor de allerbelangrijkste actie die je wilt dat een bezoeker onderneemt. Meestal is dit een contactopname, een offerteaanvraag of een inschrijving voor een nieuwsbrief.

Door consistent te blijven in je kleurgebruik en vormen, creëer je een betrouwbare uitstraling. Als je huisstijl bijvoorbeeld blauw en wit is, gebruik dan een afgeleide kleur voor je menu-knop die binnen dat palet past. Zo blijft je website een eenheid en voelt de bezoeker zich sneller op zijn gemak. Het gebruik van classes geeft je de kracht om dit tot in de kleinste details te perfectioneren.

Met de stappen in dit artikel heb je nu de tools in handen om je navigatiemenu volledig naar je eigen hand te zetten. Of je nu een kleine aanpassing wilt doen of een compleet unieke navigatiebalk wilt bouwen, de combinatie van wordpress menu-instellingen en de flexibiliteit van de bouwer maakt alles mogelijk. Experimenteer met verschillende stijlen en kijk wat het beste werkt voor jouw doelgroep. Een goed vormgegeven menu is immers de eerste stap naar een succesvolle conversie op je website.