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