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