TutorLMSとElementorを使用してオンラインコースを構築する方法

知識を共有することは素晴らしいことであり、オンラインコースを含むさまざまな形で提供されます。 オンラインコースは、知識を求める人々に力を与えるだけでなく、知識を生み出す人々にも力を与えます。 オンラインコースでは、視聴者を増やし、権威としての地位を確立し、コンテンツを収益化したい場合はお金を稼ぐこともできます。

ただし、特に開発者でない場合は、オンラインコースの作成は簡単な作業ではありません。 このタスクを支援するために、ElementorはTutorLMSと協力しました。

Tutor LMSは、WordPress LMS（Learning Management System）プラグインであり、次のような主要な「コース」の側面をすべて処理します。

• コース、レッスン、クイズ、課題などを作成します。
• コースへのアクセスを管理し、必要に応じて1回限りまたは定期的な支払いを請求することもできます。
• コース受講者へのアナウンスの送信や学生の質問への回答など、学生の管理とやり取り。

Tutor LMSの特に便利な点は、Elementorとの緊密な統合を提供し、Elementorのビジュアルインターフェイスと25以上のカスタムウィジェットを使用してすべてのコースコンテンツを設計できることです。 このデュオを使用すると、Elementorを使用してサイトを設計する機能を維持しながら、柔軟なコースを作成することができます。

このステップバイステップガイドでは、ElementorとTutorLMSを使用してオンラインコースを構築する方法を正確に説明します。 掘り下げましょう！

チュートリアルに入る前に、このガイドで作成する内容を正確に簡単に説明します。

Tutor LMSを使用すると、さまざまなレッスンやクイズなどを備えた、任意のトピックに関する独自のカスタムコースを設定できます。次に、ElementorおよびTutor LMSの25以上のウィジェットを使用して、コースページのデザインを作成できます。

これがどのように見えるかの例です–すべてのコンテンツはTutor LMSからのものですが、デザインはElementorによって提供されています。

学生はあなたのコースレッスンとクイズを進めることができます。 また、登録済みのコースを管理し、進捗状況を追跡できる独自のフロントエンドダッシュボードを取得します。

コースの所有者は、コース、学生、収益などを管理できるフロントエンドとバックエンドのダッシュボードも利用できます。 また、アナウンスやQ＆Aを通じて学生と交流することもできます。

これは、構築しているもののアイデアを提供するための簡単なツアーです。完全なチュートリアルを実行すると、さらに多くのことがわかります。

オンラインコースを作成する準備はできていますか？

コースを開始するために従う必要のある手順の概要は次のとおりです。

1. 基本的なWordPressサイトをセットアップし、必要なプラグインをインストールします。
2. TutorLMSを使用してコースコンテンツを追加します。
3. Elementorを使用してコースページをデザインします。
4. アクセス料金を請求する場合は、WooCommerce経由で支払いを設定します。
5. サードパーティのインストラクターを許可するかどうかなど、必要に応じてその他の設定を構成します。

掘り下げましょう！

オンラインコースの構築を開始する前に、基本的なWordPressサイトをセットアップし、必要なプラグインをインストールする必要があります。

WordPressをまだセットアップしていない場合、最初のステップはWordPressホスティングを選択し、WordPressソフトウェアをインストールすることです。

オンラインコースに適したホストを選択するために、Elementorの推奨ホストを参照し、リストから1つを選択できます。WordPressホスティングを選択するためのヒントをいくつか紹介します。

ホスティングを購入したら、ホストのWordPressインストーラーツールを使用して、オンラインコース用の新しいWordPressサイトを作成します。

ここで何か助けが必要な場合は、WordPressWebサイトの作成に関するElementorガイド全体を確認してください。

基本的なWordPressWebサイトを入手したら、次のステップは必要なプラグインをインストールして構成することです。

コースを作成するために必要な必須およびオプションのプラグインは次のとおりです。

• Elementor –必須–無料のコアElementorプラグインを使用すると、視覚的なドラッグアンドドロップエディターを使用してコースコンテンツやその他のページをデザインできます。
• Elementor Pro –オプション– Elementor Theme Builderを使用してサイトを設計する場合は、ElementorProをインストールする必要があります。 ただし、Tutor LMSコースを設計するには、無料バージョンのElementorのみが必要です。
• Tutor LMS –必須–無料のTutor LMSプラグインは、すべてのコースコンテンツ、レッスン、クイズ、学生/インストラクター管理などを強化するエンジンを提供します。基本的に、すべてのコース機能。 アクティブ化するとすぐにセットアップウィザードが起動します。必ず手順に従って、コースのいくつかの重要な基本を構成してください。
• Tutor LMS Pro –オプション–このチュートリアルに従うためにプレミアムバージョンは必要ありません。 しかし、それはあなたのコースを次のレベルに引き上げるために多くの機能を追加するので、あなたはそれを検討したいかもしれません。
• Tutor LMS Elementorアドオン–必須–この無料のプラグインは、Elementorを使用してオンラインコースを設計できる25以上のElementorウィジェットを提供します。
• WooCommerce –支払いを受け入れる場合に必要–コースを収益化し、1回限りまたは定期的な支払いを受け入れる場合は、WooCommerceが必要です。 設定についてサポートが必要な場合は、WooCommerceチュートリアル全体の「WooCommerceの設定方法」セクションを確認してください（ただし、Elementor WooCommerceBuilderで製品ページテンプレートを作成する必要はありません。オンラインコース）。

最後に、コースの基本設計も設定する必要があります。 チュートリアルの後半でElementorを使用してコースページをデザインする方法を説明しますが、ホームページやその他の主要なページの基本デザインを設定することをお勧めします。

ここにはいくつかのオプションがあります。

まず、無料のHelloテーマを使用してから、Elementorのオンラインコーステンプレートキットをインポートできます。 これは、コースのすべてのコアページを設定し、Elementor ThemeBuilderを使用してサイトのデザインをカスタマイズするのに役立つ完全なテンプレートセットです。

または、TutorStarterのような専用のTutor LMSテーマを使用することもできます。これは、Elementorで構築された構築済みのデモサイトを提供します。 デモサイトの1つをインポートしてから、Elementorのインターフェイスを使用してすべてをカスタマイズできます。

このチュートリアルでは、TutorStarterのElementorを利用したデモサイトの1つを使用します。ただし、お好みのアプローチを選択できます。

TutorStarterのElementorデザインの1つをインポートすると次のようになります。

これで、コースの内容とレッスンを設定する準備が整いました。 次に、次のセクションでは、Elementorを使用してコースコンテンツのデザインを制御する方法を学習します。

最初のコースを作成するには、 TutorLMS→コース→新規追加に進みます。

まず、タイトル、説明、カテゴリ/タグ、 [コース設定]ボックスのオプション、[追加データ]ボックスのオプションなど、コースの基本的な詳細をすべて入力します。 専用のコース紹介ビデオを設定することもできます。

それが済んだら、ドラッグアンドドロップのコースビルダーボックスを使用してコースの構造を設定できます。

コースをさまざまな「トピック」に分割できます。 各トピック内に、レッスン、課題、ライブレッスン、およびクイズを追加できます。 これがどのように機能するかを示す図です。

開始するには、[コースビルダー]ボックスに新しいトピックを追加します。 各トピック内に、レッスンまたはクイズを追加するためのプロンプトが表示されます（これらについては次で詳しく説明します）。 Tutor LMS Proを使用すると、割り当てとズームライブレッスンのオプションも表示されます。

何かの順序を変更する必要がある場合は、ドラッグアンドドロップを使用できます。

レッスンを追加してその内容を制御するには、コースビルダーの[レッスン]リンクをクリックします。 これにより、次のことができるポップアップが開きます。

• レッスンの名前を追加します。
• レッスンのテキストコンテンツをエディターに含めます。
• レッスンのビデオを設定します。 通常、YouTubeまたはVimeoの動画を埋め込むことをお勧めします。 Tutor LMSには、独自のビデオプレーヤーを使用するオプションが含まれています。これにより、訪問者が希望しない場合にコースビデオを共有できなくなります。
• 必要に応じて添付ファイルをアップロードします。

次に、コースビルダーのトピックの下にレッスンが表示されます。

このプロセスを繰り返して、コースに含めるすべてのレッスンを追加します。 繰り返しますが、レッスンの順序を変更したり、別のトピックに移動したりする必要がある場合は、ドラッグアンドドロップを使用できます。

コースにクイズを追加する場合は、レッスンを追加するのと同じように機能します。 まず、クイズを追加するトピックの[クイズ]リンクをクリックします。 これにより、クイズを構成したり質問を追加したりできるポップアップが開きます。

無制限の質問を追加して、さまざまな種類の質問から選択できます。 採点のために質問にポイント値を割り当てるなど、他の設定も取得します。

より多くの種類のクイズの質問にアクセスするには、TutorLMSのプレミアムバージョンにアップグレードすることをお勧めします。 短い回答、マッチング、画像マッチング、画像回答などの新しい質問タイプが含まれています。

クイズの設定では、次のような詳細を構成することもできます。

• 時間制限。
• フィードバックモード。
• 再試行が許可されるかどうか。 もしそうなら、いくつ。
• 合格点。
• NS。

終了すると、クイズがコースビルダーに表示されます。 このプロセスを繰り返してクイズを追加し、必要に応じてドラッグアンドドロップを使用してコース内の配置を変更できます。

コースビルダーでコースの構造に満足したら、コースをプレビューして公開する準備が整います。

プレビューするには、他の種類のWordPressコンテンツをプレビューする場合と同じように、右上隅にある[プレビュー]オプションをクリックするだけです。 デザインについてはあまり心配しないでください。次にそれを制御する方法を学びます。 コースの一般的な構造が正しく表示され、必要な詳細がすべて追加されていることを確認するだけです。

すべてに満足したら、[公開]ボタンをクリックしてコースを公開できます。

この時点で、すべてのコースコンテンツをサイトのバックエンドに追加しました。 これで、Elementorを使用してそのコンテンツをフロントエンドに表示する準備が整いました。

サイトの他の部分を設計できることに加えて、Tutor LMSのElementor統合により、コースのテンプレートを設計する2つの方法が提供されます。

1. すべてのコースに適用されるグローバルテンプレートを作成できます。
2. 個々のコースのグローバルテンプレートを上書きして、カスタムデザインを作成できます。

最初にコーステンプレートの設計方法を確認してから、コースを紹介するページの作成など、他の領域について説明します。

開始するには、TutorLMSコンテンツに使用することをElementorに伝える必要があります。 これを設定するには、 Elementor→Settingsに移動します。 [全般]タブで、[投稿の種類]リストの次のチェックボックスをオンにします。

• コース
• レッスン
• クイズ
• 割り当て

次に、Elementorを使用して、すべてのコースがデフォルトで使用するグローバルテンプレートを作成できます。

開始するには、ダッシュボードの[テンプレート]領域に移動し、[新規追加]をクリックします。 ポップアップで、ドロップダウンから[ページ]を選択し、[チューターLMSシングルコーステンプレート]のチェックボックスをオンにします。 次に、覚えやすい名前を付けます。

これで、Elementorインターフェースが表示されます。 コースコンテンツを追加するには、専用のTutorLMSウィジェットを使用できます。

それらを追加すると、Tutor LMSは、Elementor Theme Builderを使用しているかのように、実際のコースのコンテンツを自動的に入力します。

ほとんどのウィジェットを使用することをお勧めしますが、その情報を表示したくない場合は、特定のウィジェットを省略できます。 忘れたくないウィジェットの1つは、コース登録ボックスです。これは、訪問者がコースに登録するために使用するものです。

他のすべてのElementorウィジェットも使用できるので、自由にデザインを作成してください。

外観に満足したら、[公開]をクリックしてグローバルテンプレートを公開します。

必要に応じて、Elementorを使用して、個々のコースのグローバルコーステンプレートを上書きすることもできます。

これを行うには、コースのエディターを開きます（ Tutor LMS→Courses ）。 次に、[ Elementorで編集]ボタンをクリックして、そのコースのElementorインターフェイスを開きます。

複数のコースがある場合、コースアーカイブページはすべてのコースを一覧表示するページであり、訪問者はあなたが提供するすべてのものを見つけることができます。

コースがたくさんある場合は、専用のコースアーカイブページを作成することをお勧めします。 または、コースのリストを別のページ（ホームページなど）に含めることもできます。 または、両方を実行することをお勧めします。

コースの一部またはすべてを表示しやすくするために、Tutor LMSには2つの専用Elementorウィジェットが付属しており、それぞれに多くのサブオプションが含まれています。

1. コースリスト
2. コースカルーセル

コースリストウィジェットを使用すると、4つの異なる「スキン」を使用してすべてのコースの単一列または複数列のリストを表示できます。

• クラシック
• カード
• 積み上げ
• オーバーレイ

ウィジェットの設定には、メタデータの制御、ボタンの登録、ページ付けなどを行うための他の多くのオプションもあります。 コースがたくさんある場合は、クエリルールを使用して、特定のコースをカテゴリまたはインストラクターで除外することもできます。

コースカルーセルウィジェットには同じ基本オプションとスキンがありますが、リストではなくカルーセルビューでコースが表示されます。

ナビゲーション、自動再生、無限ループなどを制御するための追加オプションが表示されます。以下では、「オーバーレイ」スキンに切り替えたことがわかります。

これらのElementorウィジェットを使用してコースを一覧表示することに加えて、 Tutor LMS→[設定]→[コース]に移動すると、実際のコースアーカイブページを指定することもできます。

無料のコースのみを提供したい場合は、このセクションで何も設定する必要はありません。 ただし、コースへのアクセスに対して課金する場合は、今すぐ設定する必要があります。

Tutor LMSは、WooCommerce、Easy Digital Downloads（EDD）、Paid Memberships Pro（人気のあるWordPressメンバーシッププラグイン）など、支払いを受け入れるための複数のオプションを提供します。 ただし、このセクションでは、WooCommerceの統合に焦点を当てます。

コアのWooCommerceプラグインを使用して1回限りの支払いを受け入れることができます。 自動定期支払いを受け入れる場合は、人気のあるWooCommerceサブスクリプションプラグインを購入する必要があります。

コースへのアクセスに対して課金するには、通常のWooCommerce製品を作成し、それをコースの1つにリンクします。 次に、その製品の詳細がコースリストページに表示され、学生は通常のWooCommerceチェックアウト（および構成した支払いゲートウェイ）を使用してチェックアウトできます。

繰り返しになりますが、WooCommerceのセットアップの基本（支払いゲートウェイの構成など）についてサポートが必要な場合は、ElementorWooCommerceの完全なチュートリアルを確認してください。

WooCommerceで基本を設定したら、TutorLMSで設定する方法は次のとおりです。

まず、TutorLMS設定で現金化を有効にする必要があります。 Tutor LMS→Settings→Monetizationに移動し、 MonetizeOptionをWooCommerceに設定します。

次に、[製品]→[新規追加]に移動して、コースにリンクする製品を作成します。

実際のWooCommerceストアのように、すべての商品情報を入力する必要はありません。 代わりに、以下に焦点を当ててください。

• 題名
• 説明
• 商品画像（これはチェックアウトページに表示されますが、コースページには表示されません）
• 価格（または、WooCommerceサブスクリプションをお持ちの場合は、サブスクリプションの詳細）

製品を作成したら、この製品にリンクするコースのエディターを開きます。 コースエディタの下部にある[製品の追加]ボックスまで下にスクロールします。

コースタイプを有料に設定し、ドロップダウンを使用して、前のセクションで作成したWooCommerce製品を選択します。

以上です！ コーステンプレートにコースの価格を表示するには、Elementorのコース価格ウィジェットを使用できます。 有料コースの場合、コース登録ボックスウィジェットは自動的に「カートに追加」に変わり、ユーザーにコースの購入と登録を促します。

学生がチェックアウトすると、通常のWooCommerceチェックアウトプロセスが表示されます。 購入すると、自動的にコースに登録されます。コースページに自動的にリダイレクトするオプションもあります。

この時点で、コースを立ち上げて実行するために必要なすべてのコア機能について説明しました。 最後に、Tutor LMSの設定を調べ、必要に応じて他のいくつかの調整を行うことをお勧めします。 ここで、ニーズに合わせてコースを掘り下げてカスタマイズできます。

ただし、Tutor LMS設定にジャンプする前に、完了する必要のある通常のWordPress設定が1つあります。

学生がコースに登録できるようにするには、WordPress設定領域で登録が有効になっていることを確認する必要があります。 これを行うには、 [設定]→[一般]に移動し、 [メンバーシップ]ボックスをオンにして、誰でも登録できるようにします。

個々のコースの登録ボタンに加えて、Tutor LMSでは、学生がアカウントを作成できる登録ページを作成することもできます。 このページを指定するには、 TutorLMS→設定→学生に移動します。

学生が簡単にログインできるようにするために、Elementor Proのログインウィジェットを使用して、サイトの任意の場所にログインフォームを追加することもできます。 ログインウィジェットを使用すると、ユーザーがログインした後にカスタムページにリダイレクトできるため、ユーザーをアカウントダッシュボードに自動的にリダイレクトできます。

それでは、TutorLMS設定領域の他の設定のいくつかを見てみましょう。

[一般] 、[コース] 、[レッスン] 、および[クイズ]タブで、これらの領域の重要な基本を構成できます。

たとえば、TutorLMSのカスタムビデオプレーヤーの代わりにネイティブのYouTubeビデオプレーヤーを使用したい場合があります。 これは、[全般]タブから設定できます。 または、[コース]タブでユーザーがWooCommerceの購入を完了した後、ユーザーを自動的にコースにリダイレクトすることができます。

コースに役立ついくつかのオプションが見つかる可能性があるため、これらの設定をすべて調べることをお勧めします。

これまでは、主に1人のインストラクター（あなたやあなたのクライアントなど）でコースを作成するというアイデアに焦点を当ててきました。 ただし、Tutor LMSでは、コミッションを共有するオプションなど、複数のインストラクターを許可することもできます。 これにより、独自のブランドで複数のインストラクターを雇ったり、サードパーティのインストラクターが登録して独自のコースを作成したりできる独自のUdemyクローンを作成できます。

複数のインストラクターを許可する場合は、TutorLMS設定の[インストラクター]タブから設定できます。 インストラクター登録ページを指定して、インストラクターが独自のコースを直接公開できるようにするかどうかを選択することもできます。

あなたが提供したい場合は、それらが生成するコースの収入に手数料をインストラクター、あなたは収益]タブからそれを設定することができます。 最小引き出し額を指定し、[引き出し]タブから引き出し方法を選択することもできます。

以上です！ これで、ElementorとTutorLMSを利用したオンラインコースができました。

オンラインコースを設定し、Elementorを使用して見栄えの良いデザインを作成したので、コースの主要部分を日常的に管理する方法に移りましょう。 これには、次のようなアクションが含まれます。

• 新入生の管理とオンボーディング。
• 支払いと収益の表示/管理。
• インストラクターの管理（複数のインストラクターを許可することにした場合）。

この時点で、学生は自分でアカウントに登録し、無料または有料のコースに登録できるようになります。

また、登録済みのコースを表示したり、レビューを残したり、その他の重要な詳細にアクセスしたりできる独自のフロントエンドダッシュボードも利用できます。

コースの所有者として、学生を管理および操作するためのツールも入手できます。 これは、アカウントのバックエンドWordPressダッシュボードまたはフロントエンドダッシュボードのいずれかから実行できます（これは、サードパーティのインストラクターを許可する場合に特に便利です）。

重要な相互作用領域の1つは、質問と回答です。 生徒は各コース/レッスンに質問を残すオプションがあり、ダッシュボード（バックエンドまたはフロントエンド）からこれらの質問に回答できます。

アナウンスを作成して、コース内のすべての学生にメッセージを送信することもできます。 繰り返しますが、好みに応じてバックエンドまたはフロントエンドからこれを行うことができます。

また、他のダッシュボード領域を使用して、生徒のリストを表示したり、クイズの試行を確認したり、その他の主要な管理アクションを実行したりできます。

Tutor LMSProとTutorReportアドオンを使用すると、コースの鳥瞰図と、登録と統計を経時的に追跡するオプションを備えた専用のダッシュボードも取得できます。これは、コースの傾向を見つけるのに役立ちます。

有料コースを販売している場合は、支払いを表示および管理する必要があり、必要に応じて払い戻しを提供する必要がある場合もあります。

WooCommerceを使用してTutorLMSの支払いを管理しているため、WooCommerce設定からこれらすべての詳細を表示できます。WooCommerce→Ordersで特定の注文を表示するか、 WooCommerce→Reportsで全体のレポートを表示します。

定期的な支払いにWooCommerceサブスクリプションを使用している場合は、サブスクリプションを追跡および管理することもできます。

あなたまたはあなたのインストラクターは、フロントエンドダッシュボードから収益を追跡することもできます。 サードパーティのインストラクターに許可してコミッションを支払うと、サードパーティのインストラクターは収益と引き出しの履歴を確認することもできます。

他のインストラクターにコースの作成を許可する場合は、WordPressダッシュボードの[チューターLMS]→[インストラクター]に移動して、すべてのインストラクターを管理できます。 必要に応じて、新しいインストラクターを手動で追加したり、既存のインストラクターを編集したり、インストラクターをブロックしたりできます。

オンラインコースを作成することは、聴衆を増やし、知識を収益化するための優れた方法です。 あなたはあなたが経験を持っているウェブデザインまたは他のトピックについてのあなたの知識を共有することができます。

Tutor LMSとElementorを組み合わせることで、特別な技術的知識を必要とせずに、独自のカスタマイズされたコースを構築できます。

チューターLMSは、すべての重要なコース機能を処理できます。 次に、Tutor LMSの25以上のElementorウィジェットを使用して、Elementorの視覚的なドラッグアンドドロップインターフェイスを使用して、コースのコンテンツとテンプレートを設計できます。

今日から最初のコースの作成を開始すると、すぐに稼働できるようになります。

ElementorとTutorLMSを使用してオンラインコースを構築する方法についてまだ質問がありますか？ コメントでお知らせください。お手伝いさせていただきます。