Your AI powered learning assistant

Как создать онлайн-курс, LMS, образовательный веб-сайт, такой как Udemy, с помощью WordPress 2023 - Tutor LMS

Introduction & Demo Website Tour

00:00:00

Создание профессионального веб-сайта онлайн-курса Узнайте, как создать профессиональный и красивый веб-сайт онлайн-курса, используя WordPress, бесплатные темы, конструкторы страниц и плагины LMS. На веб-сайте будут представлены функции, вдохновленные ведущими веб-сайтами LMS, такими как Udemy и Skillshare. Вы можете создавать как платные, так и бесплатные курсы с различными типами лекций и викторин. Преподаватели также могут преподавать на веб-сайте и получать комиссионные от продажи курсов.

Разработка простого в использовании веб-сайта [Опишите особенности дизайна веб-сайта.] Домашняя страница имеет простой заголовок с логотипом, строку поиска, главное меню, значок корзины для добавления товаров или блюд в корзину. У пользователей есть своя собственная пользовательская панель управления, где они могут управлять информацией своего профиля, просматривать зарегистрированные курсы или те, которые включены в список желаний. Преподаватели могут редактировать созданные ими курсы с этой панели мониторинга, а также выводить деньги, заработанные от продажи курсов, через различные платежные шлюзы.

Best & Fastest WordPress Hosting

00:13:18

Выбор доменного имени и хостинга Чтобы создать любой веб-сайт, вам нужны две основные вещи: доменное имя и хостинг. Доменное имя - это URL вашего веб-сайта, в то время как хостинг - это место, где сохраняется весь ваш веб-сайт. Хороший хостинг обеспечивает высокую скорость, производительность, безопасность и лучший рейтинг в результатах поиска. Hostinger предлагает доступные тарифные планы хостинга WordPress с такими функциями, как SSD-накопитель, неограниченная пропускная способность, бесплатный SSL-сертификат и CDN.

Выбор наилучшего тарифного плана хостинга Пакет "WordPress Startup" от Hostinger рекомендуется большинству пользователей, поскольку он позволяет размещать до 100 веб-сайтов на одном тарифном плане. Он включает в себя SSD-накопитель емкостью 100 ГБ, который обеспечивает более высокую производительность по сравнению с обычным жестким диском. План также предлагает бесплатную учетную запись электронной почты для бизнеса, а также неограниченную пропускную способность и базы данных. Кроме того, в пакет включены такие функции, как бесплатный SSL-сертификат и Cloudflare CDN.

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

Настройка вашего веб-сайта с помощью Hostinger Кнопка "Начать сейчас" инициирует процесс настройки, в ходе которого вас спросят о том, для кого предназначен веб-сайт и к какому типу он относится (бизнес-блог/портфолио/интернет-магазин). При желании вы можете пропустить этот опрос. При выборе WordPress в качестве вашей платформы требуется указать адрес электронной почты и пароль для последующего доступа к его панели мониторинга. Шаблоны рекомендуются, но также могут быть пропущены, если в них нет необходимости. У вас есть три варианта доменного имени: запросить бесплатный домен у Hostinger или использовать существующий, зарегистрированный в другом месте, например, GoDaddy или Namecheap; в качестве альтернативы бесплатно перенести с другого хостера (объяснено позже). Наконец, выберите предпочтительное местоположение сервера перед завершением настройки, которая установит WordPress на выбранное доменное имя.

Basic WordPress Settings

00:30:09

Установка WordPress и панель мониторинга SSL-сертификат теперь активен, позволяя принудительно использовать https. Получите доступ к панели управления WordPress, введя свое доменное имя, а затем /WP-admin. Панель мониторинга - это то место, где вы контролируете все на своем веб-сайте, включая курсы, платежи и создание контента.

Основные настройки и кастомизация - Удалите ненужные виджеты с главной панели мониторинга. - Удалите запись в блоге по умолчанию "Hello World" в разделе "Опубликовать". - Управление медиафайлами в медиатеке. - Создавайте пользовательские страницы, используя опцию Pages. - Модерируйте комментарии, полученные к курсам или записям в блоге, в разделе комментариев. В разделе Настройки внешнего вида: - Активируйте тему, чтобы изменить дизайн веб-сайта (активирована тема 2023 года). Опция плагинов позволяет добавлять дополнительные функции на ваш сайт, такие как функциональность LMS для веб-сайтов онлайн-курсов или связанные с оплатой плагины для приема платежей.

Link GoDaddy Domain with Hostinger

00:36:58

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

Добавление нового веб-сайта или домена Кнопка "Создать или перенести наш веб-сайт" позволяет вам добавить новый веб-сайт или домен. Чтобы перенести существующий веб-сайт, выберите "перенести мой веб-сайт" и укажите регистрационные данные WordPress для переноса. Чтобы создать новый сайт WordPress, выберите "создать новый веб-сайт", настройте учетные данные учетной записи, пропустите рекомендации по подключению и выбору шаблона, если это не требуется. Выбирайте между заявкой на бесплатные домены или использованием существующего домена от стороннего хостинг-провайдера, такого как GoDaddy.

Installing Themes & Plugins

00:40:47

Установка тем и плагинов После завершения установки WordPress нам необходимо установить темы и плагины. Мы будем использовать бесплатную тему под названием Tutor Starter и плагин под названием Tutor LMS для создания веб-сайта онлайн-курса. Чтобы установить тему, перейдите по ссылке 'blog2.com/tutor " на новой вкладке загрузите ZIP-файл, затем загрузите его на свою панель мониторинга. Активируйте тему после установки. Далее установите два рекомендуемых плагина: Tutor Mate и Tutor LMS (бесплатная версия). Для проектирования страниц нам также понадобится Elementor page builder, который можно загрузить с сайта 'blogdoot.com/Elementor '. Установите также этот плагин.

Чтобы принимать онлайн-платежи за платные курсы или создавать формы рассылки новостей на своем веб-сайте, установите WooCommerce, выполнив поиск в разделе плагины на панели управления. Кроме того, необходимы еще два важных плагина: - Дополнения TutoLMS Elementor - MC4WP MailChimp для WordPress Плагин Contact Form 7 необходим для создания контактных форм на вашем сайте. после установки всех этих необходимых плагинов вы можете сразу активировать их из меню "Массовые действия" в разделе "Плагины" панели мониторинга.

Tutor LMS Setup

00:49:20

Чтобы настроить Tutor LMS для вашего веб-сайта, нажмите "Активировать", а затем "Подать заявку сейчас". Выберите, создаете ли вы индивидуальный веб-сайт или веб-сайт торговой площадки. Выберите параметры для профилей инструктора и студента, постоянных ссылок на уроки, разделов вопросов и ответов, биографии инструктора, настроек отображения курса, новых регистраций и получения комиссионных. Отключите гостевую регистрацию, чтобы требовать создания учетной записи перед покупкой курсов. Установите процент комиссионных для инструкторов и администраторов. Включите способы вывода средств с помощью банковского перевода, электронного чека и PayPal.

Tutor LMS Settings

00:53:51

Настройка страниц и торговой площадки Ссылка настройки Tutor LMS позволяет вам пропустить настройку магазина. Вы можете автоматически создавать такие страницы, как "магазин", "оформить заказ" и "карточка", с помощью плагина WooCommerce. Страница панели мониторинга выбрана по умолчанию в настройках. Вы можете отредактировать страницу политики конфиденциальности и опубликовать ее как свою собственную. Включите или отключите функции marketplace, позволяющие преподавателям публиковать курсы.

Конфигурация курса - Студентам не нужно входить в систему для просмотра курсов. - Преподаватели и администраторы могут просматривать содержание курса без регистрации. - Опция пересдачи курса позволяет учащимся сбросить прогресс. - Для публикации обзора курса требуется одобрение администратора. - Включен редактор WP для уроков с доступными вариантами комментариев.

Create Course

00:59:32

Создание нового курса Чтобы создать новый курс, нажмите на "Курсы" в разделе Tutor LMS. Затем нажмите на кнопку "Добавить новый", чтобы начать создавать свой курс. Существует два типа курсов: бесплатные и платные.

Процесс создания "Бесплатного курса" - Введите название и описание вашего бесплатного курса. - Установите максимальное количество учащихся (или установите его как неограниченное). - Выберите уровень сложности. - Обязательно требуйте регистрации на этот общедоступный курс. - Используйте теги и категории для организации ваших курсов. - Загрузите рекомендуемое изображение, представляющее содержание вашего курса.

Adding Video Lesson in Course

01:08:37

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

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

Article Lesson

01:22:32

Чтобы создать урок, нажмите на кнопку "Добавить урок". Вы можете добавить текст и изображения к своему уроку, скопировав и вставив содержимое или загрузив медиафайлы. Не забудьте выбрать "Выбрать источник видео", если вы не хотите включать видео в свой урок.

Creating Quiz

01:23:43

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

WooCommerce Payment Gateways

01:28:30

Настройка WooCommerce Чтобы настроить WooCommerce для приема платежей, перейдите в настройки и введите свой юридический адрес, название штата, название страны, почтовый индекс и валюту. Сохраните изменения. Затем загрузите платежные плагины, такие как Stripe (для Европы и США), Razorpay (для Индии) или PayPal (принимаются в большинстве стран). Установите эти плагины, но пока не активируйте их. После установки активируйте все три плагина сразу. Теперь вернитесь в настройки WooCommerce и нажмите на Платежи, чтобы увидеть добавленные опции.

Настройка платежных шлюзов - Настройте PayPal, войдя в систему с данными вашей учетной записи в разделе Настройки API. - Подключитесь к бизнес-аккаунту PayPal, если он у вас есть; в противном случае преобразуйте свой обычный аккаунт в бизнес-аккаунт. - Для интеграции с Stripe: выберите производственную среду в разделе Настройки API, нажмите кнопку "Нажмите, чтобы подключиться", войдите в систему, указав адрес электронной почты и пароль stripe, и выберите / подключите свою учетную запись stripe. - Для настройки Razorpay: получите идентификатор ключа и секрет вручную из dashboard.razerpay.com/settings/API страница с ключами; вставьте эти значения в настройки плагина RazerPay.

Link Product with Course

01:36:16

Привязка продукта к курсу Чтобы сделать курс платным, вам нужно связать его с продуктом. Скопируйте название курса и создайте новый продукт в WooCommerce. Установите цену на товар и пометьте его как виртуальный и только для преподавателей. Затем вернитесь на страницу вашего курса, выберите опцию "платный", выберите то же название из списка продуктов и обновите страницу.

Создание кодов купонов Вы можете создавать коды купонов для продвижения своего веб-сайта, предлагая скидки. Перейдите в WooCommerce > Купоны > Добавить опцию купона. Введите код типа "скидка 10", установите тип скидки (фиксированная или процентная), сумму (например, 10%), ограничения на использование (только для индивидуального использования), опубликуйте его.

Create Home Page

01:43:37

Создание домашней страницы Чтобы создать домашнюю страницу, перейдите на свою панель мониторинга и нажмите "Страницы" > "Добавить новую". Назовите страницу "Главная" и выберите шаблон Elementor во всю ширину. Опубликуйте страницу. Установите эту новую страницу в качестве своей домашней страницы в разделе Настройки > Чтение. Теперь вы можете создать свою домашнюю страницу с помощью Elementor.

Создание домашней страницы с помощью Elementor - Используйте элементы боковой панели Elementor для оформления разделов вашего веб-сайта. - Каждая секция разрабатывается отдельно. - Вы можете добавить столбцы в каждом разделе, нажав на кнопку "+". - Перетаскивайте элементы, такие как кнопки или значки, в каждый столбец. - Настройка параметров элемента для содержимого, стиля и дополнительных опций.

Создание домашней страницы В этой главе мы узнаем, как создать домашнюю страницу. Мы начинаем с изменения высоты строки и используем em вместо пикселей для определения расстояния между строками. Затем мы добавляем текст с помощью текстового редактора и оформляем его черным цветом и типографикой всплывающих окон. Далее мы добавляем кнопку с надписью "Изучить курсы" и перенаправляем ее на страницу нашего архива курсов.

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

Download Free Images

02:00:05

Поиск бесплатных изображений Чтобы найти бесплатные изображения, вы можете посетить такие веб-сайты, как unsplash.com , pixels.com , или freepik.com . Эти сайты предлагают изображения, не защищенные авторским правом, которые вы можете использовать для своего веб-сайта.

Загрузка и редактирование изображений - Загрузите желаемое изображение с одного из бесплатных веб-сайтов с изображениями. - Используйте такой инструмент, как remove.bg чтобы удалить фон изображения. - После редактирования загрузите и сохраните новый файл прозрачного изображения.

Использование фоновых изображений - Загрузите выбранное вами фоновое изображение в конструкторах веб-сайтов, таких как Canva, или с помощью пользовательского кода. - Отрегулируйте такие настройки, как повтор / отсутствие повтора и размер / позиционирование, чтобы добиться желаемого внешнего вида.

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

Создание встречного раздела "Плоская иконка" рекомендуется для загрузки бесплатных иконок. Используйте элементы изображения для добавления значков и счетчиков с указанием количества учащихся.

Раздел категории проектирования Используйте внутренние столбцы в одном элементе column для создания четырех различных разделов с изображениями, заголовками, субтитрами / описаниями предлагаемых курсов.

Make Website Mobile Friendly

02:29:23

Чтобы сделать сайт удобным для мобильных устройств, нам необходимо скорректировать его внешний вид и верстку. Во-первых, мы можем добавить интервал вверху и внизу, установив отступ в 50 пикселей вверху и 75 пикселей внизу. Далее мы меняем цвет на белый, используя код FFF шесть раз. После обновления этих изменений мы завершили адаптацию этой домашней страницы для мобильных устройств на рабочем столе. Однако при просмотре на мобильном телефоне или планшете он выглядит по-другому и нуждается в дальнейшей корректировке. Чтобы сделать это: 1) Откройте адаптивный режим в вашем браузере. 2) Измените параметр ширины на 400 для лучшей видимости на экране меньшего размера. 3) Выровняйте текстовые элементы, такие как заголовки или кнопки, по центру только для мобильных устройств, сохраняя их выровненными по левому краю для настольных компьютеров. 4) Отрегулируйте размеры шрифта специально для мобильных телефонов (например, уменьшите размер по умолчанию). 5) Измените поля или отступы по мере необходимости (например, уменьшите правое поле с 30 пикселей до нуля). Цель состоит в том, чтобы убедиться, что все элементы правильно выровнены и имеют размер в соответствии с размерами экрана каждого устройства.

Create Blog Posts

02:34:36

Чтобы создать новую запись в блоге, нажмите на опцию "Опубликовать" с левой стороны. Удалите все существующие фиктивные записи и нажмите на "Добавить новые". Введите свой заголовок и содержание для записи в блоге. Вы также можете добавлять изображения или использовать Elementor для настройки вашего макета. С правой стороны вы можете назначить категории для своей записи в блоге и установить рекомендуемое изображение.

Import Other Pages

02:36:05

Чтобы создать разные страницы на вашем веб-сайте, перейдите в раздел "Страницы" и нажмите "Добавить новые". Начните с создания страницы "О нас", присвоив ей заголовок "О нас" и выбрав шаблон во всю ширину. Опубликуйте страницу и отредактируйте ее с помощью Elementor. Вместо изменения дизайна всей страницы вы можете импортировать предварительно разработанные шаблоны для каждой страницы из предоставленной папки мультимедиа. Импортируйте шаблоны, нажав на "Добавить шаблон", затем выберите "Файл" и выберите нужный шаблон из папки "Страницы". После импорта вставьте их на соответствующие страницы. Повторите этот процесс для других страниц, таких как страница контактов, страница блога, страница инструкторов и т.д., Обязательно меняя заголовки по мере необходимости.

Header & Footer

02:41:21

Создание главного меню Чтобы создать главное меню, перейдите в раздел Внешний вид > Меню. Добавьте такие страницы, как "Главная", "О компании", "Контакты", "Регистрация преподавателя" и "Регистрация студента". Также добавьте пользовательскую ссылку на страницу курсов. Измените порядок пунктов меню по желанию и сохраните его в качестве основного меню.

Создание меню нижнего колонтитула - Создайте три нижних колонтитула меню: Быстрые ссылки, Ресурсы и поддержка. - Добавьте соответствующие ссылки в каждое меню нижнего колонтитула. - Перейдите в "Внешний вид" > "Виджеты" и выберите "Виджет нижнего колонтитула 2" для быстрых ссылок с виджетом меню навигации, используя "Нижний колонтитул 1" в качестве источника. - Повторите этот процесс для ресурсов (используя "Нижний колонтитул 1") в виджете нижнего колонтитула 3 и поддержки (также используя "Нижний колонтитул 1") в виджете нижнего колонтитула4.

Final Customization

02:48:04

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

Instructor Setup

02:51:22

Настройка инструктора Узнайте, как настроить инструкторов на вашем веб-сайте. Преподаватели могут регистрироваться, создавать курсы и получать комиссионные за продажи. Администраторы должны одобрить заявки инструкторов, прежде чем они смогут приступить к созданию курсов.

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