Jak ponownie zamówić elementy na różnych punktach przerwania w Divi 5

Responsywna konstrukcja wymaga więcej niż skalowania układów, wymaga również kontrolowania, w jaki sposób treści układają się na urządzeniach. Projekt, który wydaje się ustrukturyzowany na komputerze, może być mylącym zamówieniem na urządzeniach mobilnych, z paskami bocznymi lub elementami wtórnymi wypychając kluczową zawartość z widoku. Divi 5 dotyczy tego z nowym systemem FlexBox, który wprowadza przygotowane responsywne struktury kolumn i precyzyjne elementy sterujące zamówienia.

W tym poście przyjrzymy się, dlaczego zmieniają się ponowne zamawianie elementów, w jaki sposób narzędzia FlexBox Divi 5 sprawiają, że jest to proste, i przejdź przez kroki do układów restrukturyzacji w różnych punktach przerwania.

Dlaczego chcesz ponownie zamówić elementy

Kiedy układ przesuwa się z komputera na telefon komórkowy, kolejność układania nie zawsze odzwierciedla Twoje zamierzone wrażenia. Zrównoważony trzykolumnowy projekt pulpitu może zawalić się w pionowym stosie, w którym lewa kolumna zawsze jest pierwsza, naciskając wezwanie do działania, rejestrację lub informacje kontaktowe daleko w dół strony, gdzie użytkownicy mogą nigdy go nie zobaczyć.

Subskrybuj nasz kanał YouTube

System FlexBox Divi 5 naprawia to, umożliwiając wizualne zamówienie elementów w każdym punkcie przerwy. Możesz przesunąć CTA bezpośrednio pod nagłówkiem na urządzeniach mobilnych, przenieść referencje nad tabelą cenową lub wyróżnić informacje kontaktowe, wkrótce. Zamiast utknąć w domyślnej logice układania przeglądarki, decydujesz o hierarchii. Zapewnia to, że najważniejsze treści zawsze pojawiają się tam, gdzie ma to najważniejsze.

Jak Flexbox Divi 5 ułatwia kolejność

Divi 5 daje bezpośrednią kontrolę nad tym, jak elementy układają się w punktach przerwania. Możesz użyć predytowanych struktur kolumn Flex, aby skonfigurować układy, które dostosowują się naturalnie, a następnie dostosować struktury kolumn i zamówienia kolumnowe w każdym rozmiarze ekranu.

Flexbox działa jak genialny kontener, który dostosowuje się na podstawie przestrzeni. Zamiast losowego układania treści kontrolujesz kolejność na każdym urządzeniu.

Divi 5 dobrze radzi sobie również z zagnieżdżonymi i złożonymi układami. Możesz zmienić struktury wierszy, rozmiary kolumn i kolejność modułu w każdym punkcie przerwania bez kopiowania zawartości lub kodowania.

Automatycznie zarządza również wyrównaniem i pozycjonowaniem pionowym, dzięki czemu treść wyglądała celowo, w pełni responsywna i nie losowo ułożona.

Krok po kroku przewodnik po responsywnym kolejności w Divi 5

Rzućmy okiem na to, jak dokładnie możesz ponownie zamówić elementy w Divi 5 za pomocą nowego systemu FlexBox. Poniższe kroki prowadzą przez konfigurowanie struktur kolumnowych i dostosowanie kolejności w różnych punktach przerwania, aby układy pozostały jasne i spójne na każdym urządzeniu.

1. Skonfiguruj siedem niestandardowych punktów przerwania

Divi 5 daje siedem punktów przerwania zamiast trzech. Możesz zmienić każdą wartość piksela, aby Twoja witryna wyglądała dobrze na dowolnym urządzeniu.

Kliknij menu elipsy na pasku zadań i znajdź przełączniki przełączania punktów przerwania. Każda z nich ma domyślne zakresy, ale możesz zmienić te liczby, aby lepiej pasować do odbiorców.

Zobaczysz telefon (poniżej 767px), telefon szerokości telefonu (poniżej 860px), tablet (poniżej 980px), tablet szeroki (poniżej 1024px), pulpit (ponad 981px), panorowal (ponad 1280px) i Ultra szeroki (ponad 1440px).

Po ich włączeniu na pasku zadań pojawiają się małe ikony. Kliknij każdą ikonę, aby natychmiast zobaczyć, jak Twoja witryna wygląda na ten rozmiar ekranu.

Zamiast kliknąć każdą ikonę i być ograniczonym w testach, możesz złapać krawędź płótna i przeciągnąć ją w lewo lub w prawo. Twój projekt zmniejsza się lub rozszerza się podczas ciągnięcia, pokazując, jak zmienia się układ na różnych szerokościach.

Przeciągnij płótno do 300px i zobacz, jak układ trzykolumnowy zamienia się w jeden stos mobilny. Odciągnij go z powrotem do 1200px i zobacz, jak Twoja treść się rozkłada ponownie. Nie musisz przełączać trybów podglądu ani rozmiaru okna przeglądarki.

2. Uzyskaj dostęp do elementów sterujących Flex

Kliknij ikonę Ustawienia dowolnego wiersza, aby otworzyć panel ustawień po prawej stronie. Przejdź do zakładki projektowej u góry tego panelu. W menu układu znajdziesz wszystkie elementy sterujące Flexbox Divi 5. Domyślnie Flex jest wybierany w stylu układu.

Jeśli nie jest to stosowane do istniejącego układu, możesz zmienić go na Flex za pomocą kliknięcia.

Przewiń w dół, aby zlokalizować pole kierunku układu. To określi kolejność i sposób, w jaki kolumny pojawiają się (obok siebie lub powyżej i poniżej siebie).

Poniżej znajdują się opcje uzasadnienia treści do kontrolowania wyrównania i dystrybucji. Tymczasem opcje elementów wyrównanych pojawiają się tuż pod opcjami pozycjonowania.

3. Struktura układu dopracowania dla każdego rozmiaru ekranu

Twoje elementy sterujące Flexbox są teraz aktywne, ale układy stacjonarne mogą wymagać regulacji strukturalnych dla mniejszych ekranów. Trzy-kolumnowy układ może pięknie działać na komputerze, ale stać się przytłaczający i zatłoczony na tablecie, wymagając zamiast tego siatki 2 × 2, tym bardziej na urządzeniu mobilnym, w którym jest tylko miejsce na jedną sieć.

Na szczęście ikony urządzenia w prawym górnym rogu sterowania pozwalają podglądać układ na różnych ekranach i dostosować ustawienia FlexBox dla każdego punktu przerwania. To pozwala dostosować projekt, aby wyglądał dobrze i działa dobrze na każdym urządzeniu.

Przełącz na punkt przerwania tabletu i kliknij przycisk Zmień strukturę kolumny. Zamiast bieżącej konfiguracji wybierz symetryczny układ 2 × 2. To natychmiast sprawia, że ​​widok jest mniej przytłaczający, pokazując mniej kart w każdym rzędzie. W razie potrzeby dostosuj luki pionowe i poziome, aby uzyskać zrównoważony wygląd. Następnie wybierz kolumnę CTA, ustaw jego klasę kolumny na pełny WIDZE w ustawieniach wielkości i wybierz „Rośnij, aby wypełnić”.

Twoja wersja tabletu pokazuje teraz dwie karty jednocześnie, zachowując ten jednolity wygląd. Przycisk wezwania do działania znajduje się ładnie w wierszu na dole, co wyróżnia, podobnie jak układ pulpitu. Ta aktualizacja pomaga stworzyć czystsze, bardziej zachęcające doświadczenie, które pozwala uniknąć zagraconego wyczucia zbyt wielu opcji zatłoczonych razem.

W przypadku telefonu komórkowego użyj opcji STRUKTURY ZMIANY, aby przełączyć się na strukturę jednopolową. W elementach ELEXBOX ustaw kierunek układu na odwrotność kolumny. Dostosuj lukę do tego, co najlepiej wygląda na twoją treść.

4. Zamoruj kolumny w punktach przerwania

Korzystanie z wartości zamówień to świetny sposób na ręczne decydowanie o kolejności dziecięcych elementów dziecięcych kontenerów Flex (często kolumn) na różnych rozmiarach ekranów. Zakładka Zamów w ustawieniach wiersza daje każdemu kolumnie liczbę, która mówi przeglądarce: „Pokaż tę kolumnę w pozycji 1, ten w pozycji 2” i tak dalej. Niższe liczby pojawiają się pierwsze, a wyższe liczby pojawiają się na koniec. To proste.

Możesz nawet użyć liczb zamówień „0” lub ujemnych, takich jak „-1”, aby wymusić określoną treść do pojawienia się na pierwszym miejscu, niezależnie od innych wartości.

Każdy punkt przerwania obsługuje własny system zamawiania, co daje pełną kontrolę nad pozycjonowaniem elementów w różnych urządzeniach.

Rzućmy okiem na praktyczny przykład: na pulpicie wybierz kolumnę 1 i ustaw jej kolejność na 1. Wybierz kolumnę 2 i ustaw jej kolejność na „2” i zrób to samo przez resztę kolumny. Twój układ pulpitu płynie naturalnie od lewej do prawej, kończąc na wezwanie do działania.

Dostosowywanie zamówienia na tabletach i telefonach komórkowych

Teraz przejdź do punktu przerwania tabletu za pomocą przełączania urządzenia. I zmień zamówienia kolumnowe:

Ustaw kolumnę 6 (wezwanie do działania) na „3”, więc pojawia się w środkowym rzędzie. Zostaw kolumny 1 i 2, jaka jest kolumna 3 jako 4, a reszta zgodnie z potrzebami. Użytkownicy tabletu widzą twoje wezwanie do działania natychmiast po propozycji wartości, a następnie szczegółowe informacje.

Następnie przełącz na urządzenie za pomocą urządzenia. Zmień kolejność kolumny CTA na „3” i pozostaw kolejność dwóch pierwszych kolumn w taki sposób. Uczyń resztę kolejności kolumny podobną do układu tabletu.

Podstawowa kolejność źródła treści pozostaje taka sama, ale CTA przenosi się z ostatniej pozycji do trzeciej, nie wpływając na układ komputerów stacjonarnych. W ten sposób możesz kontrolować, w jaki sposób sekcje pojawiają się w różnych punktach przerwania bez powielania lub restrukturyzacji treści.

Kontrolować, jak wszystko układa się z Divi 5

Nowy system FlexBox Divi 5 zapewnia precyzyjną kontrolę nad tym, w jaki sposób treści układają się na urządzeniach. Dzięki siedmiu konfigurowalnych punktów przerwania i skalowaniu na płótnie na żywo możesz podgląd i dostosowywać układy w dowolnym rozmiarze ekranu w czasie rzeczywistym.

Zamiast polegać na domyślnej kolejności układania przeglądarki, decydujesz dokładnie, gdzie pojawiają się paski boczne, CTA i kluczowa zawartość. FlexBox pozwala zachować hierarchię i przejrzystość na każdym urządzeniu bez dodatkowych obejść lub kodu.