レイアウト – 列

が含まれる Page Builder 下のパネル Layout、ドラッグ：Column ​ステージに移動します。

{width="600" modal="regular"}

列グループが同じ幅の 2 つの列に分割されました。 各列は、コンテンツの個別のコンテナであり、独自のツールボックスオプションのセットを持ちます。

{width="600" modal="regular"}

列グループの左上隅の「」をクリックします グリッド ツール （ ）を選択し、必要に応じてグリッドサイズを調整します。

コンテンツをグリッドに配置すると、コンテンツを一貫して配置でき、デスクトップとモバイルデバイスの両方でページを正しくレンダリングできます。 詳しくは、 高度なコンテンツツール の節 Page Builder 設定。

{width="600" modal="regular"}

2 つの列の境界線にポインタを合わせます。

境界線がハイライト表示され、選択した列のツールボックスが表示されます。

{width="600" modal="regular"}

マウス ボタンを押したままにしてグリッドを表示し、グリッド上の新しい位置に境界線をドラッグします。

両方の列の幅は、変更を反映して調整されます。 次のように、各列の新しい幅がラベルの後に表示されます 4/12 （12 個中 4 個）と 8/12 （8/12）。

{width="600" modal="regular"}

削除する列の上にマウスポインターを置いてツールボックスを表示し、 削除 （ {width="20"} ） アイコンをクリックします。

{width="600" modal="regular"}

列にコンテンツが含まれている場合は、 OK を確認します。

今後プロセスを高速化するには、を選択して確認ステップをスキップできます Do not show this again チェックボックス。

列グループには、1 つの列（12/12）とグリッドが含まれるようになりました。 グリッドは列に対してのみ使用可能なので、この方法を使用してグリッドを表示できます。

{width="600" modal="regular"}

列グループを使用して、残りの列を行またはステージの幅いっぱいに拡張する場合：

• 列の上にマウスポインターを置いてツールボックスを表示し、 設定 （ {width="20"} ） アイコンをクリックします。

• にスクロール ダウンします。 Advanced ​を選択し、4 つすべてを設定します​ Padding ​値：至 0.

  {width="600" modal="regular"}

• 右上隅のをクリックします。 Save を閉じるには Edit Column ​ページ。

「」をクリックします 全画面表示を閉じる （ {width="20"} ） アイコンをクリックし、をクリックします。 Save 右上隅

列の上にマウスポインターを置いてツールボックスを表示し、 設定 （ {width="20"} ） アイコンをクリックします。

{width="600" modal="regular"}

変更： 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	列の背景画像として、ギャラリーから既存の画像を選択するように求めるプロンプトを表示します。
  {width="25"}	画像をカメラタイルにドラッグするか、ローカルファイルシステム内の画像を参照できます。

• 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 ワークスペース。