Widoki mobilne w aplikacji Landingi mają dwojaki charakter. W przypadku gdy wykorzystujesz szablon do swojego projektu landinga, posiadają one już zaprojektowany widok mobilny. Gdy projektujesz landing samodzielnie, musisz dostosować widok na tablet i/lub smartphone, w zależności od tego, którego potrzebujesz.

1. Widoki mobilne na szablonach

  • Aby dodać widok, musisz przejść do górnej belki edytora i użyć przycisku "Dodaj widok" dla danej opcji: tablet lub smartphone. Do przełączania widoków służą ikony znajdujące się na belce po dodaniu widoków.
  • Przed publikacją landing page 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 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. Widoki mobilne 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 widoków mobilnych musisz zacząć już na etapie projektowania landing page. 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 element "Sekcja".
  • Upuść w edytorze i wybierz sekcje z dwoma, trzema lub czterema kolumnami.


Po dodaniu sekcji na desktopie:

  1. Na swoim widoku desktop zobaczysz sekcję z dwoma kolumnami, dodaną do edytora, po dodaniu elementów, tła itd.

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

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ć i edytować bez konsekwencji dla innych widoków.

4. Zapamiętaj, że nie możesz edytować tekstu bezpośrednio z widoku mobile. Lecz zamiast tego, możesz stworzyć tutaj nowy widget tekst, dostępny tylko na tym widoku, i ukryty jednocześnie na innych. Takie rozwiązanie pomoże Ci uniknąć problemów na mobile.

WAŻNE! 👍

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

5. Na widokach mobilnych możesz dodawać nowe i ukrywać zbędne elementy dla poszczególnych widoków. Widok desktop nie musi być odwzorowany w stosunku 1:1 na widokach mobilnych. Więcej na ten temat znajdziesz tutaj.

PAMIĘTAJ!
Usunięcie elementu w edytorze, na dowolnym widoku, spowoduje usunięcie elementu na wszystkich widokach.
Dlatego zamiast usuwania, na wybranych widokach możesz elementy ukrywać 😉

6. Jeśli na landing page'u znajduje się formularz, należy również sprawdzić widok mobilny dla strony po konwersji.

7. W widokach mobilnych musisz się upewnić, czy niebieskie obramowanie elementu nie wychodzi poza obszar roboczy edytora (przerywane pionowe linie). Obramowanie elementu wychodzące poza obszar roboczy, w widokach mobilnych powoduje problemy z wyświetlaniem landing page na urządzeniach. 

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

Źle:

Dobrze:

Specyfikacja widoków mobilnych:

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

Tablet: wyświetlacz 764 px.


Jeśli pojawią się jakieś pytania, zapraszamy Cię do nas na support@landingi.com😉

Did this answer your question?