# Страница студента

Узнайте, как создать страницу ученика, которая улучшает процесс обучения.

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

<div align="left"><figure><img src="/files/0a80c6f4588bd40f5ec535491785c154c1d0495a" alt=""><figcaption></figcaption></figure> <figure><img src="/files/4df1f5988c7930af931d6bd1572a8563cf7e1f1e" alt=""><figcaption></figcaption></figure></div>

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

**Что такое страница ученика?**\
На платформе Salebot страница ученика — это персонализированная панель управления, которая служит основным рабочим пространством для вашего курса. Она объединяет все инструменты, необходимые ученику, позволяя ему:

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

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

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

**Почему страница ученика важна?**

Страница ученика структурирует и упрощает процесс обучения. Она позволяет студентам:

* Быстро находить нужные материалы и продолжать обучение с того места, где они остановились.
* Легко отслеживать свой прогресс, видя, какие задания выполнены, а какие ещё остаются.
* Получать обратную связь от преподавателя, что делает обучение более персонализированным и эффективным.

## Где настроить страницу ученика

{% hint style="success" %}
Конструктор курса доступен в тарифном плане «Businnes».
{% endhint %}

Чтобы начать, перейдите в раздел «Курсы» в MaviBot.

<figure><img src="/files/1d4c86823375cc55ae66bee6e4ce542fd4318671" alt=""><figcaption></figcaption></figure>

Затем выберите курс, для которого хотите настроить страницу ученика, и перейдите в его **настройки.**

<figure><img src="/files/2ab71e648fde1e5598231f9edfdb282e9a8e86f1" alt=""><figcaption></figcaption></figure>

После этого вы попадёте на главную страницу настроек курса, где нужно открыть «**Страница ученика**».

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

Теперь, чтобы начать настройку страницы ученика, найдите значок шестерёнки, чтобы открыть меню настроек.

<figure><img src="/files/58d295c4a0141b507c6dbfd5677d0094b2b90cd2" alt=""><figcaption></figcaption></figure>

При нажатии на значок шестерёнки откроется меню с настройками для темы по умолчанию (кастомной), вашей собственной (редактируемой) темы, а также дополнительные настройки и возможность добавить собственные кнопки.

<figure><img src="/files/611cbde9e2151029a99e0a221172ebd09ce09ed8" alt=""><figcaption></figcaption></figure>

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

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

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

Шаг 1: Выберите цветовую схему для **Основная тема**

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

При применении кастомной темы обновляются цвета всех основных элементов страницы, включая:

* Фоны (обложки, фон страницы, прогресс-бар, блоки уроков)
* Кнопки
* Заполнение прогресс-бара
* Границы, контуры и т. д.

**Шаг 2: Выберите уровень скругления углов**

**a) Нулевое скругление** — все углы и элементы страницы будут выглядеть квадратными.

<figure><img src="/files/9477cf53a16303ff223352387db93372aae8577b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8e0b1449a4b3d6f45d5acecf318f44e0ab127046" alt=""><figcaption></figcaption></figure>

c) Максимальное скругление — все углы и элементы страницы будут иметь полностью закруглённые края.

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

{% hint style="success" %}
Отлично!

Теперь вы знаете, как быстро настроить основную тему страницы ученика.

Если вы хотите добавить дополнительные кнопки, загрузить собственное изображение обложки или применить к странице свою уникальную цветовую схему, рекомендуем перейти к следующим разделам этой статьи.
{% endhint %}

## Кастомная тема

Настройки во вкладке «**Кастомная тема**» позволяют применить к элементам страницы ученика свою уникальную и разнообразную цветовую схему.

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

{% hint style="warning" %}

## Обратите внимание

Основную тему и кастомную тему можно использовать вместе.

Например, вы можете использовать настройки во вкладке Custom Theme, чтобы применить цвета только к нескольким элементам, а остальная часть страницы будет оформлена в соответствии с выбранной основной темой.
{% endhint %}

#### Цвет фона

Эта настройка изменяет цвет фона всей страницы, за исключением отдельных элементов.

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

Нажмите на квадрат, чтобы открыть палитру и выбрать нужный цвет.

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

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

#### Цвет фонового оверлея

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

a) прогресс-бар;

b) отдельные блоки уроков,;

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

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

#### Акцентный цвет

Настройки акцентного цвета позволяют изменить цветовую схему основных выделенных элементов на странице ученика, включая:

a) кнопки навигации по урокам;

b) заполнение прогресс-бара;

c) границы, фоны номеров уроков и подобные элементы.

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

#### Цвет текста на фоне страницы

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

<figure><img src="/files/97d059ffe3ce786e25d8d9d1d067195d35dbf1ae" alt=""><figcaption></figcaption></figure>

#### Цвет текста на оверлее

Эта настройка позволяет изменить цвет текста основных элементов на странице ученика, которые расположены поверх фоновых оверлеев.

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

#### Акцентный цвет текста

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

<figure><img src="/files/7693fe633a55ec51b16f446827dc04ebd804cebd" alt=""><figcaption></figcaption></figure>

#### Дополнительные настройки

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

<figure><img src="/files/2cd29d4a2ae16c16a6dc64aae252b6eb8a68bbdb" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

## Обратите внимание

Размер изображения, загружаемого с вашего устройства в качестве обложки страницы ученика, не должен превышать 15 МБ.
{% endhint %}

Шаг 1: Загрузка изображения

Вы можете загрузить изображение прямо с компьютера.

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

Или загрузить изображение по ссылке из вашего файлового хранилища.

<figure><img src="/files/1241a9811ba1009b1c86472f4ec4ac013eac57c0" alt=""><figcaption></figcaption></figure>

Преимущество загрузки изображения по ссылке из файлового хранилища в том, что вы можете использовать изображение любого размера в качестве обложки.

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

Шаг 2: Высота обложки

После загрузки изображения установите подходящую высоту обложки на странице ученика.

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

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

Шаг 3: Позиция изображения

<figure><img src="/files/658fc7739ad5e9b1155e0ed85a1939d6a05726a0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/847556815c4c32d07ed53e529aea3b1e3151788a" alt=""><figcaption></figcaption></figure>

Перемещая круглый контроллер, вы можете расположить изображение именно так, как вам нужно.

Шаг 4: Размер изображения

<figure><img src="/files/1b11fc05f8f2d8795e3ef8ae35f24a3ad9df8142" alt=""><figcaption></figcaption></figure>

Текст **поле размера изображения** принимает значения c**ontain / cover**, а также **числовые значения в пикселях (px)** и **проценты (%)**.

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

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

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

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

Шаг 5: Повторение изображения

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

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

Шаг 6: Чекбоксы

Чтобы улучшить опыт ученика на его личной странице, вы можете включить отображение:

* прогресс-бара,
* количества завершённых уроков и
* количества одобренных домашних заданий.

<figure><img src="/files/1d8af7dc369413338eb297a77cd256727b52daea" alt=""><figcaption></figcaption></figure>

Если вы не хотите использовать эти элементы на странице, вы можете **отключить чекбоксы.**

## Кнопки

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

<figure><img src="/files/650068541e43a2a0a622614c6d5d6b8c80812cda" alt=""><figcaption></figcaption></figure>

Чтобы добавить кнопку, откройте соответствующую вкладку в **настройках страницы ученика.**

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

Затем нажмите на «**Добавить кнопку»**.

После этого откроется модальное окно для настройки кнопки и ввода текста кнопки.

<figure><img src="/files/979faec60653e89edb2592762f033e9c96941ab9" alt=""><figcaption></figcaption></figure>

Теперь укажите ссылку назначения (URL) для этой кнопки.

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

Цвета кнопки автоматически будут унаследованы из палитры основной темы. Однако вы можете изменить это, задав собственный цвет как для фона, так и для текста.

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

Затем нажмите «Сохранить».

<figure><img src="/files/33613ded7990301d72fabe95943a46baa402e2d3" alt=""><figcaption></figcaption></figure>

Кнопка теперь сохранена и активна. Вы увидите её под прогресс-баром на странице ученика.

<figure><img src="/files/9163cb5030eac5ac4a8de83985cb0635b823180e" alt=""><figcaption></figcaption></figure>

Вы можете добавить несколько кнопок — для этого просто перейдите в меню настроек и нажмите «Добавить кнопку» под уже существующей.

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

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

<figure><img src="/files/06e90ea446397839f5f77153abd2b7f1465ad98f" alt=""><figcaption></figcaption></figure>

Чтобы продвигать ключевые ресурсы, вы можете добавить на страницу ученика кликабельные баннеры. Эти баннеры могут вести на любой указанный вами URL, например на бота-мессенджера, группу сообщества, важный документ или внешний сайт.

Давайте перейдём к настройке.

**Шаг 1: Откройте настройки баннера**

В настройках страницы курса найдите и раскройте **«Баннеры»** .

<figure><img src="/files/979faec60653e89edb2592762f033e9c96941ab9" alt=""><figcaption></figcaption></figure>

Для этого нажмите на этот раздел в выпадающем меню настроек:

<figure><img src="/files/5d8d5de8ff0676fb4d64d1b44024782ef85e23f1" alt=""><figcaption></figcaption></figure>

Шаг 2: Загрузите изображение.

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

После загрузки изображение появится в поле настроек.

Шаг 3: Перейдите к настройкам изображения.

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

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

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

**Шаг 4: Укажите ссылку назначения**\
Введите полный URL, на который ученики будут перенаправлены при нажатии на баннер. Это может быть веб-страница, бот-мессенджер или любой другой онлайн-ресурс.

**Шаг 5: Настройте размеры баннера**\
Задайте размер отображения баннера, указав значения ширины и высоты.

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

**Шаг 6: Сохраните настройки**\
Нажмите **"Сохранить"** чтобы применить все настройки баннера.

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

### Как добавить несколько баннеров

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

Если вы нажмёте «Добавить изображение» под уже загруженным изображением, новый баннер появится ниже ранее добавленного баннера на странице ученика.

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

<figure><img src="/files/35714a8b3c5f1a8e9a166800482dcdf188c1c26c" alt=""><figcaption></figcaption></figure>

2. Изображение было загружено ниже ранее добавленного баннера.

<figure><img src="/files/613199ba353fe9f302c9107191844970cde8488a" alt=""><figcaption></figcaption></figure>

3. На странице ученика баннер будет отображаться в следующей строке после ранее добавленного.

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

Если вы нажмёте кнопку «+» справа от уже загруженного изображения, новый баннер появится на той же строке, что и ранее добавленный баннер, на странице ученика.

1. Нажмите кнопку «+» справа от загруженного изображения в настройках страницы.

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

Новое загруженное изображение будет размещено справа.

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

2. На странице ученика баннер будет отображаться в той же строке, что и ранее загруженный.

<figure><img src="/files/16616a6530ddf7f7666e08494972637b204d8102" alt=""><figcaption></figcaption></figure>

Вы можете добавлять баннеры одновременно и в одной строке, и в последующих строках.

<figure><img src="/files/5e97488a63ba358a481cb93c82ba7a88a77f8eaa" alt=""><figcaption><p>Страница ученика</p></figcaption></figure>

<figure><img src="/files/6a94d6d6539472bc555ed40d8f8e37ec933a0178" alt=""><figcaption><p>Настройки баннера</p></figcaption></figure>

{% hint style="success" %}
Готово!\nТеперь вы знаете, как полностью настроить страницу ученика!
{% endhint %}

## Предпросмотр страницы

После настройки страницы ученика не забудьте сохранить изменения.

<figure><img src="/files/7c01e4ee990da871e39a4cc9bba3ebef86e3d35d" alt=""><figcaption></figcaption></figure>

После сохранения настроек нажмите кнопку «Предпросмотр».

<figure><img src="/files/2e60fd9e6d3a38bdc91b3bcc966cd90c7dd1d28b" alt=""><figcaption></figcaption></figure>

Затем выберите «Перейти на страницу ученика».

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

Вы попадёте в предпросмотр страницы ученика.

<figure><img src="/files/6be1aac97ee49a9c5aaf1d3bef08b6e704abeb86" 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/ru/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.