Widok mobilny w aplikacji Landingi ma dwojaki charakter.
W przypadku gdy wykorzystujesz szablon do swojego projektu landing page'a, ma one już zaprojektowany widok mobilny.
Gdy projektujesz stronę docelową samodzielnie, musisz dostosować widok na smartphone'a w zależności od tego, czego potrzebujesz.

1. Widok mobilny na szablonie

  • Aby dodać widok, musisz przejść do górnej belki edytora i użyć przycisku "Dodaj widok". Do przełączania widoków służą ich ikony znajdujące się na belce po dodaniu widoków.
  • Przed publikacją landing page'a musisz się upewnić, że wszystkie treści i elementy są odpowiednio rozmieszczone we wszystkich kartach widoków. Jeśli tak nie jest, samodzielnie ustaw i edytuj elementy w każdym widoku.

  • Jeśli na landing page'u znajduje się formularz, musisz również sprawdzić widok mobilny dla strony po konwersji. Jeśli do szablonu bez formularza dodasz formularz, musisz samodzielnie zaprojektować wygląd strony po konwersji w każdym widoku.


2. Widok mobilny dla samodzielnie stworzonego landing page'a

Domyślnym widokiem w edytorze jest widok dla monitorów. Wygląd widoków mobilnych jest ściśle powiązany z podziałem landing page na sekcje, dlatego planowanie widoku mobilnego musisz zacząć już na etapie projektowania landing page'a. Jest to niezwykle ważne, jeśli planujesz dodać widok dla smartphone'a.

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

Zacznijmy od dodania sekcji na widoku desktop. W tym celu:

  • Przeciągnij i upuść widget "Sekcja".

  • Wybierz sekcje z jedną, dwoma, trzema lub czterema kolumnami.


Po dodaniu sekcji na desktopie:

  1. Na poniższym przykładzie, dodałam sekcję z dwoma kolumnami, z paroma elementami, tłem, itd.

 2. Teraz możesz przejść do dodania widoku, używając przycisku "Dodaj widok", na    górnej belce edytora. Po dodaniu widoku mobile, wszystkie elementy dotychczas      użyte w widoku dla monitorów zostaną automatycznie na niego przeniesione.

3. Elementy w sekcji z podziałem na kolumny są uporządkowane. Warto zauważyć, że kolumny sekcji dwu-, trzy- i czterokolumnowej układają się jedna nad drugą, od lewej do prawej w pionie. Elementy w każdej sekcji można przesuwać bez konsekwencji dla innego widoku.

4. Pamiętaj, że nie możesz edytować tekstu bezpośrednio z widoku mobile. Zamiast tego, możesz stworzyć tutaj nowy widget tekst dostępny tylko na tym widoku, jednocześnie ukryty na innym.

WAŻNE! 👍

Możesz zastosować też inny sposób podczas edycji tekstu. Polega on na tym, że na moment edycji tekstu wyłączasz widok desktop, edytujesz tekst i następnie włączasz ten widok ponownie.

Dodatkowo, nie ma możliwości usuwania widgetów z poziomu widoku mobile, ani też przenoszenia ich pomiędzy sekcjami.

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

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


6. Zapamiętaj także, aby sprawdzić widok mobilny dla strony po konwersji.

7. Musisz się także upewnić, czy niebieskie obramowanie elementu nie wychodzi poza obszar roboczy edytora (przerywane pionowe linie). Obramowanie elementu wychodzące poza obszar roboczy, powoduje problemy z wyświetlaniem landing page'a na urządzeniach. 

Jeśli nie możesz przesunąć obramowania elementu, upewnij się czy element nie jest zablokowany (ikona kłódki) lub ukryty (ikona przekreślonego oka) w panelu opcji. Odblokowanie/odkrycie elementu powinno automatycznie umożliwić przesunięcie jego obramowania.
Po zakończonej edycji możesz ponownie zablokować/ukryć element, jeśli jest taka potrzeba. 

Źle:

Dobrze:

Specyfikacja widoku mobilnego:

Smartphone: wyświetlacz mniejszy niż 700 px (większość smartphone'ów).



Jeśli nasuną się jakieś pytania, pisz śmiało do nas na support@landingi.com😉.

Did this answer your question?