Få din webbplats att se bra ut på mobil och surfplatta
Se hur din butik ser ut på surfplattor och mobiler, dölj block på små skärmar och justera ett blocks position för bara en skärmstorlek.
De flesta kunder besöker en butik från en mobil, så dina sidor måste fungera i alla storlekar. Du designar en gång, och Payly anpassar sidan för surfplattor och mobiler. Den här artikeln förklarar vad som sker av sig självt och hur du ändrar det när du vill att ett block ska bete sig annorlunda på en mindre skärm.
Så anpassas din layout
Block placeras i celler i ett rutnät med 12 kolumner, aldrig på fasta pixelpositioner, så de kan inte överlappa på en liten skärm. Sidan byter layout vid två brytpunkter:
- Surfplattor (skärmar smalare än 1024 pixlar) behåller samma rutnät. Ett block stannar där det är om du inte flyttar det för surfplattor.
- Mobiler (760 pixlar eller smalare) lägger varje block på en egen rad i full bredd. Blocken staplas uppifrån och ned i den ordning du läser dem på datorn: uppifrån och ned, sedan från vänster till höger.
Vissa block anpassas ännu mer. Länkarna i sidhuvudet viks in bakom en menyknapp, rutnät blir en enda kolumn, och gallerier och logotyprader visar två kolumner. Resultatet är en butik som fungerar på mobilen utan någon extra inställning.
Växla mellan skärmstorlekar
- Klicka på Surfplatta eller Mobil i redigerarens övre fält. Sidan blir smalare så att du ser hur den ser ut i den storleken.
- Gå igenom sidan och leta efter allt som inte är lättläst. Scrolla och markera block som du brukar.
- Klicka på Dator för att gå tillbaka till layouten i full storlek.
De här knapparna gör mer än att förhandsgranska. De avgör också vilken layout du redigerar. När du byter till Surfplatta eller Mobil påminner ett meddelande dig om att ändringarna gäller bara den storleken. Allt du ändrar där lämnar datorlayouten orörd.
Dölj ett block på små skärmar
Ett stort foto eller ett långt dekorativt block kan göra en mobil överfull. Du kan dölja det på små skärmar och behålla det på datorn.
- Klicka på Mobil (eller Surfplatta) i det övre fältet.
- Markera blocket.
- Öppna Storlek och position i inställningspanelen.
- Slå på Dölj på mobil (eller Dölj på surfplatta). Blocket försvinner från den vyn och lämnar inget tomt gap på den publicerade sidan.
Ett block som är dolt på surfplattor är dolt på mobiler också, om du inte slår av reglaget igen medan du visar Mobil. Om du vill dölja ett block på alla skärmar använder du Dölj det här blocket på Dator.
Placera ett block annorlunda i en storlek
- Välj Surfplatta eller Mobil i det övre fältet.
- Markera blocket och öppna Storlek och position.
- Ändra Börjar i kolumn, Bredd i kolumner, Börjar på rad eller Höjd i rader, eller klicka på Fyll hela bredden. Du kan också dra och ändra storlek på blocket direkt på sidan.
Fältet högst upp i Storlek och position visar vilken layout du redigerar. Det visar Ärvd medan blocket följer den större storleken, och en knapp Återställ när blocket har egna inställningar. Klicka på Återställ för att låta blocket följa den större storleken igen. Klicka på Använd den här layouten på alla skärmar för att kopiera den aktuella layouten till alla storlekar.
Det övre fältet räknar också de block som skiljer sig från datorlayouten, till exempel 1 block skiljer sig på mobil. Klicka på antalet för att hoppa från ett sådant block till nästa.
Behåll ett block likadant på alla skärmar
Slå på Samma på alla skärmar i Storlek och position om du vill ge ett block en och samma layout överallt. Alla inställningar som blocket hade för surfplatta eller mobil tas bort, och senare ändringar gäller alla storlekar på en gång.
Obs: Att flytta ett block till ett annat avsnitt ändrar det i alla skärmstorlekar, så Payly tillåter det bara på Dator. Om du vill placera ett block annorlunda på mobiler lägger du till det i båda avsnitten och döljer det du inte vill ha i varje storlek.
Kontrollera resultatet
Använd Förhandsgranska för att klicka dig igenom sidorna i mobil- och surfplattebredd, och titta på den publicerade butiken på en riktig mobil innan du berättar om den. Se Förhandsgranska din webbplats innan publicering.