Skip to main content

Change the layout of a page

Abstract

Use the divider and column and row splitter to change the layout of your page.

SXA layouts use a responsive grid layout. Depending on the grid you use, pages are divided into columns. By using row and column splitters or by changing the grid settings, you can determine the page structure and divide the available space horizontally and vertically.

When you create a page in SXA, by default it includes the basic layout that contains three placeholders: header, main, and footer. Especially for adding partial designs, you can use the splitters to turn this basic layout into the layout that you need.

To use the Splitter (Column) rendering to change the layout of the page:

  1. On the page that you want to structure, from the Toolbox, drag the Splitter (Column) rendering to the page.

    Drag the splitter to the page

  2. Use the floating toolbar to distribute the grid columns. For example, divide the placeholder into two groups: four columns on the left and eight on the right.

  3. Now you can add renderings to the placeholders you created. For example, drag the Image (Reusable) rendering to column-1-1 to add a logo.

    Add renderings to the placeholder column

  4. To divide the groups of columns differently, you can click:

    • Add a new column86BF10D028E34F7BACF503821AD256D5.png: to add a column next to the currently selected column.

    • Move the selected column to the right9475B08EEAB34550A5CEF7ACB0220AB0.png: to move the currently selected column one position to the right.

    • Move the selected column to the left8B94FB1EBAB64BF9A33DC5E5EB9C8450.png: to move the currently selected column one position to the left.

    • Remove the selected columnDF6B2E5B662240D494CA6BC9A2B6472F.png : to remove the currently selected column.

Similarly, to increase or decrease the number of rows on a page, in the Experience Editor, drag the Splitter (Row) rendering to the page and use the floating toolbar. You can also further embed splitters in it to subdivide the rows or just add other renderings directly in the rows.

Drag the splitter to the page

To divide the rows differently, you can click:

  • Add a new row302EB1DA28A54911B6AA77BB1901E292.png: to add a column next to the currently selected column.

  • Move the selected row down91769F2A17524DDBB23F132FB9B6C1B4.png: to move the currently selected column one position to the right.

  • Move the selected row upED5ED11CE339443C8575E38190B76629.png: to move the currently selected column one position to the left.

  • Remove the selected rowDA25823F3BCC4FB29E13C3E310D8CD6E.png : to remove the currently selected column.

You can also change the layout of your pages by changing the grid settings of the renderings.