Сайт

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

Тарифы и брендирование

1. 0:00 Откройте сайт платформы Emdesell и прокрутите страницу к разделу Тарифы.
2. 0:17 Создание собственного сайта школы доступно на всех тарифах, включая бесплатный.
3. 0:32 Изменение цветов сайта находится в разделе Брендирование. Изменение цвета подвала и кнопок доступно на тарифах Бизнес и Эксперт; на остальных тарифах используются исходные цвета.
4. 0:56 Макет сайта разработан в Figma. По нему разбираются элементы сайта, которые будут рассмотрены в следующих уроках.

Шапка сайта

5. 1:25 В шапке расположены логотип и меню. Пункты меню создаются самостоятельно, для каждого задается ссылка.
6. 1:37 Ссылки в меню можно вести не только на курсы, вебинары и оплату школы, но и на сторонние ресурсы: поддержку, документацию, блог и другие страницы.
7. 2:01 Номер телефона школы можно добавить или не добавлять. Если он добавлен, по нему можно нажать.

Главная страница и каталог

8. 2:14 В первом блоке главной страницы задаются название лучшего курса, описание и фотография.
9. 2:32 Вариант первый: в блоке указываются название школы, описание и кнопка, например Войти в личный кабинет. Вариант второй: название курса с кнопкой Подробнее, которая ведет на описание курса.
10. 2:49 Если при переходе на сайт школы открывается форма входа, включите соответствующую настройку, и посетители будут сразу попадать на сайт.
11. 3:21 Ученики ищут на сайте кнопку входа в кабинет, поэтому добавьте пункт Переход в личный кабинет в меню или выведите эту кнопку в описании школы.
12. 3:42 Каталог курсов заполняется самостоятельно. Курс может быть бесплатным, и тогда отмечается метка Бесплатно, либо платным. У платного курса можно показать зачеркнутую старую цену и перейти в каталог.

Подвал и документы

13. 3:57 Подвал полностью настраивается: разделы Курсы и вебинары, О школе, Поддержка и любые другие, которые нужны школе.
14. 4:11 Меню подвала не зеркалирует меню шапки. Это два разных меню, их можно настраивать независимо друг от друга.
15. 4:27 Основные документы: договор оферты, политика конфиденциальности, политика в отношении обработки персональных данных и пользовательское соглашение. Они обязательны, так как их запрашивают сервисы приема платежей, например ЮKassa и CloudPayments.
16. 5:02 Телефон из шапки дублируется в подвале. Социальные сети, включенные в настройках школы, тоже появляются в подвале. В примере на макете YouTube не показан.
17. 5:21 Текст Все права защищены также настраивается.
18. 5:29 Сайт адаптивен: он подстраивается под планшетную и телефонную версии. На телефоне шапка сворачивается в мобильное меню, которое раскрывается по нажатию.
19. 5:45 Курсы в каталоге на телефоне выстраиваются в один столбец, подвал тоже адаптируется.

Страница курса

20. 5:57 Страница курса содержит обложку, название, описание, расширенное описание и программу курса. Блоки описания можно добавлять в нужном количестве.
21. 6:16 Блоки приема платежей добавляются на страницу курса. У одного курса может быть несколько тарифов: например, видео и уроки за 3000 рублей, видео и поддержка за 7000 рублей, видео, поддержка и персональная работа за 30 000 рублей. При добавлении нескольких блоков они равномерно выстраиваются по горизонтали. Настройка приема платежей будет рассмотрена в отдельном уроке.
22. 7:08 Адаптивный вид страницы курса можно посмотреть на планшете и телефоне.
23. 7:19 Документы создаются самостоятельно, можно сгенерировать нужное количество. Ссылки на документы подключаются там, где они нужны, в том числе в верхнем меню, например в разделе Документация.
24. 7:38 Сайт в текущем виде полностью реализован. В Figma есть несколько вариантов дизайна, которые будут доработаны. Далее переходите к настройке сайта.

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

1. 0:00 Перейдите в раздел Настройки и откройте пункт Сайт.
2. 0:13 Включите опцию Сайт. Пока она выключена, функционал сайта не работает.
3. 0:23 В поле Доступ к посещению сайта выберите, кто может видеть сайт во время настройки: только администратор или администратор и автор при совместной работе. Так ученики не увидят недоделанную версию.
4. 0:39 Чтобы в шапке сайта отображался номер телефона, включите соответствующую опцию в разделе Дизайн. Телефон появится в шапке и внизу страницы.
5. 0:51 В поле Подпись валюты для отображения укажите знак валюты. Он используется на карточках каталога, даже если курс бесплатный. Если вы принимаете платежи в другой валюте, например в гривнах через сервис Way4Pay, замените знак на нужный.
6. 1:28 Настройте Главный баннер, блок на главной странице из заголовка, описания, кнопки и картинки:
   • Заголовок и Описание;
   • Ссылка на картинку обложки: картинка загружается из галереи изображений;
   • Ссылка для кнопки: адрес, куда перейдёт посетитель, например на вход в онлайн-школу или на страницу курса;
   • Текст кнопки, например «Войти в онлайн-школу», «Перейти» или «Подробнее».
7. 2:08 Текст Копирайт выводится в футере сайта.
8. 2:27 Настройте Элементы меню:
   • Верхнее меню (шапка сайта);
   • Footer Site (футер, или подвал): основные ссылки и ссылки на документы.
9. 2:42 Если вы подключили социальные сети в школе, они отобразятся на сайте.
10. 2:57 Обзор настроек закончен. Дальше переходим к настройке первого баннера.

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

1. 0:00 Включите настройку сайта кнопкой Включить и нажмите Сохранить изменения. После этого в левом меню появится раздел Сайт.
2. 0:25 В разделе Настройки → Сайт задайте доступ к посещению сайта: все, администратор, автор или только администратор. В видео выбрано «все».
3. 0:39 При необходимости укажите номер телефона поддержки, который будет отображаться на сайте. Поле можно оставить пустым.
4. 1:01 Настройте главный баннер: название и описание школы.
5. 1:09 В баннере можно вывести основной курс или первый раздел школы.
6. 1:18 Добавьте в баннер кнопку Личный кабинет. Без неё ученики не смогут войти в школу, если переключить сайт на полную версию.
7. 1:42 Добавьте два элемента: пункт меню и кнопку входа в школу.
8. 1:48 Для пункта меню, например «Кабинет ученика», укажите ссылку на школу с префиксом «логин». Без префикса ссылка перенаправит только на сайт.
9. 2:22 Эту же ссылку используйте для кнопки баннера, например «Кабинет ученика».
10. 2:32 Заполните название и короткое описание для блока секции.
11. 2:48 Добавьте обложку: в разделе Галерея изображений нажмите Загрузить изображение, выберите файл, откройте его и нажмите Скопировать URL. Вставьте ссылку в поле ссылки на обложку и сохраните изменения.
12. 3:13 Сохраните изменения. Настройка секции готова.
13. 3:29 Проверить сайт можно так: скопируйте адрес школы, откройте его в новой вкладке и добавьте в конце префикс «сайт».
14. 3:47 Чтобы сделать публичную страницу главной, в настройках главной переключите корень сайта на публичную страницу. В видео это действие не выполнялось.
15. 4:16 Кнопки баннера и меню можно вести на любую ссылку: страницу курса, форму оплаты из платёжных форм, документы или внешний ресурс. Текст кнопок меняется произвольно.
16. 5:14 Кнопку Кабинет ученика можно также добавить в футер. Её стоит продублировать вверху и внизу, так как ученики ищут вход в разных местах.
17. 5:34 Сохраните изменения и проверьте школу: кнопки вверху и внизу страницы должны работать.

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

1. 0:00 Перейдите в раздел Сайт. Там два раздела: Курсы и Страницы. В курсах добавляются курсы, вебинары и то, что вы продаёте, например лид-магниты. В Страницах добавляется документация.
2. 0:14 Откройте раздел Курсы и нажмите Создать новый курс.
3. 0:28 Заполните название курса. В примере это школа детского рисования.
4. 0:42 Заполните краткое описание — оно отображается в каталоге, и подробное описание — оно отображается на странице курса.
5. 0:50 Укажите ссылку на обложку. Рекомендуемый размер — 600 на 400 пикселей, можно загружать и большего размера. Для поиска бесплатных изображений в примере используется сервис Pixel. Не рекомендуется брать фотографии из поисковиков, так как за их использование могут предъявить права.
6. 2:43 Загрузите изображение в галерею изображений, скопируйте его URL и вставьте ссылку в поле ссылка на обложку.
7. 3:00 Укажите цену и цену со скидкой. В примере — 7 000 рублей и 5 500 рублей.
8. 3:13 Добавьте блоки описания. Каждый блок — это расширенное описание курса. В примере создано четыре блока.
9. 3:51 Добавьте блоки цен. Первичная цена указывается в основной части курса. Если нужно несколько вариантов цен, добавьте их блоками цен. В примере создано три тарифа:
   • Старт: заголовок «Тариф старт», цена со скидкой 2 500 (значение основной цены в записи неразборчиво), описание «видео-уроки, без поддержки»;
   • Мастер: второй тариф, в записи описание не проговорено;
   • Бизнес: заголовок «Тариф бизнес», цена 5 000 и цена со скидкой 4 500 (в записи также назван вариант 25 000 со скидкой 15 000), описание «поддержка, проверка домашних заданий: чат поддержки и личная проверка автора».
10. 4:15 Для каждого тарифа укажите ссылку на переход и текст кнопки. Текст кнопки — «Купить».
11. 4:39 Для ссылок оплаты создайте платёжные формы в разделе платёжных форм. В примере создаются три формы, и каждая ссылка ведёт на свою форму оплаты. Подробнее о платёжных формах рассказано в отдельных уроках.
12. 6:15 Нажмите Сохранить курс. Курс появится в разделе курсов. Перейти на его страницу можно по значку глаза.
13. 6:23 На странице курса отображаются обложка, описание, программа и три тарифа.
14. 6:37 На главной странице появляется каталог. Система сама рассчитывает скидку. В каталоге можно вручную задать цену, например минимальную, для привлечения внимания.
15. 7:10 Чтобы сделать курс бесплатным, в настройках курса удалите стоимости, указав вместо них 0, и сохраните курс. Система автоматически определяет нулевую стоимость и создаёт вкладку Бесплатно. В карточке с нулевой стоимостью можно нажать кнопку «Купить».
16. 8:01 Значки, которые были добавлены к пунктам тарифа с помощью галочек, в текущей версии не поддерживаются, поэтому их нужно исправить.
17. 8:14 Сохраните изменения и проверьте результат.

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

1. 0:00 В подвале сайта есть раздел Документация, где должны отображаться три документа: договор оферты, пользовательское соглашение и политика в отношении обработки персональных данных или политика конфиденциальности.
2. 0:24 Документы должны быть доступны не только на сайте, но и в форме приёма платежей, при регистрации в школе и в других местах. Желательно, чтобы все три документа присутствовали везде.
3. 0:39 Создайте страницу: откройте Сайт → Страницы и нажмите Создать новую страницу.
4. 0:54 Введите Название, например «Договор оферты». Длинное описание не нужно. В поле адреса страницы (анкор) достаточно одного слова на английском языке.
5. 1:09 Вставьте текст документа в содержимое страницы. В видео для демонстрации использован готовый текст. Нажмите Сохранить страницу.
6. 1:18 Вернитесь в раздел сайта и откройте Страницы. Документ появится в списке. Нажмите Переход, чтобы открыть его. Ссылку на страницу можно скопировать.
7. 1:45 Чтобы добавить документ на сайт, откройте Настройки → Сайт, прокрутите вниз до ссылок на документы и добавьте элемент. Укажите название, например «Договор оферты», вставьте ссылку на страницу и сохраните изменения.
8. 1:54 Документ появится на сайте, например в подвале. Ссылку на документ можно использовать и в других местах.
9. 2:18 В разделе Документы включите собственные ссылки. Вставьте ссылку на договор оферты в поле первого URL и сохраните изменения.
10. 2:33 Политику конфиденциальности и обработку данных создаются так же. Для каждого документа включите собственную ссылку и вставьте адрес созданной страницы в соответствующее поле.
11. 2:57 Откройте Платежные формы. Здесь появятся галочки согласия с политикой конфиденциальности и с условиями договора оферты. Сейчас эти пункты обязательны по закону при работе с платёжными системами, поэтому не пропускайте их.
12. 3:25 Такие же документы отображаются при регистрации нового ученика. Ученик даёт согласие на обработку своих данных.

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

Социальные сети и оформление

1. 0:06 Откройте Настройки и перейдите на вкладку Соц. сети.
2. 0:21 Укажите ссылки на свои соцсети: Ссылка на YouTube, Ссылка на VK, Ссылка на Instagram, Ссылка на Facebook и Ссылка на Telegram (канал или чат). Нажмите Сохранить изменения.
3. 0:40 Кнопки соцсетей появятся в кабинете школы, а после обновления страницы — и в подвале сайта.
4. 0:56 На тарифах Бизнес и Эксперт в разделе Настройки → Оформление в самом низу доступны Цвета сайта: Основной цвет отвечает за синий фон подвала, Дополнительный цвет — за красные кнопки.
5. 1:37 Чтобы поменять цвета, укажите новые значения, например сделайте Основной цвет зеленоватым, а Дополнительный цвет синеватым. Нажмите Сохранить изменения и обновите школу — изменятся цвет подвала и кнопок.
6. 2:13 Чтобы вернуть прежние цвета, нажмите Установить стандартные под нужным цветом и сохраните изменения.

Вход в кабинет и публичный сайт

7. 2:41 Во вкладке Сайт в блоках Элементы меню и Элементы меню футера добавьте пункт Кабинет ученика. Ссылка должна вести на адрес школы с окончанием /login. Кнопка входа должна быть и в шапке, и в подвале, чтобы ученик мог перейти в школу.
8. 3:06 В блоке Доступ к посещению сайта выберите, кто сможет открывать сайт: Все, Администратор + авторы или Только администратор.
9. 3:07 Во вкладке Главное в поле Корень сайта выберите Публичный сайт и сохраните изменения.
10. 3:17 Удалите из адреса /login, чтобы открыть сайт школы. Теперь главная страница школы будет открываться как публичный сайт, и все посетители будут попадать сюда.
11. 3:32 Публичный сайт индексируется поисковыми системами, поэтому его контент может появляться в поиске.
12. 3:44 Прежде чем подавать сайт на подключение платежных систем, добавьте хотя бы два продукта — бесплатный и платный, так как платежным системам нужно видеть, что вы продаете. Заполните договор оферты, пользовательское соглашение, политику конфиденциальности и другие документы. Телефон указывается по желанию.

Логотип

13. 4:16 Перейдите в Настройки → Оформление. В поле Логотип показан логотип, который уже используется в школе.
14. 4:23 Чтобы использовать другой логотип, сначала загрузите его в Галерею изображений, затем вставьте ссылку на него в нужное поле.
15. 4:40 Заполните поля Логотип раздела сайта и Логотип раздела сайта в футере. Они могут отличаться, а в видео для примера оба поля заполнены одинаково. Нажмите Сохранить изменения.
16. 4:55 Обновите сайт: логотип в шапке кликабельный и ведет на главную страницу, а логотип в футере подстраивается под планшет и телефон. Для подвала лучше подготовить отдельную светлую версию логотипа.