Storefront: Edytor układu strony

Wybór edytowanej strony

W tym miejscu masz możliwość przełączania się między różnymi typami stron dostępnych w twoim sklepie, co umożliwia dokonywanie stosownych modyfikacji na każdej z nich.

Struktura strony oraz edycja modułów

W tej sekcji znajdują się dwie zakładki: EDYCJA oraz DODAJ MODUŁ.

Zakładka: EDYCJA

W zakładce: EDYCJA widoczne są wszystkie te moduły, które zostały umieszczone na danym typie strony. Moduły przedstawione są w formie uproszczonej struktury, odpowiadającej układowi modułów w podglądzie na żywo.

Znajdziesz tutaj wyszukiwarkę, która pozwoli w łatwy sposób odnaleźć interesujący cię moduł. Klikając ikonę koła zębatego w obrębie danego modułu widocznego w strukturze, masz do dyspozycji opcje takie jak:

• edycja modułu,
• usunięcie modułu z układu edytowanej strony,
• całkowite usunięcie modułu z szablonu sklepu.

Zakładka: DODAJ MODUŁ

W zakładce: DODAJ MODUŁ domyślnie widoczne są wszystkie typy modułów, które są możliwe do użycia w układzie danej strony, oraz te które zostały już w nim użyte.

Znajdziesz tutaj wyszukiwarkę, która pozwoli w łatwy sposób odnaleźć interesujący cię typ modułu.

Po kliknięciu: SCHOWAJ DODANE MODUŁY, moduły które już zostały użyte w danym układzie, przestaną być widoczne na liście. W każdej chwili możesz odwrócić ten stan klikając: POKAŻ DODANE MODUŁY.

Klikając strzałkę w dół, rozwiniesz zawartość danego typu modułu. Znajdziesz tam gotowe do użycia poszczególne wersje modułu oraz możliwość dodania nowej wersji danego typu modułu.

Klikając ikonę koła zębatego w obrębie danego modułu, masz do dyspozycji czynności takie jak:

• edycja modułu,
• całkowite usunięcie modułu z szablonu sklepu.

Wizualny edytor strony z podglądem na żywo

Wizualny edytor z podglądem na żywo umożliwia dodanie nowych modułów do układu strony, edycje dodanych modułów, usunięcie czy zmianę ich kolejności za pomocą metody drag & drop (przeciągnij i upuść).

Z poziomu wizualnego edytora utworzysz siatkę (tzw. grid), dzięki której zaprojektujesz układ modułów na stronie, decydując o ilości rzędów i kolumn, w których mają się wyświetlać.

Siatka zbudowana jest według następującej struktury:

• Sekcja [S]
• Wiersze [W] (zawierające się w sekcji)
• Kolumny [K] (zawierające się w wierszu)

Podgląd edytowanej strony (widok klienta)

Dzięki tej opcji masz możliwość weryfikacji, jak wprowadzone przez ciebie zmiany w szablonie będą wyglądały z punktu widzenia klienta, odwiedzającego twój sklep. Możesz je zobaczyć w „naturalnym otoczeniu”, czyli bez dodatkowych elementów edytora.

Z rozwijanej listy: Urządzenie, możesz wybrać jedno z przykładowych urządzeń, aby podejrzeć, jak zaprojektowany przez ciebie szablon będzie się prezentował na ekranie o danej szerokości.

Klikając strzałkę na niebieskim polu możesz ukryć menu podglądu, aby podejrzeć edytowany szablon bez dodatkowych elementów rozpraszających uwagę.

Aby wrócić do edytora, kliknij przycisk: WRÓĆ DO EDYCJI.

Zmiana szerokości ekranu w podglądzie na żywo

Edytując szablon możesz decydować o tym, czy poszczególne kolumny lub też całe wiersze mają być wyświetlane na urządzeniach o danych zakresach szerokości ekranu. To zagadnienie omówiliśmy w artykule: Jak zarządzać sekcjami, wierszami i kolumnami w układach stron Shoper?

Dzięki tej funkcji możesz szybko przełączyć się między poszczególnymi szerokościami ekranu z poziomu Shoper Visual Editor i ocenić, czy wprowadzane modyfikacje na poszczególnych szerokościach ekranu są właściwe.

Do dyspozycji masz cztery szerokości ekranu:

• Mobile (≤ 576px)
• Tablet (577px – 999px)
• Laptop (1000px – 1439px)
• Desktop (≥ 1440px)