ClickFunnels の Divider 要素は、ページ コンテンツ内に分離と構造を追加するように設計されています。明確な境界線や微妙な間隔を作成して、ページの読みやすさと整理性を向上させることができます。スタイル、配置、間隔のカスタマイズ オプションを使用すると、Divider 要素を使用してコンテンツ ブロックを視覚的に分割したり、よりスムーズな移行のための目に見えないスペーサーとして機能したりできます。このガイドでは、Divider 要素の設定とカスタマイズ オプションを順を追って説明し、ページ レイアウトに合わせて最適化する方法を示します。.png "image(281).png")
必要条件
アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ
ページエディタでの区切り要素の追加
ページエディタ内で、要素を 配置するセクション を追加します。
そのセクション内に 行 を追加します。
行内のオレンジ色の + プラスまたは [新しい要素を追加] ボタンをクリックして、新しい要素を挿入します。
[その他]カテゴリから、[分割線]要素を選択します。
Divider 要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。
仕切り要素のカスタマイズ
要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。
上マージン
「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
ディバイダー設定
幅：コンテナを基準にした仕切りの幅を制御します。100%に設定するとコンテナの幅全体にまたがり、値を小さくするとコンテナ内の仕切りが短くなります。デバイスアイコン (
🖥️ & 📱 ) を使用して、デスクトップとモバイルで幅を個別に設定できます。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。高さ：より太い線またはより微妙な外観のために、仕切りの高さを定義します。色を透明に設定し、高さを大きくして、目に見える線なしで間隔を追加する非表示のスペーサーを作成することもできます。デバイスアイコン(
🖥️ & 📱 )を使用して、デスクトップとモバイルで個別に高さを設定できます。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。並べる：区切り線を行内の左、中央、または右に揃えることを選択できます。この設定は、幅が 100% 未満の仕切りに特に便利です。デバイスアイコン( &
📱 )🖥️を使用して 、デスクトップとモバイルで個別に配置を設定できます。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。種類： ページのテーマに合わせて、 実線、 破線、 点線などのさまざまな線のスタイルから選択します。
色： 目立つ、またはページ デザインにシームレスに溶け込む仕切り線の色を選択してください。目に見えない仕切りを作成するには、色を 透明に設定するだけです。
心地
[パディング] 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに呼吸する余地を確保し、視覚的にバランスが取れているように見えます。Use スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
パディングオプション:
上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。
下部: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します 。
ギャップ：アコーディオンなどの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。
デスクトップとモバイル(
パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。
この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。
影
影の設定では、影効果を適用して要素に奥行きと強調を加え、視覚的な外観を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
.png "image(79).png")
スタイル: ページのスタイルガイドから定義済みのシャドウスタイルの1つを選択します。番号付きのスタイル(1、2、または3)をクリックして、スタイルガイドで定義されているプリセットシャドウ設定を適用します。
シャドウ スタイル: インセット (要素内の影) と アウトセット (要素の外側のシャドウ) のいずれかを選択して、目的のシャドウ効果を実現します。
X方向: 影の水平方向の位置を調整します。正の値は影を右に移動し、負の値を指定すると影は左に移動します。
Y方向: シャドウの垂直方向の配置をコントロールします。正の値は影を下に押し、負の値は影を上に引っ張ります。
ぼかし: シャドウのエッジの柔らかさをコントロールします。値を大きくすると、より拡散した柔らかな影が作成され、値を小さくすると、影が鮮明に保たれます。
スプレッド: 影のサイズを調整します。正の値は影を広げ、負の値は影を狭くします。
色: カラーピッカーを使用して、影の色の設定を選択します。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。.png "image(47).png")
ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
デスクトップ (
🖥️ ) アイコン: コンテナはデスクトップ ビューでのみ表示されます。モバイル(
📱 )アイコン:コンテナはモバイルビューでのみ表示されます。目 (
👁️ ) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。
ごみ箱 (
🗑️ ) アイコン: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
Advanced Settings - Customize Styles: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
Advanced Settings - Customize Animation: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法 を学習 します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。