Используйте виджет Превью на страницах, на которых нужно автоматически показывать обложки (превью) других страниц в виде изображений. При нажатии мышкой на такое изображение, будет открываться соответствующая страница.
1. Создайте страницу с типом Новая страница и добавьте виджет Превью, перетащив его в нужную область страницы. вы также можете добавить виджет на уже созданную ранее страницу.
Если у страницы нет еще пунктов подменю или они скрыты, то на виджете отобразится сообщение, что нужно добавить страницы, обложки которых вы хотите показывать. Эти страницы будут открываться по клику на превью.
2. Добавьте к странице пункты подменю. Для этого можно создать новые страницы или изменить расположение для уже существующих страниц, выбрав для них в Расположение в меню созданную ранее страницу с виджетом Превью.
3. Включите отображение для всех добавленных страниц. Если отображение для страницы не включено, ее превью не будет отображаться.
4. В качестве изображения превью автоматически отображается первая фотография со страницы подменю. Если нужно изменить фото, то вы можете добавить любой другой снимок. Более подробно процесс описан в руководстве Как заменить фотографию обложки.
Обратите внимание, если удалить все фото со страницы подменю или заменить все фото, то обложка в превью не изменится автоматически. Изменить фото можно или вручную, или же заново добавить виджет Превью.
5. Задайте вид виджета Превью на странице, нажав на иконку шестеренки справа вверху.
- Вид 1: система обрезает фото превью в соответствии с заданной в настройках формой.
- Вид 2: фотографии превью не обрезаются, но изображения отображаются в таком порядке, чтобы максимально плотно заполнить страницу.
6. Выберите размер превью и задайте расстояние между ними.
ВАЖНО: так как ширина страницы редактора может отличаться от ширины сайта, после выбора размера превью, нужно проверять отображение в режиме Предпросмотра.
Если превью отображается не на всю ширину страницы, нужно либо добавить еще превью, либо увеличить их размер.
7. Настройте дизайн заголовков превью: цвет, текст, выравнивание текста.
8. При необходимости включите эффекты для превью.
- Текст при наведении - эффект, при котором текст заголовка будет расположен поверх фото превью и отображаться только при наведении. При необходимости возможно зафиксировать этот текст поверх изображения и других эффектов, установив настройку Отображать текст всегда.
- Наложение цвета - позволяет добавить цвет поверх изображения и настроить его прозрачность. При необходимости возможно зафиксировать цвет поверх изображения и других эффектов.
- Приближение - эффект создает видимость приближения фото при наведении на него.
ВАЖНО: эффекты Текст при наведении, Наложение цвета будут работать в мобильной версии сайта, если активированы чекбоксы Отображать текст всегда, Накладывать цвет всегда. Эффект приближения не применяется в мобильной версии.
Особенности отображения виджета Превью в мобильной версии
Вариант отображения превью в мобильной версии сайта зависит от выбранного размера превью. При настройке размера превью очень маленькие, маленькие, средние и большие - в мобильной версии отображаются по два изображения превью в ряд. При выборе размера очень большие - по одному изображению в ряд.