Раздел онлайн-курса

В этой статье мы расскажем, как добавить на сайт блок с информацией о курсах.

В мире онлайн-обучения удобство навигации играет ключевую роль в привлечении и удержании пользователей. Настраиваемые карточки курсов — отличный способ сделать ваш сайт более интерактивным и информативным.

Эти карточки позволяют посетителям быстро находить интересующие их программы и легко переходить на страницы курсов всего по одной кнопке. В этой статье мы рассмотрим, как настроить раздел с настраиваемыми карточками курсов, чтобы повысить удобство использования вашего сайта и помочь пользователям быстрее достигать своих образовательных целей.

Вместо использования онлайн-флеш-карточек вы можете добавить на страницу сайта списки уроков: просто выберите нужный курс в разделе, и все уроки будут отображены.

Как добавить раздел "Карточки курсов"

Чтобы добавить раздел "Карточки курсов", нажмите на "+" в режиме редактирования вашего сайта.

Затем найдите в открывшемся меню раздел "Карточки курсов" и нажмите на него, чтобы добавить раздел на ваш сайт:

Раздел будет добавлен на ваш сайт, и для вас откроется меню настроек содержимого:

Раздел контента

Настройка содержимого раздела "Карточки курсов" заключается в выборе курса(ов), уже созданных в проекте, для отображения на сайте, а также в настройке элементов карточки.

circle-info

Как создавать курсы на платформе Salebot, описано в разделе “Онлайн-курсы”.

Выбор курса

Выберите курсы, которые вы хотели бы показать на своём сайте:

Для этого отметьте галочкой поле с названием нужного курса.

После этого выбранные курсы сразу отобразятся на странице вашего сайта с обложкой, которую вы задали в настройках курса.

Настройка

После того как вы выбрали необходимые курсы, перейдите к настройке элементов карточки:

  • Тень

Для карточек курсов в разделе можно настроить интенсивность тени:

а) без тени:

b) легкая тень:

c) сильная тень:

Настройки цвета элементов карточки

Настройте внешний вид карточки, изменяя цвета различных элементов. Вы также можете добавить интерактивные эффекты при наведении.

  • Цвет текста: Изменяет основной цвет текста на карточке (кроме кнопок).

  • Фон карточки: Задаёт цвет фона карточки.

  • Цвет рамки: Определяет цвет контура или рамки карточки.

  • Текст кнопки: Задаёт цвет текста внутри кнопки (в статичном состоянии).

  • Фон кнопки: Задаёт цвет фона кнопки.

Интерактивные эффекты при наведении (необязательный раздел):

Включите эффекты при наведении, чтобы динамически менять цвет этих элементов, когда пользователь перемещает курсор над карточкой.

Теперь вы знаете, как отображать доступные курсы на вашем сайте MaviBot с помощью раздела "Карточки курсов".

circle-info

Для настроек фона и отображения см. статью «Глобальные настройки раздела».

Как добавить блок "Уроки"

Чтобы добавить блок для отображения списка уроков в курсе, перейдите в режим редактирования сайта и наведите курсор на рабочую область, а затем нажмите на "+":

Справа откроется меню с доступными разделами сайта, где нужно найти блок "Уроки":

Нажмите на "Карточки курсов", и затем откроется меню для настройки содержимого блока:

Вам нужно лишь выбрать в выпадающем меню нужный курс, который уже создан в Salebot, и нажать "Сохранить".

Затем перейдите в настройки, чтобы настроить содержимое блока:

Настройка

Когда вы нажимаете на кнопку "Настройки" и наводите курсор на раздел, открываются настройки для изменения содержимого и самого блока:

Какие настройки доступны?

  1. Стиль списка уроков

По умолчанию стиль списка уроков отображается в новом формате. При необходимости вы можете установить более лаконичную версию классического формата:

Классический стиль
  1. Стиль нумерации

Стиль нумерации доступен для нового варианта отображения уроков курса. Нумерация изменяется непосредственно в карточке урока:

  1. Иконки уроков

Они отображаются, если вы добавили превью внутри самого урока в настройках курса.

Как добавить иконки

Шаг 1. Перейдите в настройки урока:

Для этого перейдите в режим настроек курса и найдите вкладку "Уроки":

Далее нажмите "Редактировать", после чего страница урока откроется для редактирования.

Шаг 2. Откройте настройки страницы урока.

Перейдите в раздел "Общие" в настройках страницы урока:

Шаг 3. Загрузите превью урока

Разверните список настроек изображения в настройках основной информации:

Загрузите изображение для превью урока:

Сохраните настройки.

circle-check
  1. Фоновый узор

Это добавляет объём и уникальность вашим карточкам уроков:

  1. Скругление элементов

Значение задаётся в пикселях и скругляет углы карточек уроков.

  1. Стиль карточки урока

Это помогает размещать карточки уроков в одну строку или в строку с переносом или без него.

  1. Цвет фона и текста

Доступна обширная цветовая палитра для настройки цвета фона карточки и цвета шрифта на карточке урока:

Теперь вы знаете, как добавлять списки уроков на ваш сайт и настраивать содержимое раздела.

circle-info

Для настроек фона и отображения см. статью «Глобальные настройки раздела».

Последнее обновление