Polecenia w oknie Ustawienia responsywności służą do takiego konfigurowania stron witryny, by adaptowały się do wyświetlania na różnych urządzeniach, oraz do definiowania zachowania stron w chwili aktywizacji punktów kontrolnych.
Kiedy kolejność wyświetlania obiektów na stronie jest już ustalona i wiadomo, które obiekty będą ukrywane w jakim widoku, w tym oknie w edycji Pro można wstawić linie podziału dla poszczególnych punktów kontrolnych.
Linia podziału przenosi obiekt lub blok obiektów do nowego wiersza wtedy, gdy strona wyświetlana jest w rozdzielczości niższej niż bieżąca.
Kliknięcie przycisku Podział wiersza rozpoczyna proces wstawiania linii podziału. W tabeli układu strony widoczne są szare linie przerywane wszędzie tam, gdzie można wstawić podział. Kliknięcie którejś z nich powoduje wstawienie linii podziału. Szarą linię przerywaną zastępuje czerwona. Drugie kliknięcie linii podziału (teraz czerwonej) powoduje usunięcie podziału. Kliknięcie przycisku Podział wiersza po raz drugi zatwierdza wprowadzone zmiany i kończy procedurę ustalania podziałów.
Rysunek 1. Wstawianie linii podziału w tabeli układu strony
Poniższy przykład powinien pomóc zrozumieć mechanizm wstawiania podziału wiersza. Linie podziału zostały wstawione w widoku Duży ekran przed obiektem 3 oraz po obiekcie 7.
Rysunek 2. Układ strony w punkcie kontrolnym Duży ekran
Jak widać, kształt symbolu podziału współgra z kolejnością wyświetlania. Przyjrzyjmy się symbolowi podziału przed obiektem numer 7. Obiekt ten zostanie umieszczony powyżej bloku utworzonego z obiektów 8, 9 i 10, ponieważ zgodnie z kolejnością tutaj obiekty będą wyświetlone od prawej do lewej.
Po uwzględnieniu kolejności wyświetlania, wstawionych właśnie linii podziału wierszy oraz faktu ukrycia obiektu numer 2 układ strony w widoku następującym po punkcie kontrolnym Duży ekran będzie taki, jak na rysunku.
Rysunek 3. Układ strony dla widoku następującego po punkcie kontrolnym Duży ekran
Jak widać, obiekt numer 2 został ukryty i nie jest już widoczny, ale pozostałe obiekty zachowały swoje numery porządkowe. Linia podziału wiersza przesunęła obiekty 3 i 4 do następnego wiersza. Cały pierwszy wiersz wypełnia obiekt numer 1. Gdyby nie wstawiony podział, obiekty 1, 3 i 4 zostałyby wyświetlone obok siebie w pierwszym wierszu i zajmowały po jednej trzeciej części jego szerokości.
Drugi podział wiersza separuje blok obiektów 8, 9 i 10, umieszczając go w następnym wierszu poniżej obiektu numer 7.
Warto zauważyć, że obiekt zajmujący kilka kolumn zachowuje swoje proporcje w następnym widoku po punkcie kontrolnym. Na przykład na rysunku 1, obiekt numer 5 zajmuje 3 z 4 dostępnych kolumn, co stanowi 75% dostępnej szerokości wiersza w widoku Duży ekran. W widoku następującym po punkcie kontrolnym (rysunek 3) proporcja ta jest zachowana, mimo że obiekty w winnych wierszach mają inny układ.
Porady praktyczne: