Studio Editor: Met websitekleuren werken

Leestijd 4 minuten
Websitekleuren vormen het algehele kleurenthema dat op de website van je klant wordt gebruikt. Dit thema is onderverdeeld in kleurbereiken die worden toegepast op verschillende categorieën (bijvoorbeeld: achtergrond en tekst) en specifieke tinten bevatten. 
Zowel afzonderlijke kleuren als kleurbereiken kunnen worden aangepast, zodat je specifieke delen van de website naar behoefte kunt ontwerpen en aanpassen. 
In dit artikel lees je meer over:

Websitekleuren begrijpen

Dit zijn de kleuren die worden gebruikt op de hele website waaraan je werkt. Ze zijn meestal bekabeld aan componenten. De ene kleur kan bijvoorbeeld worden gekoppeld aan een onderdeelachtergrond, een andere aan tekst, enzovoort.
Het aantal websitekleuren waarmee je begint, hangt af van de template die je kiest en of je besluit om vanaf nul te bouwen. Je kunt echter wel websitekleuren toevoegen, beheren en vervangen om een soepele ontwerpervaring te garanderen.

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 Dropperom 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-pictogramundefined.
  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 schaduw 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 ook websitekleuren toepassen op elementen op het canvas met behulp van het Inspector-paneel.

Om websitekleuren op elementen toe te passen:

  1. Selecteer het element.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
  3. Klik op het kleurvak onder Ontwerp om de kiezer te openen.
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. 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.
Goed om te weten:
Als het element meer dan één kleur bevat, kun je elke tint aanpassen door op het kleurvak te klikken.

Vond je dit artikel nuttig?

|