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