Designing page layouts with rows and columns

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:

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. 

1. Log in to the Admin console and select Configuration > Studio. 
2. Create or open a studio page that you want to design. 
3. Click Components .
4. Drag the Container component to the page canvas. 

5. On the  Container Properties  tab, configure the following properties: 

   Property group or section	Property name	Description	Example
   Spacing	Align	Select the alignment of the container from one of the following options:  Top Middle Bottom
   	Vertical padding	Set the vertical space between the vertical edge of the components and the vertical edge of a container by selecting one of the following options: None—(0 root-em) Normal—0.75 rem (12 px) Airy—2 rem (32 px) Custom (in root-em) Note: An increase in the vertical padding increases the height of the row.
   	Horizontal padding	Set the horizontal space between the components in the container and the horizontal edge of a container by selecting one of the following options: None—0 root-em) Normal—0.75 root-em (12 px) Airy—2 root-em (32 px) Custom (in root-em) Note: An increase in the horizontal padding might decrease the width of the component inside the row.
   	Space between	Set the vertical space between the components in the container by selecting one of the following options:  None—0 root-em) Normal—0.75 root-em (12 px) Airy—2 root-em (32 px) Custom (in root-em)
   Background and border	Background color	Set the background color of the container by using the color picker or adding hexadecimal or RGB values.
   	Image	Add a background image and then set the display area, position, and size of the image.
   Border and Shadow	Radius	Set a value to round the corners of the container.
   	Style	Set the border style from one of the following options:  Solid Dotted Dash
   	Shadow	Set the border shadow between a range of 1 to 5; 1 being lighter and 5 being darker.
   Label	Not applicable	Specify a label for the container and set the following label properties:  Alignment Text color Heading style Weight Overflow Margin between the label and the component within the container	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. 

1. Log in to the Admin console and select Configuration > Studio. 
2. Create or open a studio page that you want to design. 
3. Click Components .

4. 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

5. Configure the component; see Creating-pages-in-the-studio.
6. Save the page.