> ## 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-shag-1-dobavlenie-galerei-doposle)
* [Шаг 2. Добавление изображений в галерею «До/После»](#3-shag-2-dobavlenie-izobrazhenij-v-galereyu-doposle)
* [Шаг 3. Настройка галереи «До/После»](#3-shag-3-nastrojka-galerei-doposle)

### Шаг 1. Добавление галереи «До/После»

Существует несколько вариантов того, как добавить этот элемент на страницу вашего сайта:

* Вы можете добавить готовый блок, например, **wireframe-series-10-gallery**, с этим элементом из галереи блоков. 

| ${color}[#1aa900](Подсказка:) обратитесь к статье [о добавлении блоков](/ru/article/dobavlenie-blokov-wmgcv7/).

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

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

### Шаг 2. Добавление изображений в галерею «До/После»

Элемент разделен на две части, в каждую из которых вам нужно загрузить изображение. Для этого нажмите на сторону, для которой вы хотите загрузить изображение, и внизу появится контекстное меню:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ru-2_rqrwl3.png)
 В этом контекстном меню перейти к загрузке фото можно двумя способами. Первый: нажмите на **иконку с изображением**, чтобы перейти в Медиагалерею вашего сайта; второй: нажмите на **иконку шестерни**, чтобы открыть настройки Медиа, где вы также сможете выбрать фото для отображения в блоке.

Как в **Медиагалерее**, так и в настройках **Медиа**, у вас будет выбор — загрузить новый файл с вашего устройства или выбрать уже существующий из галереи вашего сайта.

### Шаг 3. Настройка галереи «До/После»

После загрузки фото одним из двух упомянутых ранее методов,  вы можете дополнительно настроить их, отдельно для каждой стороны элемента, в настройках **Медиа**:

1. Во вкладке **Общие** вы можете выбрать режим масштабирования для изображения, перевернуть его по горизонтали или вертикали, и указать альтернативный текст:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ru-3_1khj8z9.png)
2. Перейдите на вкладку **Стиль**, чтобы активировать для изображения наложение цвета и/или определенный фильтр:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ru-4_ce874n.png)
3. Во вкладке **Действие** вы можете указать вашему изображению нужное поведение при нажатии: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ru-5_oka0n1.png)
Также сама галерея имеет определенные настройки, которыми вы можете управлять. Чтобы открыть настройки галереи, наведите курсор на ее контейнер и нажмите на **«шестеренку»** в левом верхнем углу: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ru-6_166utn7.png)
1. В новом окне вы сможете настроить **ориентацию маркера** (вертикальную/горизонтальную), его **цвет** и **положение** относительно фотографий:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ru-7_4euagc.png)
2. Кроме того, вы можете указать желаемое **закругление углов** и добавить **тень** к этому элементу:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-ru-8_a9u1gz.png)
 [Опубликуйте свой сайт](/ru/article/publikaciya-sajta-1xvrq6l/), чтобы изменения вступили в силу.