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