Värimallit
Voit määrittää erilaisia värimalleja teema-asetuksissa ja käyttää niitä verkkokaupan eri osioissa värimallivalitsimen avulla. Värimalli on joukko värejä. Teemassa käytetään oletusarvoisten värimallien joukkoa, jota voit muuttaa milloin tahansa teemaeditorissa. Voit lisätä brändin värit, mikä varmistaa väripaletin yhtenäisen käytön verkkokaupassasi.
Malleissa ei ole yksilöllisiä väriasetuksia, joten verkkokauppasi ulkoasu on yhtenäinen koko verkkosivustosi osalta. Mallia pidetään kaupan pääsivuna tai pääsisältönä. Eri värimallien käyttäminen kaupassasi voi johtaa huonoon käyttäjäkokemukseen, ja se voi aiheuttaa sen, että asiakkaat poistuvat kaupastasi ostamatta mitään tuotteita.
Voit tarkastella verkkokaupan ominaisuuksia ja sivutyyppejä niiden osien osalta, jotka sisältävät Värimalli-asetuksia.
Värimallin teema-asetukset
Värimallit ovat teema-asetus, joka ryhmittelee elementit ja niiden värit visuaalisesti kuvaavalla tavalla. Voit ottaa eri värejä käyttöön yhtenäisen värimallin eri elementeissä ja käyttää värimallia teemassa kaikkialla, missä värimallivalitsin on käytettävissä. Värimalleja voi olla enintään 21. Voit myös esikatsella värien näkymistä mallin esikatselussa.
Määrite | Kuvaus |
---|---|
Tausta | Väriä käytetään joidenkin osioiden taustalla ja kehyspainikkeen taustalla. |
Taustan liukuväri | Liukuväriä käytetään joidenkin osioiden taustalla. Taustan liukuvärit korvaavat taustan silloin kun se on mahdollista. |
Teksti | Väriä käytetään osion tai lohkon tekstissä. |
Peittävän painikkeen tausta | Väriä käytetään ensisijaisen painikkeen taustalla. |
Peittävä tekstipainike | Väriä käytetään ensisijaisen painikkeen tekstissä. |
Kehyspainike | Väriä käytetään toissijaisen painikkeen tekstissä ja reunuksessa. |
Varjo | Väriä käytetään varjoissa. |
Värimallin hallinnointi
Kaupan värimalli ja värivaihtoehdot määritetään teema-asetuksissa. Jos käytät kiinteitä värejä, valitse värivalitsinta käyttämällä uusi väri tai kirjoita värin arvo tekstikenttään. Värikenttä hyväksyy seuraavat värien nimet ja arvot:
- värien nimet, kuten
red
,black
taiblue
- RGB-värikoodit
- heksadesimaaliset väriarvot
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Napsauta muokattavan teeman vierestä Mukauta.
Klikkaa rataskuvaketta ja valitse sitten Värit.
Napsauta Mallit-osiossa olemassa olevaa mallia tai lisää uusi värimalli napsauttamalla Lisää malli.
Napsauta muutettavan sisältötyypin värin väriruutua.
Voit asettaa värin kirjoittamalla hex-värikoodin tai valitsemalla värin värinvalitsimesta. Jos haluat asettaa värin läpinäkyväksi, poista hex-koodi tekstikentästä.
Klikkaa Tallenna.
Värimallin käyttäminen
Kun olet määrittänyt värimallin teema-asetuksissa, voit ottaa sen käyttöön teemasi osioiden ja lohkojen värimallivalitsimen avulla. Värimallivalitsin on käytettävissä vain tietyissä osioissa, lohkoissa ja yleisissä teema-asetuksissa.
Liukuvärit
Voit luoda visuaalisesti mielenkiintoisia taustoja määrittämällä liukuvärejä joissakin teemoissa. 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
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Napsauta muokattavan teeman vierestä Mukauta.
Klikkaa rataskuvaketta ja valitse sitten Värit.
Napsauta Mallit-osiossa olemassa olevaa mallia, jota haluat muokata.
Napsauta liukuvärin väriruutuvaihtoehtoa, kuten Taustan liukuväri.
Jos et ole aiemmin määrittänyt liukuväriä, sinulle näytetään muutamia valmiiksi määritettyjä vaihtoehtoja, joista voit valita. Avaa asetuspaneeli valitsemalla mikä tahansa valmiiksi määritetty liukuväri.
-
Valitse liukuvärin asetukset:
- Valitse lineaarinen tai säteittäinen liukuväri. Valitse haluamasi liukuvärityyli painikkeilla.
- Aseta liukuvärin kulma 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.
- Syötä värin hex-koodi tai valitse värisävy värin liukusäätimellä. Viimeksi valitut värit näkyvät liukuvärin asetuspaneelin alaosassa.
- Voit tehdä liukuväristä läpikuultamattoman valitsemalla liukuvärin läpinäkyvyyden oikealla puolella olevalla liukusäätimellä. Voit myös kirjoittaa prosenttiluvun hex-värikoodin vieressä olevaan kenttään.
Klikkaa Tallenna.
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.
Vaiheet:
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Napsauta muokattavan teeman vierestä Mukauta.
Klikkaa rataskuvaketta ja valitse sitten Värit.
Napsauta Mallit-osiossa olemassa olevaa mallia, jota haluat muokata.
Napsauta muokattavaa liukuväriä.
Napsauta Liukuväri-kohdan vieressä olevaa nuolta ja valitse CSS.
Kirjoita tai liitä liukuvärin koodi CSS-koodi-kenttään. Teemaeditorin esikatselu näyttää liukuvärin valitsemassasi sijainnissa.
Klikkaa Tallenna.
Liukuvärin poistaminen
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
Napsauta muokattavan teeman vierestä Mukauta.
Klikkaa rataskuvaketta ja valitse sitten Värit.
Napsauta Mallit-osiossa olemassa olevaa mallia, jota haluat muokata.
Napsauta poistettavaa liukuväriä.
Napsauta Poista liukuväri.
Klikkaa Tallenna.