Designing page layouts with rows and columns
Rows and columns are horizontal and vertical containers within which you arrange page components. As an administrator, by using rows and columns, you can create a grid-based page design that helps maintain proportion and alignment between elements.
Arranging components in rows and columns provides the following benefits:
- Creates a good balance by using text, images, and white space on the web page.
- Makes it easier for end users to understand the content hierarchy by grouping related elements together.
- Multicolumn layouts help you to display different types of content next to each other.
For example you can display text alongside images that creates a visually appealing page layout.
As an administrator, you design a page by arranging components in rows and columns to create advanced and engaging page layouts with a combination of rows and columns.
Required license
Related topics
Adding and customizing rows
A row is automatically added after you add any component to the page.
You can add background images to make rows visually engaging or use a background color to create contrast. You can nest components within a row and provide context for the text in the component. Row properties override properties that you configure at the page level.
To learn how to customize a row, see Customizing-the-appearance-of-a-row.
Restrictions for using page components in rows
The total width of all components in a row is restricted to 100%, which is the full width of a page. Each page component has a specified minimum width, expressed as a percentage of the full page width (100%). For example, the minimum width allowed for the container is 10%. When you add multiple page components in a single row (horizontally), you must consider the total sum of the components' minimum widths to comply with the designated 100% width limit of the row.
The following table describes the minimum width allowed for each component:
Component | Minimum width allowed |
|---|---|
Container | 10% |
Content block | 10% |
Catalog section | 25% |
Catalog banner | 100% (fits across the full width of the page) |
Events | 100% (fits across the full width of the page) |
Record view | 33% |
Asset group | 25% |
Search bar (standalone) | (Version 23.3.01 and later) 25% |
The maximum number of components that you can add in a row depends on the minimum width of each component. For example, to comply with the total width limit of the row, you can add four search bars (standalone) in a single row, or you can add one search bar (standalone) and seven containers.
The following image illustrates this example:
Adding and customizing columns
Containers allow you to create columns and organize multiple components within them. You can add a background image to make columns visually engaging or add a background color to create contrast.
Behavior and restrictions of the Container component
Be aware of the following behavior and restrictions when arranging components in a column:
- You cannot configure the height of a container. It takes the full height of the row in which it nests.
If a container is empty (no component is added to it), in the end user view, the space occupied by the container is not rendered.
Example of how an empty container is displayed in the end user view
If a container is the only component in the parent row, it occupies the area of the content within it.
Example of a container resized to occupy the content within
To configure the Container component for columns
You add the Container component to the page to be able to stack components in a column.
- Log in to the Admin console and select Configuration > Studio.
- Create or open a studio page that you want to design.
- Click Components
. - Drag the Container component to the page canvas.
On the Container Properties
tab, configure the following properties:
You have configured the container component. You can now add other components and arrange them vertically within this container.
To arrange components within a container
After configuring the container, you add and arrange components in the container.
- Log in to the Admin console and select Configuration > Studio.
- Create or open a studio page that you want to design.
- Click Components .
Drag a component and position it within the container.
The following table provides options for how you can position a component in the container:Position
Example of placing the content block
In the top row of the container
In a column of the container
In a new row within the container
- Configure the component; see Creating-pages-in-the-studio.
- Save the page.
Tip
If you have multiple layers or nested components on a page, to configure the exact layer, we recommend that you right click the canvas to open the Layers menu and select the options. Only the supported options are displayed in this menu.
The following image shows the Layers menu and the submenu:
