Kleuren op een pagina vervangen in 'bulk' (meerdere tegelijk).

Wil je een kleurtint op een pagina vervangen door een nieuwe kleur? Dan hoef je dit niet stuk module voor module te doen. Je kunt dit op een gemakkelijkere manier doen, die ik je hier uit ga leggen!

Voorbeeld: Ik wil een rebranding gaan doen, waarbij ik in plaats van mijn groene accentkleur, overal een rode kleur wil gaan gebruiken.
Ik wil beginnen met alle iconen op mijn homepagina.

Als je een groene icoonkleur wilt vervangen door rood op je hele pagina, volg dan deze stappen:

1. Open de pagina in de Divi Builder:

• Ga naar je Bloomsite-dashboard.

• Open de pagina die je wilt bewerken.

• Klik bovenaan op “Visual Builder inschakelen”.

2. Zoek een icoon met de groene kleur die je wilt vervangen:

• Beweeg met je muis over een icoonmodule die de groene kleur gebruikt.

• Klik op het tandwielicoon om de module-instellingen te openen.
  
  

3. Ga naar de icooninstellingen:

• Ga in de instellingen naar het tabblad Ontwerp.

• Open de sectie Icoon.

• Zoek het veld voor icoonkleur (meestal aangegeven met een kleurvlak of hex-code).
  
  

4. Rechtermuisklik op het kleurveld van de groene kleur:

• Klik met de rechtermuisknop op het kleurvlak of de kleurcode van de groene kleur.

• Kies “Landingspagina” (een ietwat aparte Nederlandse vertaling voor Find & Replace) in het menu.
  
  

5. Configureer deze 'Find & Replace' (NL = 'landingspagina') functie:

• Er verschijnt een venster met de huidige kleur bij “Inloggen als kleur van pictogram”.
  Dit is de kleur die je wilt gaan vervangen.
  
  
  

• Vervolgens kun je bij 'Binnen' aangeven, binnen welke omgeving je de kleur wilt vervangen (enkel binnen de sectie, rij, kolom of alle modules)
  
  

• Vul bij “Maximale breedte van de afbeelding” de door jouw gewenste nieuwe (in mijn geval rode kleur in).
  
  

• Vink “Alles vervangen” aan om dit toe te passen op de hele pagina.

• Klik op Antwoord om alles door te voeren.

6. Sla de pagina op:

• Klik op Opslaan rechts onderin het scherm.

• Sluit de Visual Builder en controleer de wijzigingen op de pagina.

• Resultaat:
  
  Voor:
  
  

  
  

  

  
  Na:
  
  
  

⚠️ Let op:

• Dit werkt alleen op de huidige pagina. Als je de kleur op meerdere pagina's wilt aanpassen, moet je deze stappen herhalen of globale modules gebruiken.