Добавление галереи «До/После»
Галерея «До/После» служит для сравнения двух изображений на сайте. Этот блок будет хорошо смотреться на сайтах, где нужно показать результат выполненной работы — например, на сайте стоматологии, салона красоты, сервиса обработки фотографий, ремонтных услуг и т. д. Посетители сайта могут потянуть за маркер, чтобы сравнить две фотографии.
Следуйте инструкциям ниже, чтобы добавить галерею «До/После» на свой сайт.
Содержание:
- Шаг 1. Добавление галереи «До/После»
- Шаг 2. Добавление изображений в галерею «До/После»
- Шаг 3. Настройка галереи «До/После»
Шаг 1. Добавление галереи «До/После»
Существует несколько вариантов того, как добавить этот элемент на страницу вашего сайта:
- Вы можете добавить готовый блок, например, wireframe-series-10-gallery, с этим элементом из галереи блоков.
- Также вы можете добавить этот элемент в уже существующую заполненную или пустую колонку в одном из ваших блоков. Для этого нажмите на иконку добавления нового элемента и выберите элемент До/После из списка доступных.
Шаг 2. Добавление изображений в галерею «До/После»
Элемент разделен на две части, в каждую из которых вам нужно загрузить изображение. Для этого нажмите на сторону, для которой вы хотите загрузить изображение, и внизу появится контекстное меню:
В этом контекстном меню перейти к загрузке фото можно двумя способами. Первый: нажмите на иконку с изображением, чтобы перейти в Медиагалерею вашего сайта; второй: нажмите на иконку шестерни, чтобы открыть настройки Медиа, где вы также сможете выбрать фото для отображения в блоке.
Как в Медиагалерее, так и в настройках Медиа, у вас будет выбор — загрузить новый файл с вашего устройства или выбрать уже существующий из галереи вашего сайта.
Шаг 3. Настройка галереи «До/После»
После загрузки фото одним из двух упомянутых ранее методов, вы можете дополнительно настроить их, отдельно для каждой стороны элемента, в настройках Медиа:
- Во вкладке Общие вы можете выбрать режим масштабирования для изображения, перевернуть его по горизонтали или вертикали, и указать альтернативный текст:
- Перейдите на вкладку Стиль, чтобы активировать для изображения наложение цвета и/или определенный фильтр:
- Во вкладке Действие вы можете указать вашему изображению нужное поведение при нажатии:
Также сама галерея имеет определенные настройки, которыми вы можете управлять. Чтобы открыть настройки галереи, наведите курсор на ее контейнер и нажмите на «шестеренку» в левом верхнем углу:
- В новом окне вы сможете настроить ориентацию маркера (вертикальную/горизонтальную), его цвет и положение относительно фотографий:
- Кроме того, вы можете указать желаемое закругление углов и добавить тень к этому элементу:
Опубликуйте свой сайт, чтобы изменения вступили в силу.
Последнее изменение: 04/12/2025
Спасибо!