Näin säädät taustakuvan kohdistusta Squarespacessa
Jos Squarespace-sivustosi taustakuva näyttää hyvältä tietokoneella mutta rajautuu hassusti mobiilissa, et välttämättä tarvitse kokonaan uutta kuvaa. Monissa tilanteissa ongelman voi ratkaista muuttamalla kuvan Focal Point -asetusta eli kuvan kohdistuspistettä.
Mikä Focal Point on?
Focal Point kertoo Squarespacelle, mikä kohta kuvasta on kaikkein tärkein.
Koska desktopin ja puhelimen näytöt ovat eri muotoisia, Squarespace joutuu rajaamaan taustakuvaa eri tavalla eri näyttökoissa. Focal Pointin avulla voit ohjata sitä, mikä kohta kuvasta pyritään pitämään näkyvissä rajauksesta huolimatta.
Tämä on erityisen hyödyllistä esimerkiksi silloin, kun kuvassa on henkilö, tuote tai muu tärkeä yksityiskohta, jonka et halua rajautuvan pois mobiilinäkymässä.
Näin muutat kuvan Focal Point -asetusta
Avaa Squarespace-editorissa section, jonka taustakuvaa haluat muokata, ja siirry taustakuvan asetuksiin oikeasta reunasta klikkaamalla EDIT SECTION.
Siirry background -välilehdelle sectionin asetuksissa. Kuvan päällä näkyy Focal Point -kohdistuspiste. Siirrä piste siihen kohtaan kuvaa, jonka haluat pysyvän mahdollisimman hyvin näkyvissä eri näyttökoissa.
Jos kuvassa on esimerkiksi henkilö kuvan oikeassa reunassa, sijoita Focal Point henkilön kohdalle. Squarespace käyttää tätä tietoa apuna, kun kuvaa rajataan eri kokoisille näytöille.
Tarkista muutoksen jälkeen sekä desktop- että mobiilinäkymä ja säädä kohdistuspistettä tarvittaessa.
HUOM! Focal point asetus on sama sekä desktop, että mobiilinäkymille. Eli et voi asettaa eri focal pointtia tietokonenäkymään ja mobiilinäkymään samalle kuvalle.
Entä jos sama kuva ei vain toimi mobiilissa?
Jos jonkin sectionin taustakuva ei asetu hyvin mobiilissa, focal Pointin vaihtaminen kannattaa kokeilla ensimmäisenä, sillä joskus pieni muutos kuvan kohdistukseen ratkaisee koko ongelman.
Kaikkia kuvia ei kuitenkaan pysty rajaamaan toimiviksi sekä leveälle desktop-näytölle että kapealle puhelimen ruudulle samalla focal point säädöllä. Silloin parempi ratkaisu voi olla käyttää kokonaan eri kuvaa mobiilissa.
Haluatko käyttää eri taustakuvaa desktopilla ja mobiilissa?
Squarespacen omilla sisäisillä ominaisuuksilla pystyy myös näyttämään eri taustakuvan tietokonenäytöillä eli desktopissa ja toisen kuvan mobiilissa. Tähän löytyy muutamia poikkeustilanteita milloin ne keinot eivät sovellu ja tarvitaan koodia avuksi, jotta pystytään näyttämään eri kuva mobiilissa kuin desktopilla. Squaremarketin valikoimista löydät ohjeet, jossa esitellään ja opetetaan eri vaihtoehdot taustakuvien mukauttamiseen. Mukana ovat sekä ilman koodia ja Squarespacen omia toimintoja hyödyntävä ratkaisu että valmis CSS-koodi tilanteeseen, jossa erillisen mobiilikuvan käyttäminen vaatii koodia.
