Je site er goed laten uitzien op telefoons en tablets
Bekijk hoe je winkel eruitziet op tablets en telefoons, verberg blokken op kleine schermen en pas de positie van een blok aan voor slechts één schermgrootte.
De meeste bezoekers openen een winkel op hun telefoon, dus je pagina's moeten op elke schermgrootte werken. Je ontwerpt één keer en Payly past de pagina aan voor tablets en telefoons. In dit artikel lees je wat vanzelf gebeurt en hoe je het aanpast als je wilt dat een blok zich op een kleiner scherm anders gedraagt.
Hoe je indeling zich aanpast
Blokken staan in cellen van een raster met 12 kolommen en nooit op vaste pixelposities, dus ze kunnen elkaar op een klein scherm niet overlappen. De pagina wisselt op twee punten van indeling:
- Tablets (schermen smaller dan 1024 pixels) behouden hetzelfde raster. Een blok blijft staan waar het staat, tenzij je het voor tablets verplaatst.
- Telefoons (760 pixels of smaller) zetten elk blok op een eigen rij over de volle breedte. De blokken komen van boven naar beneden onder elkaar, in de volgorde waarin je ze op de desktop leest: van boven naar beneden, en dan van links naar rechts.
Sommige blokken passen zich verder aan. Links in de header verdwijnen achter een menuknop, rasters worden één kolom en galerijen en logostroken tonen twee kolommen. Het resultaat is een winkel die op een telefoon werkt zonder extra instellingen.
Wisselen tussen schermgroottes
- Klik in de bovenbalk van de editor op Tablet of Mobiel. De pagina wordt smaller, zodat je ziet hoe hij op die grootte eruitziet.
- Loop de pagina door op zoek naar dingen die niet goed lezen. Scroll en selecteer blokken zoals je dat normaal doet.
- Klik op Desktop om terug te gaan naar de indeling op volle grootte.
Deze knoppen doen meer dan een voorbeeld tonen. Ze bepalen ook welke indeling je bewerkt. Als je overschakelt naar Tablet of Mobiel, herinnert een melding je eraan dat wijzigingen alleen voor die grootte gelden. Alles wat je daar wijzigt, laat de desktopindeling ongemoeid.
Een blok verbergen op kleine schermen
Een grote foto of een lang decoratief blok kan een telefoonscherm vol maken. Je kunt het op kleine schermen verbergen en op de desktop laten staan.
- Klik in de bovenbalk op Mobiel (of Tablet).
- Selecteer het blok.
- Open in het instellingenpaneel Grootte en positie.
- Zet Verbergen op mobiel (of Verbergen op tablet) aan. Het blok verdwijnt uit die weergave en laat op de live pagina geen lege ruimte achter.
Een blok dat op tablets is verborgen, is ook op telefoons verborgen, tenzij je de schakelaar weer uitzet terwijl je Mobiel bekijkt. Wil je een blok op elk scherm verbergen, gebruik dan Dit blok verbergen op Desktop.
Een blok op één schermgrootte anders plaatsen
- Kies Tablet of Mobiel in de bovenbalk.
- Selecteer het blok en open Grootte en positie.
- Wijzig Begint bij kolom, Kolommen breed, Begint bij rij of Rijen hoog, of klik op Volledige breedte vullen. Je kunt het blok ook op de pagina slepen en vergroten of verkleinen.
De balk bovenaan Grootte en positie geeft aan welke indeling je bewerkt. Hij toont Overgenomen zolang het blok de grotere schermgrootte volgt, en een knop Terugzetten zodra het blok eigen instellingen heeft. Klik op Terugzetten om het blok weer de grotere schermgrootte te laten volgen. Klik op Deze indeling overal gebruiken om de huidige indeling naar alle schermgroottes te kopiëren.
De bovenbalk telt ook de blokken die afwijken van de desktopindeling, bijvoorbeeld 1 blok wijkt af op mobiel. Klik op dat aantal om van het ene blok naar het volgende te springen.
Een blok op elk scherm hetzelfde houden
Zet Hetzelfde op elk scherm aan in Grootte en positie om een blok overal dezelfde indeling te geven. Alle instellingen die het voor tablet of telefoon had, worden verwijderd en latere wijzigingen gelden voor alle groottes tegelijk.
Opmerking: Een blok naar een andere sectie verplaatsen verandert het op elke schermgrootte, dus Payly staat dat alleen toe op Desktop. Wil je een blok op telefoons anders plaatsen, voeg het dan aan beide secties toe en verberg op elke schermgrootte het blok dat je daar niet wilt.
Het resultaat controleren
Gebruik Voorbeeld om je pagina's door te klikken op telefoon- en tabletbreedte, en bekijk de gepubliceerde winkel op een echte telefoon voordat je hem aankondigt. Zie Een voorbeeld van je site bekijken voordat je publiceert.