Responsywność - wygląd strony na komputerze, tablecie i telefonie

W edytorze Manifo możecie teraz osobno ustawić układ kolumn dla komputera, tabletu i telefonu. Sami decydujecie, ile miejsca zajmą poszczególne kolumny i które z nich będą widoczne w danym widoku.

Dzięki temu możecie dopasować tę samą stronę do różnych szerokości ekranu, bez przygotowywania osobnych wersji jej treści.

Ustawienia dostępne pod przyciskiem GRID

Aby zmienić układ, przejdźcie do edycji wiersza i kliknijcie GRID. Otworzy się okno „Układ kolumn” z trzema zakładkami:

• Desktop — ustawienia dla komputerów;

• Tablet — ustawienia dla tabletów;

• Mobile — ustawienia dla telefonów.

Wybierzcie widok, a następnie kolumnę, którą chcecie zmienić. W tym miejscu ustawicie jej szerokość oraz widoczność. Podgląd pokazuje rozmieszczenie kolumn, dzięki czemu łatwiej ocenić układ przed zapisaniem zmian.

Dopasujcie szerokości do zawartości

Szerokości kolumn są przedstawione jako części dostępnego miejsca. 12/12 oznacza pełną szerokość, 6/12 połowę, a 3/12 jedną czwartą. Możecie korzystać z suwaka, pola liczbowego lub przycisków z gotowymi proporcjami.

Na pokazanym przykładzie widok komputerowy ma trzy kolumny: pierwsza zajmuje połowę szerokości, a dwie pozostałe po jednej czwartej. Taki podział daje więcej miejsca głównej treści, pozostawiając obok przestrzeń na dodatkowe informacje.

Dla tabletu i telefonu możecie dobrać inne proporcje, odpowiednie do mniejszego ekranu.

Zdecydujcie, co pokazać na telefonie

Każda kolumna ma również przełącznik widoczności dla wybranego widoku. Możecie więc pozostawić ją na komputerze, a ukryć na telefonie — bez usuwania jej ze strony.

Na drugim przykładzie pierwsza kolumna zajmuje na telefonie całą szerokość, a dwie pozostałe są ukryte. To jedna z możliwości uproszczenia układu na małym ekranie. Warto jednak pozostawić widoczne informacje potrzebne odwiedzającym, takie jak oferta, dane kontaktowe czy główne przyciski.

Zapiszcie i sprawdźcie rezultat

Po dopasowaniu ustawień kliknijcie „Zapisz”, a następnie obejrzyjcie stronę w poszczególnych widokach. Sprawdźcie przede wszystkim czytelność tekstów, wielkość zdjęć i to, czy najważniejsze treści mają wystarczająco dużo miejsca.

Nowe ustawienia dają Wam większy wpływ na to, jak strona zachowuje się na różnych urządzeniach. Funkcja jest już dostępna w edytorze — znajdziecie ją pod przyciskiem GRID podczas edycji wiersza.