ページのレイアウトを変更する

概要

ページのレイアウトを変更するには、分割バーと列と行のスプリッターを使用します。

SXA のレイアウトは、応答性に優れたグリッド レイアウトを使用します。使用するグリッドに応じて、ページは列に分割されます。行と列のスプリッターを使用するか、グリッド設定を変更することで、ページ構造を決定し、ページ構造を決定し、利用可能なスペースを縦横に分割することができます。

SXA でページを作成すると、既定で、ヘッダー、メイン、フッターの 3 つのプレースホルダーを含む基本レイアウトが作成されます。特にパーシャル デザインを追加する場合は、スプリッターを使用してこの基本レイアウトを必要なレイアウトに変えることができます。

スプリッター (列) レンダリングを使用してページのレイアウトを変更するには、次の手順に従います。

  1. 構築するページで、ツールボックスからスプリッター (列) レンダリングをページにドラッグします。

    ページにスプリッターをドラッグする
  2. フローティング ツールバーを使って、グリッドの列を分散させます。たとえば、プレースホルダーを左に 4 列、右に 8 列というように分けます。

  3. これで、作成したプレースホルダーにレンダリングを追加できるようになりました。たとえば、「画像 (再利用可能)」レンダリングを列-1-1 にドラッグすると、ロゴが追加されます。

    プレースホルダー列にレンダリングを追加する
  4. 列のグループを異なる方法で分割するには、次をクリックします。

    • [新しい列を追加]86BF10D028E34F7BACF503821AD256D5.png: 現在選択されている列の隣に列を追加します。

    • [選択した列を右に移動]9475B08EEAB34550A5CEF7ACB0220AB0.png: 現在選択されている列を 1 つ右に移動します。

    • [選択した列を左に移動]8B94FB1EBAB64BF9A33DC5E5EB9C8450.png: 現在選択されている列を 1 つ左に移動します。

    • [選択した列を削除]DF6B2E5B662240D494CA6BC9A2B6472F.png: 現在選択されている列を削除します。

同様に、ページの行数を増減するには、エクスペリエンス エディターでスプリッター (行) レンダリングをページにドラッグし、フローティング ツールバーを使用します。さらにスプリッターを埋め込んで行を細分化したり、他のレンダリング画像を直接行に追加することもできます。

ページにスプリッターをドラッグする

異なる方法で行を分割するには、次をクリックします。

  • [新しい行を追加]302EB1DA28A54911B6AA77BB1901E292.png: 現在選択している列の隣に行を追加します。

  • [選択した行を下に移動]91769F2A17524DDBB23F132FB9B6C1B4.png: 現在選択している列を 1 つ右に移動します。

  • [選択した行を上に移動]ED5ED11CE339443C8575E38190B76629.png: 現在選択している列を 1 つ左に移動します。

  • [選択した行を削除]DA25823F3BCC4FB29E13C3E310D8CD6E.png: 現在選択している列を削除します。

レンダリングのグリッド設定を変更することで、ページのレイアウトを変更することもできます。