Додавання рядка.
Рядок ділить розділ на стовпці, тож можна розмістити вміст поруч: три послуги, фото поруч із текстом, бічну панель поруч зі статтею. Ви вибираєте поділ із дванадцяти пресетів і можете дати телефонам власний макет. Прочитайте цю сторінку, щоб додати рядок; про рядок усередині стовпця див. Вкладення.
Додавання рядка
Приклад додає до розділу рядок із трьох стовпців, по одному для кожної послуги, що пропонує команда.
- Натисніть + на розділі, щоб відкрити вибір елементів.
- Виберіть Row на вкладці Layout. Спочатку він має два рівні стовпці.
- Натисніть піктограму сітки (Column layout) на панелі керування рядка, виберіть пресет стовпців, наприклад три рівні стовпці, і натисніть Save.
- Натисніть + у стовпці, щоб додати до нього вміст.
- Натисніть Save на панелі інструментів, щоб зберегти сторінку.
Піктограма сітки міститься одразу за ручкою перетягування рядка. Пресет змінює стовпці, щойно ви його натискаєте; Cancel повертає старий макет.
Що ви бачите
Три послуги стоять поруч, кожен стовпець займає третину ширини розділу. На екранах, вужчих за 768 пікселів, стовпці складаються: кожен займає повну ширину в тому порядку, що на сторінці.
Стовпці заввишки лише як їхній вміст, тож короткий стовпець закінчується раніше за сусідів. Ви помічаєте це, коли стовпці отримують колір тла; Equal-height columns вирівнює їх.
Налаштування рядка
Макети стовпців
Піктограма сітки відкриває панель для кожного розміру екрана, що має власний макет. Кожна панель показує ці дванадцять пресетів плитками:
| Пресет | Макет |
|---|---|
| 1/1 | Один стовпець на повну ширину |
| 1/2 + 1/2 | Два рівні стовпці |
| 1/3 + 1/3 + 1/3 | Три рівні стовпці |
| 1/4 + 1/4 + 1/4 + 1/4 | Чотири рівні стовпці |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Шість рівних стовпців |
| 1/4 + 1/2 + 1/4 | Вузький, широкий, вузький |
| 1/6 + 4/6 + 1/6 | Вузький, дуже широкий, вузький |
| 1/4 + 3/4 | Чверть ліворуч, три чверті праворуч |
| 3/4 + 1/4 | Три чверті ліворуч, чверть праворуч |
| 2/3 + 1/3 | Широкий ліворуч, вузький праворуч |
| 1/3 + 2/3 | Вузький ліворуч, широкий праворуч |
| 5/12 + 7/12 | Трохи вужчий ліворуч, трохи ширший праворуч |
Для будь-якого іншого поділу натисніть Custom Layout і введіть ширини
дробами, наприклад 1/6 + 5/6. Ширини, що в сумі дають більше за 1, переносяться
на новий рядок. Коли ви відкриєте діалогове вікно знову, Custom Layout буде позначено й
покаже макет, наприклад Custom Layout (1/6 + 5/6).
Макет для кожного розміру екрана
Перша панель, Medium devices (≥ 768px), задає макет для планшетів і ширших екранів. Щоб задати макет і для телефонів, натисніть Add screen size угорі діалогового вікна. Відкриється панель для Extra small (< 576px); виберіть інший розмір з її списку, якщо потрібно, потім пресет. Remove screen size знову видаляє панель.
Налаштування рядка й стовпця
Відкрийте More > Settings на панелі керування рядка або на панелі стовпця для налаштування стовпця.
| Налаштування | Елемент | Що робить | Стандартно |
|---|---|---|---|
| Equal-height columns | Row | Розтягує кожен стовпець до висоти найвищого | Off |
| Mirror row | Row | Показує стовпці у зворотному порядку починаючи з 768 пікселів; складені стовпці зберігають порядок сторінки | Off |
| Vertical centering | Column | Центрує вміст у стовпці, вищому за нього | Off |
Mirror row пасує сторінці з рядками, що чергуються: фото ліворуч, потім фото праворуч, тоді як телефони завжди показують фото першим.
Переміщення й видалення стовпців
Перетягніть стовпець за його ручку або використовуйте More > Move Left чи Move Right на його панелі. Стовпці не мають Delete: натомість виберіть пресет із меншою кількістю стовпців. У такий спосіб вміст ніколи не губиться; він переміщується в останній стовпець, що лишається.
Якщо елемент не відображається
- Вертикальне центрування стовпця нічого не змінює. Стовпець заввишки лише як його вміст, тож немає простору для центрування. Увімкніть Equal-height columns у налаштуваннях рядка.
- Стовпці складаються на телефоні. Нижче 768 пікселів це стандартно. Натисніть піктограму сітки, потім Add screen size, і виберіть пресет для Extra small (< 576px).
- Текст стрибнув в інший стовпець. Ви вибрали пресет із меншою кількістю стовпців, і вміст видалених стовпців перемістився в останній. Натисніть Ctrl+Z (Cmd+Z на Mac), щоб скасувати зміну.
- Стовпець не має Delete у меню More. Стовпці видаляються через макет. Натисніть піктограму сітки рядка й виберіть пресет із меншою кількістю стовпців.
Що далі?
- Вкладення: розмістіть рядок усередині стовпця для дрібнішої сітки.
- Розділи: дайте смузі навколо стовпців власне тло.
- Адаптивний дизайн: як ваш макет пристосовується до кожного розміру екрана.