Change the layout of a page
Use the Experience Editor for the steps described in this topic.
Layouts use a responsive grid that divides pages into columns. You can use the Row Splitter and Column Splitter renderings to further define the page structure and divide the available space horizontally and vertically.
When you create a page, by default it includes the basic layout that contains three placeholders: header, main, and footer. You can add the Column Splitter or Row Splitter renderings to these placeholders. Finally, you add renderings to the newly added columns or rows.
You can also change the layout of your pages by changing the grid settings of the renderings.
Add a Column Splitter rendering
The Column Splitter rendering lets you add structure to your pages by dividing the pages into columns. The Column Splitter rendering is only a placeholder for other renderings and cannot hold any content alone. For example, to add text to a specific column, first you must add the Rich Text rendering to the column.
This topic describes how to use the Column splitter rendering in the Experience Editor. However, you can also use the rendering in Pages.
To add the Column Splitter rendering to a page:
-
Open the page, and then open the Toolbox.
-
From the Page Structure section, drag the Column Splitter rendering onto the placeholder that you want to add the rendering to. While dragging, the placeholder turns blue.
Alternatively, on the Home tab, click Component to open the Select a rendering dialog box.
-
On the floating toolbar, click
Add a new column at the end of the splitter. To see the column you just added, click somewhere below the toolbar.
-
To add or rearrange columns, in the new toolbar, you can click:
-
Add a new column
- to add a column next to the currently selected column. -
Move the selected column to the right
- to move the currently selected column one position to the right. -
Move the selected column to the left
- to move the currently selected column one position to the left. -
Remove the selected column
- to remove the currently selected column.
-
-
To add a rendering to a column, drag the rendering from the Toolbar, or select the column and then click Add here. For example, to insert the Image rendering to add a logo.
Add a Row Splitter rendering
The row splitter rendering lets you divide your pages into rows. The Row Splitter rendering is only a placeholder for other renderings and cannot hold any content alone. For example, to add text to a specific row, first you must add the Rich Text rendering to the row.
This topic describes how to use the Row splitter rendering in the Experience Editor. However, you can also use the rendering in Pages.
To add the Row Splitter rendering to a page:
-
Open the page, and then open the toolbox.
-
In the Page Structure section, drag the Row Splitter rendering onto the placeholder that you want to add the rendering to. While dragging, the placeholder turns blue.
Alternatively, on the Home tab, click Component to open the Select a rendering dialog box.
-
On the floating toolbar, click Add a new row at the end of the splitter. To see the row you just added, click somewhere below the toolbar.
-
To add or rearrange rows, in the new toolbar, you can click:
-
Add a new row
- to add a column next to the currently selected column. -
Move the selected row down
- to move the currently selected column one position to the right. -
Move the selected row up
- to move the currently selected column one position to the left. -
Remove the selected row
- to remove the currently selected column.
-
-
To add a rendering to a row, drag the rendering from the Toolbox, or select the row, and then click Add here.
