Дізнайтеся, як створити сторінку студента, яка покращує навчальний досвід.
Інтерфейс студента — це головна база вашого курсу. Чистий, зручний дизайн утримує увагу студентів і мотивує їх, перетворюючи випадкових відвідувачів на відданих учнів.
Користувацькі теми та налаштування дозволяють вам налаштувати вигляд вашої сторінки студента, створюючи вишуканий та привабливий дизайн всього за кілька кліків. Цей посібник покаже вам, як ефективно налаштувати цю сторінку, перетворивши її на центральний хаб, який відображає стиль вашого курсу, забезпечуючи безперебійний навчальний досвід.
Що таке сторінка студента?
На платформі Mavibot сторінка студента — це персоналізована інформаційна панель, яка слугує основним робочим простором для вашого курсу. Вона об'єднує всі інструменти, необхідні учню, дозволяючи їм:
- Отримувати доступ до всього вмісту та матеріалів курсу,
- Відстежувати свій прогрес за модулями та уроками,
- Виконувати уроки та здавати завдання,
- Взаємодіяти з інструкторами або фасилітаторами.
Це інтегроване середовище призначене для оптимізації навчального процесу, допомагаючи студентам залишатися зосередженими, організованими та мотивованими.
Чому сторінка студента важлива?
Сторінка студента структурує та оптимізує навчальний процес. Вона дозволяє студентам:
- Швидко знаходити необхідні матеріали та продовжувати навчання з того місця, де вони зупинилися.
- Легко відстежувати свій прогрес, бачити, які завдання виконані, а які ще очікують.
- Отримувати зворотний зв'язок від інструктора, що сприяє більш персоналізованому та ефективному навчанню.
Де налаштувати сторінку студента
Конструктор курсів доступний за тарифним планом “Business”.
Щоб розпочати, перейдіть до розділу “Курси” в MaviBot.
Далі виберіть курс, для якого ви хочете налаштувати сторінку студента, та перейдіть до його налаштувань.
Після цього ви потрапите на головну сторінку налаштувань курсу, де потрібно відкрити вкладку “Сторінка студента”.
Тепер, щоб почати налаштування сторінки студента, знайдіть значок шестірні, щоб відкрити меню налаштувань.
Коли ви натиснете на значок шестірні, відкриється меню з налаштуваннями теми за замовчуванням (користувацької), вашої власної (редагованої) теми, а також додатковими налаштуваннями та опцією додавання власних кнопок.
Основна тема
Основна тема сторінки студента складається з попередньо встановлених, готових тем, які дозволяють налаштувати сторінку всього за пару кліків.
Крок 1: Виберіть колірну схему для Основної теми
Ви можете вибрати з 7 світлих тем та 2 темних тем.
Коли застосовується користувацька тема, кольори всіх основних елементів сторінки оновлюються, включаючи:
- Фони (зображення обкладинки, фон сторінки, смуга прогресу, блоки уроків)
- Кнопки
- Заповнення смуги прогресу
- Межі, контури тощо.
Крок 2: Виберіть рівень радіуса кутів
a) Нульовий радіус – всі кути та елементи сторінки будуть квадратними.
b) Середній радіус – кути та елементи будуть закругленими або овальними.
c) Максимальний радіус – всі кути та елементи сторінки матимуть повністю закруглені краї.
Чудово!
Тепер ви знаєте, як швидко налаштувати основну тему вашої сторінки студента.
Якщо ви хочете додати додаткові кнопки, завантажити власне зображення обкладинки або застосувати власну унікальну колірну схему до сторінки, рекомендуємо продовжити читання наступних розділів цієї статті.
Користувацька тема
Налаштування на вкладці “Користувацька тема” дозволяють застосувати власні унікальні та різноманітні колірні схеми до елементів сторінки студента.
Зверніть увагу
Основна тема та Користувацька тема можуть використовуватися разом.
Наприклад, ви можете використовувати налаштування на вкладці Користувацька тема, щоб застосувати кольори лише до кількох елементів, залишаючи решту сторінки оформленою відповідно до вибраної Основної теми.
Колір фону
Це налаштування змінює колір фону всієї сторінки, за винятком окремих елементів.
Натисніть на квадрат, щоб відкрити палітру кольорів і вибрати потрібний колір.
Окрім широкої палітри кольорів для кожного елемента, ви також можете регулювати інтенсивність кольору за допомогою шкали прозорості.
Колір накладання фону
Використовуйте налаштування накладання фону, щоб застосувати єдиний колір до основних візуальних контейнерів на сторінці:
a) Смуга прогресу;
b) Окремі блоки уроків;
c) Область зображення обкладинки курсу.
Акцентний колір
Налаштування акцентного кольору дозволяють змінити колірну схему основних виділених елементів на сторінці студента, включаючи:
a) кнопки навігації по уроках;
b) заповнення смуги прогресу;
c) межі, фони номерів уроків та подібні елементи.
Колір тексту на фоні сторінки
Це налаштування дозволяє вибрати привабливу колірну схему для тексту, що відображається на фоні сторінки.
Колір тексту на накладанні
Це налаштування дозволяє змінити колір тексту для основних елементів на сторінці студента, які відображаються поверх накладок фону.
Колір акцентного тексту
Використовуйте це налаштування, щоб визначити колір тексту (шрифту) для будь-якого елемента, який знаходиться на акцентному фоні, включаючи інформаційні блоки та інтерактивні кнопки.
Додаткові налаштування
У додаткових налаштуваннях сторінки студента ви можете завантажити зображення для використання як обкладинку сторінки.
Зверніть увагу
Зображення, завантажене як обкладинка сторінки студента з вашого пристрою, не повинно перевищувати 15 МБ.
Крок 1: Завантаження зображення
Ви можете завантажити зображення безпосередньо з вашого комп'ютера.
Або завантажити зображення через посилання з вашого файлового сховища.
Перевага завантаження зображення через посилання з файлового сховища полягає в тому, що ви можете використовувати зображення будь-якого розміру як обкладинку.
Для отримання додаткової інформації про використання файлового сховища зверніться до статті "Файлове сховище".
Крок 2: Висота обкладинки
Після завантаження зображення встановіть відповідну висоту обкладинки на сторінці студента.
Крок 3: Положення зображення
Ви можете використовувати попередньо встановлені опції позиціонування, щоб вирівняти зображення по центру, ліворуч, праворуч або знизу, або вибрати користувацькі налаштування.
Переміщуючи круглий регулятор, ви можете розташувати зображення саме так, як вам подобається.
Крок 4: Розмір зображення
Поле розміру зображення приймає значення contain / cover, а також числові значення в пікселях (px) та відсотках (%).
1) значення contain/cover
2) числові значення
Крок 5: Повторення зображення
Зображення може повторюватися по осі Y, тобто вертикально; по осі X, тобто горизонтально або без повторення.
Крок 6: Прапорці
Щоб покращити досвід студента на його особистій сторінці, ви можете ввімкнути відображення:
- смуги прогресу,
- кількості виконаних уроків, та
- кількості схвалених домашніх завдань.
Якщо ви не хочете використовувати ці елементи на сторінці, ви можете деактивувати прапорці.
Кнопки
Сторінка студента включає функцію додавання власних кнопок заклику до дії під смугою прогресу. Ви можете прив'язати ці кнопки до зовнішніх веб-сайтів, документів або інших важливих сторінок.
Щоб додати кнопку, відкрийте відповідну вкладку в налаштуваннях сторінки студента.
Потім натисніть на "Додати кнопку".
Після цього відкриється модальне вікно для налаштування кнопки та введення тексту кнопки.
Тепер вкажіть цільове посилання (URL) для цієї кнопки.
Кольори кнопки автоматично успадкують палітру основної теми. Однак ви можете змінити це, встановивши власний колір як для її фону, так і для тексту.
Потім натисніть "Зберегти".
Тепер кнопку збережено та активовано. Ви побачите, що вона відображається під смугою прогресу на сторінці студента.
Ви можете додати кілька кнопок – для цього просто перейдіть до меню налаштувань і натисніть "Додати кнопку" під існуючою.
Банери
Щоб просувати ключові ресурси, ви можете додавати клікабельні банери на сторінку студента. Ці банери можуть посилатися на будь-який вказаний вами URL, наприклад, на бота в месенджері, групу спільноти, важливий документ або зовнішній веб-сайт.
Перейдемо до налаштування.
Крок 1: Доступ до налаштувань банерів
На сторінці налаштувань курсу знайдіть та розгорніть розділ "Банери".
Для цього натисніть на розділ у випадаючому меню налаштувань:
Крок 2: Завантажте зображення.
Після завантаження зображення з'явиться в полі налаштувань.
Крок 3: Перейдіть до налаштувань зображення.
Для цього натисніть значок шестірні у верхньому лівому куті завантаженого зображення, і відкриється модальне вікно налаштувань:
Крок 4: Встановіть цільове посилання
Введіть повний URL, на який будуть перенаправлені студенти після натискання на банер. Це може бути веб-сторінка, бот у месенджері або будь-який інший онлайн-ресурс.
Крок 5: Налаштуйте розміри банера
Встановіть розмір відображення банера, ввівши значення ширини та висоти.
Важливо: Вводьте лише числові значення в ці поля (наприклад,
300). Не додавайте одиниці виміру, такі якpxабо%.
Крок 6: Збережіть вашу конфігурацію
Натисніть "Зберегти", щоб застосувати всі налаштування банера.
Налаштування завершено!
Ваш клікабельний банер тепер активний. Він з'явиться праворуч на сторінці студента, під смугою прогресу (за умови, що функція банерів увімкнена).
Як додати кілька банерів
Ви можете додати кілька банерів на одну сторінку. Для цього завантажте зображення в налаштуваннях та налаштуйте його, як описано вище.
Якщо ви натиснете "Додати зображення" під уже завантаженим зображенням, новий банер з'явиться під раніше доданим банером на сторінці студента.
- Виберіть опцію завантаження зображення під доданим банером (велика кнопка завантаження внизу):
- Зображення завантажено під раніше доданим банером.
- На сторінці студента банер з'явиться на наступному рядку після раніше доданого.
Якщо ви натиснете кнопку "+" праворуч від уже завантаженого зображення, новий банер з'явиться в тому ж рядку, що й раніше доданий банер на сторінці студента.
- Натисніть кнопку "+" праворуч від завантаженого зображення в налаштуваннях сторінки.
Новозавантажене зображення буде розміщено праворуч.
- На сторінці студента банер відображатиметься в тому ж рядку, що й раніше завантажений.
Ви можете додавати банери як в одному рядку, так і в наступних рядках одночасно.
Все готово!
Тепер ви знаєте, як повністю налаштувати сторінку студента!
Попередній перегляд сторінки
Після налаштування сторінки студента не забудьте зберегти ваш прогрес.
Після збереження налаштувань натисніть кнопку "Попередній перегляд".
Далі виберіть "Перейти на сторінку студента".
Ви перейдете до попереднього перегляду сторінки студента.
У режимі редагування панель попереднього перегляду дозволяє візуально перевірити кінцеве розташування. Ви можете побачити, як усі елементи — такі як смуга прогресу, банери, кнопки та блоки уроків — розташовані та оформлені відповідно до ваших налаштувань.
Зверніть увагу
Попередній перегляд призначений лише для візуальної демонстрації. Елементи на сторінці попереднього перегляду студента не є клікабельними і не викликають жодної фактичної навігації чи функціональності.