header-logo
Hoe Wix gebruiken om je website en bedrijf te bouwen.
Ontwerp en beheer je website met slimmme functionaliteiten.
Beheer abonnementen, pakketten en facturen.
Run je bedrijf en kom in contact met leden.
Lees hoe je een domein koopt, koppelt of overzet.
De juiste tools om je bedrijf op het web te laten groeien.
Boost je zichtbaarheid met SEO en marketingtools.
Geavanceerde functies om efficiënter te kunnen werken.
Antwoorden op vragen, gekende problemen en meer.
placeholder-preview-image
Verbeter je vaardigheden met onze cursussen en video's.
Krijg tips voor webdesign, marketing en meer.
Lees hoe het organische websiteverkeer van zoekmachines te vergroten.
Bouw een eigen website met ons full-stack platform.
Vind een professional voor hulp om je websitedoelen te behalen.
placeholder-preview-image

Studio Editor: Met websitekleuren werken

5 min
In dit artikel
  • Websitekleuren begrijpen
  • Websitekleuren bewerken
  • Websitekleuren beheren
  • Websitekleuren toepassen op elementen
In de Studio Editor kun je de kleuren die op de website van je klant worden gebruikt beheren vanuit één handig paneel. Dit helpt je om een samenhangend kleurenverslag te creëren en snel updates door te voeren. 
Het Kleuren-tabblad in het Websitestijlen-paneel van een Studio Editor-website, met tien kleuren.

Websitekleuren begrijpen

Het Kleuren-tabblad in het Websitestijlen-paneel toont de kleuren die worden gebruikt op de website waaraan je werkt. Deze zijn meestal gelinkt aan componenten en je kunt ze toevoegen, beheren en vervangen voor een soepele ontwerpervaring.
Het aantal websitekleuren waarmee je begint, verschilt per websitetemplate en per website die vanaf nul is gebouwd. Elke Studio-website wordt echter geleverd met ten minste zes standaardkleuren die zijn gekoppeld aan bepaalde elementen en apps op de website:
  • Kleur 1: De primaire kleur die wordt toegepast op element- en app-achtergronden (zoals Wix Stores, Wix Online programma's, enzovoort).
  • Kleur 2: De secundaire achtergrondkleur.
  • Kleur 3: Dit is de standaardkleur die wordt toegepast op acties/elementen met de status 'Uitgeschakeld'. Bijvoorbeeld: niet-beschikbare datums in een Wix Bookings-agenda.
  • Kleur 4: De secundaire kleur voor tekstelementen en tekst in extra elementen en apps.
  • Kleur 5: De primaire kleur van tekst op de website.
  • Kleur 6: De kleur van links en acties op de website.
In de onderstaande screenshot wordt bijvoorbeeld Kleur 1 automatisch toegepast als achtergrondkleur van de koptekst.
Het Kleuren-tabblad van het Websitestijlen-paneel. Kleur 1 wordt vergroot en laat zien dat het dezelfde tint is als de achtergrond van de koptekst.
Let op:
  • Afhankelijk van de template die je kiest, kunnen deze kleuren een andere naam hebben in het paneel. 'Kleur 1' kan bijvoorbeeld de naam 'Primaire achtergrond' hebben. Hoedanook zijn standaardkleuren in dezelfde volgorde op alle Studio Editor-websites gekoppeld aan dezelfde elementen/apps.
  • Websites kunnen maximaal 25 websitekleuren hebben.

Websitekleuren bewerken

Pas de websitekleuren aan in het Websitestijlen-paneel om aan je ontwerpbehoeften te voldoen en versterk de branding van je klanten.
Belangrijk:
Het wijzigen van een kleur heeft direct invloed op de elementen met de kleur die je bijwerkt, bijvoorbeeld alle thema-elementen die je eerder hebt toegevoegd, of elementen waarop je deze kleur hebt gebruikt.

Om de websitekleuren te bewerken:

  1. Klik links in de editor op Websitestijlen .
  2. Selecteer het Kleuren-tabblad.
  3. Klik op de kleur die je wilt aanpassen.
  4. Kies uit de volgende opties hoe je de middelste kleur in het bereik wilt selecteren:
    • Selecteer met je cursor een nieuwe kleur uit de kiezer.
    • Voer de HEX-, RGB- of HSB-informatie in de relevante velden in.
    • Klik op de Dropper om overal op je scherm een nieuwe kleur te selecteren.
  5. Klik op Toepassen.
Er wordt een kleur gewijzigd in het paneel. Er is een nieuwe tint geselecteerd en de cursor klikt op de Toepassen-knop.

Websitekleuren beheren

Beheer websitekleuren om het ontwerpproces zo soepel mogelijk te laten verlopen. Je kunt kleuren hernoemen zodat ze gemakkelijk te vinden zijn, of kleuren vervangen om snelle wijzigingen aan de website aan te brengen.

Om websitekleuren te beheren:

  1. Klik links in de editor op Websitestijlen .
  2. Selecteer het Kleuren-tabblad.
  3. Wijs de relevante kleur aan en klik op het Meer acties-pictogram undefined.
  4. Kies wat je wilt doen:
    • Wijzig de kleurnaam:
      1. Klik op Naam wijzigen.
      2. Voer de nieuwe kleurnaam in het veld in.
    • Verwijderen / vervangen:
      1. Klik op Verwijderen.
      2. Selecteer de vervangende kleur uit de kiezer.
      3. Klik op Toepassen.
Het Meer acties-menu is in een kleur op het paneel geopend. De cursor klikt op de Naam wijzigen-optie.
Kun je een kleur niet verwijderen of vervangen?
  • Bepaalde tinten worden gebruikt als de standaardkleur voor Wix-apps en -elementen op de website en de Verwijderen-optie wordt daarom grijs weergegeven. Je kunt echter op de kleur in het paneel klikken om deze te vervangen.
  • Tinten die niet als standaardkleur zijn ingesteld, kunnen nog steeds in gebruik zijn op de website en je wordt daarom gevraagd de kleur te vervangen.

Websitekleuren toepassen op elementen

Omdat kleuren aan categorieën worden toegewezen, worden ze automatisch toegepast op sommige thema-elementen in het Elementen toevoegen-paneel (bijvoorbeeld: opgemaakte tekstelementen). Je kunt vanuit het Inspector-paneel ook websitekleuren toepassen op elementen op het canvas.
Goed om te weten:
Als het element meer dan één kleur bevat, kun je elke tint aanpassen door op het kleurvak te klikken.

Om websitekleuren op elementen toe te passen:

  1. Selecteer het element.
  2. Klik rechtsboven in de editor op het Inspector openen-pictogram .
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. Klik op het kleurvak onder Ontwerp om de kleurenkiezer te openen.
  2. Selecteer een tint uit Themakleuren om deze toe te passen.
Het infovenster is geopend voor een vectorelement. Een van de kleurvakken is geopend en er is een themakleur toegepast.