Инструкция по работе с блоком «Слайдер»
1. Общая информация
2. Добавление блока «Слайдер»
3. Настройки. Управление слайдами
3.1. Предварительные настройки блока
3.2. Типы слайдов
3.2.1. Тип слайда «HTML-код»
3.2.2. Тип слайда «Изображение»
3.2.3. Тип слайда «Список»
3.3. Перемещение/удаление слайдов
4. Настройка отображения блока «Слайдер»
4.1. Раздел «Где отображать этот блок»
4.2. Раздел «На этой странице»
1. Общая информация
При помощи блока «Слайдер» можно добавить баннер на главную страницу сайта. Кроме того, при помощи Слайдера можно оформить описательную страницу курса, сделать оглавление и даже вставить блок в секцию курса.
Добавить Слайдер на главную страницу сайта может пользователь с ролью «Диспетчер-адиминстратор». В курс — пользователь с ролью «Учитель».
2. Добавление блока «Слайдер»
Сразу после добавления еще ненастроенный блок в режиме редактирования выглядит следующим образом:
3. Настройки. Управление слайдами
3.1. Предварительные настройки блока
Для настройки блока необходимо в режиме редактирования в верхнем правом углу блока выбрать «Настроить блок слайдер».
1. Добавить новый слайд. Из выпадающего списка выбрать тип слайда: HTML-код / Изображение / Список.
2. Оповещение об отсутствии слайдов. Исчезает после добавления хотя бы одного слайда.
3. Название (код) слайдера. Данная строка может использоваться в качестве селектора для стилизации конкретного слайдера, уникальность не проверяется.
4. Отображать только в выбранном профиле темы. Тут можно настроить зависимость отображения блока от выбранного профиля темы. Варианты доступных к использованию профилей тем оформления перечислены в выпадающем списке этого поля. Опция удобна в использовании в том случае, когда за конкретным пользователем закреплено несколько профилей темы оформления, в одном из которых приветствуется отображение слайдера, а в других демонстрация этого элемента не желательна.
5. Разместить слайдер в плейсхолдере. Дополнительная возможность размещения слайдера в плейсхолдере позволяет добавить слайдер в одну секцию курса. Для этого необходимо установить отметку в чекбоксе с названием «Разместить слайдер в плейсхолдере» и сохранить внесенные изменения. В результате в режиме редактирования загрузится главная страница курса и в блоке, к которому были применены вышеописанные настройки, отобразится текст с указанием вставить код в html-редактор актуальной секции. Для отображения слайдера нужно вставить в html-редактор секции курса следующий код:
Отображаться это будет следующим образом:
6. Высота слайдера (процент от ширины слайдера). Рекомендуется обязательно установить это значение.
Если значение равно 0 или пустое значение — слайдер не будет отображаться, за исключением случая когда выбран тип анимации «Без анимации».
7. Пропорциональная высота. При уменьшении размеров экрана слайдер может уменьшаться пропорционально или с сохранением высоты в неизменном состоянии.
8. Тип анимации. Из выпадающего списка можно выбрать тип анимации («Появление», «Вылет», «Перекрытие»).
9. Переключать слайды при скролле. Слайды будут переключаться по мере прокручивания страницы пока слайдер виден пользователю. Порядок слайдов установлен в соответствии с ожидаемым моментом их появления (сначала пользователь видит первый слайд внизу страницы, затем последний вверху страницы). Рекомендуется использовать малое количество слайдов (два-три) и сочетание с типом анимации «Появление» (fade-in).
10. Интервал переключения слайдов (в секундах). Значение по умолчанию — 3 секунды. Настройка недоступна при выборе настройки «Переключать слайды при скролле».
11. Отображение стрелок для пролистывания. Настройка недоступна при выборе настройки «Переключать слайды при скролле».
12. Стиль стрелок. Толстые / Тонкие.
13. Отображение точек для выбора слайда. Настройка недоступна при выборе настройки «Переключать слайды при скролле».
3.2. Типы слайдов
В выпадающем списке формы «Добавить новый слайд» предлагается выбрать тип слайда: «HTML-код», «Изображение», «Список».
3.2.1. Тип слайда «HTML-код»
Если будет выбран и добавлен тип слайда «HTML-код», загрузится одноименная форма со стандартным html-редактором, в котором посредством имеющегося в наличии инструментария может быть сформирован слайд.
В html-редакторе можно не только добавить изображение, но и сделать к нему подпись с форматированием. В отличие от подписи на слайдах типа «Изображение» текст будет размещен не на самом слайде, а по выбору: внизу / вверху / сбоку от изображения.
В примере было добавлено два предложения с присоединенным форматированием.
3.2.2. Тип слайда «Изображение»
При добавлении слайда типа «Изображение» открывается страница настроек:
В этой форме предлагается заполнить следующие поля:
- Изображение слайда. Поле для загрузки изображения слайда.
- Поле «Позиция изображения по вертикали в процентах». Предназначено для фиксации конкретной области изображения в рамках слайдера. В данном поле в процентном соотношении указывается значение, определяющее положение изображения на слайдере. Значение «50» позиционирует загруженное изображение по центру. Соответственно, если будет введено значение больше 50, то загрузится нижняя область изображения. Если меньше 50 — будет демонстрироваться верхняя область. Следующие скриншоты наглядно демонстрируют, как работает данная настройка:
Значение 10%
Значение 50%
Значение 70%
- Поле «Коэффициент смещения изображения при скролле». Значения, которые можно указывать в данном поле, должны входить в диапазон от –100 до 100. Если будет введено отрицательное число, то смещение фонового изображения в рамках слайдера будет осуществляться в том же направлении, в каком прокручивается страница. Если указывается положительное число, то направление смещения фонового изображения относительно прокрутки страницы происходит в противоположную сторону. В зависимости от выбранного значения во время скролла меняется скорость прокрутки слайда.
- Поле «Заголовок». Содержимое поля публикуется поверх фонового изображения слайдера. Располагается поверх слайда также и содержимое поля «Описание» (информация, введенная в данное поле, может быть отформатирована с помощью html-редактора).
3.2.3. Тип слайда «Список»
Этот вариант дает возможность настроить тип подписи на слайде: сделать список с галочками или разместить блоки по сетке прямо на слайде.
Список с галочками.
Так слайд типа «Список» выглядит после сохранения настроек:
Блоки по сетке.
Также можно настроить способ отображения списка «Блоки по сетке»:
Можно добавить этот тип слайда первым. Перечисленные элементы (слайды) можно будет добавить в том порядке, в котором они указаны в списке (либо поменять местами в настройках).
3.3. Перемещение / удаление слайдов
Для удобства пользователя в разделе управления слайдами предусмотрена возможность менять последовательность созданных слайдов. Для того, чтобы внести изменения в очередность показа слайдов, нужно воспользоваться кнопками «Переместить вверх», «Переместить вниз». Также в любой момент можно отменить показ неактуального слайда, воспользовавшись кнопкой «Удалить».
4. Настройка отображения блока «Слайдер»
В этом разделе описаны способы регулировки отображения слайдера на страницах (настройки являются стандартными для всех блоков).
4.1. Раздел «Где отображать этот блок»
В этом разделе отображается информация о первоначальном месте расположения блока — той страницы СЭО, где он был создан.
Добавлять блок можно как на главную страницу системы дистанционного обучения, так и на страницы категории или курса. В каждом случае поля «Ограничить этими типами страниц» (для блоков, созданных в рамках курса или категории) и «Контексты страниц» (для блоков, созданных в рамках главной страницы) содержат в себе перечни страниц, на которых доступен к отображению слайдер.
Также в этом разделе в поле «Область по умолчанию» можно выбрать зону отображения слайдера на самой странице. Полный перечень доступен в выпадающем списке соответствующего поля.
С помощью поля «Вес по умолчанию» можно задать последовательность отображения блоков относительно друг друга, размещенных в рамках конкретной области. В выпадающем списке перечисляются коэффициенты, за каждым из которых закрепляется соответствующая позиция блока в области. Чем больше значение коэффициента, тем ниже будет располагаться блок относительно других элементов области.
4.2. Раздел «На этой странице»
Данный раздел включает в себя настройки, ориентированные на отображение блока в пределах той страницы, на которой он был добавлен. В самом первом поле раздела блоку можно задать настройки видимости. Характеристики полей «Область» и «Вес» были приведены в предыдущем разделе инструкции (см. Раздел «Где отображать этот блок»).