# Страница ученика

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

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

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

## Что такое страница ученика?

**Страница ученика в онлайн-курсе** — это персонализированная страница, которая служит главным рабочим пространством для ученика в рамках обучающей системы на платформе Salebot. На этой странице собраны все важные элементы, необходимые для учебного процесса, и она позволяет вашему клиенту видеть содержание курса с количеством учебного материала, отслеживать прогресс, взаимодействовать с кураторами, проходить уроки и отправлять домашние задания.&#x20;

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

#### Для чего нужна страница ученика?

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

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

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

{% hint style="success" %}
Конструктор курсов доступен при подписке "Инфобиз".&#x20;
{% endhint %}

Перейдите в раздел "Курсы" в Salebot:

<figure><img src="/files/jmDlr2EjmSKOWXc698Lh" alt="" width="456"><figcaption></figcaption></figure>

Далее выберите курс, в котором необходимо настроить страницу ученика, и перейдите в настройки:

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

Далее вы перейдете на страницу основных настроек курса, где вам необходимо перейти во вкладку "Страница ученика":

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

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

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

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

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

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

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

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

Шаг 1. Выберите цветовое решение основной темы:

Для этого доступно 7 светлых и 2 темные темы:

<figure><img src="/files/k3azrUoJF1NFVNRXF2RS" alt=""><figcaption><p>Светлая тема</p></figcaption></figure>

<figure><img src="/files/pc2zWDHSB2Kei5WBIamF" alt=""><figcaption><p>Темная тема</p></figcaption></figure>

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

1. Фон (обложки, самой страницы, прогресс-бара, плашек уроков);
2. Кнопки;
3. Шкала прогресс-бара;
4. Границы обводки и т.п.&#x20;

Шаг 2. Выберите степень скругления:&#x20;

а) нулевая степень: все углы и элементы страницы - квадратные;

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

б) средняя степень: углы и элементы - овальные;&#x20;

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

в) максимальная степень: углы и элементы страницы - закругленные:&#x20;

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

{% hint style="success" %}
Готово!&#x20;

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

Если вы хотите добавить дополнительные кнопки, изображение в обложку, настроить цветовое решение страницы по своему уникальному дизайну, то предлагаем ознакомиться с дальнейшими разделами данной статьи.&#x20;
{% endhint %}

## Своя тема

Настройки во вкладке "Своя тема" помогут применить к элементам страницы ученика свои уникальные и отличные друг от друга цветовые решения:

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

{% hint style="success" %}
Обращаем внимание!&#x20;

Основную и свою темы можно использовать в сочетании друг с другом: например, с помощью настроек во вкладке "Своя тема" можно настроить цветовые решения всего для нескольких элементов, а остальные элементы страницы оставить в цветах выбранной основной темы.&#x20;
{% endhint %}

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

Настройка цвета фона изменяет цвет всей страницы, не включая элементы:

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

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

<figure><img src="/files/WrOYc7g0acfJNKQQIhWi" alt="" width="375"><figcaption></figcaption></figure>

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

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

#### Цвет фона подложки

Настройки цвета фона подложки изменяют цветовое решение на основных плашках страницы ученика:&#x20;

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

б) подложки уроков;&#x20;

в) обложки курса.

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

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

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

1\) кнопки перехода к уроку;

2\) шкала прогресс-бара;

3\) обводки, подложки для номеров уроков и т.п.:

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

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

Данная настройка поможет подобрать интересное цветовое решение для текста фона страницы:

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

#### Цвет текста на подложке

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

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

#### Цвет текста на акцентном цвете

Данная настройка изменяет цветовые решения для плашек с акцентными цветами и кнопок перехода к уроку:

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

#### Скругление элементов

Пустые поля, принимающие на ввод только числовые значения:

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

Можно выбрать не только скругление в пикселях, но и в процентах для своего удобства:

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

При вводе числового значения в первое поле скругления применяет введенное значение к кнопкам перехода к урокам:

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

Второе поле для ввода числового значения применяет введенное значение к подложкам обложки, прогресс-бара и уроков:

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

Третье поле для ввода применяет введенное числовое значение к акцентным элементам страницы ученика:

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

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

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

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

{% hint style="warning" %}
Обращаем внимание!&#x20;

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

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

Изображение можно загрузить с собственного компьютера:

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

Либо загрузить изображение с файлового хранилища ссылкой:

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

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

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

{% hint style="info" %}
Подробнее о том, как использовать хранилище, рассказано в статье "[Файловое хранилище](broken://pages/PicsdycUnWHDbDnHPG9D)".&#x20;
{% endhint %}

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

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

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

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

Шаг 3. Расположение изображения:

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

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

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

Где, перемещая кружок, можно установить изображения по своему вкусу.&#x20;

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

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

Поле размера изображения принимает значения (contain/cover) и числовые значения в пикселях (px) и процентах (%):

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

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

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

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

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

Повторение возможно по оси y, то есть вертикально:

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

По оси x, то есть горизонтально:

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

И без повторений:

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

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

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

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

Если вы не хотите использовать данные элементы на странице, то чекбоксы можно деактивировать.&#x20;

## Кнопки

В странице ученика под шкалой прогресс-бара также существует функция для создания кнопок с ссылками:

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

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

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

Далее кликните на "Добавить кнопку":

<figure><img src="/files/c6hyLBduELEN3YvLHpN7" alt="" width="375"><figcaption></figcaption></figure>

После чего откроется модальное окошко для настройки кнопки:

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

Пропишите текст на кнопке:

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

Далее укажите ссылку на страницу/бота и т.п., на которую по клику по кнопке должен переходить  ученик:

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

Цветовое решение кнопки будет под выбранный цвет основной темы, но при необходимости можно подобрать собственную палитру текста и фона кнопки:

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

Далее кликните "Сохранить":

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

И ваша кнопка сохранится и добавится под прогресс-бар:

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

Кнопок можно добавить несколько - для этого достаточно перейти в меню настроек и кликнуть на "Добавить кнопку" под уже созданной кнопкой:

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

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

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

На странице ученика также есть возможность добавить кликабельные баннеры с переходом на страницу, которую вы укажете в настройках.&#x20;

Можно указать любые ссылки (в том числе, переход в бота в различных мессенджерах, группы и т.д.). Давайте перейдем к настройке.&#x20;

Шаг 1. Разверните раздел "Баннеры" в настройках:

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

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

<figure><img src="/files/twgMhrjN1rhQrPMtTt00" alt="" width="375"><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

Шаг 4. Установите ссылку для баннера, по клику на который ваш ученик перейдет на необходимую страницу/бота:

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

Шаг 5. Настройки высоты и ширины баннера:&#x20;

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

Пустые поля для ширины и высоты принимают исключительно числовые значения без указания px или %.

Шаг 6. Сохраните настройки баннера:

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

Настройки баннера завершены.&#x20;

Теперь вы увидите кликабельный баннер под прогресс-баром (если он у вас установлен) в правой части страницы ученика:

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

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

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

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

Если вы кликните "добавить изображение" снизу под уже загруженным изображением, то баннер будет расположен ПОД добавленным баннером на странице ученика:

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

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

2\) Изображение загрузилось под ранее добавленным баннером:

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

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

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

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

1\) Кликните на кнопку "+" справа от загруженного изображения в настройках страницы:

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

2\) Новое загруженное изображение будет расположено справа:

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

3\) На странице ученика баннер будет расположен на одной строке с ранее загруженным:

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

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

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

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

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

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

После настроек страницы ученика не забудьте сохранить свой прогресс:

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

После сохранения настроек, кликните на кнопку предпросмотр страницы:

<figure><img src="/files/41BL3YMHJxeQY11xrmWl" alt=""><figcaption></figcaption></figure>

Далее выберите "Перейти на страницу ученика":

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

После чего вы перейдете на предпросмотр страницы ученика:

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

На странице вы можете наглядно просмотреть, как выглядят все элементы, их расположение и остальные настройки, которые вы установили в режиме редактирования.&#x20;

{% hint style="info" %}
Обращаем внимание!&#x20;

Страница ученика в режиме предпросмотра не является кликабельной и предназначена только для демонстрации.
{% 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.salebot.pro/online_courses/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.