柱通芯

グリッドを使用すると、コンテンツが一貫して列に配置され、デスクトップとモバイルデバイスの両方でページが正しくレンダリングされるようになります。 詳しくは、Page Builder 設定の 詳細なコンテンツツールの節を参照してください。

1 つの列を持つ行のグリッド分割

次の 2 列の例では、各列コンテナの上部のボーダーの括弧内の数値(6/12)は、各列のグリッド分割数と分割総数を示しています。 この場合、柱は、合計 12 のうち 6 つのグリッド単位の幅です。

2 列の行のグリッド分割

列を追加

  1. Layout ​の下の Page Builder パネルで、Column ​をステージにドラッグします。

    列のステージへのドラッグ

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

    2 つの等しい列

  2. 列グループの左上隅にある グリッド ツール( Grid control )をクリックして、必要に応じてグリッドのサイズを調整します。

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

    2 列のグリッド分割

列のサイズ変更

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

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

    2 つの列の間のハイライト表示された境界線

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

    両方の列の幅は、変更を反映して調整されます。 各列の新しい幅は、4/12 (4 out of 12)や 8/12 (8 out of 12)のように、ラベルの後に表示されます。

    サイズ変更された列

列の削除

  1. 削除する列の上にマウスポインターを置いてツールボックスを表示し、削除削除アイコン)アイコンを選択します。

    列ツールボックス

  2. 列にコンテンツが含まれている場合は、「OK」をクリックして確定します。

    今後のプロセスを高速化するには、「Do not show this again」チェックボックスをオンにして、確認ステップをスキップします。

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

    グリッド付き単一の列

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

    • 列の上にマウスポインターを置いてツールボックスを表示し、「設定」( 設定アイコン)アイコンを選択します。

    • Advanced」セクションまでスクロールし、4 つの​ Padding ​値をすべて 0 に設定します。

      ゼロのパディングを使用

    • 右上隅の「Save」をクリックして、Edit Column ​ページを閉じます。

  4. ワークスペースの右上隅にある フルスクリーンを閉じる アイコン フルスクリーンアイコンを閉じる アイコンをクリックし、右上隅の「Save」をクリックします。