Дизайн и верстка страниц со списком тренингов, подтренигов/модулей
Оформление страницы курса со списком модулей
Главная страница онлайн-школы - страница со списком тренингов
Главная страница со списком тренингов
Оформление главной страницы
со списком всех тренингов
Я уверена, что каждый из представленных кейсов вдохновит вас на новые идеи и подходы в оформлении ваших собственных тренингов
1
-
Шапка-баннер
Главный баннер с названием онлайн-школы, кратким описанием, фото спикера. -
Расписание уроков
стандартный блок "Актуальные события" был модернизирован и представлен в более удобном и привлекательном формате. -
Оформление списка тренингов
Список тренингов представлен в виде прямоугольных карточек. Каждая карточка содержит название тренинга и иконку. При наведении курсора на карточку, цвет названия и самой карточки изменяется, а блок плавно сдвигается в сторону.
- Блок обратной связиДобавлен блок "Служба поддержки", который обеспечивает поддержку пользователей и помогает им быстрее находить решения своих вопросов и проблем.
- Общий фон страницыПодбор и установка общего фона страницы.
- МенюОформлена боковая панель меню в едином стиле всей онлайн-школы.
2
-
Шапка-баннер
Приветственный баннер с названием онлайн-школы и индивидуальным
приветствием для ученика. -
Данные ученика
Блок с данными ученика с анимированной иконкой и возможностью
редактирования данных. -
Баланс ученика
Установлен блок «Ваши балансы» с анимированной икокой. -
Дополнительные кнопки
Установлены кнопки перехода в мои покупки, телеграм-канал, ютуб-канал, подключение телеграм.
- Список тренинговСписок тренингов оформлен квадратными карточками, по две в ряд. В каждом тренинге индивидуальное изображение. Предусмотрена анимация - при наведении курсора карточка тренинга меняет цвет. В правом нижнем углу карточки тренинга установлена иконка с анимацией при наведении.
- JavaScriptРазработан скрипт и в каждой карточке тренинга отдельно вынесены
количество уроков и дата начала обучения с соответствующими иконками. - Общий фон страницыПодбор и установка общего фона страницы.
- МенюОформлена боковая панель меню в соответствии со стилем страницы с применением CSS кода.
3
-
Шапка-баннер
Главный баннер с названием онлайн-школы, кратким описанием, фото двух спикеров. -
Расписание уроков
стандартный блок "Актуальные события" был модернизирован и представлен в более удобном и привлекательном формате. -
Оформление списка тренингов
Список тренингов представлен в виде прямоугольных карточек. Каждая карточка содержит название тренинга и иконку. При наведении курсора на карточку, цвет названия и самой карточки изменяется, а блок плавно сдвигается в сторону.
-
Блок обратной связи
Добавлен блок "Служба поддержки", который обеспечивает поддержку пользователей и помогает им быстрее находить решения своих вопросов и проблем. -
Общий фон страницы
Подбор и установка общего фона страницы. -
Меню
Оформлена боковая панель меню в едином стиле всей онлайн-школы.
4
Оформление списка тренингов с разделением на доступные и недоступные тренинги
-
Оформление карточек тренингов
Список тренингов представлен в виде прямоугольных карточек - по три карточки в ряд. Каждая из них содержит название тренинга, краткое описание, индивидуальное изображение, и 2 иконки (между изображением и в правом нижнем углу). -
Визуальные эффекты
При наведении курсора на карточку, цвет названия и самой карточки изменяется, а блок плавно выдвигается на передний план. Также сделана анимация иконки в правом нижнем углу карточки при наведении. -
JavaScript 1
С применением JS в карточках тренинга отдельно вынесены
количество уроков и дата начала обучения с соответствующими иконками. -
JavaScript 2
С помощью JS весь список тренингов разделен на два раздела:- доступные тренинги;
- тренинги, которые можно приобрести
Другие примеры оформления главной страницы онлайн-школы
Не упустите шанс улучшить имидж своих курсов и сделать их максимально комфортными для ваших студентов!
Оформление главной страницы тренинга
со списком модулей
С удовольствием поделюсь полезными идеями по улучшению контента и взаимодействию с вашей целевой аудиторией
1
Индивидуальный дизайн и вёрстка
страницы курса ПАСТИЛЬЕ
-
Шапка-баннер
Приветственный баннер с названием онлайн-школы и фото автора курса. -
Календарь уроков
Использование расписания уроков в виде календаря делает процесс обучения более структурированным и удобным, что положительно сказывается на успеваемости и организации учащихся. -
Список модулей
Список модулей представлен в виде прямоугольных карточек по две в ряд. Каждая карточка содержит название тренинга, номер модуля, соответствующее изображение и кнопку.
-
Индивидуальная вёрстка
Поскольку платные модули по дизайну отличаются от основных, для них была разработана индивидуальная вёрстка. -
Визуальные эффекты
При наведении курсора на модуль, карточка меняет цвет и плавно выдвигается на передний план. -
JavaScript 1
С помощью JS список модулей разделен на два раздела:- модули, доступные к изучению;
- модули, доступные после оплаты.
-
JavaScript 2
Также использован JS код для выделения номера модуля в отдельную строку -
Меню
Полная кастомизация боковой панели с заменой цвета и иконок, разделением и анимацией каждой кнопки, оформлением подменю.
- КнопкиУстановлены кнопки «Канал потока», «Связь с куратором».
А также установлены три нестандартные шестиугольные кнопки - служба заботы и повышения
тарифа. - Общий фон страницыПодбор и установка общего фона страницы.
Закажите оформление онлайн-школы прямо сейчас и начните свой путь к успеху!
2
Индивидуальный дизайн и верстка
страницы курса Я ХОРЕОГРАФ
-
Шапка-баннер
Главный баннер по индивидуальному дизайну с названием курса, кратким описанием, логотипом школы, фото автора и дополнительными изображениями. -
Список модулей
Список модулей представлен в виде прямоугольных карточек. Каждая карточка содержит название модуля и две фотографии, предварительно отобранные и обработанные. При наведении курсора на карточку, цвет названия и самой карточки изменяется, а блок плавно сдвигается в сторону. -
Интерактивный календарь
Календарь предоставляет ясное и наглядное представление о том, какие уроки и когда проходят, что позволяет быстро ориентироваться в расписании. -
Обратная связь
Добавлен блок "Служба поддержки", который обеспечивает поддержку пользователей и помогает им быстрее находить решения своих вопросов и проблем. -
Дополнительные кнопки
Установлены кнопки перехода в телеграм-канал и чат курса.
3
Оформление главной страницы
Курса "Для Копирайтеров"
-
Шапка-баннер
Главный баннер с названием курса, кратким описанием, фото автора курса. -
Список модулей
Список модулей представлен в виде прямоугольных карточек. Каждая карточка содержит название модуля и иконку. При наведении курсора на карточку модуля цвет фона меняется. -
Блок с достижениями и количеством монет
Наличие визуального отображения достижений делает учащихся более осведомлёнными о своих успехах. Это способствует более осознанному подходу к обучению. -
Обратная связь
Добавлен блок "Служба поддержки", который обеспечивает поддержку пользователей и помогает им быстрее находить решения своих вопросов и проблем.
4
Уникальный дизайн и верстка
главной страницы со списком модулей для
онлайн-школы китайского языка
Что сделано на странице со списком модулей
1
Шапка-баннер
Главный баннер по индивидуальному дизайну с названием школы, кратким описанием, фото спикера
2
Список модулей
Интерактивная карта модулей, открывающихся в процессе прохождения курса.
3
Прогресс-бар
Прогресс-бар помогает студентам видеть свои достижения на курсе.
4
Дополнительные кнопки
Установлена кнопка для связи с куратором и кнопка для перехода в чат курса.
