fbpx

Responsywność w Divi

Jakiś czas temu w moje oko wpadła oferta kursu online o Divi. Z ciekawości weszłam na stroną lądowania, żeby zobaczyć zakres tematów poruszanych na kursie. Pierwsze myśl, jaka przyszła mi do głowy to: dlaczego wszystkie lekcje są nieparzyste? Dopiero po przewinięciu strony dalej zorientowałam się, że to nie w tym leży problem. Po prostu osoba, która stworzyła stronę sprzedażową, nie wiedziała na czym polega responsywność w Divi…

Gdzie tak naprawdę leżał problem w tej stronie lądowania? To proste – przeglądałam ją z telefonu. A przewijanie stron na telefonie przypomina jechanie samochodem i patrzenie tylko na jedną stronę ulicy. W powyższym przykładzie możemy powiedzieć, że nieparzyste numery były po jednej stronie ulicy, a parzyste po prawej. W dzisiejszej instrukcji pokażę Ci jak sprawić, żeby numeracja szła po kolei. Inaczej mówiąc – żeby Twoje treści były w logicznym porządku, niezależnie od tego z jakiego urządzenia korzysta osoba, która widzi Twoją stronę internetową.

Jak to jest zakodowane?

Musimy zacząć od podstaw – czyli od tego, jak jest stworzony motyw Divi od strony kodu. Wiem, że brzmi to strasznie. Jednak świadomość, że takie rzeczy nie biorą się znikąd jest bardzo ważna. Jeśli korzystasz na co dzień z Divi, prawdopodobnie nie jesteś miłośniczką grzebania w kodzie. Musisz jednak pamiętać, że narzędzie z którego korzystasz zostało przez kogoś zakodowane. A kod nie jest z gumy i ma określoną strukturę – zupełnie jak książka lub artykuł, który teraz czytasz. Cały system funkcjonowania resopnsywności w Divi wynika stricte z tego, jak ten motyw został napisany.

Jeśli włączysz źródło strony zrobionej w Divi, bardzo szybko zaczniesz zauważać prawidłowości. W kodzie w pierwszej kolejności pojawiają nam się bloki (oznaczone jako et_pb_section), następnie wiersze (et_pb_row), potem kolumny (et_pb_column) i dopiero na samym końcu mamy poszczególne elementy – na przykład bloki tekstowe, zdjęcia i inne rzeczy, które zdecydujesz się tam wrzucić.

Teraz najważniejsze – główna oś tego kodu jest taka sama, niezależnie od tego, czy korzystasz z komputera, telefonu czy tabletu. To oznacza, że kolejność też jest taka sama. Zmienia się jedynie sposób wyświetlania.

Dlaczego to jest ważne?

Powyższe informacje są kluczowe, jeśli chcesz mieć dobrze zaprojektowaną stronę w Divi. Dlaczego? Ponieważ od tego jak poustawiasz elementy na swojej stronie internetowej zależy to, jak będzie się ona wyświetlała na urządzeniach mobilnych.

Możesz to zobaczyć na poniższych obrazkach poglądowych. Posiłkowałam się nimi w trakcie wideo.

Wyświetlanie kolumn na komputerze – responsywność w Divi

Wyświetlanie kolumn na urządzeniach mobilnych – responsywność w Divi

zrób to sama w divi!

Masz stronę zrobioną w Divi, ale wprowadzanie każdej pojedynczej zmiany przyprawia Cię o ból głowy? A może opiekujesz się stronami zrobionymi w Divi, ale czasem sprostanie życzeniom klientów Cię przerasta?

Ten kurs to podstawowe narzędzie wiedzy dla wszystkich, którzy pracują w Divi – kobiet biznesu, Wirtualnych Asystentek i deweloperów. Dzięki moim materiałom Divi w końcu zacznie spełniać swoją funkcję – tworzenie stron w nim stanie się bajecznie proste ❤️

Odpowiadające sobie kolumny zaznaczyłam tym samym kolorem. Jak widzisz – gdy zmieniamy urządzenie na mniejsze i nasza sekcja z dwoma kolumnami zamienia się w sekcję z jedną kolumną – druga kolumna tak jakby „wjeżdża” pod pierwszą.

Omówmy to na podanym wyżej przykładzie – z nieparzystymi, a później parzystymi lekcjami kursu na stronie sprzedażowej. Osoba, która stworzyła stronę lądowania, chciała, by na komputerze poszczególne lekcje wyświetlały się w dwóch kolumnach – nieparzyste lekcje po jednej stronie, a parzyste po prawej. Niestety – zrobiła to dokładnie w ten sposób. Stworzyła dwie kolumny i w pierwszej dodała wszystkie nieparzyste lekcje jedna pod drugą. To samo zrobiła w drugiej kolumnie, tylko z lekcjami parzystymi. Efekt był taki, że te kolumny „wjechały” pod siebie i osoby korzystające z telefonów na początku wpadły w konsternację. Tym większą, że ten kurs był właśnie o Divi!

Jak to zrobić prawidłowo?

Zanim usiądziesz do projektowania strony w Divi, w pierwszej kolejności zastanów się, jaki efekt chcesz osiągnąć zarówno na komputerach, jak i urządzeniach mobilnych. W powyższym przykładzie efekt końcowy na pewno nie był zamierzony. Jak osoba tworząca tę stronę lądowania mogłaby uzyskać efekt, na którym jej zależało?

To proste – wystarczyło stworzyć osobny wiersz dla każdych dwóch lekcji. Już tłumaczę jak miałoby to wyglądać; zamiast tworzyć jedną kolumnę, w której wszystkie elementy są jeden pod drugim, trzeba było je rozdzielić na wiersze. W pierwszym wierszu (podzielonym na dwie kolumny) dodać lekcją pierwszą i drugą. W kolejnym – trzecią i czwartą. I tak dalej, aż do wrzucenia wszystkich lekcji.

W takiej sytuacji efekt byłby dokładnie taki, na jakim zależało osobie sprzedającej ten kurs – lekcje nieparzyste po lewej i parzyste po prawej na komputerze, a na telefonie – po kolei, jedna pod drugą.

Dlatego pamiętaj, żeby zawsze mieć na uwadze efekt końcowy, jaki chcesz osiągnąć.

Responsywność w Divi – co jeszcze warto wiedzieć?

Na sam koniec naszej lekcji zdradzę Ci kilka dobrych praktyk, których sama używam, gdy tworzę strony w Divi.

  1. Zawsze ustawiam responsywność w Divi na samym końcu tworzenia strony internetowej – gdy klientka zaakceptuje już wygląd i nie chce wprowadzać więcej poprawek. Ustawianie wyglądu pod telefony i tablety, gdy efekt na komputerze jeszcze nie jest zadowalający, to wyrzucanie swojego czasu w błoto.
  2. Gdy skończę stronę internetową w Divi, korzystam z narzędzia, które pokazuje jak moja strona wyświetla się na różnych urządzeniach. Divi ma wbudowany system do pokazywania wyglądu strony na różnych rozdzielczościach, ale czasem ten wygląd może się diametralnie różnić w zależności od urządzenia, z jakiego korzysta odbiorca Twojej strony internetowej. Dlatego warto przepuścić stronę przez zewnętrzne narzędzie, np. Responsinator.
  3. Zdarza się, że aplikacja Facebooka na telefony wysypuje wygląd stron. Zazwyczaj dzieje się to, gdy mamy ustawione animacje poszczególnych elementów (zwłaszcza zdjęć). Dlatego dobrze przed upublicznieniem strony sprawdzić jej wyświetlanie w aplikacji Facebooka. Możesz to zrobić np. wysyłając sobie link Messengerem na fanpage lub do zaufanego znajomego.

 

To wszystko w dzisiejszej lekcji. Jeśli Ci się podobała – koniecznie podziel się nią ze znajomymi.