ネストされた行: ネストされた行を使用してネストされたレイアウトを作成する

ClickFunnels の ネストされた行 機能を使用すると、列と Flex コンテナ内に行をネストすることで、より複雑で柔軟なレイアウトを作成できます。この高度なレイアウトツールを使用すると、ページコンテンツの配置をより詳細に制御でき、よりダイナミックなデザインを構築するのに役立ちます。この記事では、ネストされた行、その使用方法、およびページでネストされた行を使用するタイミングについて説明します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ
RowまたはFlexコンテナ

ネストされたレイアウトを理解する

ネストされたレイアウトを使用すると、別の行の列内または Flex コンテナ内に行を配置することで、より複雑で整理されたデザインを作成できます。この設定により、コンテンツを構造化し、視覚的に魅力的な方法で要素を配置するための柔軟性がさらに高まります。ClickFunnels では、ネストされた行は、これらのレイアウトを効率的に構築するために使用される主要なツールです。ネストされた行を使用すると、デザインをすっきりとレスポンシブに保ちながら、多層製品グリッド、高度な行動喚起セクション、カスタムフォームなどの複雑なレイアウトをデザインできます。以下は、セクション、行、列、ネストされた行、フレックスコンテナなど、ネストされたレイアウトがどのように構造化されているかの例です。

ネストされた行とは

ネストされた行は、通常の行と同様に機能しますが、 行の列 内または Flex コンテナ内に配置するように設計されています。これにより、1 行内でより複雑なレイアウトを作成できます。

ネストされた行の主な機能

コンテナとしてのネストされた行: これらは基本的に、既存の行または Flex コンテナの列内に他の要素と一緒に追加できる行です。
要素パネルからアクセス可能: 要素を追加すると、要素メニューのオプションとしてネストされた行 が表示されます。
最大列サポート: ネストされた行には最大 3 つの列を含めることができるため、コンパクトで構造化されたレイアウトの作成に適しています。
配置オプション: ネストされた行は、次の方法で配置できます。
- 行の列内。
- フレックスコンテナ内では、追加の位置合わせと間隔のオプションを提供します。

ネストされた行の動作

ClickFunnels で 入れ子になった行 を追加すると、エディターは入れ子になったコンテンツを折り返す新しい セクション を自動的に作成します。このラッパーセクションは、ネストされた行のコンテナとして機能し、この構造内のすべての要素とレイアウト調整が個別に整理され、含まれるようにします。

ラッパーセクションの仕組み

ネストされた行を行列に挿入すると、エディタはネストされた行を格納する新しいラッパーセクションを生成します。これにより、レイアウトの構造が明確になり、要素が重なったり位置ずれたりするのを防ぎます。
同様に、 Flex コンテナ内にネストされた行を追加すると、エディタはネストされた行のラッパーセクションを Flex レイアウト内の 1 つの子として扱います。これは、ネストされた行内のすべての列と要素が 1 つのまとまりのある構造の下にグループ化され、フレックスコンテナ内のスムーズな配置と間隔が確保されることを意味します。

ネストされた行の使用方法

ネストされた行を挿入します。
- ページエディタで、ネストされた行を追加する行またはFlexコンテナに移動します。
- コンテナ内のオレンジ色の + プラス または新しい要素の追加ボタンをクリックして、新しい要素を挿入します。
- 要素リストから [ネストされた行] を選択します。
- ネストされた行の列レイアウトを選択します (例: 1 列、2 列、または 3 列)。
ネストされた行内に要素を追加します。
- ネストされた行を配置したら、その列内をクリックして、テキスト、ボタン、画像などの要素を追加します。
ネストされた行をカスタマイズします。
- 設定パネルを使用して、ネストされた行とその列の配置、間隔、およびスタイルを調整します。

行とその設定の詳細については、 Page Editor: Adding Rowsの記事を参照してください。

ネストされた行を効果的に使用するためのヒント

管理しやすい状態に保つ: ネストされた行は柔軟性を高めますが、デザインをシンプルでメンテナンスしやすい状態に保つために、単一のレイアウトで使いすぎないようにします。
Flex コンテナとの組み合わせ: 高度なレスポンシブデザインの場合は、Flex コンテナ内でネストされた行を使用して、画面サイズ全体でのレイアウトの適応性を高めます。
モバイルでのプレビュー: ネストされた行がモバイルデバイスでどのように動作するかを常に確認します。設定を調整するか、Flex プロパティを使用して、コンテンツの視覚的なバランスを保ちます。