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

Ці картки дозволяють відвідувачам швидко знаходити програми, які їх цікавлять, і легко переходити на сторінки курсів лише однією кнопкою. У цій статті ми розглянемо, як налаштувати розділ налаштовуваних карток курсів, щоб підвищити зручність використання вашого вебсайту та допомогти користувачам швидше досягати своїх освітніх цілей.
Замість використання онлайн-карток ви можете додати списки уроків на сторінку вебсайту: просто виберіть потрібний курс у розділі, і всі уроки будуть відображені.
Як додати розділ «Картки курсів»
Щоб додати розділ «Картки курсів», натисніть «+» у режимі редагування вашого вебсайту.
Потім знайдіть розділ «Картки курсів» у меню, що відкриється, і натисніть на нього, щоб додати розділ на ваш вебсайт:

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

Розділ вмісту
Налаштування вмісту розділу «Картки курсів» полягає у виборі курсу(ів), який уже створено в проєкті для відображення на вебсайті, та налаштуванні елементів картки.
Як створювати курси на платформі Mavibot описано в розділі «Онлайн-курси».
Вибір курсу
Виберіть курси, які ви хотіли б показати на своєму вебсайті:

Для цього поставте прапорець біля назви потрібного курсу.
Вибрані курси одразу відобразяться на сторінці вашого вебсайту з обкладинкою, яку ви встановили в налаштуваннях курсу.
Налаштування
Після того, як ви вибрали необхідні курси, перейдіть до налаштування елементів картки:

- Тінь

Для карток курсів у розділі можна налаштувати інтенсивність тіні:
a) без тіні:

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

c) сильна тінь:

Налаштування кольорів елементів картки
Налаштуйте зовнішній вигляд картки, регулюючи кольори для різних елементів. Ви також можете додати інтерактивні ефекти при наведенні.
- Колір тексту: Змінює основний колір тексту на картці (крім кнопок).
- Фон картки: Встановлює колір фону картки.
- Колір межі: Визначає колір контуру або рамки картки.
- Текст кнопки: Встановлює колір тексту всередині кнопки (статичний стан).
- Фон кнопки: Встановлює колір фону кнопки.
Інтерактивні ефекти при наведенні (необов'язковий розділ):
Увімкніть ефекти при наведенні, щоб динамічно змінювати колір цих елементів, коли користувач наводить курсор на картку.
Тепер ви знаєте, як відображати доступні курси на вашому сайті MaviBot за допомогою розділу «Картки курсів».
Інформацію про налаштування фону та відображення див. у статті «Глобальні налаштування розділу».
Як додати блок «Уроки»
Щоб додати блок для відображення списку уроків у курсі, перейдіть у режим редагування вебсайту, наведіть курсор на робочу область, а потім натисніть «+»:
Праворуч відкривається меню з доступними розділами сайту, де потрібно знайти блок «Уроки»:

Натисніть на «Картки курсів», після чого відкриється меню для налаштування вмісту блоку:

Вам потрібно лише вибрати потрібний курс, який уже створено в Mavibot, у випадаючому меню та натиснути «Зберегти».
Потім перейдіть до налаштувань, щоб налаштувати вміст блоку:

Налаштування
Коли ви натискаєте кнопку «Налаштування» та наводите курсор на розділ, відкриваються налаштування для налаштування вмісту та самого блоку:

Які налаштування доступні?
- Стиль списку уроків

За замовчуванням стиль списку уроків відображається в новому форматі. За потреби ви можете встановити більш лаконічну версію класичного формату:

- Стиль нумерації

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

- Іконки уроків

Вони відображаються, якщо ви додали попередній перегляд у самому уроці в налаштуваннях курсу.
Як додати іконки
Крок 1. Перейдіть до налаштувань уроку:
Для цього перейдіть у режим налаштувань курсу та знайдіть вкладку «Уроки»:

Далі натисніть «Редагувати», після чого відкриється сторінка уроку для редагування.
Крок 2. Відкрийте налаштування сторінки уроку.

Перейдіть до розділу «Загальні» в налаштуваннях сторінки уроку:

Крок 3. Завантажте попередній перегляд уроку
Розгорніть список налаштувань зображення в налаштуваннях основної інформації:

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

Збережіть налаштування.
Готово! Тепер попередні перегляди уроків відображатимуться як іконки в розділі «Уроки» на вебсайті.

- Фоновий візерунок

Він додає об'єм та унікальність вашим карткам уроків:

- Округлення елементів
Значення встановлюється в пікселях і округлює кути карток уроків.
- Стиль картки уроку

Він допомагає розташувати картки уроків в один ряд або в ряд з перенесенням або без нього.
- Колір фону та тексту

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

Тепер ви знаєте, як додавати списки уроків на ваш вебсайт і налаштовувати вміст розділу.
Інформацію про налаштування фону та відображення див. у статті «Глобальні налаштування розділу».