Gjør at nettstedet ser riktig ut på mobil og nettbrett
Se hvordan butikken din ser ut på nettbrett og mobil, skjul blokker på små skjermer, og juster plasseringen til en blokk for bare én skjermstørrelse.
De fleste besøkende handler i en butikk på telefonen, så sidene dine må fungere i alle størrelser. Du designer én gang, og Payly tilpasser siden for nettbrett og mobil. Denne artikkelen forklarer hva som skjer av seg selv, og hvordan du endrer det når du vil at en blokk skal oppføre seg annerledes på en mindre skjerm.
Slik tilpasser oppsettet seg
Blokker sitter i celler i et rutenett med 12 kolonner, aldri på faste pikselposisjoner, så de kan ikke overlappe på en liten skjerm. Siden bytter oppsett på to punkter:
- Nettbrett (skjermer smalere enn 1024 piksler) beholder det samme rutenettet. En blokk står der den står, med mindre du flytter den for nettbrett.
- Telefoner (760 piksler eller smalere) setter hver blokk på sin egen rad i full bredde. Blokkene stables fra topp til bunn i den rekkefølgen du leser dem på skrivebordet: fra topp til bunn, deretter fra venstre til høyre.
Noen blokker tilpasser seg videre. Topptekstlenker legges bak en menyknapp, rutenett kollapser til én kolonne, og gallerier og logostriper viser to kolonner. Resultatet er en butikk som fungerer på telefon uten noe ekstra oppsett.
Bytt mellom skjermstørrelser
- Klikk på Nettbrett eller Mobil i den øverste linjen i redigeringsverktøyet. Siden smalner inn for å vise hvordan den ser ut i den størrelsen.
- Gå gjennom siden og se etter alt som ikke leses godt. Bla, og velg blokker slik du vanligvis gjør.
- Klikk på Skrivebord for å gå tilbake til oppsettet i full størrelse.
Disse knappene gjør mer enn å forhåndsvise. De velger også hvilket oppsett du redigerer. Når du bytter til Nettbrett eller Mobil, minner en melding deg om at endringer bare gjelder den størrelsen. Det du endrer der, påvirker ikke skrivebordsoppsettet.
Skjul en blokk på små skjermer
Et stort bilde eller en lang dekorativ blokk kan bli for mye på en telefon. Du kan skjule den på små skjermer og beholde den på skrivebordet.
- Klikk på Mobil (eller Nettbrett) i den øverste linjen.
- Velg blokken.
- Åpne Størrelse og plassering i innstillingspanelet.
- Slå på Skjul på mobil (eller Skjul på nettbrett). Blokken forsvinner fra den visningen, og etterlater ikke et tomt mellomrom på den publiserte siden.
En blokk som er skjult på nettbrett, er skjult på telefoner også, med mindre du slår av bryteren igjen mens du ser på Mobil. For å skjule en blokk på alle skjermer bruker du Skjul denne blokken på Skrivebord.
Plasser en blokk annerledes på én størrelse
- Velg Nettbrett eller Mobil i den øverste linjen.
- Velg blokken og åpne Størrelse og plassering.
- Endre Starter i kolonne, Kolonner bred, Starter i rad eller Rader høy, eller klikk på Fyll hele bredden. Du kan også dra og endre størrelsen på blokken på siden.
Øverst i Størrelse og plassering står hvilket oppsett du redigerer. Der står Arvet så lenge blokken følger den større størrelsen, og en knapp Tilbakestill når blokken har egne innstillinger. Klikk på Tilbakestill for at blokken skal følge den større størrelsen igjen. Klikk på Bruk dette oppsettet på alle skjermer for å kopiere det nåværende oppsettet til alle størrelser.
Den øverste linjen teller også blokker som avviker fra skrivebordsoppsettet, for eksempel 1 blokk avviker på mobil. Klikk på tallet for å hoppe fra én slik blokk til den neste.
Behold en blokk lik på alle skjermer
Slå på Likt på alle skjermer i Størrelse og plassering for å gi en blokk ett oppsett overalt. Eventuelle innstillinger den hadde for nettbrett eller telefon, fjernes, og senere endringer gjelder alle størrelser samtidig.
Merk: Å flytte en blokk til en annen seksjon endrer den på alle skjermstørrelser, så Payly tillater det bare på Skrivebord. For å plassere en blokk annerledes på telefoner, legger du den til i begge seksjonene og skjuler den du ikke vil ha på hver størrelse.
Kontroller resultatet
Bruk Forhåndsvisning for å klikke deg gjennom sidene dine i telefon- og nettbrettbredde, og se den publiserte butikken på en ekte telefon før du forteller om den. Se Forhåndsvis nettstedet før publisering.