Kies een palet voor je site en pas vervolgens de kleuren van bepaalde elementen aan.

Gebruik kleurenpaletten en kleurenthema's om kleuren op je hele site vorm te geven, of je nu de voorkeur geeft aan een zwart-witthema of gedurfde kleurencombinaties.

Deze kleuropties zijn beschikbaar voor versie 7.1-sites. Versie 7.0-sites hebben andere kleurinstellingen.

Video over het wijzigen van de kleuren van een site

Bekijk deze video voor een uitleg over het kleurenpalet en de kleurenthema's van je site.

Wijzig kleuren met kleurenpaletten voor je hele site

Alle Squarespace-sites gebruiken een palet met vijf kleuren voor een samenhangende visuele stijl. Je kunt de kleuren op je site direct wijzigen door het palet aan te passen of een nieuw palet te selecteren, waarmee de kleuren van het palet op je hele site worden toegepast.

Bewerk je huidige kleurenpalet

Het geselecteerde kleurenpalet bewerken:

1. Open het sitestijlenpaneel.
2. Klik op ＞ naast Kleuren.
3. Klik op Palet bewerken. Paletten gebruiken vijf kleuren en de meeste bevatten zwart en wit, die voor de tekst worden gebruikt.
4. Klik op een van de kleuren in het palet en klik vervolgens op de schuifregelaars in de kleurenkiezer en sleep ze om de kleur te wijzigen. Als je een code hebt voor een kleur die je wilt gebruiken, kun je de hex-, RGB- of HSL-code in het veld eronder invoeren.
5. Herhaal deze stappen voor elke kleur in het palet en klik vervolgens op Opslaan.

Een nieuw kleurenpalet instellen

Om een nieuw kleurenpalet in te stellen:

1. Open het sitestijlenpaneel.
2. Klik op ＞ naast Kleuren.
3. Klik op Palet bewerken en kies vervolgens:
   • 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 drie meest opvallende kleuren van de afbeelding.
   • Van kleur – Kies een primaire kleur met de kleurenkiezer en genereer paletten om die kleur aan te vullen.
4. Klik op opslaan.

Wijzig de kleuren van een gedeelte met thema's

Je palet bepaalt de kleuren voor je site, en de kleurenthema's van je site gebruiken die kleuren in verschillende combinaties. Elk palet heeft tien kleurenthema's, zodat je je gedeelten een unieke uitstraling kunt geven die toch bij elkaar passen.

In sommige gevallen worden tekst en knoppen standaard in wit of zwart weergegeven om een beter contrast met de achtergrondkleur te bieden. Bekijk onze best practices voor toegankelijkheid bij het kiezen van kleuren.

Een thema instellen voor een gedeelte

Een kleurenschema voor een gedeelte selecteren:

1. Open het pagina's paneel.
2. Klik op de pagina die je wilt bewerken en klik op Bewerken in de linkerbovenhoek.
3. Klik op Bewerk gedeelte op het gedeelte dat je wilt wijzigen.
4. Klik op Kleuren en vervolgens op een kleurenthema.
5. Klik op opslaan.

Opmerking: Door een nieuw kleurenthema te kiezen, veranderen alle kleuren in het gedeelte, inclusief eventuele tekstkleurwijzigingen die zijn aangebracht in de tekstblokwerkbalk.

Hoe kan ik zien welk thema een paginagedeelte gebruikt?

Om te controleren welk kleurenschema een gedeelte gebruikt:

1. Open het pagina's paneel.
2. Klik op de pagina die je wilt bewerken.
3. Scroll door de voorbeeldweergave van je site en controleer de kleurthemalabels die in de rechterbovenhoek van elk gedeelte worden weergegeven.

Waarom is het label van mijn kleurenthema leeg?

Als er een leeg vak verschijnt in plaats van een themalabel, zijn de tekstkleur en achtergrondkleur mogelijk hetzelfde, waardoor de tekst onzichtbaar is. Om het themalabel zichtbaar te maken:

1. Open het sitestijlenpaneel.
2. Klik op ＞ naast Kleuren.
3. Klik op het thema dat leeg wordt weergegeven in het kleurenmenu.
4. Klik op kop (groot) en verander de kleur.
5. Klik op opslaan.

Welke thema's gebruiken andere delen van je site?

Andere delen van je site hebben specifieke instellingen voor kleurenthema's:

• Aankondigingsbalk - Als de header van je site een kleurenthema heeft, volgt de aankondigingsbalk hetzelfde thema. Anders volgt deze het standaard kleurenthema.
• Ingebouwde pagina's – Ingebouwde sitepagina's, zoals de standaard 404-pagina of winkelwagentjepagina, gebruiken het standaard kleurenthema van je sjabloon.
• Menuknop voor mobiele overlay - Stel een kleurenthema in voor je mobiele overlay wanneer je de header van je site bewerkt.
• Siteheader - Stel een kleurenthema of een aangepaste kleur in voor je siteheader.

De kleuren van specifieke site-elementen wijzigen

Je kunt kleuraanpassingen voor specifieke elementen in elk kleurenschema aanpassen.. 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 sitestijlenpaneel.
2. Klik op ＞ naast Kleuren.
3. Klik op het thema dat je wilt bewerken. Als je niet zeker weet welk thema je moet bewerken, zoek dan naar het label van het kleurenschema op het gedeelte dat je wilt wijzigen.
4. 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.
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.
6. 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.

Gebruik de kleurkiezer om een aangepaste kleur te selecteren

Elke kleurafstelling heeft een cirkel naast het label die de huidige kleur voor dat element toont. Deze kleuren komen doorgaans uit het kleurenpalet van je site.

Een aangepaste kleur kiezen met de kleurkiezer:

1. Klik op de aanpassing die je wilt wijzigen.
2. Klik op Aangepast om de kleurenkiezer te openen.
3. Klik op de onderste schuifregelaar om een kleur te selecteren en vervolgens op het vierkant erboven om een tint te kiezen, of gebruik het waardeveld om een specifieke kleurcode in te voeren.
4. Als de aanpassing een transparantieschuifregelaar heeft, kun je deze gebruiken om de transparantie aan te passen.

Een specifieke kleur selecteren met een kleurcode

Als je de waarde voor de gewenste kleur weet, kun je op het waardeveld onder de kleurkiezer klikken om deze toe te voegen. Voor hulp bij het vinden van een specifieke kleurwaarde kun je externe sites bezoeken zoals color-hex.com of imagecolorpicker.com.

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

Tip: In het waardeveld wordt automatisch de kleurcode weergegeven als je de kleurschuifregelaar 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.

De transparantie van een kleur veranderen

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

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.

Wat zijn standaardkleurenschema's?

Elke versie 7.1-site heeft een standaard kleurenthema. Het standaard kleurenthema wordt automatisch toegepast op de volgende ingebouwde pagina's en onderdelen 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

Hoe vind ik het standaard kleurenthema van mijn site?

Om het standaardthema van je sjabloon te vinden:

1. Open het pagina's paneel.
2. Klik op Bewerken op een pagina en klik daarna op gedeelte toevoegen.
3. Klik op + Leeg toevoegen en klik vervolgens op Gedeelte. Nieuwe gedeelten beginnen met het standaardthema.
4. Klik op het penseelpictogram om het paneel Sitestijlen te openen en klik vervolgens op ＞ naast Kleuren.
5. Zoek naar het themalabel op het nieuwe gedeelte.

Kan ik het standaardthema van mijn site wijzigen?

Nee. Het is niet mogelijk om een nieuw standaardthema voor je site toe te wijzen, maar als je je standaardthema kent, kun je je kleurenpalet wijzigen of de afzonderlijke kleuraanpassingen van het thema wijzigen om je ingebouwde pagina's en andere gedeelten die het standaardthema gebruiken aan te passen.

Hoe wijzig ik de kleur tussen paginagedeelten en mijn footer?

Er kan ruimte ontstaan tussen het laatste gedeelte op een pagina en de footer, of onder de footer. Deze ruimtes gebruiken de achtergrondkleur van het gedeelte van je standaardthema. Wanneer je gedeelte en footer andere kleurenthema's gebruiken dan je standaardthema, kunnen deze ruimtes meer opvallen.

Om de kleur van de ruimte af te stemmen op je paginagedeelten of footer:

1. Open het paneel Sitestijlen.
2. Klik op ＞ naast Kleuren.
3. Klik op je standaardthema.
4. Klik op Achtergrondkleur en wijzig deze zodat deze overeenkomt met de achtergrondkleur van het gedeelte in het kleurenthema van je paginagedeelte of footer.

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

De achtergrondkleuren van blokken wijzigen

Je kunt sommige blokken een achtergrondkleur geven. Dit is een uitstekende manier om een blok te laten opvallen, of om overlappende blokken beter zichtbaar te maken in Fluid Engine.

Je kunt achtergrondkleuren toevoegen aan deze blokken:

• Accordeonblokken
• Formulierblokken
• Nieuwsbriefblokken
• Citatenblokken
• Samenvattingsblokken
• Tekstblokken