ページエディタ:要素の追加
公開日: 更新日:
要素は、ClickFunnels のページの構成要素です。見出しや画像からボタンやフォームに至るまで、要素を使用すると、さまざまな種類のコンテンツや機能をページに追加できます。この記事では、ページに要素を追加し、設定を調整し、デザインに合わせてスタイルをカスタマイズする方法について説明します。
-
有効な ClickFunnels アカウント
-
エディターに追加されたセクション、行、またはフレックスコンテナ
ページエディターでの要素の追加
Section titled “ページエディターでの要素の追加”-
ClickFunnels アカウントで、新しいセクションを追加する ページ に移動します。
-
ページのサムネイルをクリックして、ページエディターを開きます。
-
要素を配置する行または列にカーソルを合わせてから、表示される 要素を追加 ボタンをクリックします。
-
画面右側の 要素 パネルに、カテゴリ別にまとめられたさまざまな要素が表示されます。
-
要素の種類（見出し、画像、ボタン など）をクリックして、選択した行または列に追加します。
-
要素の外側またはページの別の場所をクリックして要素の追加を続けるか、右上の 保存 をクリックして作業内容を保存します。
要素のカスタマイズ
Section titled “要素のカスタマイズ”要素にカーソルを合わせると、枠線がオレンジ色で強調表示されます。要素の設定を開くには、歯車 ⚙️ アイコン をクリックするか、要素を直接クリックします。
詳細設定
コンテナ（セクション、行、列、要素）をさらにカスタマイズできるように、ClickFunnels には 詳細 設定が用意されており、スタイル、高度な CSS、アニメーション、表示ロジックを制御できます。これらの高度な機能は、内容が多くなりすぎないよう個別の記事に分けて説明しています。詳しくは次の記事をご覧ください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力する方法、コンテナの位置を設定する方法、Z インデックスを適用する方法、カスタム CSS を使わずにコンテナを 回転 させる方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加、表示・非表示時のエフェクトの制御、アニメーションの遅延の調整方法について説明します。
-
詳細設定 - ロジックのカスタマイズ: 要素に条件付きロジックを適用する方法と、カスタム属性を追加する方法について説明します。
コントロールパネル
コントロールパネル は、ページエディター内のすべてのコンテナ（セクション、行、フレックス、要素）の下部に表示され、そのコンテナの主要な設定や操作にすばやくアクセスできます。各アイコンの意味は次のとおりです。
-
すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
-
デスクトップ (🖥️**) アイコン**: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
-
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
-
目 (👁️) アイコン: コンテナをページ上で非表示にします。クリックするとコンテナはエディター上で非表示になりますが、削除はされません。非表示のコンテナは、上部ナビゲーションバーの レイアウト メニューから確認できます。エディター上で再表示するには、すべて、デスクトップ、モバイルのいずれかのアイコンを選択します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ゴミ箱 (🗑️**) アイコン**: コンテナをページエディターから完全に削除します。