Widok mobilny

Zaktualizowano: 4 lutego, 2021 Autor: Avatar Teresa
share
Spis treści
share
Spis treści

Platforma Landingi pozwala na edycję landing page’y w widoku desktopowym oraz mobilnym. Wybierając pusty szablon musisz samodzielnie włączyć i dostosować widok mobilny. Pozostałe szablony mają już zaprojektowany widok mobilny, który nadal możesz swobodnie zmieniać. Widok mobilny jest automatycznie budowany na podstawie widoku desktopowego, jednak nie działa to w drugim kierunku. Pracę w edytorze zalecamy rozpocząć od widoku desktopowego. 

Widok mobilny pustego szablonu jest tworzony automatycznie na podstawie widoku desktopowego, jednak mimo to część elementów może wymagać ręcznego dopasowania. Jeśli widok mobilny nie wygląda tak, jak tego oczekujesz – możesz go łatwo dostosować rozszerzając wysokość niektórych sekcji czy przesuwając elementy. Pamiętaj, że zmiany w trybie mobilnym nie wpływają na ułożenie elementów i sekcji w trybie desktopowym.

Widok mobilny w pustym szablonie

Edytując pusty szablon możesz w łatwy sposób włączyć widok mobilny. Na górnym pasku edytora odszukaj ikonę smartfona i za pomocą suwaka włącz widok mobilny.

Przed publikacją landing page’a sprawdź, czy wszystkie treści i elementy są odpowiednio rozmieszczone we wszystkich sekcjach w każdym widoku. Jeśli tak nie jest, samodzielnie ustaw i edytuj elementy.

Jeśli wybrany przez Ciebie szablon zawiera formularz, sprawdź widok mobilny dla strony po konwersji, tzw. strony podziękowania. Ręcznie dodany formularz posiada pustą stronę po konwersji w obu widokach – musisz zaprojektować ją samodzielnie.

Widok mobilny dla samodzielnie stworzonego landing page’a

Domyślnym widokiem w edytorze jest widok desktopowy. Widok mobilny jest ściśle powiązany z podziałem landing page’a na sekcje, dlatego planowanie widoku mobilnego musisz zacząć już na etapie projektowania landing page’a. Widok mobilny możesz włączyć w każdym momencie – wszystkie wcześniej użyte elementy zostaną do niego automatycznie załadowane.

Dodając sekcję do edytora możesz wybrać między sekcją pojedynczą lub podzieloną na dwie, trzy lub cztery kolumny. Planując dodanie widoku mobilnego, zalecamy często używać sekcji z podziałem na kolumny. Kolumny nie są widoczne na stronie po opublikowaniu (nie posiadają obramowania).

Edycja z widokiem mobilnym

1. Po lewej stronie edytora odszukaj widget Sekcja, następnie przeciągnij go i upuść w obszar aktywny Twojego landing page’a.

2. Wybierz sekcję z jedną, dwoma, trzema lub czterema kolumnami.

3. Elementy w sekcji z podziałem na kolumny są uporządkowane. W widoku mobilnym kolumny układają się jedna nad drugą, od lewej do prawej w pionie. Możesz je dowolnie przesuwać – nie wpływa to na ustawienie kolumn w widoku desktopowym.

4. Pamiętaj, że nie możesz edytować tekstu widoku desktopowego z panelu widoku mobilnego. Zamiast tego, możesz przeciągnąć dowolny widget, który będzie widoczny tylko w widoku mobilnym. Dodatkowo, nie ma możliwości usuwania widgetów z poziomu widoku mobilnego, ani też przenoszenia ich między sekcjami.

Możesz także pracować z wyłączonym widokiem desktopowym. Na górnym panelu edytora odszukaj ikonę monitora i za pomocą suwaka wyłącz widok desktopowy. Po zakończeniu edycji tekstu możesz ponownie włączyć widok desktopowy.

5. W widoku mobilnym, możesz dodawać nowe i ukrywać zbędne elementy dla widoku desktopowego (i odwrotnie). Widok desktopowy nie musi być odwzorowany w stosunku 1:1 w widoku mobilnym. Więcej na temat funkcji ukrywania znajdziesz tutaj.

PAMIĘTAJ! Jeśli usuniesz dany element w widoku desktopowym, spowoduje to jego usunięcie także w widoku mobilnym. Dlatego zamiast usuwania, możesz elementy ukrywać.

6. Przed publikacją zweryfikuj widok mobilny dla strony podziękowania.

7. Niebieskie obramowanie elementu (linia ciągła) nie powinno wychodzić poza obszar roboczy edytora (pionowa linia przerywana). Obramowanie elementu wychodzące poza obszar roboczy powoduje problemy z wyświetlaniem landing page’a na urządzeniach mobilnych.

8. Opcja ułóż widok mobilny pozwala na ponowne, automatyczne rozmieszczenie elementów w widoku mobilnym, jeśli po zmianach w widoku desktopowym nie spełnia on Twoich oczekiwań. Możesz wybrać ponowne rozmieszczenie elementów dla całego landing page’a (ułóż widok) albo dla poszczególnej sekcji (ułóż sekcję).

Specyfikacja widoku mobilnego:
Smartfon: wyświetlacz mniejszy niż 764 px (większość smartfonów).

share

Czy ta instrukcja była pomocna?