ページエディターは、効果的なオンラインコースを作成するために不可欠です。使い方を学ぶことで、コンテンツを論理的に構成し、魅力的な要素を追加し、コースをナビゲートしやすくすることができます。これにより、生徒は情報をより簡単に見つけて吸収できるようになり、より良い学習成果につながります。この記事では、ページエディターを使用して、メンバーの学習体験を向上させる、よく整理されたコースを設計するための重要な手順について説明します。
必要条件
アクティブなClickFunnelsアカウント
コースページの高度なカスタマイズの有効化
コースのホームページとモジュールページをカスタマイズするには、 高度なカスタマイズ 機能をオンにする必要があります。
左側のメニューから コース アプリに移動します。
カスタマイズするコースを選択します。
コース概要ページの [カスタマイズ] タブをクリックします。
[高度なカスタマイズ] トグル スイッチを見つけます。
トグルをクリックしてオンにします。スイッチがアクティブになると青色に変わります。
[ テーマの変更 ] オプションを使用してカスタム テーマを選択できるようになりました。
[カスタマイズ] をクリックして、ページ エディターを開きます。
大事な
コースに選択したテーマには、すでにいくつかの重要な要素が含まれている場合があります。これらの事前構成された要素は、コース設計の出発点となります。できます：
既存の要素を好みのレイアウトに合わせて再配置します。
これらの要素の設定を編集して、コーススタイルに合わせます。
新しい要素を追加して、コースページをさらにカスタマイズします。
この記事のカスタマイズ手順に従うときは、すべての要素を最初から追加する必要はないことに注意してください。代わりに、既存のテーマ構造を適応または強化している可能性があります。
コースホームページのカスタマイズ
コースのホームページは、学生の出発点です。コースのホームページには、コース構造が表示されます。ここで追加した要素には、すでに設定したコースの詳細が自動的に入力されます。コースとそのコンテンツの作成については、 Getting Started with Coursesの記事を参照してください。カスタマイズする方法は次のとおりです。
エディタで、[ コースホーム]を見つけます。
モジュール ・コレクション 要素を追加して、プライマリ・モジュールを表示します。
[新しい要素の追加] をクリックします。
右側のメニューから [コレクション] を選択します。
[モジュール] を選択します。
モジュール コレクションを構成します。
必要に応じて 列 を追加する
重要なモジュール要素を含めます。
モジュール名
モジュールイメージ
モジュールリンク
モジュールページのカスタマイズ
モジュールページには、レッスンとサブモジュールが表示されます。ここでのコンテンツは、作成したモジュール構造に基づいて自動的に更新されます。モジュールとサブモジュールの設定の詳細については、 How to Manage Course Modulesの記事を参照してください。設定方法は次のとおりです。
モジュールページへのレッスンの追加
ページエディタで、[テンプレート] で [デフォルトモジュールページ] を見つけます。
レッスンコレクション要素を追加します。
[新しい要素を追加] をクリックします
レッスン>コレクションを選択
レッスン コレクションを構成します。
必要に応じて 列 を追加する
重要なレッスン要素を含めます。
レッスン名
レッスンイメージ
レッスンリンク
[保存] をクリックして変更を適用します。
モジュールページへのサブモジュールの追加
同じ 「デフォルト・モジュール・ページ 」領域に、「 モジュール・コレクション 」要素を追加して、サブモジュールを表示します。
[新しい要素の追加] をクリックします。
右側のメニューから [コレクション] を選択します。
[モジュール] を選択します。
モジュール コレクションを構成します。
必要に応じて 列 を追加する
重要なモジュール要素を含めます。
モジュール名
モジュールイメージ
モジュールリンク
レッスンページのカスタマイズ
レッスンページには、個々のレッスンコンテンツが表示されます。ここの要素には、作成した個々のレッスン情報が入力されます。レッスンの作成と管理に関するガイダンスは、 How to Manage Course Lessonsの記事を参照してください。レッスンページをカスタマイズするには、次の 2 つのオプションがあります。
デフォルトのレッスンテンプレートを編集します。
ページエディタで、[ テンプレート] タブをクリックします。
[ デフォルトのレッスンページ]を選択します。
ここで行った変更は、このテンプレートを使用するすべてのレッスンに適用されます
個々のレッスン ページをカスタマイズします。
ページエディタの 「コース」 タブで、カスタマイズする特定のレッスンに移動します。
レッスン名をクリックして、個々のページを編集します。
どちらのオプションでも、次の手順に従ってページをカスタマイズします。
重要なレッスン要素を追加します。
レッスンタイトル
画像
該当する場合は 、メディア 要素を含めます。
ビデオレッスンの場合: レッスンビデオ 要素を追加
音声レッスンの場合: レッスン音声 要素を追加
コンテンツ本文を追加します。
[新しい要素を追加] をクリックします
[コンテンツ本文>詳細設定] を選択します
「レッスンステータス」要素を設定する: 「レッスンステータス」要素には、各レッスン内の生徒の進捗状況が表示されます。追加するには:
[ 新しい要素の追加] をクリックし、[ レッスン ステータス] を選択します。
基本/未完了状態と完了状態の両方の外観をカスタマイズします。
テキストを編集します(例:「レッスン開始」または「完了」)。
テキストとアイコンの色を調整する
コースデザインに合わせてスタイルを変更する
(オプション)ナビゲーションボタンまたは進行状況ボタンを追加します。
a. レッスン ページに含める各アクションに Button 要素を追加します 。
b. ボタン ごとにボタンアクションを 次のいずれかに設定します。
完了としてマーク: 現在のレッスンを完了としてマークし、ユーザを自動的に次のレッスンに進めます。
前のレッスンに戻る: 現在のレッスンの完了ステータスに影響を与えることなく、ユーザーを以前に表示したレッスンに戻します。
レッスンの再起動: 現在のレッスンをリロードし、関連するすべての進行状況をリセットして、ユーザーが最初からやり直すことができるようにします。
[保存] をクリックして変更を適用します。
コースサイドバーのカスタマイズ
コースサイドバーは、学生がコースコンテンツをナビゲートするのに役立ちます。モジュールやレッスンなどのコース構造が表示されるため、異なるセクション間を簡単に移動できます。サイドバーのさまざまな側面をカスタマイズしてコースのデザインに合わせてカスタマイズし、学生の学習体験を向上させることができます。
ページ エディターで、 サイドバー 要素を見つけるか追加します。
[ 設定⚙ ]アイコンをクリックして、その設定を表示します。
必要に応じて、次の設定を調整します。
上余白: スライダを使って、サイドバーの上のスペースを設定します。
レンダリングモード: ドロップダウンメニューで「クラシック」または「アセンション」スタイルのいずれかを選択します。
ドリップモジュールを表示: 「はい」を切り替えてすべてのモジュールを表示するか、「いいえ」を切り替えてコースサイドバーでアクセスできないドリップモジュールを非表示にします。
幅: スライダーを使用してサイドバーの幅を調整します。
パディング トップとパディング ボトム: 内部間隔を微調整します。
垂直方向の間隔: サイドバー項目間のギャップを制御します。
背景色: コースのデザインを引き立てる色を選択します。
モバイルハンバーガーの色:モバイルメニューアイコンの色を選択します。
モジュール間のギャップ: (クラシックレンダリングモードでのみ使用可能)サイドバーのモジュールセクション間の間隔を調整します。
完了チェックマークの色: 進行状況追跡チェックマークの色を選択します。この機能は、サイドバーの完了したレッスンの横に小さなチェックマークアイコンを表示し、学生がコースの進捗状況を一目で視覚化できるようにします。
左インデント間隔: サブアイテムのインデントレベルを設定します。
左アイコンを無効にする: 項目の横にあるアイコンを表示または非表示に切り替えます。
チェックマークアイコンを無効にする: 必要に応じて、完了チェックマークアイコンをオフに切り替えます。
コンテンツの深さの切り捨て: 表示するコンテンツのレベル数を制御します。
サイドバー モジュール の設定をカスタマイズして、サイドバー内のモジュールセクションの外観を調整します。
コースの深さ設定を構成する: コースの深さは、サイドバーのさまざまなレベルのコンテンツ階層を指します。例えば：
深さ 1 はメイン モジュールである可能性があります
深さ 2 はモジュール内のセクションにすることができます
深さ 3 は個々のレッスンを表す場合があります
各深度レベルには独自のスタイル設定があり、コース構造のさまざまなレベルを視覚的に区別できます。カスタマイズするには:
設定メニューの「コース深度1」、「コース深度2」などまで下にスクロールします。
コースの深さごとに、タイポグラフィ、色、その他の視覚要素を調整して、サイドバーナビゲーションに明確な階層を作成できます。
[ ボーダー ] を有効にして、サイドバーにアウトラインを追加します。
[ 影] 設定を切り替えて、視覚的な奥行きのために影効果を追加します。
設定を調整したら、右上の 「保存」 をクリックして変更を適用します。
コースページの保存とプレビュー
作業内容の保存
ページ エディターで、右上隅にある [保存] ボタンを見つけます。
コースページに変更を加えたら 、[保存] をクリックします。
保存の確認を待って、更新が確実に保存されていることを確認します。
コースページのプレビュー
ページエディタで、「保存」ボタンの横にある「プレビュー」アイコンをクリックします。
新しいタブが開き、コースページの ライブプレビュー が表示されます。
書式設定の問題、リンク切れ、デザインの不一致がないか確認してください。
編集を続行する準備ができたら、プレビュータブを閉じます。
大事な
モジュールやレッスンなどの動的コンテンツをプレビューで表示するには、まずコースを 公開 する必要があります。コースがまだ下書きモードの場合、これらの要素は表示されません。また、動的セクションにコンテンツが添付されていない場合、公開後も非表示のままになります。詳細な手順については、 Getting Started with Courses の記事を参照してください。
大事な
一部のコースページでは、モジュール、レッスン、またはページに自動的に取り込まれる要素などの 動的コンテンツ が使用されます。
コースページに 動的コンテンツ が含まれているが、まだ何も追加されていない場合(レッスンのないモジュールなど)、そのセクションはプレビューに 表示されません 。
動的要素はコンテンツがアタッチされている場合にのみ表示されるため、これは予期される動作です。
動的コンテンツがどのように表示されるかを確認するには、プレビューする前に、少なくとも 1 つのモジュール、レッスン、または項目を追加していることを確認してください。
詳細については、 Page Editor: Saving and Previewing Your Workを参照してください。