Värien, fonttien ja asettelun määrittäminen
Käytä Sivuston ulkoasu -välilehteä asettaaksesi verkkokauppasi värit, kirjasintyypit, tekstikoot ja kulmien pyöreyden kerralla kaikille sivuille.
Sivuston ulkoasu sisältää asetukset, joilla koko verkkokauppasi näyttää yhtenäiseltä brändiltä: värit, kirjasintyypit, tekstikoot ja kulmien pyöreys. Asetat jokaisen kerran, ja jokainen sivu noudattaa niitä. Yksittäiset lohkot voivat silti ohittaa nämä asetukset halutessasi.
Avaa Sivuston ulkoasu
- Avaa editori. Katso Editori lyhyesti.
- Napsauta oikealla olevassa asetuspaneelissa välilehteä Sivuston ulkoasu.
- Napsauta otsikkoa avataksesi sen: Identiteetti, Värit, Typografia tai Asettelu.
Muutokset näkyvät sivulla heti ja tallentuvat automaattisesti. Live-verkkokauppasi muuttuu vasta, kun julkaiset.
Värit
Avaa Värit nähdäksesi seitsemän väriä, joista jokainen sivu muodostuu.
- Korostus: verkkokauppasi pääväri. Painikkeet ja linkit käyttävät sitä.
- Teksti korostusvärillä: korostusvärin päällä olevien sanojen väri, kuten painikkeen teksti.
- Sivun tausta: sivujesi taustaväri.
- Pinta: korttien ja paneelien väri, esimerkiksi tuotekorttien ja lomakekenttien.
- Teksti: otsikoiden ja muun pääasiallisen tekstin väri.
- Toissijainen teksti: hillitympi väri, jota käytetään kappaleteksteissä, kuvauksissa ja pienessä tekstissä.
- Reunat: ohuiden viivojen ja ääriviivojen väri.
Valitse väri
- Napsauta väriruutua.
- Avautuvassa valitsimessa voit tehdä jotakin seuraavista:
- Napsauta tai vedä suurta neliötä määrittääksesi värin kirkkauden ja voimakkuuden, ja vedä sen alla olevaa palkkia vaihtaaksesi itse väriä.
- Kirjoita tai liitä heksakoodi, kuten
#2B2622, kenttään. - Napsauta väriruutua kohdassa Teemavärit, jos haluat käyttää jo olemassa olevaa väriä, tai kohdassa Viimeisimmät, jos haluat viimeksi valitsemasi värin.
- Sulje valitsin napsauttamalla sen ulkopuolella tai painamalla Esc.
Tarkista, että teksti on luettavaa
Seitsemän värin alapuolella Payly tarkistaa, että jokainen tekstiväri erottuu taustastaan. Jos kaikki on kunnossa, näet tekstin Kaikki väriyhdistelmät ovat helppolukuisia. Jos jokin pari erottuu liian heikosti, luettelo nimeää sen, näyttää sen kontrastisuhteen ja kertoo, mikä suhteen pitäisi olla. Lisäksi tarjolla on painike Korjaa, joka säätää tekstin väriä puolestasi.
Payly ei estä valitsemasta heikkoa kontrastiparia, mutta vaaleanharmaa teksti vaalealla taustalla on vaikealukuista, varsinkin puhelimella auringonvalossa.
Typografia
Avaa Typografia valitaksesi fonttisi ja tekstikokosi.
- Leipätekstin kirjasintyyppi: kappaleiden, valikoiden ja painikkeiden fontti.
- Perusfontin koko: tavallisen tekstin koko.
- Leipätekstin rivinkorkeus: tekstirivien välinen tila. Suurempi luku antaa enemmän tilaa.
- Otsikon kirjasintyyppi: otsikoiden fontti. Valitse Käytä sivuston kirjasintyyppiä, jos haluat käyttää myös otsikoissa leipätekstin fonttia.
- Otsikon koko: suurentaa tai pienentää kaikkia otsikoita prosentteina.
- Otsikon paksuus: kuinka lihavia otsikot ovat.
- Otsikon kirjainväli: tiivistää tai väljentää otsikon kirjainten välejä.
Valitse kirjasintyyppi
- Napsauta kenttää Leipätekstin kirjasintyyppi tai Otsikon kirjasintyyppi.
- Selaa listaa, jossa jokainen nimi näkyy omalla fontillaan. Ylimmässä ryhmässä Suositellut ovat fontit, jotka sopivat useimpiin verkkokauppoihin.
- Jos haluat etsiä fonttia nimellä, kirjoita kenttään Etsi kirjasintyyppejä….
- Napsauta fonttia käyttääksesi sitä.
Lista kattaa koko Google Fonts -kirjaston. Käyttämäsi fontit sisällytetään verkkokauppaasi, kun julkaiset. Jos fontti puuttuu listalta, kirjoita sen tarkka Google Fonts -nimi hakukenttään ja valitse se kohdasta Käytä silti.
Asettelu
Avaa Asettelu, niin näet kaksi asetusta:
- Kulman pyöristys määrittää, kuinka pyöreät painikkeiden, korttien ja kuvien kulmat ovat. Liu'uta nollaan, jos haluat terävät kulmat, tai oikealle, jos haluat pehmeät. Lohkot, joiden oma kulman pyöristys on Automaattinen, seuraavat tätä asetusta.
- Tekstin suunta on Vasemmalta oikealle useimmille kielille. Oikealta vasemmalle kääntää koko asettelun arabiaa, hepreaa, persiaa ja urdua varten.
Identiteetti
Avaa Identiteetti, niin voit asettaa kohdan Selaimen kuvake eli pienen kuvan, joka näkyy selaimen välilehdessä. Käytä yksinkertaista merkkiä koko logon sijaan, koska se näytetään noin 16 pikselin kokoisena. Napsauta Lataa kuva ylös tai Selaa ladattuja kuvia, kuten artikkelissa Lisää kuvia ja käytä mediakirjastoa kerrotaan. Jos jätät kentän tyhjäksi, käytetään logoasi.
Logoa ei aseteta täällä vaan ylätunnisteessa, jossa se näkyy. Katso Ylätunnisteen ja alatunnisteen muokkaaminen.
Vain yhden lohkon muuttaminen
Jokainen tekstilohko, otsikko ja painike voi ohittaa sivuston kirjasintyypin, koon ja värit. Valitse lohko ja avaa sen ryhmä Typografia tai Ulkoasu. Katso Tekstin, otsikoiden ja painikkeiden muokkaaminen.
Vinkki: Jos haluat aivan erilaisen ilmeen, voit aloittaa alusta jostakin valmiista ulkoasusta. Katso Vaihda toiseen sivuston ulkoasuun.