ClickFunnels Editor は、ファネル、ストア、サイト、ブログ、コースのページをデザインおよびカスタマイズできる多用途ツールです。直感的なドラッグ アンド ドロップ インターフェイスにより、セクション、行、要素を使用してページを簡単に構成できます。この記事では、エディターのコア機能を検討し、すべての ClickFunnels アセットにわたって効果的で視覚的に魅力的なページを構築する方法について説明します。
必要条件
アクティブなClickFunnelsアカウント。
ワークスペースで作成されたページ。
トップナビゲーションバー
上部のナビゲーションバーでは、重要なツールにすばやくアクセスできます。.png "image(234).png")
ページ名: ページ名が左上に表示されるため、現在編集しているページを簡単に識別できます。
プロフィールアイコン: ClickFunnels では、誰がページをアクティブに編集しているかを確認できます。複数のチーム メンバーまたは共同編集者が同時にページで作業している場合、ページ タイトルの横にプロフィール アイコンが表示されるため、コラボレーションが容易になり、編集の競合を防ぐことができます。
ヘルプ: [ヘルプ] ボタンをクリックすると、サポート ウィジェットがページ上で直接開きます。ClickFunnels は AI を活用した支援を提供し、ファネルの構築、ClickFunnels の機能、またはアカウントの問題について即時かつ正確な応答で質問できるようにします。ヘルプウィジェットから直接サポートに問い合わせることもできます。サポートに問い合わせる方法については、 Contacting ClickFunnels Customer Support の記事をご覧ください。
情報: [情報] タブには、ページのスムーズな編集と保存を保証するための重要なガイダンスとアラートが表示されます。注意が必要な問題は赤に変わり、エラーや警告を示すことで強調表示されます。たとえば、テキスト領域の入力要素を追加しても、入力タイプの設定やカスタムのタイプ名の指定に失敗した場合、「情報」タブからこの見落としが通知されます。タブをクリックすると、特定の問題に関する詳細なメッセージが表示されるため、問題に迅速に対処し、ページ デザインにおける潜在的なエラーを回避できます。
.png "image(235).png")
レイアウト: [レイアウト] タブでは、 セクション、 行、 列 、 要素を整理してページを構造化できます。ClickFunnels エディターでは、 セクション がプライマリ コンテナとして機能し、各セクション内に 行が 配置され、コンテンツを構築するために 行内に要素 が追加されます。複数のセクションを追加すると、ページが長くなり、特定のコンテンツを見つけるのが難しくなる可能性があります。[レイアウト] タブでは、ページ内の各セクション、行、要素の位置が明確に表示され、レイアウトを効率的に移動できます。セクション、行、要素に名前を割り当てることで、それらを簡単に識別して管理できます。[レイアウト] タブをクリックし、調整したい項目を見つけて、目的の位置にドラッグするだけで、各コンテンツを直接編集せずにページを再編成できます。
.png "image(236).png")
マイアセット: [マイアセット] タブでは、ユニバーサル セクションや ClickFunnels の既製セクションなど、以前に保存したすべてのセクションにアクセスできます。マイアセット内の検索機能を使用して、ページに必要な保存済みセクションをすばやく見つけることができます。セクションと行をテンプレートとして保存する方法の詳細については、「セクションと行をテンプレートとして保存する方法」 の記事 を参照してください。
ポップアップ: 各ページに 1 つのポップアップを含めることができます。ポップアップを表示または編集するには、[ ポップアップ] メニューをクリックし、[ ポップアップを表示] を選択します。[ 設定の編集] を選択すると、コンテンツの追加、デザインの調整、スタイルの変更を行うことができます。このパネルでは、ポップアップモーダルのさまざまなプロパティを調整できる設定パネルが開きます。ページエディタでのポップアップの編集と管理の詳細については、 Adding a Popup 記事をご覧ください。
スタイルガイド: [スタイルガイド] タブは、ページをグローバルスタイルにリンクします。リンクされたスタイルがポップアップモーダルで開き、ページエディタを終了することなく、ページエディタ内から直接グローバルスタイルを編集できます。ClickFunnels ワークスペースでのグローバル スタイルの作成と管理の詳細については、「スタイルの概要」 の記事を参照してください。
設定： [設定] メニューには、背景、タイポグラフィ、コードの追加など、ページのカスタマイズ オプションがいくつか用意されています。
背景: このオプションを使用すると、HTML
<body>タグに背景スタイルを適用するのと同様に、ページ全体の背景を設定できます。画像をアップロードしたり、背景の色を選択したりできます。オプションには、 画像スタイル の調整(ページの幅全体を塗りつぶすなど)と 画像のフィット 感(ページ内の配置)が含まれます。背景色を切り替えたり、ビデオを背景として追加してダイナミックな視覚効果を与えることもできます。詳細については、 Adding Background Image and Video to the Page の記事をご覧ください。タイポグラフィ: このオプションを使用すると、ページのフォント設定をカスタマイズできます。コンテンツフォントタイプを選択し、太さ(通常または太字など)を調整し、テキストとリンクの色を指定できます。[タイポグラフィ] セクションの [コンテンツ フォント] 設定では、ページのメイン テキストに使用するプライマリ フォントを選択できます。これには本文、見出し、その他の書かれたコンテンツ要素が含まれ、ページ全体で一貫したルック アンド フィールが保証されます。
コードを表示: [コードを表示] オプションを選択すると、コード エディターが開き、カスタム CSS または JavaScript を追加できます。これにより、より高度なカスタマイズが可能になり、スタイルを調整したり、デフォルトのエディター設定を超えた機能を追加したりできます。詳細については、 Adding Custom CSS Code for Custom Design と Adding Javascript Code for Advanced Feature の記事をご覧ください。
エディター設定: このセクションには、要素がユーザー操作にどのように応答するかを管理するための追加設定が含まれています。
要素ホバータイマー: このツールは、要素にカーソルを合わせたときに反応するまでの遅延時間を調整します。
ホバーインテント感度: 要素のホバー検出の感度を制御します。
ネストされたコレクション: このオプションを使用すると、コレクション要素を別のコレクション要素内に挿入できます。コレクション要素の詳細については、 Layout Your Section Using Collection Elements の記事を参照してください。
手記：
ネストされたコレクションは、ライブページには推奨されません。それらはまだ開発中です。
デスクトップ ビュー: デスクトップ ビュー アイコンは、デスクトップ デバイスで表示されている要素または機能を示します。
モバイルビュー: モバイルビューアイコンは、モバイルデバイスで表示される要素または機能を示します。
外す： 元に戻すアイコンを使用すると、前のアクションを元に戻して、変更が加えられる前の状態にデザインを復元できます。
やり直す： 「やり直し」アイコンを使用すると、以前に元に戻したアクションを再適用して、元に戻す操作後の状態にデザインを復元できます。
プレビュー： プレビューアイコンを使用すると、デザインをリアルタイムでプレビューし、最終出力がどのように表示されるかを視聴者に示すことができます。
セーブ： 保存アイコンを使用すると、作業内容と変更を保存して、変更内容を確実に保存し、後でアクセスできるようになります。ページ編集の保存とプレビューの詳細については、 Page Editor: Saving and Previewing Your Work 記事をご覧ください。
セクション、行、および要素を含むレイアウトの作成
ClickFunnels エディターでは、ページ レイアウトの作成には、 セクション、 行、 要素などのコンテナの階層が含まれ、それぞれがページ上のコンテンツを整理する上で特定の役割を果たします。
セクションの追加セクション は最上位のコンテナ(緑色のラベル)であり、ページの主要なレイアウトブロックとして機能します。各セクションには、コンテンツの要素を保持する複数の行を含めることができます。
セクションを追加するには、[ セクションの追加] ボタンをクリックし、希望のレイアウト幅 (全幅、幅、中幅など) を選択して、ページ上の必要な場所に配置します。セクションは「親」コンテナであり、その中の行と要素は「子」コンポーネントです。セクションの追加の詳細については、 Page Editor: Adding Sections 記事をご覧ください。
行の追加
セクション内に行が追加され(青のラベルが付けられ)、コンテンツをさらに構造化します。行には列が含まれており、要素を水平方向に整理するのに役立ちます。各セクションに複数の行を追加し、垂直に積み重ねて構造化されたレイアウトにすることができます。
行を追加するには、セクション内の [行の追加 ] をクリックし、目的の列レイアウト (例: 1 列、2 列など、最大 6 列) を選択します。これにより、各セクション内でのコンテンツの配布方法をカスタマイズできます。行の追加の詳細については、 Page Editor: Adding Rows の記事をご覧ください。
要素の追加
要素は 、ページを構成するテキスト、画像、ボタン、入力などの個々のコンテンツ部分 (オレンジ色とラベル付け) です。要素は行内に配置され、ページ レイアウトのカスタマイズの最終レイヤーを提供します。
要素を追加するには、行内の [要素の追加] をクリックし、追加するコンテンツのタイプを選択します。要素は行の「子」であり、階層を完成させます。要素の追加の詳細については、 Page Editor: Adding Elements の記事をご覧ください。
コンテナの階層
ClickFunnels エディターの階層は、一貫性と編集の容易さを維持するために構造化されたレイアウトに従います。
セクション は最上位レベルのコンテナです。
各 セクション内に、 行 (複数の列を含む) を追加できます。
行の各列内に、要素を配置できます。
ネストされたレイアウト
標準階層に加えて、ClickFunnels はネ ストされたレイアウト もサポートしており、ページ内に複雑で柔軟なデザインを作成します。 ネストされた行 を使用すると、1 つの行または列内に複数の列構造を追加して、レイアウトのカスタマイズのレイヤーを追加できます。たとえば、2 列の行レイアウトから開始する場合、右側の列内にネストされた 3 列の行を追加できます。これにより、右側の列にネストされた行と呼ばれる独自の列のセットが保持される多層レイアウトが作成されます。
ClickFunnels に入れ子になった行を追加すると、エディターは、この入れ子になったコンテンツを囲む新しいセクションを自動的に作成します。このセクションは、ネストされた行のコンテナとして機能し、この構造内のすべての要素とレイアウト調整が個別に整理および含まれるようにします。詳細については、 Nested Rows: Created Nested Layout Using Nested Rows の記事をご覧ください。
ブロック要素を理解する
ClickFunnels エディターの ブロック要素 ウィジェットには、カテゴリ別に整理されたさまざまな事前構築された要素が用意されているため、ページに適したコンポーネントを簡単に見つけることができます。行やフレックスコンテナなどの要素をコンテナ内に追加しようとすると、このウィジェットがページの右側に表示されます。このウィジェットには、基本的なコンテンツ要素から高度なオプションまですべてが含まれており、特定の目標に合わせてページをカスタマイズできます。.png "image(251).png")
さまざまなニーズに合わせてカテゴリ別に要素を探索できます。例えば：
コンテンツ 要素には、メッセージを伝えるための見出し、段落、リスト、アイコンなどが含まれます。
フォーム 要素を使用すると、訪問者から情報を収集できます。
チェックアウト 要素を使用すると、注文をページ上で直接集荷するための支払いオプションを追加できます。
支払い処理用の チェックアウト など、ニーズに合ったカテゴリを選択し、要素をページにドラッグします。このブロック要素のライブラリにより、ファネルの目的に合わせてページを効果的に構築およびカスタマイズできる柔軟性が得られます。
設定へのアクセス
ClickFunnels エディターでは、各コンテナに関連付けられた歯車
コンテンツのクローン作成
ClickFunnels エディターを使用すると、コンテンツを簡単に複製できるため、ページを迅速かつ効率的にデザインできます。 クリックするだけで、セクション全体、行、および個々の要素を複製 できます 。複製したら、これらの複製されたアイテムをページ上の別の位置にドラッグ アンド ドロップできるため、デザイン全体の一貫性を維持しながらレイアウトをより迅速に構築できます。
セクション/行/要素をテンプレートとして保存して再利用する
ClickFunnels を使用すると、セクション、行、要素をエディターに直接保存できるため、ページ全体でコンテンツを簡単に再利用できます。保存すると、これらのコンポーネントは保存したギャラリーに保存され、同じページまたはワークスペース内の他のページにインポートできます。この機能を使用すると、要素を最初から再作成することなく、複数のページにわたって一貫したデザインをすばやく構築できるため、ワークフローが合理化され、時間を節約できます。
ユニバーサルセクション/行/要素:ページ間での変更を同期
ClickFunnels では、通常の保存コンテンツに加えて、セクション、行、要素を ユニバーサル コンテンツとして保存することもできます。たとえば、行をユニバーサル行として保存できます。ワークスペース内の複数のページでユニバーサルセクションを使用すると、そのセクションに加えられた変更は、そのセクションが使用されているすべてのページで自動的に更新されます。これは、ヘッダー、フッター、その他の頻繁に再利用されるセクションなどの要素の一貫性を維持するのに非常に役立ちます。.png "image(254).png")
この機能により、コンテンツを 1 か所で編集するだけで、変更がどこにでも反映されるため、更新が簡素化されます。ユニバーサルセクションの設定の詳細については、詳細な記事をご覧ください Adding a Universal Section。