Блок Карточки курсов

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

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

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

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

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

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

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

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

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

Как создавать курсы на платформе Сейлбот, рассказали в разделе "Онлайн-курсы"

Выбор курса

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

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

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

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

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

1. Тень

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

а) без тени:

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

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

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

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

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

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

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

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

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

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

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

О настройках фона и отображения читайте в статье "Универсальные настройки секций".