Elementor - tryb responsywny
W zależności od rodzaju urządzenia wyjściowego czyli komputera, tabletu lub telefonu, układ strony będzie prezentował się inaczej. Wtyczka Elementor zawiera wbudowany tryb responsywny, który pozwala na dostosowanie wyglądu strony na różnych urządzeniach wyjściowych. Proces dopasowania strony jest prosty i intuicyjny dlatego nie zabierze to nam dużo czasu.
Przy budowie witryny w Elementorze, mamy możliwość dopasować wygląd strony do trzech podstawowych wielkości ekranu: desktop, tablet i mobile. W zależności od rodzaju trybu, podgląd strony automatycznie dopasuje się do jego rozmiarów.
Po stronie menu edytora na dolnym szarym pasku znajduje się ikona z monitorem – TRYB RESPONSYWNY, który jest w Elementorze jako podgląd domyślny. Po kliknięciu pojawi się menu kontekstowe. Możemy teraz przełączyć się na tryb edycji dla tabletu (TABLET) i dla urządzeń komórkowych (MOBILNA).
Gdy wybierzemy jeden z trybów, na polu obok z podglądem strony pojawi się odpowiedni widok dla tabletu, mobile lub desktop’u.
Po kliknięciu w wybrany element w obszarze podglądu strony w menu po lewej pojawi się edytor. W zakładce ZAAWANSOWANE wybieramy opcję RESPONSYWNE. Tutaj mamy do wyboru w polu WIDOCZNOŚĆ, możliwość ukrywania poszczególnych elementów na komputerze, na tablecie lub na telefonie.
Po wybraniu danej sekcji w polu z podglądem strony, pojawiają się jeszcze dodaktowe opcje ODWRÓĆ KOLUMNY (TABLET) i ODWRÓĆ KOLUMNY (MOBILNA). Ta opcja przydaje się do porządkowania układu strony na mniejszych urządzeniach (rozdzielczościach ekranu).
Na poniższym przykładzie mamy układ strony na komputerze (desktop – duże rozdzielczości) prezentujący obszar tekstu z nagłówkiem i przyciskiem z lewej strony, zaś po prawej stronie mamy obrazek. Każda następna sekcja ma ten sam układ ale w lustrzanym odbiciu.
Taki układ na mniejszych urządzeniach będzie wyglądał niekorzystnie, dlatego przydaje się tutaj właśnie opcja RESPONSYWNE, ODWRÓĆ KOLUMNY. W każdej sekcji obrazek na widoku mobilnym powinien znajdować się nad tekstem, wtedy układ robi się czytelny i przejrzysty.
