Varmista, että sivustosi näyttää hyvältä puhelimilla ja tableteilla
Näe, miltä verkkokauppasi näyttää tableteilla ja puhelimilla, piilota lohkoja pienillä näytöillä ja säädä lohkon sijaintia vain yhdessä näyttökoossa.
Useimmat kävijät käyvät verkkokaupassa puhelimella, joten sivujesi on toimittava kaikilla näyttökooilla. Suunnittelet kerran, ja Payly mukauttaa sivun tableteille ja puhelimille. Tämä artikkeli kertoo, mitä tapahtuu itsestään, ja miten voit muuttaa sitä, kun haluat lohkon toimivan pienemmällä näytöllä toisin.
Näin asettelu mukautuu
Lohkot sijaitsevat 12 sarakkeen ruudukon soluissa, eivät kiinteissä pikselipaikoissa, joten ne eivät mene päällekkäin pienellä näytöllä. Sivu vaihtaa asettelua kahdessa kohdassa:
- Tabletit (alle 1024 pikseliä leveät näytöt) säilyttävät saman ruudukon. Lohko pysyy paikallaan, ellet siirrä sitä tablettinäkymässä.
- Puhelimet (760 pikseliä tai kapeammat) asettavat jokaisen lohkon omalle rivilleen koko leveydeltä. Lohkot pinoutuvat ylhäältä alas siinä järjestyksessä, jossa ne luetaan työpöydällä: ylhäältä alas, sitten vasemmalta oikealle.
Jotkin lohkot mukautuvat vielä lisää. Ylätunnisteen linkit taittuvat valikkopainikkeen taakse, ruudukot muuttuvat yhdeksi sarakkeeksi, ja galleriat sekä logolistat näyttävät kaksi saraketta. Tuloksena on verkkokauppa, joka toimii puhelimella ilman mitään lisäasetuksia.
Vaihda näyttökokojen välillä
- Napsauta editorin yläpalkissa Tabletti tai Mobiili. Sivu kapenee, jotta näet, miltä se näyttää kyseisessä koossa.
- Käy sivu läpi ja etsi kohdat, jotka eivät näytä hyviltä. Vieritä ja valitse lohkoja kuten tavallisesti.
- Napsauta Työpöytä palataksesi täysikokoiseen asetteluun.
Nämä painikkeet eivät ole pelkkä esikatselu. Niillä valitaan myös, mitä asettelua muokkaat. Kun vaihdat näkymään Tabletti tai Mobiili, viesti muistuttaa, että muutokset koskevat vain tätä kokoa. Siellä tekemäsi muutokset eivät vaikuta työpöydän asetteluun.
Piilota lohko pienillä näytöillä
Iso kuva tai pitkä koristeellinen lohko voi täyttää puhelimen näytön liiaksi. Voit piilottaa sen pienillä näytöillä ja pitää sen työpöydällä.
- Napsauta yläpalkissa Mobiili (tai Tabletti).
- Valitse lohko.
- Avaa asetuspaneelissa Koko ja sijainti.
- Kytke Piilota mobiilissa (tai Piilota tabletilla) päälle. Lohko katoaa tästä näkymästä eikä jätä tyhjää aukkoa julkaistulle sivulle.
Tabletilla piilotettu lohko on piilotettu myös puhelimilla, ellet kytke sitä uudelleen pois päältä Mobiili-näkymässä. Jos haluat piilottaa lohkon kaikilla näytöillä, käytä Piilota tämä lohko -asetusta Työpöytä-näkymässä.
Sijoita lohko eri tavalla yhdessä näyttökoossa
- Valitse yläpalkista Tabletti tai Mobiili.
- Valitse lohko ja avaa Koko ja sijainti.
- Muuta Alkaa sarakkeesta, Leveys sarakkeina, Alkaa rivistä tai Korkeus riveinä, tai napsauta Täytä koko leveys. Voit myös vetää lohkon sivulla ja muuttaa sen kokoa.
Koko ja sijainti -osion yläreunan palkki kertoo, mitä asettelua muokkaat. Siinä näkyy Perittu, kun lohko seuraa suurempaa kokoa, ja Palauta oletus -painike, kun lohkolla on omat asetuksensa. Napsauta Palauta oletus, jotta lohko seuraa taas suurempaa kokoa. Napsauta Käytä tätä asettelua kaikilla näytöillä, jos haluat kopioida nykyisen asettelun jokaiseen kokoon.
Yläpalkki laskee myös lohkot, jotka eroavat työpöydän asettelusta, esimerkiksi 1 lohko eroaa mobiilissa. Napsauta lukua siirtyäksesi seuraavaan tällaiseen lohkoon.
Pidä lohko samana kaikilla näytöillä
Kytke Sama kaikilla näytöillä päälle kohdassa Koko ja sijainti, jotta lohkolla on yksi asettelu kaikkialla. Kaikki sen tablet- tai puhelinasetukset poistetaan, ja myöhemmät muutokset koskevat kaikkia kokoja kerralla.
Huomautus: Lohkon siirtäminen toiseen osioon muuttaa sitä kaikilla näyttökooilla, joten Payly sallii sen vain Työpöytä-näkymässä. Jos haluat sijoittaa lohkon eri tavalla puhelimilla, lisää se molempiin osioihin ja piilota kummassakin näyttökoossa se, jota et halua näyttää.
Tarkista tulos
Käytä Esikatselu-toimintoa selataksesi sivujasi puhelimen ja tabletin leveydellä, ja katso julkaistu verkkokauppa oikealla puhelimella ennen kuin ilmoitat siitä. Katso Sivustosi esikatselu ennen julkaisua.