How to Add, Move, or Edit Rows - UXi® Websites – Marketing 360®

The Rows Menu

Click the Rows button to display the rows for the page header, footer, and body.

The "Current Layout List" lists all the available layouts for the header, page, and footer. Each grey bar below them represents a row in that section of the page. The row's columns are noted by their width.

Important: Changing a layout will change it on every page where that layout resides, not just the current page, unless you specify otherwise in Step 3.

Add a New Row

Click the ADD ROW+ button at the bottom of the page section that needs a new row.
From the Add Row window, Click New Row.
Select which pages will be added to.

The first option: Apply site wide to ALL pages using ‘Default’ layout adds the new row to all pages using the current layout. Use this option to add a new row of widgets to all pages assigned to the current layout, in this case: ‘Default’.
Example: The inner pages all need a new row of trust badges below the main content. Adding a new row of these badges to the ‘default’ layout will add the badges to all pages assigned to ‘default’.
The second option: Apply to ‘Default’ layout ONLY on ‘Request a Quote’ page adds the row to that page only. Use This Option while editing a page that is already assigned to a certain layout, but needs to display a new row of widgets that should NOT be included on the rest of the pages that are assigned to that layout.
Example: The site has a ‘Request a Quote’ page that is assigned the default layout, but now needs a new row with a Request a Quote form.
Select a row type. This controls the columns in the newly added row.

Add a Nested Row

Add a new row by following the steps above.
When that row is in place, click the Add Nested Row icon that appears when you hover over the empty column.
Select New Row.
Select a row type.
To add the nested row, click the Add Nested row button again.
Click Add Child Row
Select New Row
Choose another layout for the new nested row.
Add required widgets.

Move an Existing Row

Click the icon on the left of the individual row and use drag n’ drop to move it. Rows can be moved within the page layout, or from one section of the page to another (IE: Header to footer)

Note: Moving a row out of the header or footer of a page will make the same change on all other pages using that header or footer layout.

Row Settings

To adjust row settings, click the icon next to the row. This menu controls design elements like background colors/images, borders, box shadow, margin, and padding.
These settings can be added for each of the three sections contained in any row: the Wrapper, Container, or Container Inner.

The Wrapper is the outermost section of any row. It spans the entire width of the browser.
The Container is the next element in the wrapper. It spans 1140px by default. Adding padding to this element will add width, making the container wider than it’s original.
The Container Inner is inside the container. Adding padding here pushes the content inward from the original width.

Row Styles

Styles are also added to rows inside the settings menu.

Background: Set a background color, image, and gradient for the row.
Note: You must select a background color to be used if a background image is set.
Borders: Set individual borders for each side of the row (top, right, bottom, and left)
Margin: Top and bottom margins can be set for each row to allow for more spacing when needed
Padding: Padding can be added to each side of the row (top, right, bottom, and left) to allow for spacing between the row and the content inside it.
Box Shadow: Multiple box shadows can be added to each row for customized shadows and insets.