[付与された資産] 要素を使用すると、ユーザーに付与されたデジタル ダウンロードやコース教材などのリソースを動的に表示できます。これにより、視聴者は購入または割り当てたアセットにページから直接簡単にアクセスできるようになります。この記事では、要素を追加する方法、外観をカスタマイズする方法、およびその使用に最適なページを探索する方法について説明します。.png "image(402).png")
必要条件
アクティブなClickFunnelsアカウント
付与された資産要素を使用できる場所
「付与されたアセット」要素は用途が広く、様々なページテンプレートでユーザーエクスペリエンスを向上させることができます。
Custom Customer Center Dashboard: ユーザーが付与された資産を見つけてダウンロードできる一元化された領域を作成します。
Course Pages: コースホームページ、 モジュールテンプレート、 レッスンテンプレートページなどのリソースをコースエクスペリエンスの一部として表示します。これは、レッスンやモジュールと一緒に追加の学習教材を共有する場合に特に効果的です。
大事な
ユーザーは、アクセス権が適切に割り当てられている場合にのみ、付与された資産を表示できます。デジタル資産の管理と配信に関する詳細なガイダンスについては、次の関連記事をご覧ください。
コースへの付与されたアセット要素の追加
左側のメニューから コース アプリに移動します。
編集するコースを選択します。
[カスタマイズ]をクリックして、コースエディタにアクセスします。
付与された資産は、次の場所に表示できます。
コースホームページ: 左側のサイドバーから [コースホーム] を選択して、メインのコース概要ページをカスタマイズします。
デフォルトのモジュールページとデフォルトのレッスンページ: [ テンプレート] タブに切り替えて、[ デフォルトのモジュール ページ ] または [既定のレッスン ページ ] を選択して、要素を編集して追加します。
目的の行の「 要素の追加」 をクリックして、「 要素」 メニューを開きます。
[ コレクション] セクションまでスクロールし、[ 付与された資産] 要素を選択します。
.png "image(403).png")
次に、コンテナ内に追加する 列 の数を選択するように求められます。
ダウンロードタイトル、画像、リンクなどの動的な詳細を追加すると、アセット設定からデータが自動的に取得され、ページが最新の状態に保たれます。次の要素を含めることができます。
ダウンロードタイトル: 付与されたアセットの名前が表示されます。
ダウンロードリンク: ユーザーがアセットをダウンロードするためのクリック可能なリンクを提供します。
画像のダウンロード: アセットのサムネイルまたは視覚的表現を追加します。
.png "image(404).png")
各要素をクリックして、その設定にアクセスします。フォント、色、間隔、レイアウトを調整してページのデザインに合わせて調整し、統一感のある外観を実現します。
カスタマーセンターでの付与された資産要素の追加
左側のメニューで [サイトとブログ] に移動し、[ カスタマー センター] を選択します。
[カスタマイズ] をクリックしてエディターを開きます。
[付与された資産要素] を追加するセクションを選択します。
エディターのサイドバーで [要素を追加 ] をクリックします。
[ コレクション] セクションまでスクロールし、[ 付与された資産] 要素を選択します。
次に、コンテナ内に追加する 列 の数を選択するように求められます。
ダウンロードタイトル、画像、リンクなどの動的な詳細を追加します。
[保存] をクリックし、カスタマーセンターを更新 をクリックして変更を適用します。
付与された資産要素のカスタマイズ
設定へのアクセス
コレクション要素にカーソルを合わせると、その境界線がマゼンタで強調表示されます。その設定にアクセスするには、耳のアイコン⚙️をクリックするか、要素を直接クリックします。
上マージン
「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
コレクション設定
コレクション設定では、コンテナ内でグリッドアイテム(カード)を配置およびページ分割する方法を構成できます。
行あたりの項目: グリッドの各行に表示する項目の数を選択します。レイアウトは新しい行に折り返され、小さな画面に自動的に適応します。
ページあたりのアイテム数: コンテナ内の 1 つのページにレンダリングされるアイテムの総数を設定します。コレクションにこの数を超える場合、ClickFunnels は追加のページを作成します。
ページネーションを非表示にする: ページネーションをオンまたはオフにします。有効にすると、ページ番号コントロールが削除され、対象となるすべての項目が 1 つの連続したリストにレンダリングされます。非常に大きなコレクションの場合は、読み込み時間とナビゲーションを改善するために、ページネーションをオンのままにしておくことを検討してください。
ページネーションアイテムの色: ページネーションアイテムのテキスト/アイコンの色(例:数字の1、2、3)。
ページネーション項目の背景色: 非アクティブなページネーション項目の背景色。
ページネーションの境界線の色: 各ページネーション項目の周りの境界線の色。
ページネーションアクティブアイテムの色:現在の(アクティブな)ページアイテムのテキスト/アイコンの色。
ページネーションアクティブアイテムの背景色: アクティブなページアイテムの背景色。
ページネーションアクティブな境界線の色: アクティブなページ項目の境界線の色。
ヒント：
アクセシビリティのために、ページ番号が読みやすいように、十分なコントラストのあるページネーション色を使用します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
Advanced Settings - Customize Styles: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
Advanced Settings - Customize Animation: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。
コントロールパネル
要素コントロール パネルは、ページ エディターのすべての要素の下部に表示され、その要素の重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。.png "image(47).png")
ALL: 要素はすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
デスクトップアイコン:要素はデスクトップビューにのみ表示されます。
モバイルアイコン:要素はモバイルビューでのみ表示されます。
目のアイコン: これを使用して、ページから要素を非表示にします。要素はエディターに引き続き表示されますが、訪問者には表示されません。
コード アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入して要素の動作やスタイルを変更できます。
ゴミ箱アイコン: ページエディタから要素を完全に削除します。