Dopasuj wygląd witryny do telefonów i tabletów
Zobacz, jak Twój sklep wygląda na tabletach i telefonach, ukrywaj bloki na małych ekranach i zmieniaj pozycję bloku tylko dla jednego rozmiaru ekranu.
Większość kupujących odwiedza sklep na telefonie, więc Twoje strony muszą działać w każdym rozmiarze. Projektujesz raz, a Payly dostosowuje stronę do tabletów i telefonów. Ten artykuł wyjaśnia, co dzieje się samo i jak to zmienić, gdy chcesz, aby blok zachowywał się inaczej na mniejszym ekranie.
Jak dostosowuje się Twój układ
Bloki znajdują się w komórkach siatki o 12 kolumnach, nigdy w stałych pozycjach w pikselach, więc nie mogą się nakładać na małym ekranie. Układ strony zmienia się w dwóch punktach:
- Tablety (ekrany węższe niż 1024 piksele) zachowują tę samą siatkę. Blok pozostaje na swoim miejscu, chyba że przesuniesz go dla tabletów.
- Telefony (760 pikseli lub węższe) umieszczają każdy blok w osobnym wierszu na pełną szerokość. Bloki układają się od góry do dołu w kolejności, w jakiej czytasz je na komputerze: od góry do dołu, a potem od lewej do prawej.
Niektóre bloki dostosowują się dalej. Linki w nagłówku chowają się pod przyciskiem menu, siatki zwijają się do jednej kolumny, a galerie i paski z logo pokazują dwie kolumny. Dzięki temu sklep działa na telefonie bez żadnej dodatkowej konfiguracji.
Przełączaj się między rozmiarami ekranu
- Na górnym pasku edytora kliknij Tablet lub Telefon. Strona zwęża się, aby pokazać, jak wygląda w tym rozmiarze.
- Przejrzyj stronę pod kątem elementów, które źle się czytają. Przewijaj i zaznaczaj bloki jak zwykle.
- Kliknij Komputer, aby wrócić do układu w pełnym rozmiarze.
Te przyciski robią więcej niż podgląd. Wybierają też, który układ edytujesz. Po przełączeniu na Tablet lub Telefon komunikat przypomina, że zmiany dotyczą tylko tego rozmiaru. Wszystko, co tam zmienisz, nie wpływa na układ na komputer.
Ukryj blok na małych ekranach
Duże zdjęcie lub długi blok dekoracyjny może przytłaczać telefon. Możesz ukryć go na małych ekranach i zostawić na komputerze.
- Kliknij Telefon (lub Tablet) na górnym pasku.
- Zaznacz blok.
- W panelu ustawień otwórz Rozmiar i pozycja.
- Włącz Ukryj na telefonie (lub Ukryj na tablecie). Blok znika z tego widoku i nie zostawia pustej luki na działającej stronie.
Blok ukryty na tabletach jest ukryty także na telefonach, chyba że wyłączysz przełącznik podczas oglądania widoku Telefon. Aby ukryć blok na wszystkich ekranach, użyj Ukryj ten blok w widoku Komputer.
Umieść blok inaczej w jednym rozmiarze
- Wybierz Tablet lub Telefon na górnym pasku.
- Zaznacz blok i otwórz Rozmiar i pozycja.
- Zmień Zaczyna się w kolumnie, Szerokość w kolumnach, Zaczyna się w wierszu lub Wysokość w wierszach, albo kliknij Wypełnij całą szerokość. Możesz też przeciągać blok i zmieniać jego rozmiar na stronie.
Pasek na górze sekcji Rozmiar i pozycja informuje, który układ edytujesz. Pokazuje Odziedziczone, gdy blok podąża za większym rozmiarem, oraz przycisk Resetuj, gdy blok ma już własne ustawienia. Kliknij Resetuj, aby blok znów podążał za większym rozmiarem. Kliknij Użyj tego układu na wszystkich ekranach, aby skopiować bieżący układ do każdego rozmiaru.
Górny pasek zlicza też bloki, które różnią się od układu na komputer, na przykład 1 blok różni się na telefonie. Kliknij licznik, aby przeskakiwać od jednego takiego bloku do następnego.
Zachowaj blok bez zmian na każdym ekranie
Włącz Taki sam na wszystkich ekranach w sekcji Rozmiar i pozycja, aby nadać blokowi jeden układ wszędzie. Wszystkie ustawienia dla tabletu lub telefonu zostaną usunięte, a późniejsze zmiany będą dotyczyć wszystkich rozmiarów naraz.
Uwaga: Przeniesienie bloku do innej sekcji zmienia go na każdym rozmiarze ekranu, więc Payly pozwala na to tylko w widoku Komputer. Aby umieścić blok inaczej na telefonach, dodaj go do obu sekcji i w każdym rozmiarze ukryj ten, którego nie chcesz.
Sprawdź efekt
Użyj Podgląd, aby przeklikać strony w szerokościach telefonu i tabletu, i obejrzyj opublikowany sklep na prawdziwym telefonie, zanim go ogłosisz. Zobacz Podgląd witryny przed publikacją.