Sådan ser din hjemmeside rigtig ud på telefoner og tablets
Se hvordan din butik ser ud på tablets og telefoner, skjul blokke på små skærme, og justér en blok's placering for kun én skærmstørrelse.
De fleste købere besøger en butik fra en telefon, så dine sider skal virke i alle størrelser. Du designer én gang, og Payly tilpasser siden til tablets og telefoner. Denne artikel forklarer, hvad der sker af sig selv, og hvordan du ændrer det, når du vil have en blok til at opføre sig anderledes på en mindre skærm.
Sådan tilpasser dit layout sig
Blokke står i celler i et gitter med 12 kolonner og aldrig på faste pixelpositioner, så de ikke kan overlappe på en lille skærm. Siden skifter layout to steder:
- Tablets (skærme smallere end 1024 pixels) bevarer det samme gitter. En blok bliver, hvor den er, medmindre du flytter den for tablets.
- Telefoner (760 pixels eller smallere) lægger hver blok på sin egen række i fuld bredde. Blokkene stables oppefra og ned i den rækkefølge, du læser dem på desktop: oppefra og ned, derefter fra venstre mod højre.
Nogle blokke tilpasser sig yderligere. Links i sidehovedet klappes sammen bag en menuknap, gitre samles til én kolonne, og gallerier og logostrimler viser to kolonner. Resultatet er en butik, der virker på en telefon uden ekstra opsætning.
Skift mellem skærmstørrelser
- Klik på Tablet eller Mobil i den øverste bjælke i editoren. Siden smalnes ind, så du kan se, hvordan den ser ud i den størrelse.
- Gennemgå siden for alt, der ikke læses godt. Scroll, og markér blokke, som du plejer.
- Klik på Desktop for at vende tilbage til layoutet i fuld størrelse.
Disse knapper gør mere end at vise en forhåndsvisning. De vælger også, hvilket layout du redigerer. Når du skifter til Tablet eller Mobil, minder en besked dig om, at ændringer kun gælder for den størrelse. Det, du ændrer der, rører ikke ved desktop-layoutet.
Skjul en blok på små skærme
Et stort foto eller en lang dekorativ blok kan fylde for meget på en telefon. Du kan skjule den på små skærme og beholde den på desktop.
- Klik på Mobil (eller Tablet) i den øverste bjælke.
- Markér blokken.
- I indstillingspanelet åbner du Størrelse og placering.
- Slå Skjul på mobil (eller Skjul på tablet) til. Blokken forsvinder fra den visning og efterlader intet tomt hul på den live side.
En blok, der er skjult på tablets, er skjult på telefoner også, medmindre du slår kontakten fra igen, mens du ser Mobil. For at skjule en blok på alle skærme bruger du Skjul denne blok på Desktop.
Placer en blok anderledes på én størrelse
- Vælg Tablet eller Mobil i den øverste bjælke.
- Markér blokken, og åbn Størrelse og placering.
- Ændr Starter i kolonne, Bredde i kolonner, Starter i række eller Højde i rækker, eller klik på Fyld hele bredden. Du kan også trække i blokken og ændre dens størrelse på siden.
Linjen øverst i Størrelse og placering siger, hvilket layout du redigerer. Den viser Nedarvet, mens blokken følger den større størrelse, og en knap Nulstil, når blokken har egne indstillinger. Klik på Nulstil for at få blokken til at følge den større størrelse igen. Klik på Brug dette layout på alle skærme for at kopiere det aktuelle layout til alle størrelser.
Den øverste bjælke tæller også de blokke, der afviger fra desktop-layoutet, for eksempel 1 blok er anderledes på mobil. Klik på tallet for at hoppe fra én sådan blok til den næste.
Behold en blok ens på alle skærme
Slå Samme på alle skærme til under Størrelse og placering for at give en blok ét layout overalt. Eventuelle indstillinger, den havde for tablet eller telefon, fjernes, og senere ændringer gælder for alle størrelser på én gang.
Bemærk: Hvis du flytter en blok til en anden sektion, ændres den på alle skærmstørrelser, så Payly tillader det kun på Desktop. Vil du placere en blok anderledes på telefoner, skal du tilføje den til begge sektioner og skjule den, du ikke vil have, på hver størrelse.
Kontrollér resultatet
Brug Forhåndsvisning til at klikke dig igennem dine sider i telefon- og tablet-bredde, og se den udgivne butik på en rigtig telefon, før du annoncerer den. Se Forhåndsvis din hjemmeside, før du udgiver.