Ben je bezig met het bouwen van een website en heb je het probleem dat je standaardkleuren hebt ingesteld in Divi, maar dat links en andere elementen op je site nog steeds de standaard Divi-kleuren tonen? Dit kan frustrerend zijn, vooral als je zorgvuldig een kleurenschema hebt samengesteld dat bij je website past. Gelukkig is er een eenvoudige oplossing!
Divi: waarom worden jouw kleuren niet overal toegepast?
Een veelvoorkomende oorzaak in Divi is dat, na het aanpassen van de vaste navigatie-instellingen, het kleurenschema niet is teruggezet naar ‘Default’. Dit kan ertoe leiden dat bepaalde elementen, zoals links, nog steeds de standaard Divi-kleuren weergeven. Daarnaast kunnen specifieke instellingen in de Customizer invloed hebben op de weergave van kleuren op je site.
Stap 1: Kleuren aanpassen via de customizer
Naast het instellen van het kleurenschema, is het belangrijk om specifieke kleurinstellingen aan te passen voor verschillende onderdelen van je site:
- Header & Navigatie:
- Ga naar Weergave > Customizer > Header & Navigation > Primary Menu Bar.
- Hier kun je de achtergrondkleur, tekstkleur en andere stijlen van je primaire menu aanpassen.
- Typografie:
- Ga naar Weergave > Customizer > General Settings > Typography.
- Pas de standaard tekstkleur en koptekstkleur aan naar jouw voorkeuren.
Stap 2: kleurenschema instellen op ‘Default’
- Ga naar de Customizer:
- Navigeer in je WordPress-dashboard naar Weergave > Customizer.
- Selecteer het standaard kleurenschema:
- Klik op Color Schemes.
- Selecteer Default om het standaard kleurenschema toe te passen.
Door het kleurenschema op ‘Default’ in te stellen, zorg je ervoor dat je aangepaste kleuren niet worden overschreven door andere instellingen.
Door deze instellingen te configureren, kun je de weergave van links en andere tekstuele elementen op je site aanpassen aan je gewenste kleurenschema.
Color Pickers Default Palette instellen
Hoewel het Color Pickers Default Palette geen directe invloed heeft op de kleuren van links, is het een handige tool om je workflow te verbeteren door je meest gebruikte kleuren snel toegankelijk te maken:
- Open de Theme Options:
- Ga in je WordPress-dashboard naar Divi > Theme Options.
- Stel je standaardkleuren in:
- Onder het tabblad General vind je de sectie Color Pickers Default Palette.
- Klik op een kleurvakje om de gewenste kleur in te stellen, of voer direct de hex-waarde in.
- Herhaal dit voor alle kleurvakjes die je wilt aanpassen.
Deze aangepaste kleuren verschijnen vervolgens in de kleurkiezer van de Divi Builder, wat het ontwerpen van je site efficiënter maakt. Bron elegantthemes.com.
Troubleshooting: wat als niets werkt?
Soms blijven kleuren ondanks alle aanpassingen niet correct weergegeven. In dat geval kun je de volgende stappen proberen:
- Clear de CSS-cache:
- Ga naar Divi > Theme Options > Builder en klik op Clear.
- Laad je website opnieuw met Ctrl + F5 om een harde refresh uit te voeren.
- Handmatig kleuren aanpassen met CSS:
- Als kleuren nog steeds niet goed worden weergegeven, kun je altijd overstappen naar CSS. Dit kan door aangepaste CSS toe te voegen via Weergave > Customizer > Extra CSS.
- Hier kun je specifieke kleuren instellen (waarbij je #000000 vervangt met de juiste hex code). Bijvoorbeeld:
#main-header #top-menu li.current-menu-item > a {color: #db2391 !important;}
Met deze CSS-instelling zorg je ervoor dat actieve menu-items correct worden weergegeven met de gewenste kleur.
Door deze troubleshooting-stappen te volgen, los je hardnekkige kleurproblemen op en behoud je volledige controle over de uitstraling van je website.
Handige tool: Color Picker voor Google Chrome
Om nauwkeurig kleuren van je website te identificeren en de bijbehorende hex-codes te verkrijgen, is de Color Picker extensie voor Google Chrome een waardevolle toevoeging. Met deze tool kun je eenvoudig kleuren selecteren en direct de juiste codes kopiëren, wat het aanpassen van je sitekleuren vergemakkelijkt.
Voor een uitgebreide uitleg over het kleurbeheersysteem van Divi en hoe je dit effectief kunt gebruiken, raad ik je aan het volgende artikel te lezen: The Divi Color Management System.
Door deze stappen te volgen en de juiste instellingen toe te passen, kun je ervoor zorgen dat je website consistent de door jou gewenste kleuren weergeeft, zonder dat standaard Divi-kleuren ongewenst opduiken.
