Customizing the appearance of a row
Rows are the horizontal containers or wrappers within which you place page components. Use row properties to apply background color and other design elements to a single row and control its appearance.
Background images and colors can make rows visually engaging. Add a background to a row to create contrast, provide a context to the text in a component, nest a component within a row to create space around it and separate the different sections of your page, add a label or title to a row, and so on. Row properties override properties that you configure at the page level.
Required license
Related topics
The following image shows the row properties pane.
To access the row properties panel
To configure row properties, on a page that contains at least one component, select the row.
- Log in to the Admin console, and then select Configuration > Studio.
- Open a page in the studio.
- Click in the area outside a component, either to the right or to the left of the component.
The row properties panel opens and displays the Row Block label.
The following image shows where you need to click to open the respective property panes.
- Use the properties to apply design elements to the row.
To customize the appearance of a row
- Open the page in the Studio.
Select a row and then use the following properties to customize the row:
Property group or section
Property
Description
Base properties
Stretch the row across the content area or across the width of the page.
Note: The row width property only affects the width of the row. It does not change the placement of the content in the row, which is always confined.
Shadow
Apply a shadow effect to the row.
Create space above and below the row.
You can decrease the margin to make a row flush against another row, increase the margin to separate a row from another, and so on.
Note: To remove the space between a page header and its top-most row, you need to configure the Vertical padding setting in page properties.
Position or nest a component inside a row by configuring the amount of space between the component and the top and bottom edges of the row.
If the vertical padding is set to none, the component has the same top and bottom edges as the row. Instead of the preset values, you can choose the custom option to specify the spacing for both top and bottom of the row or only on the top or only on the bottom.
Note: An increase in the vertical padding will increase the height of the row.
Position or nest a component inside a row by configuring the amount of space between the component and the left and right edges of the row.
If the horizontal padding is set to None, a component has the same left and right edges as the row. Instead of preset values, choose the custom option to specify the spacing on both sides or on only one side or the other. Note that for custom option, Start is the same as left of the component and End is the same as right of the component.
Note: An increase in the horizontal padding may decrease the width of the component inside the row.
Background
Color
Add a background color to the row by using the color grid.
Image
Upload an image file to add an image in the background of a row, and then specify the options to size and position the image. You can stretch the image to fill the entire row.
Border
Radius
Round the corners of the row.
Style
Set a line style if you want a border around the row. The line style can be a series of dots, line segments, and so on.
Color
Select a color for the border around the row.
Label
Label
Add a heading or a name for the row.
Note that adding a label increases the height of the row.
You can configure the label settings, such as alignment, color, style, overflow, and margin.
Content group
Content width
Stretch or constrain the width of the component or components inside the row.
By default, components are center-aligned inside the row.
Expand or compress the space between content blocks inside the row.
- Save the page.
The following image shows some row properties:
The following image shows the effect of configuring some row properties:
Row width property
The following image shows how the row width property affects the width of a row:
Vertical margin property
The following image shows how you can use the vertical margin property to space out a row or make it flush against an adjacent row.
Vertical padding property
The following image shows how you can use the vertical padding to add space above and below a row:
Horizontal padding property
The following image shows how you can use the horizontal padding property to add space to the sides of a component in a row:
Inner padding property
The following image shows how you can use the inner padding property to space out content blocks inside a row:
