Jak zobrazit váš web správně na telefonech a tabletech
Zjistěte, jak váš e-shop vypadá na tabletech a telefonech, skryjte bloky na malých obrazovkách a upravte polohu bloku jen pro jednu velikost obrazovky.
Většina nakupujících navštěvuje e-shop z telefonu, takže vaše stránky musí fungovat při každé velikosti. Navrhnete je jednou a Payly stránku přizpůsobí tabletům a telefonům. Tento článek vysvětluje, co se děje automaticky, a jak to změnit, když chcete, aby se blok na menší obrazovce choval jinak.
Jak se rozložení přizpůsobuje
Bloky sedí v buňkách mřížky o 12 sloupcích, nikdy ne na pevných pixelových pozicích, takže se na malé obrazovce nemohou překrývat. Stránka přepíná rozložení ve dvou bodech:
- Tablety (obrazovky užší než 1024 pixelů) zachovávají stejnou mřížku. Blok zůstává tam, kde je, dokud ho pro tablety nepřesunete.
- Telefony (760 pixelů nebo užší) dají každý blok na vlastní řádek v plné šířce. Bloky se skládají shora dolů v pořadí, v jakém je čtete na počítači: shora dolů, pak zleva doprava.
Některé bloky se přizpůsobují ještě více. Odkazy v záhlaví se schovají za tlačítko menu, mřížky se sbalí do jednoho sloupce a galerie a pásy log zobrazují dva sloupce. Výsledkem je e-shop, který funguje na telefonu bez jakéhokoli dalšího nastavení.
Přepínání mezi velikostmi obrazovek
- V horní liště editoru klikněte na Tablet nebo Mobil. Stránka se zúží, aby ukázala, jak vypadá v dané velikosti.
- Projděte stránku a hledejte, co se nečte dobře. Posouvejte a vybírejte bloky stejně jako obvykle.
- Kliknutím na Počítač se vrátíte k rozložení v plné velikosti.
Tato tlačítka dělají víc než náhled. Určují také, které rozložení upravujete. Když přepnete na Tablet nebo Mobil, zpráva vám připomene, že změny platí jen pro danou velikost. Cokoli tam změníte, nezmění rozložení pro počítač.
Skrytí bloku na malých obrazovkách
Velká fotografie nebo dlouhý dekorativní blok může na telefonu působit přeplněně. Můžete ho skrýt na malých obrazovkách a na počítači ponechat.
- V horní liště klikněte na Mobil (nebo na Tablet).
- Vyberte blok.
- V panelu nastavení otevřete Velikost a poloha.
- Zapněte Skrýt na mobilu (nebo Skrýt na tabletu). Blok z tohoto zobrazení zmizí a na živé stránce nezanechá prázdné místo.
Blok skrytý na tabletech je skrytý i na telefonech, pokud při prohlížení Mobil přepínač znovu nevypnete. Chcete-li blok skrýt na všech obrazovkách, použijte na Počítači volbu Skrýt tento blok.
Umístění bloku jinak na jedné velikosti
- V horní liště zvolte Tablet nebo Mobil.
- Vyberte blok a otevřete Velikost a poloha.
- Změňte Začíná ve sloupci, Šířka ve sloupcích, Začíná v řádku nebo Výška v řádcích, nebo klikněte na Vyplnit celou šířku. Blok můžete také přetáhnout a změnit jeho velikost přímo na stránce.
Lišta nahoře v Velikost a poloha ukazuje, které rozložení upravujete. Dokud blok následuje větší velikost, zobrazuje Převzato. Jakmile má blok vlastní nastavení, objeví se tlačítko Obnovit výchozí. Kliknutím na něj přinutíte blok znovu následovat větší velikost. Kliknutím na Použít toto rozložení na všech obrazovkách zkopírujete aktuální rozložení na každou velikost.
Horní lišta také počítá bloky, které se liší od rozložení pro počítač, například 1 blok se liší na mobilu. Kliknutím na počet přejdete z jednoho takového bloku na další.
Udržení stejného bloku na všech obrazovkách
Zapněte Stejné na všech obrazovkách v Velikost a poloha, aby blok měl všude jedno rozložení. Veškerá nastavení, která měl pro tablet nebo telefon, se odstraní a pozdější úpravy platí pro všechny velikosti najednou.
Poznámka: Přesunutí bloku do jiné sekce ho změní na každé velikosti obrazovky, proto to Payly dovolí jen na Počítači. Chcete-li blok na telefonu umístit jinak, přidejte ho do obou sekcí a na každé velikosti skryjte tu, kterou nechcete.
Ověření výsledku
Pomocí Náhled si projděte stránky v šířce telefonu a tabletu a před oznámením zákazníkům si publikovaný e-shop prohlédněte na skutečném telefonu. Viz Náhled webu před publikováním.