(コレクション)モジュール: コースモジュールの配置と表示
公開日: 更新日:
コースモジュールコレクション要素は、コースモジュールをページ上で動的に表示するのに役立ちます。これにより、ユーザーはモジュールを簡単にナビゲートできるため、構造化された学習環境に最適です。この記事では、モジュール 要素をページに追加し、最高のユーザー エクスペリエンスを実現するためにその設定をカスタマイズする方法について説明します。
-
アクティブなClickFunnelsアカウント
モジュール要素を使用できる場所
Section titled “モジュール要素を使用できる場所”この要素は、次のページに最も関連しています。
-
コースレッスンページ: この要素はこのページで常に使用されるとは限りませんが、 サイドバー 要素を使用しないことを選択した場合は、他のモジュールやレッスンへのクイックリンクを提供できます。
モジュール要素の追加
Section titled “モジュール要素の追加”-
モジュールを表示するページの ClickFunnels ページ エディター を開きます。
-
目的の行の「 要素の追加」 をクリックして、「 要素」 メニューを開きます。
-
[ コレクション] セクションまでスクロールし、[ コースモジュール] 要素を選択します。
-
次に、コンテナ内に追加する 列 の数を選択するように求められます。
-
モジュールタイトル、モジュール画像、モジュールリンクなどの動的な詳細を追加すると、モジュール設定からデータが自動的に取得され、ページが最新の状態に保たれます。次の要素を含めることができます。
-
モジュールタイトル: モジュール名が表示されます。
-
モジュール説明: モジュールの簡単な説明を追加します。
-
モジュールリンク: モジュールのページへのクリック可能なリンクを提供します。
-
モジュール画像: モジュールに関連付けられた画像を表示します。
-
モジュールポッドキャストリンク: 関連するポッドキャストコンテンツへのリンクが含まれます。
-
モジュール公開日: モジュールが公開された日付が表示されます。
-
-
各要素をクリックして、その設定にアクセスします。フォント、色、間隔、レイアウトを調整してページのデザインに合わせて調整し、統一感のある外観を実現します。
モジュール要素のカスタマイズ
Section titled “モジュール要素のカスタマイズ”設定へのアクセス
Section titled “設定へのアクセス”コレクション要素にカーソルを合わせると、その境界線がマゼンタで強調表示されます。その設定にアクセスするには、歯車アイコン ⚙️ をクリックするか、要素を直接クリックします。
上マージン
上マージン 設定では、現在のコンテナ(セクション、行、フレックス、要素)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
フィルター
次のオプションを使用して、表示されるコースモジュールをフィルタリングします。
連絡先登録でフィルター
Section titled “連絡先登録でフィルター”ユーザーの登録ステータスに基づいてモジュールの表示方法を選択します。
-
すべて表示 : すべてのコースモジュールを表示します。
-
登録されたコースモジュールのみ表示: ユーザが登録しているコースのモジュールのみを表示します。
-
登録されていないコースモジュールを表示: ユーザがまだ登録していないコースのモジュールを表示します。
ドリップアクセスでフィルター
Section titled “ドリップアクセスでフィルター”ドリップリリースされたモジュールを表示するかどうかを決定します。
-
すべて表示: ドリップリリースのあるモジュールを含むすべてのモジュールを表示します。
-
ドリップコースモジュールを隠す: ドリップリリースに設定されており、ユーザがまだ利用できないモジュールを非表示にします。
コレクション設定
コレクション設定では、コンテナ内でグリッドアイテム(カード)を配置およびページ分割する方法を構成できます。
-
行あたりのアイテム数: グリッドの各行に表示するアイテムの数を選択します。レイアウトは新しい行に折り返され、小さな画面に自動的に適応します。
-
ページあたりのアイテム数: コンテナ内の 1 つのページにレンダリングされるアイテムの総数を設定します。コレクションにこの数を超える場合、ClickFunnels は追加のページを作成します。
-
ページネーションを隠す: コレクションの下に表示されるページ番号を非表示にします。コレクションには ページあたりのアイテム数 で設定した数のアイテムしか表示されないため、訪問者は最初のページより後のアイテムを見ることができません。ページ番号なしですべてのアイテムを表示するには、ページあたりのアイテム数 をすべてのアイテムが収まる数 (最大 100) に設定してから、ページネーションを隠す をオンにします。
-
ページネーションアイテムの色: ページネーションアイテムのテキスト/アイコンの色(例:数字の1、2、3)。
-
ページネーションアイテムの背景色: 非アクティブなページネーションアイテムの背景色。
-
ページネーションのボーダーの色: 各ページネーションアイテムの周りのボーダーの色。
-
ページネーションアクティブアイテムの色:現在の(アクティブな)ページアイテムのテキスト/アイコンの色。
-
ページネーションアクティブアイテムの背景色: アクティブなページアイテムの背景色。
-
ページネーションアクティブボーダーの色: アクティブなページアイテムのボーダーの色。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。
コントロールパネル
要素コントロール パネルは、ページ エディターのすべての要素の下部に表示され、その要素の重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
ALL: 要素はすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
-
デスクトップアイコン:要素はデスクトップビューにのみ表示されます。
-
モバイルアイコン:要素はモバイルビューでのみ表示されます。
-
目のアイコン: これを使用して、ページから要素を非表示にします。要素はエディターに引き続き表示されますが、訪問者には表示されません。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ゴミ箱アイコン: ページエディタから要素を完全に削除します。