> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

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

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

**Зміст:**
* [Крок 1. Додавання галереї «До/Після»](#3-krok-1-dodavannya-galereyi-dopislya)
* [Крок 2. Додавання зображень у галерею «До/Після»](#3-krok-2-dodavannya-zobrazhen-u-galereyu-dopislya)
* [Крок 3. Налаштування галереї «До/Після»](#3-krok-3-nalashtuvannya-galereyi-dopislya)

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

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

* Ви можете додати готовий блок, наприклад, **wireframe-series-10-gallery**, з цим елементом з галереї блоків. 
​​
| ${color}[#1aa900](Підказка:) зверніться до статті [про додавання блоків.](/uk/article/dodavannya-blokiv-11jpok5/) 

* Також ви можете додати цей елемент у вже існуючу наповнену чи пусту колонку в одному з ваших блоків. Для цього натисніть на **іконку додавання нового елементу** та виберіть елемент **До/Після** зі списку доступних.
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ukr-1_129ntc4.png)
| ${color}[#1aa900](Підказка:) елемент До/Після ви можете знайти у вкладці Медіа при додаванні елементу.

||| ${color}[#f97700](Важливо:) наразі цей елемент недоступний для Flex-блоку.

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

Елемент розділений на дві частини, у кожну з яких вам потрібно завантажити зображення. Для цього натисніть на сторону, для якої ви хочете завантажити зображення, і знизу з'явиться контекстне меню:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ukr-2_1jry946.png)
 У цьому контекстному меню перейти до завантаження фото можливо двома шляхами. Перший: натисніть на **іконку з зображенням**, щоб перейти у Медіагалерею вашого сайту; другий: натисніть на **іконку шестерні**, щоб відкрити налаштування Медіа, де ви також зможете обрати фото для відображення у блоці.

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

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

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

1. У вкладці **Загальні** ви можете обрати режим масштабування для зображення, перевернути його по горизонталі чи вертикалі, та вказати альтернативний текст:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ukr-3_wwhvqa.png)
2. Перейдіть до вкладки **Стиль**, щоб активувати для зображення накладання кольору або/та певний фільтр:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ukr-4_19b45ao.png)
3. У вкладці **Дія** ви можете вказати вашому зображенню потрібну поведінку при натисканні: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ukr-5_1tl7s7.png)
Також сама галерея має певні налаштування, якими ви можете керувати. Щоб відкрити налаштування галереї, наведіть на її контейнер і натисніть на **«шестерню»** в лівому верхньому кутку: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ukr-6_f9gurh.png)
1. У новому вікні ви зможете налаштувати **орієнтацію маркера** (вертикальну/горизонтальну), його **колір** і **позицію** щодо фотографій:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ukr-7_a3z888.png)
2. Окрім цього, ви можете вказати бажане **заокруглення кутів** та додати **тінь** до цього елементу:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ukr-8_1ngqtkx.png)
[Опублікуйте свій сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), щоб зміни набрати чинності.