レイアウト – 列
の使用 列 コンテンツタイプ:でページを複数の列に分割します。 Page Builder ステージ. 列を行、タブ、またはステージに直接追加すると、列グループは最初は同じ幅の 2 つの列に分割されます。 必要に応じて、列を追加または削除できます。 列のサイズを変更するには、2 つの列の間の境界線をドラッグします。 次の列の幅は、行、タブ、ステージ内の使用可能なスペースを埋めるように調整されます。 単一の列は、ステージまたはそのコンテナの全幅を拡張します。
2.4.5 リリースのアップデート
ページビルダー機能が 2.4.5 リリースで更新され、ユーザーはを使用できるようになりました Columns 個々の列の親コンテナとして。 この新しいコンテナでは、背景のプロパティもサポートされるようになり、列を一列に折り返す必要がなくなります。 これにより、不要なマークアップを減らし、ストアフロントの表示とエクスペリエンスをより詳細に制御できます。
のレイアウトを変更することができます Columns コンテナで、グループ内の他の列の上または下に列をドラッグして積み重ねます。 これにより、開発者がカスタマイズする必要なしに達成できる、新しいさまざまなレイアウトの組み合わせが可能になります。
このビデオでは、方法を説明します Columns コンテナを使用してページレイアウトを調整することができます。
列ツールボックス
各列には、コンテナの上にマウスポインターを置くと表示されるオプションのツールボックスがあります。
![移動アイコン](./media_1224013998716f9ac04c80146b04284c714a0f6df.png?width=750&format=png&optimize=medium)
![設定アイコン](./media_1cc57ae4793d2e40ac1b861dcfbf325d3b0725c54.png?width=750&format=png&optimize=medium)
![アイコンを複製](./media_1d20e9c33185846c6ce9b8ad56d7e52d49d00f42f.png?width=750&format=png&optimize=medium)
![アイコンを削除](./media_199b42b869af4609c58f76eb9b94cc3bc8ba1d5a0.png?width=750&format=png&optimize=medium)
柱通芯
この グリッド コンテンツを一貫して列に配置し、デスクトップとモバイルデバイスの両方でページが正しくレンダリングされるようにします。 詳しくは、 高度なコンテンツツール の節 Page Builder 設定。
次の 2 列の例では、各列コンテナの上部のボーダーの括弧内の数値(6/12)は、各列のグリッド分割数と分割総数を示しています。 この場合、柱は、合計 12 のうち 6 つのグリッド単位の幅です。
列を追加
-
が含まれる Page Builder 下のパネル Layout、ドラッグ:Column ステージに移動します。
列グループが同じ幅の 2 つの列に分割されました。 各列は、コンテンツの個別のコンテナであり、独自のツールボックスオプションのセットを持ちます。
-
列グループの左上隅の「」をクリックします グリッド ツール (
コンテンツをグリッドに配置すると、コンテンツを一貫して配置でき、デスクトップとモバイルデバイスの両方でページを正しくレンダリングできます。 詳しくは、 高度なコンテンツツール の節 Page Builder 設定。
列のサイズ変更
-
2 つの列の境界線にポインタを合わせます。
境界線がハイライト表示され、選択した列のツールボックスが表示されます。
-
マウス ボタンを押したままにしてグリッドを表示し、グリッド上の新しい位置に境界線をドラッグします。
両方の列の幅は、変更を反映して調整されます。 次のように、各列の新しい幅がラベルの後に表示されます
4/12
(12 個中 4 個)と8/12
(8/12)。
列の削除
-
削除する列の上にマウスポインターを置いてツールボックスを表示し、 削除 (
-
列にコンテンツが含まれている場合は、 OK を確認します。
今後プロセスを高速化するには、を選択して確認ステップをスキップできます Do not show this again チェックボックス。
列グループには、1 つの列(12/12)とグリッドが含まれるようになりました。 グリッドは列に対してのみ使用可能なので、この方法を使用してグリッドを表示できます。
-
列グループを使用して、残りの列を行またはステージの幅いっぱいに拡張する場合:
-
列の上にマウスポインターを置いてツールボックスを表示し、 設定 (
-
にスクロール ダウンします。 Advanced を選択し、4 つすべてを設定します Padding 値:至
0
. -
右上隅のをクリックします。 Save を閉じるには Edit Column ページ。
-
-
「」をクリックします 全画面表示を閉じる (
列設定の変更
-
列の上にマウスポインターを置いてツールボックスを表示し、 設定 (
-
変更: Appearance 必要に応じて設定します。
-
コンテナに対する列の位置を決定する整列設定を選択します。
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto オプション 説明 Full Height
列は、コンテナの高さを最大にします。 Top Aligned
列はコンテナの一番上に配置されます。 Centered
列は、コンテナの中央に配置されます。 Bottom Aligned
列はコンテナの下部に配置されます。 -
必要に応じて、を入力します Minimum Height を列に追加します。 例えば、背景画像の高さに合わせて最小の高さを設定できます。
-
最小高さを設定した場合は、 Vertical Alignment 列に追加されるコンテンツコンテナの位置を制御するには、以下を行います(
Top
,Center
、またはBottom
)に設定します。
-
-
列コンテンツの背景を変更します。
-
Background Color - スウォッチを選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。 この設定により、列の背景色が決まります。
-
Background Image – 必要に応じて、用意されているツールを使用して列に適用する背景画像を選択します。
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto ツール 説明 Upload ローカルコンピューターからギャラリーに画像ファイルをアップロードし、列の背景画像として適用します。 Select from Gallery 列の背景画像として、ギャラリーから既存の画像を選択するように求めるプロンプトを表示します。 画像をカメラタイルにドラッグするか、ローカルファイルシステム内の画像を参照できます。 -
Background Mobile Image – 必要に応じて、同じツールを使用して、モバイルデバイスでの表示に使用する別の背景画像を選択します。
-
Background Size – この設定を変更すると、列の幅を基準にして背景画像を拡大/縮小する方法を指定できます。
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto オプション 説明 Cover
背景画像は、列の全幅をカバーしています。 Contain
背景画像は、コンテンツ領域の幅に制限されます。 Auto
現在のテーマのスタイルシートで指定されているデフォルトの背景サイズを適用します。 -
Background Position – この設定を変更して、列に対する画像のアンカーポイントを決定します。 オプション:
Top Left
,Top Center
,Top Right
,Center Left
,Center
,Center Right
,Bottom Left
,Bottom Center
、またはBottom Right
-
Background Attachment – この設定を変更して、スクロール ページに対する背景画像の移動方法を指定します:
table 0-row-2 1-row-2 2-row-2 layout-auto オプション 説明 Scroll
背景画像は、ページがスクロールすると下に移動するように同期されます。 Fixed
(モバイルでは使用できません)コンテナが画像の上をスクロールしても、背景画像は移動せず、指定された背景位置に固定されます。 -
Background Repeat – 背景画像をスペースいっぱいに繰り返す場合は、この設定を変更します
Yes
.
-
-
を更新 Advanced 必要に応じて設定します。
-
列に追加されるコンテンツコンテナの水平方向の位置を制御するには、次のいずれかを選択します Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto オプション 説明 Default
現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。 Left
コンテンツコンテナを列コンテナの左の境界線に沿って配置します。指定したパディングを使用できます。 Center
コンテンツコンテナを列コンテナの中央に揃えます。指定したパディングに余裕があります。 Right
コンテンツコンテナを列コンテナの右端に沿って配置します。指定したパディングに余裕があります。 -
を Border 列コンテナの 4 つの側面すべてに適用されるスタイル。
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto オプション 説明 Default
関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。 None
コンテナの境界線の表示はしません。 Dotted
コンテナの境界線は点線で表示されます。 Dashed
コンテナの境界線は破線で表示されます。 Solid
コンテナの境界線は実線で表示されます。 Double
コンテナの境界線は二重線で表示されます。 Groove
コンテナの境界線は溝付き線で表示されます。 Ridge
コンテナの境界線は、境界線として表示されます。 Inset
コンテナの境界線は、インセットされた線として表示されます。 Outset
コンテナの境界線は、先頭行として表示されます。 -
境界線のスタイルを
None
の場合は、次のボーダー表示オプションを入力します。table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto オプション 説明 Border Color 見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。 Border Width 境界線の幅のピクセル数を入力します。 Border Radius ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。 -
(オプション)の名前を指定します CSS classes 列コンテナに適用する現在のスタイルシートから。
複数のクラス名はスペースで区切ります。
-
次の値をピクセル単位で入力 Margins and Padding 列の外側の余白と内側のパディングを指定します。
対応する各値を列コンテナ図に入力します。
table 0-row-2 1-row-2 2-row-2 layout-auto コンテナ領域 説明 Margins コンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション: Top
/Right
/Bottom
/Left
Padding コンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション: Top
/Right
/Bottom
/Left
-
-
完了したら、 Save 設定を適用し、 Page Builder ワークスペース。