Eri taustakuva desktopille ja mobiiliin Squarespace sivuilla / OHJE

Mitä tämä ohje tekee?

Tämän Squarespace-ohjeen avulla voit mukauttaa sectionin taustakuvan toimimaan paremmin desktop- ja mobiilinäkymissä. Voit käyttää samaa taustakuvaa ja näyttää siitä eri kohdan mobiilissa tai määrittää desktopille ja mobiilille kokonaan eri taustakuvat.

Ohjeessa käydään läpi eri toteutustavat sen mukaan, millainen lopputulos on tavoitteena ja onko sivustosi header asetettu Solid- vai Adaptive-tilaan. Mukana on sekä ilman koodia tehtäviä ratkaisuja että valmis CSS-koodi tilanteeseen, jossa sitä tarvitaan.

Ohjeessa opit:

• Näyttämään eri kohdan samasta taustakuvasta desktopilla ja mobiilissa

• Käyttämään eri taustakuvaa desktopilla ja mobiilissa ilman koodia, kun header on Solid-tilassa

• Käyttämään eri taustakuvaa desktopilla ja mobiilissa CSS-koodin avulla, kun header on Adaptive-tilassa

Ohjeet on tehty vaihe vaiheelta, joten sinun ei tarvitse tietää koodauksesta mitään. Valitse omaan tilanteeseesi sopiva tapa ja seuraa mukana tulevaa video- tai CSS-ohjetta.

Miksi taustakuvaa kannattaa mukauttaa mobiiliin?

Desktopille suunniteltu leveä taustakuva ei aina toimi sellaisenaan kapealla mobiilinäytöllä. Kuvan tärkeä kohta voi rajautua pois tai kuva ei muuten näytä mobiilissa siltä kuin haluaisit.

Mukauttamalla taustakuvan erikseen mobiilinäkymään voit varmistaa, että kuvan tärkeimmät yksityiskohdat näkyvät oikein ja sectionin visuaalinen ilme toimii eri näyttökoissa.

Yhteensopivuus

• Squarespace 7.1

• Fluid Engine -sectionit

• Sisältää video-ohjeet ilman koodia tehtäviin muutoksiin

• Sisältää CSS-koodin Adaptive-headeria varten

• Ei vaadi lisäosien asennusta

Rajoitukset & oikeudet

• Tämä tuote sisältää video-ohjeet sekä valmiin CSS-koodipalan, ei teknistä tukea.

• Käyttöoikeus rajattomalle määrälle Squarespace-sivustoja.

• Ei jälleenmyyntiä tai jakelua.

• Koska kyseessä on digitaalinen tuote, tällä ei ole palautusoikeutta.