Секции для онлайн-курса

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

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

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

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

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

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

Секция будет добавлена на сайт, а для вас откроется меню настроек контента:

Контент блока

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

Выбор курса

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

Для этого проставьте галочки на строке с названием необходимого курса:

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

Кастомизация

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

1. Тень

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

а) без тени:

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

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

1. Цветовая палитра для элементов карточки

Изменить цвета в карточке можно для фона, текста (как на самой карточке, так и в кнопках), а также добавить интерактивности карточкам, изменив цвета элементов при наведении на них курсором:

а) цвет текста: поможет изменить основной цвет текста в карточке (кроме кнопки):

б) фон карточки: для изменения цветового решения фона для карточки:

в) цвет обводки: для изменения цветового решения рамок карточек:

г) текст кнопки: для изменения цвета только текста кнопки в статичном состоянии:

д) фон кнопки: поможет изменить фоновый цвет для кнопки карточки курса:

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

Как добавить блок "Списки уроков"?

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

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

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

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

Далее перейдите в настройки для кастомизации контента блока:

Кастомизация

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

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

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

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

1. Стиль нумерации

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

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

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

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

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

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

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

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

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

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

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

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

1. Фоновый узор

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

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

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

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

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

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

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