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

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

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

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

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

  • Получать доступ ко всему контенту и материалам курса,

  • Отслеживать свой прогресс по модулям и урокам,

  • Проходить уроки и отправлять задания,

  • Взаимодействовать с преподавателями или кураторами.

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

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

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

  • Быстро находить нужные материалы и продолжать обучение с того места, где они остановились.

  • Легко отслеживать свой прогресс, видя, какие задания выполнены, а какие ещё остаются.

  • Получать обратную связь от преподавателя, что делает обучение более персонализированным и эффективным.

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

circle-check

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

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

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

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

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

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

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

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

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

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

  • Фоны (обложки, фон страницы, прогресс-бар, блоки уроков)

  • Кнопки

  • Заполнение прогресс-бара

  • Границы, контуры и т. д.

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

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

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

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

circle-check

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

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

circle-exclamation

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

Цвет фона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

circle-exclamation

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

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

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

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

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

circle-info

Для получения более подробной информации о том, как использовать файловое хранилище, обратитесь к статье «Файловое хранилище".

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

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

Высота: 260px
Высота: 400px

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

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

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

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

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

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

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

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

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

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

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

  • прогресс-бара,

  • количества завершённых уроков и

  • количества одобренных домашних заданий.

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

Кнопки

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

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

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

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

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

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

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

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

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

Баннеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Страница ученика
Настройки баннера
circle-check

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

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

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

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

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

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

circle-exclamation

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

Последнее обновление