В мире онлайн-обучения простота навигации играет ключевую роль в привлечении и удержании пользователей. Настраиваемые карточки курсов — отличный способ сделать ваш сайт более интерактивным и информативным.
Эти карточки позволяют посетителям быстро найти интересующие их программы и легко перейти на страницы курсов всего одной кнопкой. В этой статье мы рассмотрим, как настроить раздел настраиваемых карточек курсов, чтобы повысить удобство использования вашего сайта и помочь пользователям быстрее достигать своих образовательных целей.
Вместо использования онлайн-карточек вы можете добавить списки уроков на страницу сайта: просто выберите нужный курс в разделе, и все уроки будут отображены.
Как добавить раздел «Карточки курсов»
Чтобы добавить раздел «Карточки курсов», нажмите на «+» в режиме редактирования вашего сайта.
Затем найдите раздел «Карточки курсов» в открывшемся меню и нажмите на него, чтобы добавить раздел на ваш сайт:
Раздел будет добавлен на ваш сайт, и откроется меню настройки содержимого:
Раздел содержимого
Настройка содержимого раздела «Карточки курсов» состоит из выбора курса(ов), уже созданного в проекте для отображения на сайте, и настройки элементов карточки.
О том, как создавать курсы на платформе Mavibot, описано в разделе «Онлайн-курсы».
Выбор курса
Выберите курсы, которые вы хотели бы показать на своем сайте:
Для этого установите флажок рядом с названием нужного курса.
В свою очередь, выбранные курсы сразу же отобразятся на странице вашего сайта с обложкой, которую вы задали в настройках курса.
Настройка
После того как вы выбрали необходимые курсы, приступайте к настройке элементов карточки:
- Тень
Для карточек курсов в разделе можно настроить интенсивность тени:
a) без тени:
b) легкая тень:
c) сильная тень:
Настройка цветов элементов карточки
Настройте внешний вид карточки, изменяя цвета различных элементов. Вы также можете добавить интерактивные эффекты при наведении.
- Цвет текста: Изменяет основной цвет текста на карточке (кроме кнопок).
- Фон карточки: Задает цвет фона карточки.
- Цвет границы: Определяет цвет контура или рамки карточки.
- Текст кнопки: Задает цвет текста внутри кнопки (статическое состояние).
- Фон кнопки: Задает цвет фона кнопки.
Интерактивные эффекты при наведении (необязательный раздел):
Включите эффекты при наведении, чтобы динамически изменять цвет этих элементов, когда пользователь наводит курсор на карточку.
Теперь вы знаете, как отображать доступные курсы на вашем сайте MaviBot с помощью раздела «Карточки курсов».
О настройках фона и отображения см. статью «Глобальные настройки раздела».
Как добавить блок «Уроки»
Чтобы добавить блок для отображения списка уроков в курсе, переключитесь в режим редактирования сайта, наведите курсор на рабочую область, а затем нажмите на «+»:
Справа откроется меню с доступными разделами сайта, где нужно найти блок «Уроки»:
Нажмите на «Карточки курсов», после чего откроется меню настройки содержимого блока:
Вам нужно лишь выбрать нужный курс, который уже создан в Mavibot, в выпадающем меню и нажать «Сохранить».
Затем перейдите в настройки, чтобы настроить содержимое блока:
Настройка
При нажатии на кнопку «Настройки» и наведении на раздел открываются настройки для настройки содержимого и самого блока:
Какие настройки доступны?
- Стиль списка уроков
По умолчанию стиль списка уроков отображается в новом формате. При необходимости вы можете установить более лаконичную версию классического формата:
- Стиль нумерации
Стиль нумерации доступен для нового стиля отображения уроков курса. Нумерация изменяется в самой карточке урока:
- Иконки уроков
Они отображаются, если вы добавили превью внутри самого урока в настройках курса.
Как добавить иконки
Шаг 1. Перейдите в настройки урока:
Для этого перейдите в режим настройки курса и найдите вкладку «Уроки»:
Затем нажмите «Редактировать», после чего откроется страница урока для редактирования.
Шаг 2. Откройте настройки страницы урока.
Перейдите в раздел «Общие» в настройках страницы урока:
Шаг 3. Загрузите превью урока
Разверните список настроек изображения в настройках основной информации:
Загрузите изображение для превью урока:
Сохраните настройки.
Готово! Теперь превью уроков будут отображаться в виде иконок в разделе «Уроки» на сайте.
- Фоновый узор
Он добавляет объем и уникальность вашим карточкам уроков:
- Скругление элементов
Значение задается в пикселях и скругляет углы карточек уроков.
- Стиль карточки урока
Помогает расположить карточки уроков в один ряд или в ряд с переносом или без.
- Цвет фона и текста
Доступна обширная цветовая палитра для установки цвета фона карточки и цвета шрифта на карточке урока:
Теперь вы знаете, как добавлять списки уроков на ваш сайт и настраивать содержимое раздела.
О настройках фона и отображения см. статью «Глобальные настройки раздела».