Змусьте свій макет працювати на телефонах.

Ваші сторінки самі пристосовуються до телефонів і планшетів: колонки стоять поруч на широких екранах і складаються на малих. Ця сторінка показує, як узяти керування на себе. Ви встановлюєте макет колонок для кожного розміру екрана, дзеркалите порядок на широких екранах і показуєте елементи лише на деяких пристроях. У прикладі рядок із чотирьох колонок стає два на два на планшетах.

Відео ховає фото на телефонах, а потім звужує вікно, щоб показати його зникнення.

Перш ніж почати

• Рядок із чотирма рівними колонками на сторінці; див. Рядки та колонки.

Виберіть макет для кожного розміру екрана

1. Наведіть курсор на рядок і натисніть піктограму сітки на його панелі керування. Діалогове вікно макета відкриється з панеллю Medium devices (≥ 768px).
2. Натисніть Add screen size. Відкриється друга панель, установлена в Extra small (< 576px).
3. У спадному списку цієї панелі виберіть Small devices (≥ 576px).
4. Натисніть Custom Layout, введіть 1/2 + 1/2 + 1/2 + 1/2 і натисніть Save.
5. Натисніть Save на панелі інструментів.

Чотири половини зберігають усі чотири колонки й ставлять дві на кожен рядок. Плитка з двома рівними колонками скоротила б рядок до двох колонок на кожному розмірі екрана.

Що ви бачите

На настільному комп’ютері чотири колонки досі стоять в один рядок. Звузьте вікно браузера нижче 768 пікселів, і вони перенесуться дві на дві. Нижче 576 пікселів вони складаються, по одній на рядок, у порядку, який ви бачите в редакторі.

Макет діє від свого розміру екрана вгору, доки більший розмір екрана не матиме власного макета. Кожен новий рядок починається з одним макетом для Medium devices (≥ 768px), тож його колонки складаються на телефонах і малих планшетах. Remove screen size у панелі знову видаляє цей макет.

Дзеркальте порядок на широких екранах

Відкрийте меню More рядка, виберіть Settings і ввімкніть Mirror row. Від 768 пікселів і вгору колонки показуються у зворотному порядку; на менших екранах вони складаються в порядку редактора.

Використовуйте це для рядків зі змінними зображенням і текстом. Поставте зображення першим у редакторі, щоб телефони показували його над текстом, і дзеркальте кожен другий рядок, щоб настільні комп’ютери показували зображення праворуч.

Показуйте або ховайте елемент для кожного розміру екрана

1. Відкрийте меню More елемента й виберіть Settings.
2. У розділі HTML classes виберіть чип із групи Responsive Visibility, наприклад Hidden on extra small devices, phones (<576px).
3. Натисніть Save.

Кожен чип Hidden on ховає елемент лише на одному розмірі екрана. Кожен чип Visible on показує його на цьому одному розмірі й ховає скрізь інде.

Розміри екрана

Елемент Positioned layers має власний перемикач Responsive, типово вимкнений. Увімкніть його, щоб масштабувати висоту полотна та його текст за шириною вікна, щоб композиція зберігала свої пропорції.

Якщо ви не бачите зміни

• Колонки досі складаються на планшеті. Рядок не має макета для цього розміру екрана, тож колонки складаються нижче 768 пікселів. Відкрийте піктограму сітки рядка, натисніть Add screen size і виберіть Small devices (≥ 576px).
• Елемент зник на кожному розмірі екрана. Він має два чипи Visible on, і кожен ховає його там, де інший його показує. Залиште один або використайте чипи Hidden on, по одному на розмір, який ховаєте.
• Mirror row нічого не робить на телефоні. Mirror row працює від 768 пікселів і вгору. Щоб змінити порядок на телефонах, натомість пересуньте колонки в редакторі.

Що далі?

• Рядки та колонки: будуйте рядки, які ви робите адаптивними тут.
• Редагуйте сторінку на телефоні або планшеті: перевіряйте та виправляйте сторінки на малому екрані.
• Розтягніть розділ від краю до краю: вирішуйте, наскільки широким іде ваш вміст.