Страница ученика
В статье расскажем, как настроить страницу ученика для прохождения курса
Last updated
В статье расскажем, как настроить страницу ученика для прохождения курса
Last updated
Создание привлекательной и функциональной страницы ученика — ключ к успешному онлайн-курсу. Ведь чем удобнее и красивее интерфейс, тем проще ученикам погрузиться в обучение и сохранить мотивацию на высоком уровне.
Кастомные темы и настройки позволяют адаптировать внешний вид страницы ученика, создавая яркий и запоминающийся дизайн буквально за несколько кликов. В этой статье мы расскажем, как быстро и эффективно настроить страницу ученика, чтобы она стала визитной карточкой вашего курса, сочетая стиль с удобством использования.
Страница ученика в онлайн-курсе — это персонализированная страница, которая служит главным рабочим пространством для ученика в рамках обучающей системы на платформе Salebot. На этой странице собраны все важные элементы, необходимые для учебного процесса, и она позволяет вашему клиенту видеть содержание курса с количеством учебного материала, отслеживать прогресс, взаимодействовать с кураторами, проходить уроки и отправлять домашние задания.
Страница ученика делает прохождение курса структурированным и удобным. Она позволяет:
Быстро находить нужные материалы и продолжать обучение с того момента, на котором ученик остановился.
Удобно отслеживать свой прогресс и видеть, какие задания уже выполнены, а какие еще предстоят.
Получать обратную связь от кураторов, что способствует более персонализированному подходу к обучению.
Конструктор курсов доступен при подписке "Инфобиз".
Перейдите в раздел "Курсы" в Salebot:
Далее выберите курс, в котором необходимо настроить страницу ученика, и перейдите в настройки:
Далее вы перейдете на страницу основных настроек курса, где вам необходимо перейти во вкладку "Страница ученика":
Теперь чтобы начать настраивать страницу ученика, найдите иконку с шестеренкой, чтобы открыть меню настроек:
При клике на кнопку с шестеренкой откроется меню с настройками основной (кастомной) темой, своей (настраиваемой) темой, а также с дополнительными настройками и добавлением кнопок:
Основная тема страницы ученика - это предустановленные и готовые темы, которые помогут кастомизировать страницы за два клика:
Шаг 1. Выберите цветовое решение основной темы:
Для этого доступно 7 светлых и 2 темные темы:
При применении кастомной темы меняются цвета всех основных элементов страницы:
Фон (обложки, самой страницы, прогресс-бара, плашек уроков);
Кнопки;
Шкала прогресс-бара;
Границы обводки и т.п.
Шаг 2. Выберите степень скругления:
а) нулевая степень: все углы и элементы страницы - квадратные;
б) средняя степень: углы и элементы - овальные;
в) максимальная степень: углы и элементы страницы - закругленные:
Готово!
Теперь вы знаете, как быстро настроить основную тему страницы ученика.
Если вы хотите добавить дополнительные кнопки, изображение в обложку, настроить цветовое решение страницы по своему уникальному дизайну, то предлагаем ознакомиться с дальнейшими разделами данной статьи.
Настройки во вкладке "Своя тема" помогут применить к элементам страницы ученика свои уникальные и отличные друг от друга цветовые решения:
Обращаем внимание!
Основную и свою темы можно использовать в сочетании друг с другом: например, с помощью настроек во вкладке "Своя тема" можно настроить цветовые решения всего для нескольких элементов, а остальные элементы страницы оставить в цветах выбранной основной темы.
Настройка цвета фона изменяет цвет всей страницы, не включая элементы:
Нажмите на квадрат, чтобы открыть палитру цветов и выберите необходимый цвет:
Помимо обширной цветовой палитры для каждого элемента, можно выбрать степень насыщенности цвета, используя шкалу прозрачности:
Настройки цвета фона подложки изменяют цветовое решение на основных плашках страницы ученика:
а) прогресс-бара;
б) подложки уроков;
в) обложки курса.
Настройки акцентного цвета помогут поменять цветовое решение основных выделяющихся элементов страницы:
1) кнопки перехода к уроку;
2) шкала прогресс-бара;
3) обводки, подложки для номеров уроков и т.п.:
Данная настройка поможет подобрать интересное цветовое решение для текста фона страницы:
Настройка цвета текста подложек поможет изменить цветовое решение для текста основных элементов страницы ученика:
Данная настройка изменяет цветовые решения для плашек с акцентными цветами и кнопок перехода к уроку:
Пустые поля, принимающие на ввод только числовые значения:
Можно выбрать не только скругление в пикселях, но и в процентах для своего удобства:
При вводе числового значения в первое поле скругления применяет введенное значение к кнопкам перехода к урокам:
Второе поле для ввода числового значения применяет введенное значение к подложкам обложки, прогресс-бара и уроков:
Третье поле для ввода применяет введенное числовое значение к акцентным элементам страницы ученика:
В дополнительных настройках страницы ученика можно загрузить изображение для обложки страницы:
Обращаем внимание!
Размер изображения, которое можно загрузить в обложку страницы ученика с собственного устройства, не может превышать 15 мб.
Шаг 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) На странице ученика баннер будет расположен на одной строке с ранее загруженным:
Можно добавлять баннеры одновременно на одной и последующих строках:
Готово! Теперь вы знаете, как полностью настроить страницу ученика!
После настроек страницы ученика не забудьте сохранить свой прогресс:
После сохранения настроек, кликните на кнопку предпросмотр страницы:
Далее выберите "Перейти на страницу ученика":
После чего вы перейдете на предпросмотр страницы ученика:
На странице вы можете наглядно просмотреть, как выглядят все элементы, их расположение и остальные настройки, которые вы установили в режиме редактирования.
Обращаем внимание!
Страница ученика в режиме предпросмотра не является кликабельной и предназначена только для демонстрации.
