Change the layout of a page created in Quebec or Rome
Add and modify your layout design to change the way your page looks. Choose how components are displayed on a page through Cascading Style Sheets (CSS) web layout technologies, such as Flexbox and CSS Grid.
Before you begin
Role required: ui_builder_admin
About this task
Layouts control what containers and components are available on a page, and where they are. CSS rules apply to them. You can change the layout as follows.
Procedure
Navigate to All > Now Experience Framework > UI Builder.
Open an experience to work in or create an experience by selecting Create > Experience.
Depending on the type of page, do one of the following to select a container to update.
Type of page
Instruction
Existing page
Select the container on your page for which you want to change the layout.Note: Alternately, you can select the container in the content tree to the left of the main page area. When the page structure is in the structured tree, you can more easily find the container you want to change. If you have many components and containers in the content tree, use the search bar to find a specific container.
New page
In the content tree to the left of the main page area, select the Body of your page. Body is the root element of the page.
Image omitted: UIB-content-tree-body.png Arrow pointing to body element in the content tree structure.</p></td></tr></tbody>
If you are starting a new page, you can select the layout at the page level, and later at the container level. If you are not the owner of an existing page, be aware of the impact of changing the layout at the page level.
Change the layout of your container.
In the Page configuration pane, select the Layout tab to select the layout that you want to use.
You can change the current layout of an existing page into a new one. For example, in a three-column layout, you can click the four-column layout to change the layout.
You can also set the layout for a container. The following image shows the layout options for the UI Builder.
Image omitted: UIB-layouts.png Layout options for UI Builder.
2. If you are creating a page, add components to the new areas in your layout.
3. Click **Save**.
4. View and test your page by selecting
Image omitted: preview-button.png Preview button that opens your page in runtime, which is a preview of how the page looks on a web page..
For changing an existing page, the following video shows how you can change the container layout from three to four columns, and then add a new component to the fourth column.
Image omitted: UIB-change-layout-video.gif Changing the layout of an existing page.
For setting the layout of a new page, the following video shows you how to set the layout that you want for the page. For example, you can set your page to have two slots or columns. Then, you can add containers to each slot and change the layout for each container. You can also set the layout at the container level after you add containers to your page.
Image omitted: UIB-change-layout-page.gif Changing the layout of a page
You can add components by using any of the following ways.
To add a component
Do the following
Directly from your page (option 1)
Select the add content (plus) icon, select the Components tab, and then select a component.
Directly from your page (option 2)
On a column layout or component, select the add before \(plus\) or add after \(plus\) icon, and then select a component.
From the content tree
In the content tree, select + Add content and then select a component.
Image omitted: component-add-from-content-tree.png Black arrow pointing to + add content option in content tree next to the toolbox window with Components tab selected.</p></td></tr><tr><td id="d250613e370"><strong>From the floating menu above the page</strong></td><td>On a column layout or component, select the Menu icon, select <strong>Add before</strong> or <strong>Add after</strong>, and then select a component.</td></tr></tbody>
Modify the layout styling options in any of the following ways.
Option
Instruction
Change the layout styling
Click a container for which you want to change the layout.
You can click the container in the content tree, or you can click the container on the page.
From the floating menu above the page, click Layout.
Image omitted: UIB-layout-change.png Location of change layout icon on the floating menu.</p>
Image omitted: UIB-flex-or-grid-option.png Flex or grid option in a drop-down.</p>
Select the following options based on how you want to display your container content on the page. The options can also be entered in the CSS styles box:
Flex direction: Choose from Row, Row-reverse, Column, or Column-reverse.
Justify content: Choose from any of the following: - Flex-start: Items are at the start of the flex direction, similar to left-justified content. This is the default setting. - Flex-end: Items are at the end of the flex direction, similar to right-justified content. - Space-between: Items are distributed evenly. - Space-around: Items are distributed evenly with equal space around them. - Space-evenly: The spacing between items is equal.
Align items: Defines how you want your flex content displayed along the cross axis. Choices are as follows: - Stretch: Stretch your content to fill the container. This is the default setting. - Flex-start: Place your content at the start of the cross axis. - Flex-end: Place your content at the end of the cross axis. - Center: Center your content in the cross axis. - Baseline: Align your content the same as your baseline alignment.
Height: Set the height automatically, or manually.
Width: Set the height of your flexbox items automatically or manually.
Margin: Set your minimal distance between flexbox items.
Padding: Set the padding for each side of your flexbox items.