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ä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 Valitse ennalta määritelty liukuväri tai käytä sävynvalitsinta muokataksesi taustasi korostusväriä.
Korostus 2 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Korostus 2 liukuväri Valitse ennalta määritelty liukuväri tai käytä sävynvalitsinta muokataksesi taustasi korostusväriä.
Tausta 1 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Tausta 1 liukuväri Valitse ennalta määritelty liukuväri, tai käytä sävynvalitsinta muokataksesi taustasi liukuväriä.
Tausta 2 Väriä voidaan soveltaa toimintopainikkeisiin ja joidenkin osioiden taustoihin.
Tausta 2 liukuväri Valitse ennalta määritelty liukuväri, tai käytä sävynvalitsinta muokataksesi taustasi liukuväriä.
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, joiden avulla voit valita värimallin, mahdollistaa myös liukuvärien käytön. Esimerkiksi Dawn-teemassa voit määrittää brändisi väreistä liukuvärejä ja käyttää niitä normaalien korostus- ja taustavärivaihtoehtojen tilalla.

Värimallin hallinnointi

Kaupan värimalli on asetettu teema-asetuksiin.

  1. Klikkaa sivupalkin alaosassa Teema-asetukset.
  2. Klikkaa Värit.
  3. Jos haluat muuttaa teeman väriä, klikkaa väriä ja käytä värivalitsinta tai syötä uuden värin arvo tekstikenttään.
  4. Napauta 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.

Liukuvärit

Voit luoda visuaalisesti mielenkiintoisia taustoja määrittämällä liukuvärjäyksen värejä Dawn-teemassa. CSS-taustan ominaisuuksien mukauttamiseen käytetään color_background-asetusta.

Liukuvärin valitsimen avulla voit valita liukuvärin värit, tyylin, kulman, sijainnin ja läpikuultavuuden. Liukuvärin valitsimessa valittujen asetusten esikatselu näkyy reaaliaikaisesti teemaeditorissa. Voit myös luoda liukuväritaustan CSS-koodilla, jossa on oikeellisuuden tarkistustyökalu.

Liukuvärien määrittäminen

  1. Napauta teeman asetuksia.
  2. Klikkaa Värit.
  3. Valitse yksi liukuvärivaihtoehto.

  4. Valitse liukuvärin asetukset:

  • Voit valita lineaarisen tai säteittäisen liukuvärin. Valitse haluamasi liukuvärityyli painikkeiden avulla.
  • Liukuvärin kulmaa voidaan säätää ylös ja alas osoittavilla nuolilla. Kulman prosenttiarvo laskee ja nousee viidellä, kun klikkaat ylös ja alas osoittavia nuolia.
  • Valitse liukuvärin sijainti liukusäätimellä tai syötä kenttään numeerinen arvo.
  • Voit syöttää värin hex-koodin tai valita värisävyn värin liukusäätimellä. Viimeksi valitut värit näkyvät liukuvärin asetuspaneelin alaosassa.
  • Liukuvärjäys voi olla läpikuultamaton. Valitse liukuvärin läpinäkyvyys oikealla puolella olevan liukusäätimen avulla. Voit myös kirjoittaa prosenttiluvun hex-värikoodin vieressä olevaan kenttään.
  1. Napauta Tallenna.

Liukuvärivalitsin teemaeditorissa

Liukuvärien määrittäminen CSS:n avulla

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 kaikki 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.

Toimi näin:

  1. Napauta teeman asetuksia.
  2. Klikkaa Värit.
  3. Klikkaa liukuväriä, jota haluat muokata.
  4. Klikkaa Liukuvärin vieressä olevaa nuolta ja valitse CSS.
  5. Kirjoita tai liitä liukuvärin koodi CSS-koodi-kenttään. Teemaeditorin esikatselu näyttää liukuvärin valitsemassasi sijainnissa.
  6. Napauta Tallenna.
    Gradient CSS Code field in the theme editor

Liukuvärin poistaminen

Liukuvärin nollaaminen tai poistaminen:

  1. Napauta teeman asetuksia.
  2. Klikkaa Värit.
  3. Klikkaa liukuväriä, jota haluat muokata.
  4. Klikkaa Poista liukuväri.
  5. Napauta Tallenna.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi