Продажа курсов через сайт

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

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

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

circle-info

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

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

О том, как настроить тарифные планы для онлайн-курсов, мы рассказали в отдельной статье. ссылка

Как создать сайт для курса

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

Затем нажмите "+Создать":

Выберите тип сайта: «Многостраничный сайт», «Лендинг» или «Форма»:

circle-info

Подробную инструкцию по созданию сайта из блоков с помощью конструктора можно найти в разделе «Сайты для бизнеса». ссылка

Если у вас уже есть сайт, созданный на MaviBot платформе, перейдите к редактированию блоков сайта, нажав на карточку сайта:

Многостраничный сайт

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

  1. Главная страница;

  2. Наша команда;

  3. О нас.

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

Чтобы перейти в режим редактирования любой страницы сайта, нажмите на строку нужной страницы.

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

circle-info

Загрузка страницы из файла позволяет перенести страницы сайта из другого проекта.

Подробнее об экспорте и импорте страниц сайта читайте в разделе ниже «Экспорт / импорт страниц сайта». ссылка

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

Лендинг (формы, опросы и квизы)

При нажатии на «Создать лендинг» откроется форма, где можно выбрать один из различных шаблонов сайта:

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

В отличие от многостраничного сайта, создание лендинга сразу переносит вас в редактор страницы.

Позже, когда вы нажмёте на вкладку лендинга,

вы попадёте в раздел с заявками, основной информацией и настройками лендинга. В отличие от многостраничного сайта, вы не увидите несколько страниц, потому что лендинг состоит всего из одной страницы.

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

Сайт ведёт себя аналогично, если он создан как форма, опрос или квиз. Однако, в отличие от других типов сайтов, при создании шаблон не предлагается, поскольку страница автоматически включает блок «Форма» или «Квиз» в зависимости от выбранного типа сайта.

Создание типа сайта «Форма»

Как показано в примере, чтобы перейти к настройкам сайта типа «Форма», нужно нажать кнопку «Редактировать».

После этого вы перейдёте в режим редактирования страницы, где создаётся одна секция «Форма» (или квизы и многостраничные опросы, в зависимости от выбранного типа сайта).

circle-info

Вы можете в любой момент добавить на сайт секции «Форма», «Квиз» и «Опрос» (как на многостраничный сайт, так и на лендинг).

circle-check

Секция «Форма» для записи на курс

Независимо от того, какой тип сайта вы выберете — «Многостраничный сайт», «Лендинг» или «Форма» — режим редактирования страницы остаётся одинаковым.

Чтобы создать секцию «Форма» для записи на курс (или любую другую секцию в конструкторе сайта), наведите курсор на секцию, после которой вы хотите добавить форму оплаты. Затем нажмите появившуюся кнопку «+», чтобы открыть меню секций:

Далее найдите в открывшемся меню секцию «Форма»:

Затем нажмите на «Форма», чтобы добавить секцию на сайт:

Теперь настроим форму:

Здесь нужно активировать чекбокс «Форма для записи студента на курс»:

Этот чекбокс открывает дополнительные настройки оплаты для курса:

  1. Выберите курс, для которого вы хотите создать форму на сайте:

  1. Выберите план:

Это поле является одной из ключевых настроек оплаты по тарифу курса, так как позволяет выбрать, к какому плану (или ко всем планам) будет применяться форма на сайте.

  1. Подсказка к форме:

Вы можете оставить текст подсказки по умолчанию или написать свой:

Если вы не хотите, чтобы подсказка отображалась в форме записи/оплаты курса, используйте чекбокс «Скрыть подсказку»:

Вопросы формы

При создании формы необходимо добавить поля для email, номера телефона и имени пользователя.

Чтобы добавить поле для ввода данных пользователем, нажмите кнопку «Создать вопрос»:

После этого появится форма настройки вопроса:

В выпадающем списке нужно выбрать тип поля «Имя»:

И активировать чекбокс «Обязательный вопрос»:

Затем создайте второй вопрос:

Для второго вопроса выберите тип поля «Email»:

Этот вопрос тоже должен быть обязательным; иначе студент не сможет получить доступ к вашему курсу или пройти автоматическую запись.

Аналогично добавьте следующий вопрос с типом поля «Номер телефона»:

Основная настройка формы записи и оплаты курса завершена.

circle-info

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

Подробнее о настройке и всех возможностях секции «Форма» читайте в разделе «Ответы формы». ссылка

Тестирование

Обязательно сохраните настройки сайта после конфигурации формы оплаты и записи.

Затем перейдите к предпросмотру сайта:

На сайте вы увидите форму записи/оплаты курса.

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

Теперь отправьте данные в систему и перейдите к форме заявки и оплаты.

Форма сработала корректно: она перенаправила клиента на страницу оформления заказа, после чего открылась платёжная форма через выбранный платёжный сервис.

Секция «Карточки курсов»

Вы можете показать информацию о курсах, доступных в вашей школе, на сайте с помощью секции «Карточки курсов»:

Чтобы добавить секцию «Карточки курсов», нажмите кнопку «+» в режиме редактирования сайта:

Далее найдите в появившемся меню секцию «Карточки курсов» и нажмите на неё, чтобы добавить секцию на сайт:

Секция будет добавлена на сайт, и для вас откроется меню настроек содержимого:

Содержимое блока

Настройка блока «Карточки курсов» заключается в выборе одного или нескольких курсов, уже созданных в проекте, для отображения на сайте, а также в настройке элементов карточки.

circle-info

О том, как создавать курсы на платформе MaviBot, рассказано в разделе «Онлайн-курсы». ссылка

Выбор курсов

Выберите курсы, которые вы хотите показать на своём сайте:

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

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

Настройка

Теперь настроим элементы карточки после выбора нужных курсов:

  1. Тень

Вы можете настроить интенсивность тени для карточек курсов в секции:

а) без тени:

б) лёгкая тень:

в) сильная тень:

  1. Цветовая палитра для элементов карточки

Вы можете изменить цвета на карточке: фон, текст (как на самой карточке, так и на кнопках), а также добавить интерактивность, изменяя цвета элементов при наведении курсора:

а) Цвет шрифта: помогает изменить основной цвет текста на карточке (не включая кнопку):

б) Фон карточки: для изменения цвета фона карточки.

в) Цвет рамки: для изменения цветовой схемы рамок карточки.

г) Текст кнопки: для изменения цвета текста кнопки в её обычном (статическом) состоянии.

д) Фон кнопки: позволяет изменить цвет фона кнопки карточки курса.

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

circle-check
circle-info

О настройках фона и вариантах отображения читайте в статье «Универсальные настройки секции». ссылка

Секция «Список уроков»

Вместе с карточками онлайн-курсов вы можете добавить на страницу сайта списки уроков. Просто выберите нужный курс в секции, и все уроки будут отображены:

Чтобы добавить блок для отображения списка уроков курса, перейдите в режим редактирования сайта, наведите курсор на рабочую область и затем нажмите кнопку «+»:

Справа откроется меню с доступными секциями сайта. Там нужно найти блок «Списки уроков»:

Нажмите на «Карточки курсов», чтобы открыть меню настроек содержимого блока:

Просто выберите нужный курс (уже созданный в MaviBot) из выпадающего меню и нажмите «Сохранить».

Затем перейдите в настройки, чтобы настроить содержимое блока.

Настройка

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

Вы можете настроить следующие параметры:

  1. Стиль списка уроков

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

Новый стиль
Классический стиль
  1. Стиль нумерации

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

  1. Иконки уроков

circle-check

Как добавить иконки

Шаг 1. Перейдите в настройки урока:

Для этого перейдите в режим настроек курса и найдите вкладку «Уроки»:

Затем нажмите «Редактировать», чтобы открыть страницу редактирования урока.

Шаг 2. Откройте настройки страницы урока.

В настройках страницы урока перейдите в раздел «Основная информация»:

Шаг 3. Загрузка превью урока

В настройках «Основной информации» раскройте выпадающий список настроек изображения:

Загрузите изображение для превью урока:

Сохраните настройки:

circle-check
  1. Фоновый узор

Добавляет глубину и уникальность вашим карточкам уроков:

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

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

  1. Стиль карточки урока

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

  1. Цвет фона и текста

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

circle-check
circle-info

Читайте статью «Универсальные настройки секции», чтобы узнать о настройках фона и отображения. ссылка

Последнее обновление