コンテンツ本文: ブログ投稿とコースのレッスンコンテンツを動的に表示する
公開日: 更新日:
コンテンツ本文要素を使用すると、ブログ投稿とコースレッスンページにコンテンツを動的に表示できます。これにより、ユーザーがブログ投稿またはコース レッスン ページにアクセスすると、要素がそれに関連付けられた特定のコンテンツを確実に取得します。この記事では、ブログ投稿とコースレッスンページにコンテンツ本文要素を追加し、正しく機能することを確認する方法について説明します。
コンテンツ本文要素のしくみ
Section titled “コンテンツ本文要素のしくみ”コンテンツ本文は、個々のブログ投稿やコースレッスンのコンテンツを魅力的な方法で表示するために特別に設計された動的な要素です。閲覧者がブログまたはコース レッスンにアクセスし、特定のブログ投稿またはコース レッスンをクリックすると、コンテンツ本文要素には、クリックしたアイテムに関連付けられた関連コンテンツを取得する機能があります。このプロセスはシームレスに行われます。テーマページを一度デザインすれば、コンテンツ本文要素がそのテンプレートページに現在のブログ投稿またはレッスンのコンテンツを表示します。
ステップ 1: ブログ投稿またはコース レッスン コンテンツの追加
Section titled “ステップ 1: ブログ投稿またはコース レッスン コンテンツの追加”ブログ投稿コンテンツの追加
Section titled “ブログ投稿コンテンツの追加”-
サイトとブログアプリに移動し、[ブログ] を選択します。
-
新しい投稿を作成するか、既存の投稿を選択します。
-
[ブログ投稿] ページで、作成した投稿の横にある鉛筆✏️アイコンをクリックします。
-
ページエディターで、セクション、行、要素を使用して、ブログコンテンツ(テキスト、画像、ビデオ、ボタンなど)を追加およびカスタマイズできます。
-
完了したら、[ 変更を保存] をクリックして編集内容を保存します。
詳細情報: ブログ投稿を作成および管理する方法
コース・レッスン・コンテンツの追加
Section titled “コース・レッスン・コンテンツの追加”-
コースアプリに移動し、編集するコースを選択します。
-
新しい モジュール を追加し、そのモジュール内に新しい レッスン を追加します。
-
[レッスン名] または [レッスンを編集 ] オプションをクリックして、レッスン エディターを開きます。
-
レッスン エディターでは、セクション、行、要素を使用して、レッスン コンテンツ (テキスト、画像、ビデオ、ボタンなど) を追加およびカスタマイズできます。
-
完了したら、[ 変更を保存] をクリックして編集内容を保存します。
詳細情報: コースレッスンの管理方法
ステップ 2: コンテンツ本文要素の追加
Section titled “ステップ 2: コンテンツ本文要素の追加”-
サイトとブログアプリに移動します。
-
[ 概要] をクリックします。
-
[ サイトの編集] をクリックして、サイト テーマ ページ エディターを開きます。
-
左側のパネルで、ブログカテゴリから ブログ投稿 を選択するか、コースカテゴリから レッスンページ を選択して、テーマ ページを変更します。モジュールに独自のコンテンツがある場合 (モジュールの コンテンツを編集 で追加したもの) は、モジュールレッスン ページにもこの要素を追加します。
-
ページエディタ内で、要素を 配置するセクション を追加します。
-
そのセクション内に 行 を追加します。
-
行内のオレンジ色 の + プラスまたは [新しい要素 を追加] ボタンをクリックして、新しい要素を挿入します。
-
高度な カテゴリから ダイナミックスロット セクションまでスクロールし、コンテンツ本文 要素を選択します。
コンテンツ本文要素のカスタマイズ
Section titled “コンテンツ本文要素のカスタマイズ”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車アイコン (⚙️) をクリックするか、要素を直接クリックします。
上マージン
上マージン 設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
-
デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
-
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
-
目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。