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

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

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

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

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

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

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

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

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

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

Конструктор курсов доступен по тарифному плану «Бизнес».

Для начала перейдите в раздел «Курсы» в 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: Сохраните конфигурацию
Нажмите «Сохранить», чтобы применить все настройки баннера.

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

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

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

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

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

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

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

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

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

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

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

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

Всё готово!
Теперь вы знаете, как полностью настроить страницу студента!

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

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

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

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

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

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

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

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