Додавання галереї «До/Після»

Галерея «До/Після» слугує для порівняння двох зображень на сайті. Цей блок буде добре виглядати на сайтах, де потрібно показати результат виконаної роботи — наприклад, на сайті стоматології, салону краси, сервісу обробки фотографій, ремонтних послуг тощо. Відвідувачі сайту можуть потягнути за маркер, щоб порівняти дві фотографії.

Дотримуйтесь інструкцій нижче, щоб додати галерею «До/Після» на свій сайт.

Зміст:

• Крок 1. Додавання галереї «До/Після»
• Крок 2. Додавання зображень у галерею «До/Після»
• Крок 3. Налаштування галереї «До/Після»

Крок 1. Додавання галереї «До/Після»

Існує декілька варіантів того, як додати цей елемент на сторінку вашого сайту:

• Ви можете додати готовий блок, наприклад, wireframe-series-10-gallery, з цим елементом з галереї блоків.

​​

• Також ви можете додати цей елемент у вже існуючу наповнену чи пусту колонку в одному з ваших блоків. Для цього натисніть на іконку додавання нового елементу та виберіть елемент До/Після зі списку доступних.

Крок 2. Додавання зображень у галерею «До/Після»

Елемент розділений на дві частини, у кожну з яких вам потрібно завантажити зображення. Для цього натисніть на сторону, для якої ви хочете завантажити зображення, і знизу з'явиться контекстне меню:

У цьому контекстному меню перейти до завантаження фото можливо двома шляхами. Перший: натисніть на іконку з зображенням, щоб перейти у Медіагалерею вашого сайту; другий: натисніть на іконку шестерні, щоб відкрити налаштування Медіа, де ви також зможете обрати фото для відображення у блоці.

Як у Медіагалереї, так і в налаштуваннях Медіа, у вас буде вибір — завантажити новий файл з вашого пристрою або обрати вже існуючий з галереї вашого сайту.

Крок 3. Налаштування галереї «До/Після»

Після завантаження фото одним з двох згаданих раніше методів, ви можете додатково їх налаштувати, окремо для кожної сторони елементу, у налаштуваннях Медіа:

1. У вкладці Загальні ви можете обрати режим масштабування для зображення, перевернути його по горизонталі чи вертикалі, та вказати альтернативний текст:

2. Перейдіть до вкладки Стиль, щоб активувати для зображення накладання кольору або/та певний фільтр:

3. У вкладці Дія ви можете вказати вашому зображенню потрібну поведінку при натисканні:

Також сама галерея має певні налаштування, якими ви можете керувати. Щоб відкрити налаштування галереї, наведіть на її контейнер і натисніть на «шестерню» в лівому верхньому кутку:

1. У новому вікні ви зможете налаштувати орієнтацію маркера (вертикальну/горизонтальну), його колір і позицію щодо фотографій:

2. Окрім цього, ви можете вказати бажане заокруглення кутів та додати тінь до цього елементу:

Опублікуйте свій сайт, щоб зміни набрати чинності.

Оновлено: 04/12/2025