Дизайн и верстка страниц со списком уроков на платформе GetCourse
Мини-курс Для школы эзотерики ПУТЬ ДУШИ - страница со списком уроков
Страница марафона со списком уроков для школы эзотерики ПУТЬ ДУШИ
Страница со списком уроков для онлайн-школы САМООБРАЗОВАНИЕ
Мобильная адаптация страницы со списком уроков для онлайн-школы Академия регрессивной психологии
1
Индивидуальный дизайн и верстка
страницы со списком уроков для
школы эзотерики ПУТЬ ДУШИ
-
Шапка-баннер
Главный баннер с приветствием, названием марафона, логотипом онлайн-школы и фото автора. -
Оформление списка уроков
Список уроков представлен в виде прямоугольных карточек. Каждая карточка содержит название урока, краткое описание и тематическую картинку. -
Визуальные эффекты
При наведении курсора карточки плавно поднимаются вверх, создавая эффект объема и придавая интерфейсу динамичность.
Карты Таро также обладают анимационными эффектами: при наведении происходит эффектный поворот на 360 градусов, в результате которого изображение карты меняется на другое, добавляя элемент сюрприза и вовлеченности пользователя.
- Рекламный баннерУстановка рекламного анимированного баннера с целью привлечения пользователей к выбору и покупке курсов.
- Дополнительные кнопкиУстановлена кнопка с визуальными эффектами для перехода в телеграм-канал.
- Общий фон страницыПодбор и установка общего фона страницы.
- МенюПолная кастомизация боковой панели меню с изменением фона, индивидуальным подбором иконок и анимацией кнопок при наведении.
Вместе мы создадим нечто уникальное, что вдохновит учеников и преобразит их опыт обучения!
2
Индивидуальный дизайн и верстка
мини-курса для школы эзотерики
ПУТЬ ДУШИ
-
Шапка-баннер
Главный баннер с названием мини-курса, логотипом онлайн-школы и фото автора. -
Оформление списка уроков
Список уроков представлен в комбинированном формате: первые уроки оформлены как квадратные карточки, размещенные по две в ряд, а последующий нечетный урок выполнен в виде прямоугольной карточки, занимающей ширину двух квадратных. К каждому уроку подобрана иконка, соответствующая тематике урока. -
Визуальные эффекты
При наведении курсора реализована анимация: смена цвета и плавное поднятие вверх.
-
Дополнительные кнопки
Установлены кнопки с визуальными эффектами:- кнопка для перехода на сайт школы;
- кнопка для доступа к телеграм-каналу;
- кнопка для перехода на марафон-практикум.
-
Меню
Полная кастомизация боковой панели меню с изменением фона, индивидуальным подбором иконок и анимацией кнопок при наведении. -
Общий фон страницы
Подбор и установка общего фона страницы. -
Блок "Автор курса"
Установка виджета, представляющего автора курса.
3
Индивидуальный дизайн и верстка
Демо-курса для онлайн-школы
Марии Чиграковой
-
Шапка-баннер
Баннер с индивидуальным приветствием для ученика, названием демо-курса и фото автора курса. -
Данные ученика
Блок с данными ученика с анимированной иконкой и возможностью
редактирования данных. -
Дополнительные кнопки
Установлена кнопка для перехода на сайт с целью покупки полного курса.
Список уроков
Список уроков представлен в комбинированном формате: первые уроки оформлены как прямоугольные карточки, размещенные по две в ряд, а последний нечетный урок выполнен в виде прямоугольной карточки, занимающей ширину двух предыдущих.
Визуализация карточек уроков
К каждому уроку подобрано индивидуальное изображение.
JavaScript
С применением JS в карточках уроков отдельно вынесен
номер урока
Визуальные эффекты
При наведении курсора карточки плавно поднимаются вверх, создавая эффект объема и придавая интерфейсу динамичность.
Не упустите возможность преобразить свои курсы - сделайте их стильными и современными!
4
Индивидуальный дизайн и верстка
страниц со списком уроков для
Курса 5 ШАГОВ К ДЖЙОТИШ
-
Шапка-баннер
Приветственный баннер с анимацией волны, который привлекает внимание пользователей. Он содержит название курса в ярком и читаемом шрифте, а также кнопку 'Мой профиль', позволяющую легко перейти к личным данным. Анимация волны создает динамичную атмосферу, подчеркивая креативность и активность курса. -
Список уроков
Список уроков оформлен квадратными карточками, по две в ряд. В каждом тренинге индивидуальное изображение. Предусмотрена анимация - при наведении курсора нижняя часть карточки меняет цвет. В правом нижнем углу карточки установлена кнопка с анимацией при наведении.
-
Блок с достижениями
Наличие визуального отображения достижений делает учащихся более осведомлёнными о своих успехах. Это способствует более осознанному подходу к обучению. -
Прогресс-бар
Анимированный прогресс-бар с эффектом волны добавляет динамичности и визуальной привлекательности интерфейсу. Плавная анимация, имитирующая волну, символизирует движение и прогресс. Прогресс-бар четко отображает текущий статус выполнения задачи, а его стильный дизайн гармонично вписывается в общий визуальный концепт. -
Меню
Оформлена боковая панель меню в едином стиле всей онлайн-школы с заменой фона и иконок.
5
Оформление списка уроков с разделением всех уроков на темы
-
Шапка-баннер
Баннер с названием модуля, фото спикера и дополнительным изображением. -
Список уроков
Список уроков представлен в виде прямоугольных карточек - по две карточки в ряд. -
Визуальные эффекты
При наведении курсора карточки меняют цвет и плавно выдвигаются на передний план. -
JavaScript 1
С применением JavaScript кода список уроков делится на темы.
Если в разделе имеется последний нечетный урок, карточка этого урока занимает ширину двух предыдущих карточек.
Функция разделения на темы позволяет пользователям эффективно организовать и просматривать учебные материалы, разбивая их на тематические блоки.
-
Обратная связь
Блок службы поддержки помогает пользователям получать необходимую помощь и информацию. -
Прогресс-бар
Прогресс-бар позволяет визуально отслеживать достижения пользователя и уровень завершённости обучения. Пользователи могут легко видеть, сколько материала они уже изучили и сколько осталось до завершения курса. -
Меню
Кастомизация боковой панели меню с изменением фона и индивидуальным подбором иконок
6
Индивидуальный дизайн и верстка
Курса Мир маркетплейсов
-
Индивидуальный приветственный баннер
Установлен баннер с индивидуальным приветствием для каждого ученика и его фотографией. -
Оформление списка уроков
Список уроков представлен в виде прямоугольных карточек. -
Визуальные эффекты
При наведении курсора карточки плавно поднимаются вверх, создавая эффект объема и придавая интерфейсу динамичность.
- Обратная связьБлок службы поддержки помогает улучшить коммуникацию с учениками и повышает уровень поддержки.
- Блок продления купленного курсаУченики могут продлить доступ к уже купленному курсу на определенный срок.
- Общий фон страницыПодбор и установка общего фона страницы.
Другие примеры оформления страниц
со списком уроков
Закажите оформление онлайн-школы прямо сейчас и откройте двери к новым возможностям!
