Dodawanie wiersza..
Wiersz dzieli sekcję na kolumny, więc treść staje obok siebie: trzy usługi, zdjęcie obok tekstu, pasek boczny obok artykułu. Podział wybierasz z dwunastu presetów, a telefonom możesz dać własny układ. Ta strona opisuje dodawanie wiersza; wiersz w kolumnie znajdziesz w zagnieżdżaniu.
Dodawanie wiersza
Przykład dodaje do sekcji wiersz trzech kolumn, po jednej na każdą usługę zespołu.
- Kliknij + na sekcji, aby otworzyć selektor elementów.
- Wybierz Row na karcie Layout. Powstaje z dwiema równymi kolumnami.
- Kliknij ikonę siatki (Column layout) na pasku sterowania wiersza, wybierz preset kolumn, na przykład trzy równe kolumny, i kliknij Save.
- Kliknij + w kolumnie, aby dodać do niej treść.
- Kliknij Save na pasku narzędzi, aby zapisać stronę.
Ikona siatki stoi tuż za uchwytem przeciągania wiersza. Preset zmienia kolumny od razu po kliknięciu; Cancel przywraca stary układ.
Efekt
Trzy usługi stoją obok siebie, każda kolumna to jedna trzecia szerokości sekcji. Na ekranach węższych niż 768 pikseli kolumny układają się jedna pod drugą: każda zajmuje pełną szerokość, w kolejności ze strony.
Kolumny są wysokie tylko na swoją treść, więc krótka kolumna kończy się przed sąsiadkami. Widać to, gdy kolumny dostają kolor tła; Equal-height columns je wyrównuje.
Konfiguracja wiersza
Układy kolumn
Ikona siatki otwiera panel dla każdego rozmiaru ekranu z własnym układem. Każdy panel pokazuje tych dwanaście presetów jako kafelki:
| Preset | Układ |
|---|---|
| 1/1 | Jedna kolumna na całą szerokość |
| 1/2 + 1/2 | Dwie równe kolumny |
| 1/3 + 1/3 + 1/3 | Trzy równe kolumny |
| 1/4 + 1/4 + 1/4 + 1/4 | Cztery równe kolumny |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Sześć równych kolumn |
| 1/4 + 1/2 + 1/4 | Wąska, szeroka, wąska |
| 1/6 + 4/6 + 1/6 | Wąska, bardzo szeroka, wąska |
| 1/4 + 3/4 | Ćwierć po lewej, trzy ćwierci po prawej |
| 3/4 + 1/4 | Trzy ćwierci po lewej, ćwierć po prawej |
| 2/3 + 1/3 | Szeroka po lewej, wąska po prawej |
| 1/3 + 2/3 | Wąska po lewej, szeroka po prawej |
| 5/12 + 7/12 | Nieco węższa po lewej, nieco szersza po prawej |
Przy innym podziale kliknij Custom Layout i wpisz szerokości jako
ułamki, na przykład 1/6 + 5/6. Szerokości sumujące się do więcej niż 1
zawijają się do nowej linii. Po ponownym otwarciu okna Custom Layout
jest zaznaczone i pokazuje układ, na przykład Custom Layout (1/6 + 5/6).
Osobny układ na rozmiar ekranu
Pierwszy panel, Medium devices (≥ 768px), ustawia układ od tabletów w górę. Aby zmienić też telefony, kliknij Add screen size na górze okna. Otworzy się panel Extra small (< 576px); wybierz z jego listy inny rozmiar, jeśli potrzebujesz, a potem preset. Remove screen size usuwa panel z powrotem.
Ustawienia wiersza i kolumn
Otwórz More > Settings na pasku sterowania wiersza albo na pasku kolumny dla ustawienia kolumny.
| Ustawienie | Element | Do czego służy | Domyślnie |
|---|---|---|---|
| Equal-height columns | Wiersz | Rozciąga każdą kolumnę do wysokości najwyższej | Off |
| Mirror row | Wiersz | Pokazuje kolumny w odwrotnej kolejności od 768 pikseli w górę; ułożone w stos kolumny trzymają kolejność ze strony | Off |
| Vertical centering | Kolumna | Wyśrodkowuje treść w kolumnie wyższej od niej | Off |
Mirror row sprawdza się na stronie z naprzemiennymi wierszami: zdjęcie po lewej, potem zdjęcie po prawej, a telefony zawsze pokazują najpierw zdjęcie.
Przenoszenie i usuwanie kolumn
Przeciągnij kolumnę za uchwyt albo użyj More > Move Left lub Move Right na jej pasku. Kolumny nie mają Delete: wybierz preset z mniejszą liczbą kolumn. Treść nigdy nie ginie; przenosi się do ostatniej pozostałej kolumny.
Jeśli go nie widzisz
- Wyśrodkowanie pionowe kolumny nic nie zmienia. Kolumna jest wysoka tylko na swoją treść, więc nie ma w czym środkować. Włącz Equal-height columns w ustawieniach wiersza.
- Kolumny układają się w stos na telefonie. Poniżej 768 pikseli to domyślne. Kliknij ikonę siatki, potem Add screen size i wybierz preset dla Extra small (< 576px).
- Tekst przeskoczył do innej kolumny. Wybrano preset z mniejszą liczbą kolumn, a treść usuniętych kolumn przeniosła się do ostatniej. Naciśnij Ctrl+Z (Cmd+Z na Macu), aby cofnąć zmianę.
- Kolumna nie ma Delete w menu More. Kolumny usuwa się przez układ. Kliknij ikonę siatki wiersza i wybierz preset z mniejszą liczbą kolumn.
Co dalej?
- Zagnieżdżanie: umieść wiersz w kolumnie dla drobniejszej siatki.
- Sekcje: daj pasowi wokół kolumn własne tło.
- Projekt responsywny: jak układ dopasowuje się do każdego rozmiaru ekranu.