Kies een kleurenpalet voor je site en pas specifieke kleuren toe op verschillende gedeelten van de pagina.

Of je nu de voorkeur geeft aan een zwart-wit thema of gewaagde kleurencombinaties, je kunt sitestijlen en gedeeltesstijlen gebruiken om de kleuren van je site te wijzigen.

In deze gids geven we een overzicht van hoe je de kleuren kunt aanpassen voor de verschillende elementen op je site.

Bekijk een video

Voordat je begint

• Kleurwijzigingen die je aanbrengt in de sitestijlen zijn van toepassing op de hele site. Als je één element van een pagina wijzigt, zoals de tekst op de knop, wordt dat gewijzigd op alle gebieden die dat thema gebruiken (versie 7.1) of op alle pagina's (versie 7.0).
• In tekstblokken in versie 7.1 kun je de kleur van een specifiek stuk tekst wijzigen, zoals een enkele letter of een woord in een zin. Om dit te doen in versie 7.0, of in andere tekstgebieden, gebruik je een Markdown-blok.
• Als je programmeerervaring hebt, kun je proberen gerichte kleurveranderingen te maken met CSS. Houd er rekening mee dat maatwerkcode buiten de reikwijdte van onze ondersteuning valt.
• Als je site op versie 7.0 staat, werkt het proces om kleuren te veranderen anders. Bezoek het onderstaande gedeelte voor specifieke stappen.
• Voor tips over het kiezen van de beste kleuren voor je site, bezoek De juiste lettertypen en kleuren kiezen.
• Zie Toegankelijke sitecontent aanmaken voor de best practices op het gebied van toegankelijkheid. 

Je kunt de kleuren op de hele site wijzigen

Om alle kleuren op je site te wijzigen, kies je een kleurenpalet:

1. Open het paneel Sitestijlen, en klik vervolgens op ＞ naast Kleuren.
2. Klik op Palet bewerken om een nieuw kleurenpalet te kiezen. Je kunt kiezen uit deze soorten kleurenpaletten:
   • Presets – Kies uit een set vooraf ingestelde paletten in zorgvuldig geselecteerde kleuren.
   • Vanuit afbeelding - Upload een afbeelding om een palet te maken op basis van de meest opvallende kleuren van de afbeelding.
   • Van kleur – Kies een primaire kleur met de kleurenkiezer en genereer paletten om die kleur aan te vullen.
3. Klik op Opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of op Afsluiten en vervolgens Opslaan om de editor te sluiten.

Houd er rekening mee:

• Alle kleurenpaletten bevatten altijd zwart en wit, die je meestal voor tekst gebruikt.
• Als je een palet genereert uit een afbeelding, worden de kleuren gehaald uit de drie meest dominante kleuren van de afbeelding.
• In elk palet kun je de Paleteditor gebruiken om elke kleur in het palet aan te passen.

Kleuren van gedeelten wijzigen

Je kleurenpalet genereert verschillende kleurthema's voor je paginagedeelten. Nadat je de kleuren voor de hele site hebt ingesteld, kun je het kleurenschema van elk gedeelte wijzigen om deze een eigen uitstraling te geven.

Om te bevestigen welk thema een gedeelte gebruikt:

1. Open het paneel Sitestijlen, en klik vervolgens op ＞ naast Kleuren.
2. Scroll door de voorbeeldweergave van je pagina en bekijk de themalabels van elk gedeelte.

Opmerking: Als je een leeg vak tegenkomt in een gedeelte in plaats van een themalabel, is de kleur van je kop (groot) waarschijnlijk ingesteld op dezelfde kleur als de achtergrondkleur van het gedeelte. Om het themalabel te zien, klik je op het thema dat ook leeg wordt weergegeven in het kleurenmenu en verander je vervolgens de kop (groot) in een nieuwe kleur. Zie het volgende gedeelte voor gedetailleerde stappen.

Wijzig als volgt het kleurenthema van een gedeelte:

1. Open het pagina's paneel.
2. Selecteer de pagina die je wilt bewerken en klik op Bewerken in de linkerbovenhoek.
3. Klik op Bewerk gedeelte of op het potloodpictogram op het gedeelte dat je wilt wijzigen.
4. Klik op het tabblad Kleuren en selecteer een thema om het toe te passen op dat gedeelte.
5. Klik op Opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of op Afsluiten en vervolgens Opslaan om de editor te sluiten.

Opmerking: Het wijzigen van het kleurenschema van een gedeelte reset alle kleuren voor dat gedeelte, inclusief eventuele tekstkleurwijzigingen die zijn aangebracht in de tekstblokwerkbalk.

Soorten thema's

Het type thema (1 of 2) bepaalt welke kleur van toepassing is op de hoofdtekst in een gedeelte en welke kleur op andere elementen:

• Lichtste 1, Licht 1, Donker 1 en Donkerste 1 - Tekst en koppen zijn zwart of wit en andere kleuren gelden voor de achtergrond en kleinere site-elementen.
• Lichtste 2, Licht 2, Donker 2 en Donkerste 2 - De kleur aan de linkerkant van het palet is van toepassing op alle tekst en koppen, en andere kleuren zijn van toepassing op de achtergrond en kleinere site-elementen.
• Helder - De kleur aan de linkerkant van het palet is van toepassing op de tekst (Helder 1) of de achtergrond (Helder 2) en andere kleuren zijn van toepassing op de achtergrond en kleinere site-elementen.

In sommige gevallen worden tekst en knoppen standaard in wit of zwart weergegeven om een beter contrast met de achtergrondkleur te bieden.

Thema's voor andere sitegebieden

Gebruik de onderstaande stappen om de kleurenschema's voor deze delen van je site te vinden:

• Aankondigingsbalk - De aankondigingsbalk komt altijd overeen met het kleurenschema van je header.
• Menuknop voor mobiele overlay - De kleuren van de mobiele overlay worden ingesteld in je header.
• Gedeelte-achtergrond - Open het kleurenpaneel en zoek naar het themalabel, klik vervolgens op dat thema om alle kleuren te openen. Kijk naar de kleur naast Gedeelte-achtergrond.
• Ingebouwde pagina's – De standaard 404-pagina, winkelwagentjepagina, orderbevestigingspagina en ingebouwde zoekpagina gebruiken allemaal het standaard kleurenschema van je sjabloon.

Themakleuren aanpassen

Je kunt elk thema verder aanpassen door specifieke kleuren in te stellen voor verschillende elementen van de site. Wijzigingen in de kleuren van een thema gelden voor alle onderdelen van je site die dat thema gebruiken.

Om een thema te bewerken:

1. Open het paneel Sitestijlen, en klik vervolgens op ＞ naast Kleuren.
2. Klik op het thema dat je wilt bewerken.
3. Klik op de aanpassing die je wilt wijzigen en kies dan een nieuwe kleur. Je kunt een vooraf ingestelde kleur gebruiken via het tabblad Palet , of op Aangepast klikken om de kleurenkiezer te gebruiken. Je moet misschien scrollen om alle aanpassingen te bekijken.
4. Gebruik de transparantieschuifregelaar om de transparantie te wijzigen.
5. Om wijzigingen ongedaan te maken voordat je ze opslaat, klik je op het pictogram 'Ongedaan maken' bovenin het paneel of klik je op de stip naast een specifieke aanpassing.

Je wijzigingen blijven van kracht terwijl je de inhoud van andere pagina's bewerkt. Klik op Opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of op Afsluiten en vervolgens Opslaan om de editor te sluiten.

Houd bij het wijzigen van de themakleuren rekening met deze tips:

• Als je niet zeker weet welk thema je moet bewerken, zoek dan naar het label van het kleurenschema op het gedeelte van de pagina dat je wilt wijzigen.
• Het menu Thema bewerken toont alle mogelijke kleuraanpassingen voor je site, zelfs als de pagina die je op dat moment aan het bewerken bent deze items niet bevat. Alle kleuropties voor blogs worden bijvoorbeeld weergegeven, zelfs als je een lay-outpagina bewerkt.
• Als een gedeelte een achtergrondafbeelding heeft, gebruik dan de Background Overlay tweak om de dekking van de overlay-kleur in te stellen. Als het gedeelte een achtergrondkleur of video gebruikt, gebruik dan Section Background om de achtergrondkleur in te stellen.

De kleurenkiezer

Gebruik de kleurkiezer om een aangepaste kleur te kiezen voor een element van je site. Elke kleurafstelling heeft een circle naast het label die de huidige kleur voor dat element toont.

Om een nieuwe kleur te kiezen, klik op de kleurencirkel naast de aanpassing die je wilt wijzigen. Klik op de onderste diavoorstelling om een kleur te selecteren, en klik dan op het vierkant hierboven om een tint te kiezen.

Als je de waarde voor de gewenste kleur weet, kun je ook op het waardeveld klikken om deze te bewerken. Het waardeveld accepteert elk van deze formaten:

• HEX - Voorbeeld: #FFFFFF
• RGB of RGBa - Voorbeeld: rgba(255, 0, 149, 1)
• HSL/HSLA - Voorbeeld: hsla(325, 100%, 50%, 1)
• HTML (moet in kleine letters zijn) - Voorbeeld: wit

Voor hulp bij het vinden van een specifieke kleurwaarde kun je externe sites bezoeken zoals color-hex.com of imagecolorpicker.com.

Tip: Het waardeveld wordt automatisch ingevuld als je de kleurenschuifregelaar gebruikt om een kleur te vinden. Je kunt deze code kopiëren en plakken om dezelfde kleur toe te voegen aan andere aanpassingen in het thema.

Transparantie

Om de transparantie van een kleur te veranderen, gebruik je de opaciteitsschuif door de cirkel onder de kleurkiezer te slepen. De opaciteitsschuif is bijzonder handig voor overlay-kleuren, die over afbeeldingen worden weergegeven.

• In versie 7.1 is het alleen mogelijk om de transparantie van paletkleuren te wijzigen.
• In versie 7.0 bevatten sommige kleuraanpassingen geen opaciteitsdiavoorstelling.

Tip: Als je de schuifregelaar voor ondoorzichtigheid gebruikt om de achtergrondkleur van een gedeelte transparant te maken, kan de achtergrondkleur van het standaardkleurenschema van je sjabloon zichtbaar worden. 

Verander de kleur van de ingesprongen rand

Als een gedeelte een achtergrondafbeelding heeft, kun je de afbeelding schermbreed of ingesprongen weergeven.

• Schermbreed breidt de afbeelding uit van de ene rand van je browservenster naar de andere en beslaat de volledige breedte van je site.
• Inset laat de afbeelding iets inspringen en maakt een rand rond de afbeelding.

Wanneer de afbeelding is ingesteld op Ingesprongen rand, kun je de randkleur wijzigen:

1. Open het paneel Sitestijlen, en klik vervolgens op ＞ naast Kleuren.
2. Klik op het kleurenthema voor het gedeelte dat je wilt wijzigen.
3. Klik onder Sitewide op ingesprongen rand en kies een kleur.
4. Je wijzigingen blijven van kracht terwijl je de inhoud van andere pagina's bewerkt. Klik op Opslaan om je wijzigingen op te slaan en verder te gaan met bewerken, of op Afsluiten en vervolgens Opslaan om de editor te sluiten.

De achtergrondkleuren van blokken wijzigen

Achtergrondkleuren voor blokken worden alleen ondersteund op sites met versie 7.1.

Sommige blokken bevatten een achtergrondkleurfunctie. Dit is een uitstekende manier om een blok te laten opvallen, of om overlappende blokken beter zichtbaar te maken in Fluid Engine. Voeg achtergrondkleuren toe aan de volgende blokken door de optie Achtergrond aan te zetten in het tabblad Ontwerp van het blok:

• Accordeonblokken
• Formulierblokken
• Nieuwsbriefblokken
• Citatenblokken
• Samenvattingsblokken

Je kunt ook achtergrondkleuren inschakelen op tekstblokken door op het tekstblok te klikken en vervolgens op het blokachtergrondicoon. Nadat je de optie Achtergrond hebt ingeschakeld, klik je op Kleur om een kleur uit het kleurenpalet van je site of een aangepaste kleur te kiezen. Maak blokken met bijpassende achtergrondkleuren, of geef elk blok zijn eigen unieke kleur.

Standaard kleurenthema's

Elke versie 7.1-sjabloon heeft een standaardkleurenschema. Dit thema wordt automatisch toegepast op de volgende ingebouwde pagina's en gebieden op je site:

• Scherm met toegang geweigerd
• Aankondigingsbalk
• Ingebouwde zoekpagina
• Standaard 404-pagina
• Dynamische header boven een achtergrondafbeelding of video
• Pagina met orderbevestiging
• Pagina-openingen ontstaan door horizontaal scrollen voorbij de rand van de pagina.
• Snelle weergavepagina van een product
• Winkelwagentje-pagina

Je kunt geen ander thema toewijzen aan deze delen van je site, maar je kunt wijzigingen aanbrengen in het standaardthema om deze pagina's aan te passen. Om het standaardthema van je sjabloon te vinden:

1. Voeg een leeg gedeelte toe aan een pagina.
2. Open het paneel Sitestijlen, klik vervolgens > naast Kleuren.
3. Zoek naar het themalabel. Aan nieuwe gedeelten wordt het standaard kleurenschema toegewezen.

Tip: Een andere manier om het standaard kleurenschema te bepalen is door een van de systeempagina's te openen, / te drukken en te zoeken naar sitestijlen. Je kunt het paneel Kleuren openen en daar de thema-indicator bekijken.

Ruimte tussen paginagedeelte en footer

Op pagina's met slechts één gedeelte of zeer korte pagina's kan er een kloof ontstaan tussen het laatste paginagedeelte en de footer van de pagina. De kloof neemt de achtergrondkleur van het gedeelte over van je standaardthema.

Als de ruimte een andere kleur heeft, bijvoorbeeld wanneer je gedeelte en footer andere kleurenthema's gebruiken dan je standaardthema, kan dit meer opvallen.

Om dit op te lossen, stel je de achtergrondkleur van je standaardthema in zodat deze overeenkomt met de achtergrondkleur van het paginagedeelte of de footer van het thema.

Tip: Als je de achtergrondkleur van je gedeelte in je standaardthema afstemt op de achtergrondkleur van je pagina, zal je pagina er tijdens het laden consistent uitzien. Achtergrondkleuren worden vóór afbeeldingen geladen.

Kleuren wijzigen in versie 7.0

Als je site versie 7.0 heeft, werkt het proces om de kleuren van je site te veranderen anders.

Tip: Voorpagina's hebben hun eigen stijlopties.

Open het ontwerppaneel, klik vervolgens op sitestijlen om handmatig de kleuren van je site in te stellen met stijlaanpassingen. De specifieke aanpassingen hangen af van het sjabloon van je site. Bekijk de handleidingen van je sjabloon voor meer diepgaande hulp bij het wijzigen van de kleuren van je site.

Om kleuren te wijzigen op een site van versie 7.0, navigeer eerst naar een pagina waar je wijzigingen wilt aanbrengen. Sommige tweaks worden alleen weergegeven als je op de pagina bent die ze beïnvloeden, dus als je navigeert naar de pagina die je aan het bewerken bent, worden de juiste tweaks weergegeven. Je kunt ook je stijlaanpassingen op de geselecteerde pagina bekijken terwijl je ze maakt.

Om aanpassingen te vinden die specifiek zijn voor een element op de pagina, klik op het element in de voorbeeldweergave. Sitestijlen tonen alleen de stijlaanpassingen voor dat element en verbergen de rest. Deze snelkoppeling is beschikbaar in de meeste sjablonen en voor de meeste delen van je site. Klik op Alles weergeven om alle aanpassingen voor de pagina opnieuw te tonen.

De kleuren van je site wijzigen:

1. Open het pagina's-paneel en klik op de pagina die je wilt wijzigen.
2. Als de voorvertoning van je site de juiste pagina toont, ga dan terug naar het paneel Website.
3. Klik op Ontwerp, en klik vervolgens op Sitestijlen.
4. Scrol naar beneden om alle beschikbare aanpassingen op de pagina die je bekijkt te zien. Klik op de aanpassing die je wilt wijzigen en kies een nieuwe kleur.
5. Gebruik de transparantieschuifregelaar om de transparantie te wijzigen.
6. Klik ergens buiten het kleurvenster om de kleurkiezer te sluiten.
7. Om wijzigingen ongedaan te maken voordat je ze opslaat, klik je op het pictogram 'Ongedaan maken' bovenin het paneel of klik je op de stip naast een specifieke aanpassing.
8. Klik op Opslaan aan de bovenkant van het paneel.

Achtergrondkleuren wijzigen

Deze sjabloonfamilies hebben aanpasbare achtergrondgebieden:

Houd er rekening mee:

• Achtergrondkleuren worden niet overgedragen als je van sjablonen wisselt.
• Sommige sjablonen bieden ook ondersteuning voor achtergrondafbeeldingen.
• In sommige sjablonen kan een banner achter de header worden weergegeven.
• Als je bent ingelogd, wordt de achtergrond wit weergegeven bij het laden van een pagina, ongeacht de kleur die je hebt geselecteerd in de sitestijlen. Dit is niet zichtbaar voor bezoekers.

Raadpleeg de handleiding voor je sjabloon voor meer hulp.

Bekijk een video

Deze video geldt voor versie 7.0.