この記事には、PageFlyでレイアウント要素を用いてきれいなページを作成する方法についてご紹介します。
レイアウト要素に関する以下のビデオチュートリアルを確認できます。
レイアウント要素について
レイアウント要素は、ページの構造を改善してコンバージョン率を向上させるために設計された要素です。
レイアウント要素には、PageFly要素階層の中核にあるセクション、行、列が含まれます。これらを使用してセクション/行/列コンテナーで初期構造を作成したり他の要素で埋めたりすることができます。
同じコンテナ内の要素のみを揃えることにご注意ください。例えば、この列を揃える場合、外側の行であるコンテナ内のみで移動できます。
レイアウント要素のアクセス方法
ステップ1：要素追加機能のプラスアイコンをクリックします。
ステップ2：ドロップダウンメニューでレイアウント要素をクリックします。
ステップ3：対象の要素をページエディタにドラッグ＆ドロップして使用します。
以下は10つの既製の列レイアウントですが、自由にカスタマイズすることができます。お客様が時間を節約できるように、さらに新規のバリエーションを追加していきます。
レイアウント要素の構成
セクション、行、列には、アピアランスを微調整して最高のコンバージョン率を取得できる異なるパラメータがあります。
セクションの構成
セクションは各ページの主な要素です。セクションに１つ以上の行が含まれます。セクション内の行数を一般タブで制御することが可能となります。
セクションを選択して含まれるパラメータを確認できます。
この要素に固有のパラメータは一般タブおよびスタイリングタブに入ります。
| コンテンツ | |
| 行を追加する：セクション内の行数が制限されません。 |  |
| 行：行を移動したり削除したりします。 |  |
幅を固定する：
無効にすると、セクション内のコンテンツがセクションの全幅に拡大されます。 |
 |
属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。
スタイリングタブの構成
スタイリングタブの詳細情報については、こちらをご参照ください。
行の構成
行に１つ以上の列が含まれます。行内の列数を一般タブで制御することが可能となります。行を選択して含まれるパラメータを確認できます。
この要素に固有のパラメータは一般タブおよびスタイリングタブに入ります。
一般タブの構成
| コンテンツ | |
| 列を追加する：行内の列数は最大限が12つです。 |  |
| 列：列を移動したり削除したりします。 |  |
| コンテンツの位置：行の内側にあるコンテンツの位置を指定します。 |  |
行ごとの列数：
モバイルで行ごとの列数は最大限で4つです。 |
 |
| 対等の高さを有効にする：行内の全列の高さが対等になるようにします。 |  |
| 列間の余白：行内の列間の余白を調整します。
デフォルトで30pxに設定されていますが、変更できます。 |
 |
属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。
スタイリング構成
スタイリングタブの詳細情報については、こちらをご参照ください。
列の構成
列をレイアウトに追加すると、行に自動的に含まれます。すべての要素（レイアウント要素以外）が列で入れ子にされます。
列を選択して含まれるパラメータを確認できます。
バージョン3.22.0以降、行内の列をクリックして列を移動したり、複製したり、削除したりすることが簡単にできます。
列のサイズ変更の仕組み
- 左右にドラッグして列の幅を調整すると、次の列の幅は、行の幅に影響を与えず、増減します。
- 行あたりの列のパラメータを変更すると、行内のすべての列は自動的に均等なサイズに変更され、オプションで各列のサイズを編集することもできます.
- 行に1列のみがある場合、その列のサイズは自動的に行の全幅に変更されます。
例：
4列があって、行あたりの列数を3に設定する場合：
- 1行目：3列（各列の幅は行の幅の3分の１となります。）
- 2行目：1列（この列の幅は行の全幅となります。）
詳細については、以下の画像をご確認ください。
この要素に固有のパラメータは一般タブおよびスタイリングタブに入ります。
一般の構成
一般タブの詳細情報については、こちらをご参照ください。
スタイリングの構成
スタイリングタブの詳細情報については、こちらをご参照ください。
