> ## 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).

# Превью

${frame}[](https://player.vimeo.com/video/289257006?title=0&byline=0&portrait=0)

Используйте виджет **Превью** на страницах, на которых нужно автоматически показывать обложки (превью) других страниц в виде изображений. При нажатии мышкой на такое изображение, будет открываться соответствующая страница.

![page-23.gif](https://storage.crisp.chat/users/helpdesk/website/-/1/b/9/a/1b9a4c5ad8796700/81512551-0de8-4a4d-9d21-d98efa_qjdbs0.gif)

1. Создайте страницу с типом **Новая страница** и добавьте виджет **Превью**, перетащив его в нужную область страницы. вы также можете добавить виджет на уже созданную ранее страницу.

![screen-69.png](https://storage.crisp.chat/users/helpdesk/website/-/a/b/7/2/ab72cc1e25fa1000/9715cff7-0465-49d1-b5f3-d13ecf_15fdcvg.png)

Если у страницы нет еще пунктов подменю или они скрыты, то на виджете отобразится сообщение, что нужно добавить страницы, обложки которых вы хотите показывать. Эти страницы будут открываться по клику на превью.

![screen-88.png](https://storage.crisp.chat/users/helpdesk/website/-/6/a/e/1/6ae133f5bf1c7400/778232d2-abf2-4000-a684-1a5249_fhdbuu.png)

2. Добавьте к странице пункты подменю. Для этого можно создать новые страницы или изменить расположение для уже существующих страниц, выбрав для них в **Расположение в меню** созданную ранее страницу с виджетом **Превью**.

![page-24.gif](https://storage.crisp.chat/users/helpdesk/website/-/8/b/b/e/8bbe01728dd27800/e0125a1e-8bd5-4ec2-8df1-5dd1cc_vkwvaw.gif)

3. Включите отображение для всех добавленных страниц. Если отображение для страницы не включено, ее превью не будет отображаться.

![screen-89.png](https://storage.crisp.chat/users/helpdesk/website/-/8/5/8/0/858073d54c08f000/dbca18c6-5ab4-4821-8a16-508277_1c5z52v.png)

4. В качестве изображения превью автоматически отображается первая фотография со страницы подменю. Если нужно изменить фото, то вы можете добавить любой другой снимок. Более подробно процесс описан в руководстве [Как заменить фотографию обложки](https://support.vigbo.com/hc/ru/articles/360000451211).

Обратите внимание, если удалить все фото со страницы подменю или заменить все фото, то обложка в превью **не изменится автоматически**. Изменить фото можно или вручную, или же заново добавить виджет **Превью**.

5. Задайте вид виджета **Превью** на странице, нажав на иконку шестеренки справа вверху.

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

![Screenshot-583.png](https://storage.crisp.chat/users/helpdesk/website/-/2/8/7/5/2875b32f1ee1a800/f9d7b997-e4bf-4231-90f7-28898b_1vzdwtg.png)

6. Выберите размер превью и задайте расстояние между ними.

![Screenshot-584.png](https://storage.crisp.chat/users/helpdesk/website/-/c/3/d/2/c3d2efc22c345800/8e880720-9e8f-49e4-b85b-62b36a_1aqbakw.png)

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

Если превью отображается не на всю ширину страницы, нужно либо добавить еще превью, либо увеличить их размер.

7. Настройте дизайн заголовков превью: цвет, текст, выравнивание текста.

![Screenshot_6.png](https://support.vigbo.tech/hc/article_attachments/20180460322460)

8. При необходимости включите эффекты для превью.

![Screenshot_7.png](https://support.vigbo.tech/hc/article_attachments/20180474938524)

* **Текст при наведении** - эффект, при котором текст заголовка будет расположен поверх фото превью и отображаться только при наведении. При необходимости возможно зафиксировать этот текст поверх изображения и других эффектов, установив настройку **Отображать текст всегда**.
* **Наложение цвета** - позволяет добавить цвет поверх изображения и настроить его прозрачность. При необходимости возможно зафиксировать цвет поверх изображения и других эффектов.
* **Приближение** - эффект создает видимость приближения фото при наведении на него.

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

---

# Особенности отображения виджета Превью в мобильной версии

Вариант отображения превью в мобильной версии сайта зависит от выбранного размера превью. При настройке размера превью **очень маленькие**, **маленькие**, **средние** и **большие** - в мобильной версии отображаются по два изображения превью в ряд. При выборе размера **очень большие** - по одному изображению в ряд.

![Screenshot-592.png](https://support.vigbo.tech/hc/article_attachments/360017184380)