Віджет До/Після в конструкторі сайтів
Використовуйте віджет До/після, щоб наочно демонструвати результати вашої роботи. Він стане у пригоді бізнесам у сфері послуг, краси, ремонту, дизайну — допоможе підкреслити зміни, яких ви досягли для клієнта.
У статті розглянемо, як додати віджет на сайт і налаштувати його показ.
Додайте віджет
Відкрийте сторінку сайту в конструкторі та перейдіть до потрібного блоку. Натисніть кнопку Додати віджет (Add widget) та виберіть До/Після (Before/After).
Додайте зображення
У панелі налаштувань віджета завантажте зображення «До» та «Після» у відповідних секціях. Виберіть, звідки додати кожне з зображень:
| Менеджер файлів (File manager) | Відкриває панель менеджера файлів, де можна вибрати зображення з наявних або завантажити нове. |
| Стокові зображення (Stock images) |
Відкриває модальне вікно, де можна вибрати зображення з безплатного фотостоку Unsplash. Скористайтесь пошуком за назвою та натисніть на потрібне зображення у списку. Натисніть Вибрати внизу вікна, і зображення буде додано на сторінку. |
Завантажені зображення ви можете змінювати та редагувати. Доступні такі дії з зображенням:
| Редагування |
Натисніть іконку картинки. Читайте більше: Як редагувати зображення в конструкторі сайтів. |
| Завантажити нове | Натисніть іконку завантаження. |
| Видалення | Натисніть іконку кошика. |
Налаштуйте показ
Щоб віджет гармонійно вписувався у стиль вашого сайту, ви можете налаштувати його зовнішній вигляд.
Після того як ви додали зображення, ви побачите секції з параметрами, які можна налаштувати:
| Напрямок та колір повзунка (Handle direction and color) |
Визначте напрям повзунка, за допомогою якого користувач порівнює зображення: вертикальний (ліворуч/праворуч) або горизонтальний (згори/знизу). Також виберіть з палітри колір повзунка та роздільної лінії, яка зʼявляється між двома зображеннями. |
| Початкова позиція (Initial position) |
Визначте, яку частину кожного зображення видно при завантаженні сторінки. Наприклад, 50% означає, що видно половину фото «До» і половину фото «Після». Щоб змінити значення, використовуйте повзунок або введіть потрібний відсоток. |
| Ширина (Width) | Визначте ширину блоку з віджетом у межах блоку. |
| Вирівнювання контенту (Content alignment) |
Керуйте вирівнюванням віджета всередині блоку. Виберіть, як розмістити зображення: по лівому краю, по центру чи по правому краю. |
Щоб додані зміни відображалися на сайті, натисніть Опублікувати (Publish).
Скопіюйте ID
Для кожного віджета передбачений ідентифікатор (ID), який визначає елемент на сторінці. З його допомогою можна застосовувати стилі та скрипти, налаштувати показ попапів і відстежувати події по цьому елементу.
Щоб скопіювати ID, натисніть на нього. Щоб відредагувати ID, натисніть значок олівця.
Читайте детальніше: ID блоку та віджета.
Оновлено: 24.07.2025
або