Слайдер - это специальный блок на странице, который содержит изображения или видео, сменяющие друг друга автоматически или вручную. Слайдер размещается вверху страницы. Для каждой страницы возможно добавить свое наполнение и задать свои настройки для слайдера.
Для создания слайдера вам необходимо проделать следующие шаги:
1. Перейдите в раздел Сайт, откройте нужную страницу в режиме редактирования и перейдите на вкладку Управление слайдером.
2. Добавьте в слайдер фото или видео-ролики, нажав соответствующую кнопку. Также вы можете выбрать добавление цветного фона.
ВАЖНО: количество всех слайдов может быть не более 10.
Добавление фотографий:
Нажмите Добавить фото и выберите изображения на вашем компьютере. Дождитесь загрузки.
Добавление видео:
Нажмите кнопку Добавить видео и введите адрес видео-ролика с vimeo.com или с youtube.com
ВАЖНО: видео в слайдере воспроизводится без звука. В мобильной версии сайта видео в слайдере не проигрывается, отображается только превью видео.
Добавление цветного фона:
Нажмите Добавить цветной фон и выберите нужный цвет из цветовой палитры.
3. Задайте настройки изображению, видео или фону.
Для каждого изображения вы можете указать следующие настройки:
- Задать центр изображения. Область, отмеченная точкой, будет отображаться на экранах с любым разрешением.
- Задать Цвет фона поверх фото: данный цвет будет применяться к изображению при изменении прозрачности.
- Указать Ссылку: в этом поле вы можете задать ссылку на другую страницу сайта или другой сайт. По клику на фото в слайдере будет происходить переход по указанной вами ссылке. Если нужно сделать переход на другой сайт, то ссылку укажите в формате http://sitename.com/. Если переход должен быть на страницу на вашем сайте, то укажите только адрес страницы без основного домена, например, /about (без http://).
- Также вы можете настроить, чтобы ссылка открывалась в отдельном окне.
Для видео-ролика вы можете указать следующие настройки:
- Цвет фона поверх видео: данный цвет будет применяться к изображению при изменении прозрачности видео.
- Ссылка: в данном поле вы можете задать ссылку на другую страницу сайта или другой сайт. По клику на видео в слайдере будет происходить переход по указанной вами ссылке. Если вам нужно сделать ссылку на другой сайт, то ссылку укажите в формате http://sitename.com/. Если вам нужно сделать переход на страницу на вашем сайте, то нужно указать только адрес страницы без домена, например, /about (без http://).
- Также вы можете настроить, чтобы ссылка открывалась в отдельном окне.
Цветовой фон позволяет указать ссылку на другую страницу сайта или другой сайт.
4. Добавьте на фото, видео или фон текст или кнопку, при необходимости. Для этого перетяните на область фото нужный виджет.
5. Настройте оформление слайдера. Для каждого слайдера вы можете указать следующие настройки:
- Настроить высоту слайдера.
Высота слайдера указывается в процентах от общего размера экрана и задается отдельно для каждой страницы. Фотография в слайдере всегда растягивается по меньшей стороне на всю область слайдера (без полей), поэтому подбирать фото необходимо таким образом, чтобы можно было обрезать края. Рекомендуем загружать горизонтальные фотографии. Если загрузить вертикальное фото, то оно сильно обрежется сверху и снизу, и видимой останется только центральная часть. Обратите внимание, если контент, добавленный в слайдер, больше заданной высоты, то слайдер будет адаптирован по высоте контента.
По ширине слайдер будет отображаться на весь экран, независимо от настроек ширины сайта, кроме слайдера в дизайнах Lolita, Victoria, Paris и Olsen ширина слайдера в этих дизайнах адаптируется под ширину сайта.
- Выбрать тип навигации;
- Выровнять содержимое по контенту;
- Отображать стрелку вниз (актуально только для высоты слайдера = 100% и для типа навигации с цифрами);
- Отображать стрелки;
- Отображать точки или цифры;
- Расположение точек/цифр на слайде;
- Вид точек/Вид навигации.
6. Укажите дополнительные настройки. Для каждого слайдера вы можете указать следующие дополнительные настройки:
- Эффект смены изображений (Исчезание-появление изображения при пролистывании, Карусель (одно изображение выталкивает другое при пролистывании), Наслаивание одного изображения на другое);
- Включить слайдшоу;
- Эффект при прокрутке (Без эффекта, С фиксацией, Параллакс);
- Плавное появление контента.
ВАЖНО: Для эффекта параллакс резервируется часть изображения. Поэтому фото отображается в большем размере и будет обрезаться по краям.
7. Настройте отображение мобильной версии сайта. Для мобильной версии сайта вы можете выбрать один из двух вариантов отображения:
- Вертикальное отображение: по высоте слайдер займет минимум 100 процентов экрана независимо от настроек высоты для ПК-версии. Высота может меняться в зависимости от контента, добавленного на слайдере. Отображаться будет область, отмеченная в настройках слайдера.
- Горизонтальное отображение: по высоте слайдер займет минимум 40 процентов экрана. Высота может меняться в зависимости от контента, добавленного на слайдере. Изображение будет отображаться полностью.
