Додавання контейнера позиціонованих шарів.
Використовуйте позиціоновані шари, коли хочете, щоб елементи перекривалися або стояли в точному місці, чого рядки й стовпці не вміють. Ви отримуєте полотно, на якому перетягуєте кожен елемент куди хочете, наприклад заголовок поверх фото. Приклад накладає білий заголовок дня відкритих дверей поверх зображення. Для звичайного вмісту поруч рядки й стовпці легше утримувати охайними на телефонах.
Додавання контейнера позиціонованих шарів
- Наведіть курсор на стовпець і натисніть + на його панелі керування або + посередині порожнього стовпця, щоб відкрити вибір елементів.
- На вкладці Layout натисніть Positioned layers.
- Спочатку відкриються його налаштування. Установіть Height так, щоб умістився найвищий шар, потім натисніть Save. З’явиться порожнє полотно.
- Наведіть курсор на полотно й натисніть + на його панелі керування, щоб додати елемент, наприклад Text або Image. Кожен доданий елемент стає шаром, який можна позиціонувати.
Що ви бачите
Полотно зберігає задану висоту, і кожен шар лишається там, де ви його розмістили, поверх інших або під ними. Відвідувачі бачать композицію такою, як у редакторі. Позиції зберігаються як частка полотна, тож шар зберігає місце, коли полотно вужчає. Текст зберігає розмір, якщо ви не ввімкнете Responsive.
Налаштування позиціонованих шарів
Відкрийте налаштування через More > Settings на панелі керування Positioned layers.
| Налаштування | Що робить | Стандартно |
|---|---|---|
| Width | Ширина полотна, наприклад 100% або 600px | 100% |
| Height | Висота полотна в пікселях | 500 |
| Responsive | Масштабує висоту полотна й текст разом із шириною полотна, тож композиція зберігає пропорції на малих екранах | Off |
Позиціонування шарів
- Select: натисніть шар. На його кутах і краях з’являться маркери.
- Move: перетягніть шар за його ім’я на панелі керування, наприклад Text або Image. Шари лишаються всередині полотна.
- Resize: перетягніть маркер вибраного шару.
- Add at a spot: двічі натисніть порожню частину полотна. Відкриється вибір елементів, і новий елемент стане там, де ви натиснули.
Меню More кожного шару має чотири додаткові пункти. 100% width і 100% height розтягують шар через полотно. Bring forward і Send backward переміщують його над або під інші шари.
Якщо елемент не відображається
- Шар не рухається, коли ви його тягнете. Шари рухаються лише за ручку із їхнім ім’ям на панелі керування. Наведіть курсор на шар і потягніть цю ручку.
- Шар ховається за іншим. Він міститься нижче в стосі. Відкрийте меню More шару й виберіть Bring forward.
- Шари перекриваються або вилазять на телефонах. Responsive вимкнено, тож висота полотна й текст зберігають розмір. Увімкніть Responsive у налаштуваннях Positioned layers.
- Positioned layers немає у виборі всередині полотна. Полотно не може містити інше полотно. Натомість додайте новий елемент Positioned layers до стовпця.
- Positioned layers немає у виборі ніде. Ваш профіль користувача DXPR Builder його не включає. Адміністратор позначає Layers у розділі Elements вашого профілю за адресою
/admin/dxpr_studio/dxpr_builder/profile.
Що далі?
- Розділи: задайте області навколо полотна колір чи зображення тла.
- Вкладення: поєднуйте шари з рядками й стовпцями в складніших макетах.
- Вкладка анімації: нехай кожен шар з’являється з власним ефектом появи.