> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.support-vigbo.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. Создайте страницу с типом **Новая страница** и добавьте виджет **Фотография до/после**, перетащив его в нужную область.

![screen-67.png](https://storage.crisp.chat/users/helpdesk/website/-/e/c/7/3/ec73bd651b8bf80/7f902158-0aba-4783-9a04-4c205f_1k5lahp.png)

2. Добавьте фотографии.

Нажмите на кнопку **Выберите файл** и загрузите первое изображение.

![screen-73.png](https://storage.crisp.chat/users/helpdesk/website/-/4/7/d/f/47df52d4a7915c00/bc03e6cf-8ef7-4c70-aa23-9ac586_1b8pmxi.png)

Точно так же добавьте второе изображение во вторую часть виджета.

![screen-74.png](https://storage.crisp.chat/users/helpdesk/website/-/5/e/2/c/5e2ced51cfe0c800/48b926d1-3d21-491d-8807-d9da46_g6k1z3.png)

> **ВАЖНО:** чтобы добиться полного совпадения двух фотографий, рекомендуем подготовить изображения заранее с одинаковыми пропорциями и размерами.

3. Настройте внешний вид виджета.

Чтобы перейти к настройкам оформления, кликните по значку шестеренки в правом верхнем углу виджета и выберите вкладку **Оформление**.

![screen-75.png](https://storage.crisp.chat/users/helpdesk/website/-/9/3/b/0/93b0ba161319e800/75a976af-c8e8-4fcd-9030-f78bde_1wpluwi.png)

Здесь вы можете:

* Настроить ширину виджета в процентах или пикселях.
* Задать выравнивание.

![screen-55.png](https://storage.crisp.chat/users/helpdesk/website/-/1/f/7/a/1f7adf13a1bc8000/e94abfd9-71ff-43c0-88d4-b9d849_ssapje.png)

* Выбрать расположение разделительной линии: горизонтальное или вертикальное и задать для нее цвет.

![screen-56.png](https://storage.crisp.chat/users/helpdesk/website/-/4/d/2/3/4d23740bcbf0140/279955d8-cf0a-42fe-ba3d-cce3d9_1wmq728.png)

* Подобрать пропорции фотографий. Если в настройках заданы одни пропорции, а вы добавите фото с другими пропорциями, то фотографии будут выравниваться по меньшей стороне и обрезаться по большей.

![screen-57.png](https://storage.crisp.chat/users/helpdesk/website/-/4/0/7/d/407da7e6d548c800/7566521d-8e47-4043-ae61-806b00_1qbt98y.png)

* Добавить подпись под фотографиями. Для подписи можно задать цвет, выбрать шрифт, размер шрифта, подобрать интервалы между строками и буквами, настроить выравнивание.

![screen-58.png](https://support.vigbo.tech/hc/article_attachments/360024436580/screen-58.png)

4. Также в настройках виджета можно заменить фотографии и добавить для каждого изображения ALT-теги.

![screen-76.png](https://support.vigbo.tech/hc/article_attachments/5474481721362/screen-76.png)

В атрибут «ALT» нужно писать текстовый эквивалент того, что изображено на фото. Если по каким-то причинам фото не отображается, посетителю будет видна надпись, описывающая, что изображено на фотографии. Наличие ALT-тегов позволяет увеличить рейтинг страницы в поисковых системах в режиме поиска картинок, то есть улучшить поисковую оптимизацию сайта.