Page Designer - Row Settings

This article will address the following:

1. Overview of Row Settings (and how to open the window)
2. Settings
3. Frequently Asked Questions

Overview

Summary: The Row Settings are exclusive to the responsive canvas only. Within the Row Settings window, users can configure display options for the rows that contain tile elements. There are three tabs within the Row Settings window: Row, Padding and Advanced.

Rows Before Tiles: On responsive canvases, rows serve as containers or display spaces for tiles. Before adding a tile, users must add a row. To do that, click Rows located at the top left of the site. Notice the various types of rows to select from.  

How to Open Rows Settings Tab: To get to access the row settings, you will need to click on the gear cog on the left side of the row. This will open the Row Settings window where users can configure row features. 

How To Use Rows/Nested Rows: First, select the Desktop Layout and Phone Landscape. Then drag from either the Row or Nested Row icon to the page content area. If you want a Nested Row, you must first drag a Row then drag a Nested Row inside of the already existing Row. 

Settings

The Row Tab is primarily responsible for allowing users to configure the structure and behavior of the row. 

Background Color
This allows you to change the background color of the row. By default this is set as transparent.

• Stylistic/Custom decisions should be made based off the visual relationship between the background image or color (if there is one) and the background color of row.

Background Image
Set a background image to the row. The image source is from within SharePoint. 

• It is not ideal to set a background image to the row when you have a background image for the page. 
• It is recommended that the resolution of the background image synchronizes with the width of the row. The width of the row is measured in pixels and can be manipulated. When selecting a background image, the horizontal resolution should match the width of the row. 

Background Image Style
Set how the image is displayed within the space of the row. Select from the drop down menu.

• Tile uses the image to fill the background of the tile frame (or space). It does not resize or manipulate the image in any way. If in the event the row is wider than the original image, the image will repeat itself and fill the extra spaces. 
• Stretch stretches the image to fit the entire image within the frame of the row. 
• Fit resizes the image and maintains its original aspect ratio. This option makes it so that the aspect ratio is maintained and that all of the image content is visible within the row. Typically, this would leave some white space on both ends of the row. 
• Fill uses the entire space of the row and displays the image close to its original aspect ratio. 
• Center localizes and zooms into the center of the background image. This option cuts out some image content on the outer borders.

Max Row Width
This option sets the maximum width of the row. 

• As mention earlier, it is recommended that the row width matches the horizontal resolution of the background image of the row (if there is one being used). 
• For a clear start, try starting with a Max Row Width of 1200 or 1400. 

Visibility
Contains fours items that can be toggled on or off. The items control the visibility and behavior of the tile when viewing on different devices.

• Show on Large Devices: When this box is ticked, this row will show on large devices

• Show on Medium Devices: When this box is ticked, this row will show on medium
  devices.

• Show on Small Devices: When this box is ticked, this row will show on small devices.

• Show on Extra-Small Devices: When this box is ticked, this row will show on extra-small devices.

For each option, there are four fields where you will be able to enter pixel numbers for padding in regards to the rows, left, right, top and bottom padding.

Row Padding
Applies padding to the row in the responsive design.

Column Padding
Applies padding to the columns within the row.

The Advanced tab allows for more direct control of the tile through administrative settings and custom code. Users can control tile visibility to specific groups of people, disallow other users to modify the tile, and implement custom CSS classes. For more information, refer to the article that performs a deeper analysis of the Advanced tab. 

Frequently Asked Questions

Q: I see that I can either add a row of 4 or 6. How can I add a row that has 5 columns?
A: Great Question. We do not have the immediate option to make 5 column rows but what you can do is add a row, and then stack two of the 3 column Nested Rows. When they stack you should have two boxes to the left, one box on the top of the other and then two on the right. Consider the following image for how it would look like: