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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Фон (обложки, самой страницы, прогресс-бара, плашек уроков);

2. Кнопки;

3. Шкала прогресс-бара;

4. Границы обводки и т.п.

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

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

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

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

Своя тема

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

Цвет фона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопки

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

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

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

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

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

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

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

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

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

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

Баннеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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