Kleurschema's van Dawn

Met verschillende secties van het thema, zoals tekst met opmaak, afbeeldingsbanner en collectielijst, kun je een kleurenschema selecteren om op die sectie toe te passen in de kleuren die je in je thema-instellingen instelt. Voor je thema wordt een standaardkleurenschema toegepast dat op elk moment in de themabewerker kan worden gewijzigd. Het toevoegen van je merkkleuren zorgt voor een samenhangende toepassing van je kleurenpalet in je onlinewinkel.

Je kleurenschema beheren

Het kleurenschema van je winkel is ingesteld binnen je thema-instellingen.

  1. Klik op Thema-instellingen onderaan je zijbalk. 3. Klik op Kleuren. 5. Als je een kleur in je thema wilt wijzigen, klik je op de kleur en gebruik je de kleurkiezer of voer je de waarde van de nieuwe kleur in het tekstveld in. 6. Klik op Opslaan.

Gebruik de kleurkiezer voor effen kleuren om een nieuwe kleur te selecteren of om de waarde van de kleur in het tekstveld in te voeren. Het veld accepteert kleurnamen (bijvoorbeeld red, black, blue), RGB- of hexadecimale kleurwaarden.

Klik voor kleurovergangen op het kleurvak en typ of plak vervolgens je CSS-code voor verloop in het veld (bijvoorbeeld linear-gradient(red, green), radial-gradient(red, green), of conic-gradient(red, green)). De themabewerker geeft een foutmelding weer als je Gradient CSS-code speciale tekens, afbeeldingen of URL's bevat. Als je CSS-code geldig is, geeft het voorbeeld van de themabewerker het geselecteerde verloop op de juiste locatie weer.

Het Gradient CSS-codeveld in de themabewerker

Kleurinstellingen

De achtergrond van afbeeldingen en afbeeldingspadding kunnen worden ingesteld in je themabewerker. Gebruik het vervolgkeuzemenu om te kiezen tussen Accent 1, Accent 1-verloop, Accent 2, Accent 2-verloop, Achtergrond 1, Achtergrond 1-verloop, Achtergrond 2, Achtergrond 2-verloop of Omgekeerd. Je kunt een voorbeeld van geselecteerde kleurenschema's bekijken in het voorbeeldpaneel van je themabewerker.

Instellingen Beschrijving
Tekst Kleur kan worden toegepast op sectie- of bloktekst.
Accent 1 Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties.
Accent 1-verloop Voer de Gradient CSS-code in om een verloop te genereren.
Accent 2 Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties.
Accent 2-kleurverloop Voer de Gradient CSS-code in om een verloop te genereren.
Achtergrond 1 Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties.
Achtergrond 1-verloop Voer de Gradient CSS-code in om een verloop te genereren.
Achtergrond 2 Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties.
Achtergrond 2-kleurverloop Voer de Gradient CSS-code in om een verloop te genereren.
Omkeren Kleur kan worden toegepast op impactknoppen en de achtergronden van sommige secties. Gebruikt achtergrond 1 als tekstkleur en de tekstkleur als achtergrondkleur

Met sommige instellingen kun je ook het gebruikte kleurenschema kiezen, zodat je ook verlopen kunt gebruiken. In Dawn, Shopify's eerste gratis Online Store 2.0-thema, kun je bijvoorbeeld verlopen van de kleuren van je merk instellen en deze gebruiken in plaats van de standaard accent- en achtergrondkleuropties.

Verlopen instellen

Dawn gebruikt de instelling color_background om de CSS-achtergrondeigenschap aan te passen, zodat je visueel interessante achtergrondopties kunt maken, zoals verlopen.

De meeste CSS- background -eigenschappen kunnen worden gebruikt om een achtergrondkleur in te stellen. Je kunt dit veld gebruiken voor effen kleuren (bijvoorbeeld #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) en hsla(0, 0%, 0%, 1) produceren allemaal een effen zwarte achtergrond) of voor verlopen (bijvoorbeeld linear-gradient(red, green), radial-gradient(red, green) of conic-gradient(red, green)). Verlopen kunnen ook worden herhaald.

De achtergrondkleurinstelling maakt gebruik van CSS-code en bevat een validatiecontrole die een waarschuwing toont als afbeeldingen, speciale tekens of URL's in je CSS-code staan. Als de CSS-achtergrondcode geldig is, zal de themabewerker een voorbeeld van je verloop weergeven in het voorbeeldvenster.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis