Вебинар #09. Настройки внешнего вида док-панели и рекомендации по использованию блока Слайдер
Статья по видеоматериалу, размещенному в форуме «Консультационные вебинары» курса «Справочные материалы и маршрут внедрения СЭО 3KL Русский Moodle».
Содержание:
1. Общая информация
2. Темы вебинара
3. Конспекты
3.1. Рекомендации по работе с блоком «Слайдер»
3.2. Рекомендации по размеру изображений для слайдов
1. Общая информация
2. Темы вебинара
3. Конспекты
3.1. Рекомендации по работе с блоком «Слайдер»
3.2. Рекомендации по размеру изображений для слайдов
1. Общая информация
В вебинаре рассматриваются следующие темы:
- возможности настройки внешнего вида док-панели;
- рекомендации по настройке блока «Слайдер».
| Дата выхода вебинара | 15.04.2020г. |
| Версия системы, на которой был проведен вебинар | 3.5.11а |
Обратите внимание: версия среды электронного обучения, на которой демонстрировался вебинар, на текущий момент, является устаревшей. Интерфейс и функциональные возможности актуальной версии СЭО 3КL могут отличаться от описываемых в статье.
2. Темы вебинара
| Название темы | Время начала темы в вебинаре | Описание | Тематические статьи, вебинары |
| Вступительная часть | 00:00 | Организационные моменты, обзор тем вебинара | |
| Возможности настройки внешнего вида док-панели | 01:55 | Назначение док-панели, сворачиваемые блоки в док-панели и настройки их отображения, настройки цвета и текстуры док-панели, настройка боковых фонов, рекомендации по настройке внешнего вида док-панели |
Настройка внешнего вида СЭО 3KL:
|
| Рекомендации по настройке блока «Слайдер» | 30:44 | Добавление слайдера, основные настройки блока, настройка слайда-изображения, растягивание баннера во всю ширину страницы, переходы между слайдами, привязка к шаблону оформления, размещение слайдера при помощи кода в плейсхолдере |
Инструкция по работе с блоком «Слайдер» П.3.1 конспекта. Рекомендации по работе с блоком «Слайдер» |
| Размеры изображений для слайдера (вопросы слушателей) | 48:43 | Размеры изображений для слайдов при разных настройках ширины баннера |
П.3.2 конспекта. Рекомендации по размеру изображений для слайдов |
3. Конспекты
3.1. Рекомендации по работе с блоком «Слайдер»
- Если требуется поместить блок «Слайдер» (например, на главную страницу, в верхнюю часть описательной страницы или в оглавление курса), то лучше всего использовать для этого область, которая называется «Верх страницы» и находится сразу под док-панелью, над контентом и хлебными крошками (Рис.3.1.1).
Рис. 3.1.1. Рекомендуемое место для размещения слайдера.
- При размещении блока «Слайдер» в области «Верх страницы» есть возможность настроить боковые фоны именно для этой области, для этого необходимо перейти в «Администрирование» -►«Внешний вид» -► «Темы» -► «СЭО 3KL» -► Нужный профиль -► «Фоны основных областей» -► Область блоков «Верх страницы»(Рис. 3.1.2).
Рис. 3.1.2. Настройки области блоков «Верх страницы».
Для того, чтобы растянуть баннер от края до края, можно использовать пункт «Ширина без ограничений» (см. поз. 5. Рис. 3.1.2). Если значение этой настройки - «Да», то блок «Слайдер» будет занимать всю ширину страницы и, при изменении разрешения экрана, он также будет растягиваться или сужаться под этот размер (Рис. 3.1.3).
Рис. 3.1.3. Внешний вид блока «Слайдер», растянутого от края до края, при увеличении разрешения экрана.
Для того, чтобы визуально увеличить баннер, не растягивая при этом его на всю ширину экрана, необходимо загрузить фоновое изображение в пункте «Изображение фона (на всю ширину)» (см. поз. 4. Рис. 3.1.2). В таком случае при увеличении разрешения экрана, растягиваться от края до края будет только изображение на фоне. Например, можно добавить на фон градиент из двух цветов, и сделать аналогичный градиентный переход к краям слайдов (Рис. 3.1.4).
Рис. 3.1.4. Блок «Слайдер» на фоне изображения, растянутого на всю ширину.
- В случае, если на слайдах баннера должен быть использован текст, то лучше всего добавлять текст через настройки блока «Слайдер» и не использовать параметр «Пропорциональная высота», тогда при изменении размера экрана высота баннера будет подстраиваться под этот текст и он будет виден и читаем, как на большом экране (Рис. 3.1.5) , так и на маленьком (Рис. 3.1.6).
Рис. 3.1.5. Блок «Слайдер» с текстом, добавленным в настройках.
Рис. 3.1.6. Изменение блока «Слайдер» относительно текста, добавленного в настройках, если не используется параметр «Пропорциональная высота».
3.2. Рекомендации по размеру изображений для слайдов
- При создании слайдера по ширине контентной области, рекомендуемый размер слайдов = 1720 px.
- Если используются боковые фоны с растягиванием во всю ширину, то рекомендуемый размер слайдов = 1920 px и больше.
- Если предполагается просмотр сайтов на мониторах с увеличенным разрешением, то рекомендуемый размер слайдов = 2500 px и больше.
- Рекомендуется тестировать внешний вид блока «Слайдер» с помощью отладчика в браузере, тем самым имитируя нужное разрешение или просматривая, как это будет выглядеть на конкретных устройствах.