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