# Сторінка студента

Дізнайтеся, як створити сторінку студента, що покращує навчальний досвід.

Інтерфейс студента — це основа вашого курсу. Чистий, зручний для користувача дизайн допомагає студентам зосередитися та підтримує мотивацію, перетворюючи випадкових відвідувачів на відданих учнів.

<div align="left"><figure><img src="/files/889c28e6ffc842e7865a80acd30ad39985905b39" alt=""><figcaption></figcaption></figure> <figure><img src="/files/1c6123e3e9a30d863581abd0ab13c5c2376f4f63" alt=""><figcaption></figcaption></figure></div>

Власні теми та налаштування дають змогу адаптувати вигляд і стиль вашої сторінки студента, створюючи вишуканий і привабливий дизайн усього за кілька кліків. У цьому посібнику ви дізнаєтеся, як ефективно налаштувати цю сторінку, перетворивши її на центральний хаб, що відображає стиль вашого курсу та забезпечує безперебійний навчальний досвід.

**Що таке сторінка студента?**\
На платформі Salebot сторінка студента — це персоналізована панель керування, яка виступає як основний робочий простір для вашого курсу. Вона об’єднує всі інструменти, необхідні учню, даючи йому змогу:

* Отримувати доступ до всього контенту та матеріалів курсу,
* Відстежувати свій прогрес у модулях і уроках,
* Проходити уроки та надсилати домашні завдання,
* Взаємодіяти з інструкторами або фасилітаторами.

Це інтегроване середовище створене для того, щоб спростити навчальний шлях, допомагаючи студентам залишатися зосередженими, організованими та мотивованими.

<figure><img src="/files/889c28e6ffc842e7865a80acd30ad39985905b39" alt=""><figcaption></figcaption></figure>

**Чому сторінка студента важлива?**

Сторінка студента структурує та спрощує процес навчання. Вона дає студентам змогу:

* Швидко знаходити потрібні матеріали та продовжувати навчання з того місця, де вони зупинилися.
* Легко відстежувати свій прогрес, переглядаючи, які завдання виконано, а які ще очікують на виконання.
* Отримувати зворотний зв’язок від інструктора, що сприяє більш персоналізованому та ефективному навчанню.

## Де налаштувати сторінку студента

{% hint style="success" %}
Конструктор курсу доступний у тарифному плані “Businnes”.
{% endhint %}

Щоб почати, перейдіть до розділу “Курси” в MaviBot.

<figure><img src="/files/c57c2f6211ee266af8cb6e75ede2bb81b060dd0d" alt=""><figcaption></figcaption></figure>

Далі виберіть курс, для якого ви хочете налаштувати сторінку студента, і перейдіть до його **налаштувань.**

<figure><img src="/files/6b61de5913e89688d182cab5a7aec0ffcc86b3cf" alt=""><figcaption></figcaption></figure>

Після цього ви перейдете на головну сторінку налаштувань курсу, де потрібно відкрити “**Сторінка студента**”.

<figure><img src="/files/45c338f525e9f13c111ee0bb032e5107acd42cae" alt=""><figcaption></figcaption></figure>

Тепер, щоб почати налаштовувати сторінку студента, знайдіть значок шестерні, щоб відкрити меню налаштувань.

<figure><img src="/files/9934ed925b10848fc2e24d937131806dc842f432" alt=""><figcaption></figcaption></figure>

Коли ви натиснете на значок шестерні, відкриється меню з налаштуваннями для стандартної (власної) теми, вашої власної (редагованої) теми, а також додатковими налаштуваннями й можливістю додати власні кнопки.

<figure><img src="/files/46a696ea59c4d1c53c4db10b3e1f0ca03bf07fe7" alt=""><figcaption></figcaption></figure>

## Основна тема

Основна тема сторінки студента складається з попередньо встановлених, готових тем, які дають змогу налаштувати сторінку всього за кілька кліків.

<figure><img src="/files/828ba61cd2cfa95a74761e1d905cbac063e628ff" alt=""><figcaption></figcaption></figure>

Крок 1: Виберіть колірну схему для **Основна тема**

Ви можете обрати з 7 світлих тем і 2 темних тем.

Коли застосовано власну тему, кольори всіх основних елементів сторінки оновлюються, зокрема:

* Фони (зображення обкладинки, фон сторінки, індикатор прогресу, блоки уроків)
* Кнопки
* Заповнення індикатора прогресу
* Межі, контури тощо.

**Крок 2: Виберіть рівень радіуса кутів**

**a) Нульовий радіус** — усі кути та елементи сторінки матимуть квадратний вигляд.

<figure><img src="/files/3824691401cf08ecf3396456b0097d53f5e38c11" alt=""><figcaption></figcaption></figure>

b) Середній радіус — кути та елементи матимуть заокруглений або овальний вигляд.

<figure><img src="/files/c15202fad33cd2fb649cbd597a9f5c4edfd48d0b" alt=""><figcaption></figcaption></figure>

c) Максимальний радіус — усі кути та елементи сторінки матимуть повністю заокруглені краї.

<figure><img src="/files/4d3b7ef005f0b2f21803b1b2498052115c9b5a92" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Чудово!

Тепер ви знаєте, як швидко налаштувати основну тему сторінки студента.

Якщо ви хочете додати додаткові кнопки, завантажити власне зображення обкладинки або застосувати до сторінки унікальну колірну схему, рекомендуємо перейти до наступних розділів цієї статті.
{% endhint %}

## Власна тема

Налаштування у вкладці “**Власна тема**” дають змогу застосовувати до елементів сторінки студента власні унікальні та різноманітні колірні схеми.

<figure><img src="/files/9539df57cef1abb0242d523d1e42fb86993fe8fd" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Зверніть увагу

Основну тему та Власну тему можна використовувати разом.

Наприклад, ви можете використати налаштування у вкладці Власна тема, щоб застосувати кольори лише до кількох елементів, а решту сторінки оформити відповідно до вибраної Основної теми.
{% endhint %}

#### Колір фону

Це налаштування змінює колір фону всієї сторінки, за винятком окремих елементів.

<figure><img src="/files/e8fafabec5c0d203cd832deeb09f8191bb7d9b04" alt=""><figcaption></figcaption></figure>

Натисніть на квадрат, щоб відкрити палітру кольорів і вибрати потрібний колір.

<figure><img src="/files/3dcf31388e8a7cd285d518d8904a7849c28679f3" alt=""><figcaption></figcaption></figure>

Окрім широкої палітри кольорів для кожного елемента, ви також можете регулювати інтенсивність кольору за допомогою шкали прозорості.

#### Колір накладання фону

Використовуйте налаштування накладання фону, щоб застосувати єдиний колір до основних візуальних контейнерів на сторінці:

a) індикатора прогресу;

b) окремих блоків уроків;

c) області зображення обкладинки курсу.

<figure><img src="/files/31ec13381730a622ba487d36c923ad40ab47292a" alt=""><figcaption></figcaption></figure>

#### Акцентний колір

Налаштування акцентного кольору дають змогу змінити колірну схему основних виділених елементів на сторінці студента, зокрема:

a) кнопок навігації уроків;

b) заповнення індикатора прогресу;

c) меж, фону номерів уроків та подібних елементів.

<figure><img src="/files/b95e54c89ddc3d13867f3ab2079cbe09582e214c" alt=""><figcaption></figcaption></figure>

#### Колір тексту на фоні сторінки

Це налаштування дає змогу вибрати привабливу колірну схему для тексту, що відображається на фоні сторінки.

<figure><img src="/files/3bf9b59f264e699467fbca07afb704c8184f60cd" alt=""><figcaption></figcaption></figure>

#### Колір тексту накладання

Це налаштування дає змогу змінити колір тексту для основних елементів на сторінці студента, які відображаються поверх накладань фону.

<figure><img src="/files/ff8655794b099d648d7e82c302879996384f905c" alt=""><figcaption></figcaption></figure>

#### Колір акцентного тексту

Використовуйте це налаштування, щоб визначити колір тексту (шрифту) для будь-якого елемента, який розташований на фоні акцентного кольору, зокрема блоків-підказок і інтерактивних кнопок.

<figure><img src="/files/75a0e30c76363297a19fb2b814ae6b9437f469ef" alt=""><figcaption></figcaption></figure>

#### Додаткові налаштування

У додаткових налаштуваннях сторінки студента ви можете завантажити зображення для використання як обкладинку сторінки.

<figure><img src="/files/6ebb8e0045bfe356415fb3cf7d7001bb0b3e152a" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Зверніть увагу

Зображення, завантажене як обкладинка сторінки студента з вашого пристрою, не повинно перевищувати 15 МБ.
{% endhint %}

Крок 1: Завантаження зображення

Ви можете завантажити зображення безпосередньо з комп’ютера.

<figure><img src="/files/94037926c60bd90e5cee4a889c27c6cfee7d56d7" alt=""><figcaption></figcaption></figure>

Або завантажити зображення за посиланням із вашого файлового сховища.

<figure><img src="/files/152be5e9d5634d3d25d1e172670bad0af159793b" alt=""><figcaption></figcaption></figure>

Перевага завантаження зображення за посиланням із файлового сховища полягає в тому, що як обкладинку можна використати зображення будь-якого розміру.

{% hint style="info" %}
Для отримання додаткової інформації про те, як користуватися файловим сховищем, зверніться до статті “[Файлове сховище](/doc/uk/chatbot/cloud.md)".
{% endhint %}

Крок 2: Висота обкладинки

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

<figure><img src="/files/ce8c3e2759626f14e6a8272cdfa10a8c46e5ce58" alt=""><figcaption><p>Висота: 260px</p></figcaption></figure>

<figure><img src="/files/fc182797e4e30f33afc315209acb42bc87439ddf" alt=""><figcaption><p>Висота: 400px</p></figcaption></figure>

Крок 3: Позиція зображення

<figure><img src="/files/573dcb925db6e575d6faaa79561c330ce25dd402" alt=""><figcaption></figcaption></figure>

Ви можете використовувати **попередньо задані варіанти розташування** щоб вирівняти зображення по ц**центру, ліворуч, праворуч або знизу**, або виберіть **власні налаштування.**

<figure><img src="/files/d2dca55e748393832dbcc7cceb576b83a3f7be0a" alt=""><figcaption></figcaption></figure>

Пересуваючи круглий елемент керування, ви можете розташувати зображення саме так, як вам потрібно.

Крок 4: Розмір зображення

<figure><img src="/files/0ebcb2cd78c9f6ec409b76363d1c17d398b56c79" alt=""><figcaption></figcaption></figure>

Поле **поле розміру зображення** приймає значення c**ontain / cover**а також **числові значення в пікселях (px)** та **відсотках (%)**.

1\) значення contain/cover

<figure><img src="/files/c32621daba557331389d139b183c3ec479765a54" alt=""><figcaption></figcaption></figure>

2\) числові значення

<figure><img src="/files/cccfcf2b6e86e0afbab17edb7f5eab0adfa10edc" alt=""><figcaption></figcaption></figure>

Крок 5: Повторення зображення

Зображення може повторюватися вздовж **осі Y**, тобто **вертикально;** вздовж **осі X**, тобто **горизонтально** або без повторення.

<figure><img src="/files/d5206ef30d33c72ba2ce21deb7b0064f2271b3bb" alt=""><figcaption></figcaption></figure>

Крок 6: Прапорці

Щоб покращити досвід студента на його особистій сторінці, ви можете ввімкнути відображення:

* індикатора прогресу,
* кількості виконаних уроків і
* кількості затверджених домашніх завдань.

<figure><img src="/files/750012b48d9adb20454098494b696d02d18dee92" alt=""><figcaption></figcaption></figure>

Якщо ви не хочете використовувати ці елементи на сторінці, ви можете **деактивувати прапорці.**

## Кнопки

Сторінка студента містить функцію додавання власних кнопок заклику до дії під індикатором прогресу. Ви можете пов’язати ці кнопки із зовнішніми вебсайтами, документами або іншими важливими сторінками.

<figure><img src="/files/f1b1f59e450731d6fe956fdc508cb5fd17d4140a" alt=""><figcaption></figcaption></figure>

Щоб додати кнопку, відкрийте відповідну вкладку в **налаштуваннях сторінки студента.**

<figure><img src="/files/e16e48590181ef06399ecb0411b157ae2774144c" alt=""><figcaption></figcaption></figure>

Потім натисніть “**Додати кнопку”**.

Після цього відкриється модальне вікно для налаштування кнопки, і введіть текст кнопки.

<figure><img src="/files/5808b41adb4be65baa6696082874cde3d01d2a66" alt=""><figcaption></figcaption></figure>

Тепер вкажіть цільове посилання (URL) для цієї кнопки.

<figure><img src="/files/fac66d5c7601ea1aff2c65b572e40de79adf5aae" alt=""><figcaption></figcaption></figure>

Кольори кнопки автоматично успадковуватимуть палітру основної теми. Однак ви можете змінити це, встановивши власний колір як для фону, так і для тексту.

<figure><img src="/files/010850d53e12971cb66debc06b4a05a338571670" alt=""><figcaption></figcaption></figure>

Потім натисніть “Зберегти”.

<figure><img src="/files/9b270170f3cec61c0130f2fd0bf8f6eff03afa16" alt=""><figcaption></figcaption></figure>

Кнопка тепер збережена й активна. Ви побачите її відображеною під індикатором прогресу на сторінці студента.

<figure><img src="/files/d5c7aa3a2b70d896caf4ea6decd3c85692f3f45c" alt=""><figcaption></figcaption></figure>

Ви можете додати кілька кнопок — для цього просто перейдіть до меню налаштувань і натисніть “Додати кнопку” під уже наявною.

<figure><img src="/files/42e849611ff7b967211e2f7444607ed69169f08f" alt=""><figcaption></figcaption></figure>

## Банери&#x20;

<figure><img src="/files/07e9f0ab2370775ee2243b4a43092d8ee030d701" alt=""><figcaption></figcaption></figure>

Щоб просувати ключові ресурси, ви можете додати на сторінку студента клікабельні банери. Ці банери можуть посилатися на будь-яку вказану вами URL-адресу, наприклад бот у месенджері, групу спільноти, важливий документ або зовнішній вебсайт.

Давайте перейдемо до налаштування.

**Крок 1: Відкрийте налаштування банера**

У налаштуваннях сторінки курсу знайдіть і розгорніть **“Банери”** розділ.

<figure><img src="/files/5808b41adb4be65baa6696082874cde3d01d2a66" alt=""><figcaption></figcaption></figure>

Для цього натисніть на розділ у випадаючому меню налаштувань.:

<figure><img src="/files/31284883bb6b1b92383da1bffeda55ecfde89852" alt=""><figcaption></figcaption></figure>

Крок 2: Завантажте зображення.

<figure><img src="/files/feda5d7a2b5f65b5ad43a762d7467e7473dbe8ac" alt="" width="563"><figcaption></figcaption></figure>

Після завантаження зображення з’явиться в полі налаштувань.

Крок 3: Перейдіть до налаштувань зображення.

<figure><img src="/files/abdbdd3e49742177f273644b9a8417afa2df5fc6" alt=""><figcaption></figcaption></figure>

Для цього натисніть на значок шестерні у верхньому лівому куті завантаженого зображення, і відкриється модальне вікно налаштувань:

<figure><img src="/files/23e732fad2702faec43258608ee99aefb439cd72" alt=""><figcaption></figcaption></figure>

**Крок 4: Задайте цільове посилання**\
Введіть повну URL-адресу, куди студентів буде перенаправлено після натискання на банер. Це може бути вебсторінка, бот у месенджері або будь-який інший онлайн-ресурс.

**Крок 5: Налаштуйте розміри банера**\
Встановіть розмір відображення банера, ввівши значення ширини та висоти.

> **Важливо:** Вводьте в ці поля лише числові значення (наприклад, `300`). Не вказуйте одиниці, як-от `px` або `%`.

**Крок 6: Збережіть налаштування**\
Натисніть **«Зберегти»** щоб застосувати всі налаштування банера.

**Налаштування завершено!**\
Ваш клікабельний банер тепер активний. Він з’явиться праворуч на сторінці студента, під індикатором прогресу (за умови, що функцію банерів увімкнено).

### Як додати кілька банерів

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

Якщо ви натиснете “Додати зображення” під уже завантаженим зображенням, новий банер з’явиться нижче раніше доданого банера на сторінці студента.

1. Виберіть варіант завантаження зображення під доданим банером (велика кнопка завантаження внизу):

<figure><img src="/files/24c456c3bb6f19ca8b081366368fa7c0b7b8f944" alt=""><figcaption></figcaption></figure>

2. Зображення було завантажено під раніше доданим банером.

<figure><img src="/files/a79d4aabfef348b0e22d34c2944bc037e9410de8" alt=""><figcaption></figcaption></figure>

3. На сторінці студента банер з’явиться в наступному рядку після раніше доданого.

<figure><img src="/files/9dfe02d206e4326452c6eb4cb2eafaf2e01785c3" alt=""><figcaption></figcaption></figure>

Якщо ви натиснете кнопку “+” праворуч від уже завантаженого зображення, новий банер з’явиться в тому самому рядку, що й раніше доданий банер, на сторінці студента.

1. Натисніть кнопку “+” праворуч від завантаженого зображення в налаштуваннях сторінки.

<figure><img src="/files/3802fc4ba12400a9cb64c7401ffdff9ed7ac24a2" alt=""><figcaption></figcaption></figure>

Нещодавно завантажене зображення буде розміщено праворуч.

<figure><img src="/files/d326b680aba10f6fb4fe93e0e8eb4703b0f6e12c" alt="" width="563"><figcaption></figcaption></figure>

2. На сторінці студента банер буде відображено в тому самому рядку, що й попередньо завантажений.

<figure><img src="/files/e90302a1e67630f091eb3623179935db90634fc5" alt=""><figcaption></figcaption></figure>

Ви можете додавати банери як в одному рядку, так і в наступних рядках одночасно.

<figure><img src="/files/ada97d037c556286e7580a3ddd8cde4c48b5b824" alt=""><figcaption><p>Сторінка студента</p></figcaption></figure>

<figure><img src="/files/ea54c76a96f94d46dccee6e418e0ccb8070f703f" alt=""><figcaption><p>Налаштування банера</p></figcaption></figure>

{% hint style="success" %}
Усе готово!\
Тепер ви знаєте, як повністю налаштувати сторінку студента!
{% endhint %}

## Попередній перегляд сторінки

Після налаштування сторінки студента не забудьте зберегти свій прогрес.

<figure><img src="/files/c0833874c5279e7b5f27f14d99922177ea7ef222" alt=""><figcaption></figcaption></figure>

Після збереження налаштувань натисніть кнопку "Попередній перегляд".

<figure><img src="/files/c743322011f68392d5e12c43a9441ba5883492f9" alt=""><figcaption></figcaption></figure>

Далі виберіть "Перейти на сторінку студента".

<figure><img src="/files/62ddf77d152621aae8a77c8c29670e7756a6ee12" alt=""><figcaption></figcaption></figure>

Ви перейдете до попереднього перегляду сторінки студента.

<figure><img src="/files/38b49bb444222e969b3df75c37cca19735688ef7" alt=""><figcaption></figcaption></figure>

У режимі редагування панель попереднього перегляду дає змогу візуально перевірити фінальне розташування елементів. Ви можете побачити, як усі елементи — такі як індикатор прогресу, банери, кнопки та блоки уроків — розміщені та оформлені відповідно до ваших налаштувань.

{% hint style="warning" %}

## Зверніть увагу

Попередній перегляд призначений **лише для візуальної демонстрації**. Елементи в попередньому перегляді сторінки студента **не клікабельні** і не запускають жодної фактичної навігації чи функціональності.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/uk/lms/builder/student_page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.