Елемент Макет в конструкторі сайтів
Елемент Макет (Layout) дає змогу розділити контент на чітко визначені сегменти в блоках, секціях або колонках.
Розглянемо, як додати макет і налаштувати в ньому вкладки.
Додайте макет
Щоб додати макет, натисніть + Додати віджет (Add widget) у блоці, колонці або секції, а потім натисніть Макет (Layout).
Виберіть один із доступних варіантів розташування.
Далі в кожному сегменті можна вертикально додавати віджети. Натисніть + і виберіть віджет.
Щоб задати відступи між сегментами, наведіть курсор на макет, натисніть три крапки внизу й виберіть Редагувати (Edit). У панелі налаштування елемента введіть у пікселях відступи між віджетами за осями X та Y.
Додайте макет із вкладками
Макет із вкладками розділяє контент між кількома вкладками в межах однієї секції. Так довгий контент залишається компактним і вміщується на одному екрані.
Наприклад, інтернет-магазин може розділити опис товару на вкладки Характеристики, Доставка та Відгуки.
Щоб додати макет із вкладками, натисніть + Додати віджет у блоці, колонці або секції. Перейдіть до вкладки Макет. Виберіть варіант макета з вкладками.
Вкладки належать одній сторінці, а не є окремими сторінками. Коли відвідувач натискає назву вкладки, сторінка показує контент цієї вкладки та приховує решту.
Кожна вкладка має власний контент. Кількість вкладок і розташування сегментів залежать від вибраного варіанта.
Щоб заповнити вкладку, натисніть її назву, потім + у сегменті й виберіть віджет.
Іконка попередження позначає вкладки, які ще не мають контенту.
Щоб налаштувати макет, наведіть на нього курсор і натисніть три крапки. Виберіть Редагувати.
Виберіть розташування вкладок
Назви вкладок можуть розташовуватися над контентом або збоку від нього — залежно від того, скільки місця є на сторінці. За замовчуванням вони розташовані над контентом.
У розділі Зовнішній вигляд (Appearance) виберіть одне з розташувань: над контентом, ліворуч або праворуч.
Налаштуйте стилі вкладок
Щоб узгодити вкладки з дизайном сайту, натисніть Стилі вкладок (Tab styles).
У розділі Заголовок (Header) налаштуйте вигляд назв вкладок.
Активна вкладка — це та, яку відкрив відвідувач. Ви можете виділити її та відокремити заголовок від контенту:
| Фон активної вкладки (Active background) | Задає колір фону активної вкладки. |
| Колір тексту активної вкладки (Active text color) | Задає колір назви активної вкладки. |
| Обводка активної вкладки (Active contour) | Додає лінію, яка виділяє активну вкладку. Виберіть її розташування та колір. |
| Розділювач (Separator) | Додає лінію-розділювач. |
| Колір розділювача (Separator color) | Задає колір лінії-розділювача. |
У розділі Контент (Content) задайте загальні налаштування вигляду області, що містить віджети. У полі Відступ між віджетами (Gap between widgets) вкажіть у пікселях відстань між віджетами всередині цієї області.
Щоб застосувати зміни, натисніть Зберегти (Save).
Керуйте вкладками
У розділі Вкладки (Tabs) вказано всі вкладки, які ви додали до макета.
Щоб перейменувати вкладку, натисніть іконку олівця біля неї. Введіть нову назву в поле Текст (Text) і натисніть Зберегти.
Щоб скопіювати або видалити вкладку, натисніть три крапки біля неї. Виберіть Дублювати (Duplicate), щоб додати копію з усіма віджетами початкової вкладки. Оберіть Видалити (Delete), щоб видалити вкладку.
Щоб змінити порядок вкладок, перетягніть вкладку вгору або вниз за маркер перетягування.
Щоб додати нову вкладку, натисніть Додати (Add).
Щоб перехід між вкладками був плавним, активуйте перемикач Анімація. Потім виберіть тип, розташування та швидкість анімації.
Щоб вкладки стали доступними відвідувачам, натисніть Опублікувати. Відвідувачі бачать одну вкладку одночасно й можуть відкрити іншу, натиснувши її назву.
Оновлено: 18.07.2025
або