Dawnin värimallit

Teeman eri osia, kuten Rich text -tekstiä, kuvabanneri- ja kokoelmaluetteloa, voit valita teema-asetuksissa määrittämistäsi väreistä värimallin, jota voit käyttää tässä osassa. Teemassasi on käytössä oletusvärimalli, jota voidaan muuttaa milloin tahansa teemaeditorissa. Brändin värien lisääminen varmistaa väripaletin yhtenäisen käytön verkkokaupassasi.

Värimallin hallinnointi

Kaupan värimalli on asetettu teema-asetuksiin.

  1. Klikkaa sivupalkin alaosassa Teema-asetukset. 3. Klikkaa Värit. 5. Jos haluat muuttaa teeman väriä, klikkaa väriä ja käytä värivalitsinta tai syötä uuden värin arvo tekstikenttään. 6. Klikkaa Tallenna.

Jos käytät kiinteitä värejä, valitse värivalitsinta käyttämällä uutta väriä tai syötä värin arvo tekstikenttään. Kenttä hyväksyy värien nimet (esimerkiksi red, black, blue), RGB: n tai heksadesimaaliset väriarvot.

Jos haluat käyttää liukuvärejä, klikkaa väriruutua ja kirjoita tai liitä liukuvärjäys CSS-koodi kenttään (esimerkiksi linear-gradient(red, green), radial-gradient(red, green)tai conic-gradient(red, green)). Teemaeditorissa näytetään virheilmoitus, jos liukuvärin CSS-koodi sisältää erikoismerkkejä, kuvia tai URL-osoitteita. Jos CSS-koodisi on kelvollinen, teemaeditorin esikatselu näyttää valitun liukuvärin asianmukaisessa sijainnissa.

Liukuvärin CSS-koodi -kenttä teemaeditorissa

Väriasetukset

Kuvien ja kuvien täytteen tausta voidaan määrittää teemaeditorissa. Valitse pudotusvalikosta korostus 1, korostus 1 liukuvärjäys, korostus 2, korostus 2 liukuvärjäys, tausta 1, tausta 1 liukuvärjäys, tausta 2, tausta 2 liukuvärjäys tai käänteinen. Voit esikatsella valittuja värimalleja teemaeditorin esikatselupaneelissa.

Määrite Kuvaus
Teksti Väriä voidaan soveltaa osion tai lohkon tekstiin.
Korostus 1 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Korostus 1 liukuväri Luo liukuvärjäys kirjoittamalla liukuvärin CSS-koodi.
Korostus 2 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Korostus 2 liukuväri Luo liukuvärjäys kirjoittamalla liukuvärin CSS-koodi.
Tausta 1 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Tausta 1 liukuväri Luo liukuvärjäys kirjoittamalla liukuvärin CSS-koodi.
Tausta 2 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Tausta 2 liukuväri Luo liukuvärjäys kirjoittamalla liukuvärin CSS-koodi.
Käänteinen Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin. Käyttää Tausta 1 -väriä tekstin värinä ja tekstin väriä taustavärinä.

Osa asetuksista, joilla voi valita käyttöön värimallin, mahdollistaa myös liukuvärin käytön. Esimerkiksi Shopifyn ensimmäisessä ilmaisessa Online Store 2.0 -teemassa voit määrittää brändisi väreihin liukuvärejä ja käyttää niitä normaalien korostus- ja taustavärivaihtoehtojen tilalla.

Liukuvärien määrittäminen

Dawn käyttää asetusta color_background CSS-tausta-ominaisuuden muokkaamiseen. Sen avulla voit luoda visuaalisesti taustataustavaihtoehtoja, kuten liukuvärejä.

Useimpien CSS background -ominaisuusarvojen avulla voit määrittää taustavärin. Voit käyttää tätä kenttää kiinteille väreille (esimerkiksi #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) ja hsla(0, 0%, 0%, 1) tuottavat tasaisen mustan taustan) tai liukuväreille (esimerkiksi linear-gradient(red, green), radial-gradient(red, green) tai conic-gradient(red, green)). Liukuvärejä voidaan myös toistaa.

Taustaväriasetuksissa käytetään CSS-koodia ja se sisältää validoinnin tarkistuksen, joka näyttää varoituksen, jos CSS-koodissasi on kuvia, erikoismerkkejä tai URL-osoitteita. Jos CSS-taustakoodi on kelvollinen, teemaeditori näyttää esikatselun liukuväristäsi esikatselupaneelissa.

Oletko valmis aloittamaan myynnin Shopifyssa?

Kokeile ilmaiseksi