In this article, you'll learn how to nest Rows in Page Designer, which will enable you to enhance and expand the layout possibilities when building your pages. This allows you to more finely tune how you display your content, providing greater flexibility in content grouping and presentation.
Watch the video
How to add a Row
If you need a refresher on how to add a Row to a page, keep reading; otherwise, skip to the How to nest a Row section below.
Build a page's layout by dragging and dropping Rows onto the Canvas from the Build tab.
You can add six Row types to a page, from single column to multiple two- and three-column Rows:
When placing a row, hover above, below, or within an existing Row to determine its position.
How to nest a Row
The best way to explain how to nest Rows is to showcase it with an example. In this example, we'll take a simple single-column Row, and by nesting additional Rows within it, expand it into a complex layout offering plenty of areas to insert content.
TIP: We recommend following along with a test page so you can get a "feel" for how nesting works, and then apply this knowledge to other pages.
After adding a single-column Row, drag and drop a two-column Row inside it. If done correctly, the single-column Row highlights, as you see below.
The result is a two-column Row nested within a single-column Row. Each can be selected independently by hovering your mouse cursor over their dotted lines on the Canvas, as shown below.
NOTE: All nested Rows display a dotted border; the "parent" Row does not. To select it, hover your mouse cursor slightly above the "child" Row. Refer to the Parent Row example below.
When your mouse cursor turns into a hand, click to select the Row. To help you understand which Row you've selected, it's Row Type is highlighted in the right-hand panel. As you can see, I've selected the two-column Row:
Now, let's nest a three-column Row inside the right column of our two-column Row, following the same process as before.
Doing this transforms that right column into a new three-column bucket we can use to group some related content, like three images or videos.
Lastly, let's expand this page layout a bit more by adding one more two-column Row below the others. The important thing to note here is positioning: different Rows will be highlighted depending on where you drag the new Row.
For example, dragging the Row to the area shown below will nest it within our other two-column Row; this is indicated by the blue highlighting below.
This is not the desired location. To nest this Row within the original single-column Row, we need to move it further down until we see highlighting like this:
When all is said and done, we're left with multiple Rows nested within a single-column Row, with numerous columns available for any content we'd like to add to the page.
The image below helps illustrate the hierarchy of our nested layout:
- Red = the single-column Row
- Purple = both two-column Rows nested within the single-column Row
- Green = the three-column Row nested within the first two-column Row
WARNING: Deleting a "parent" Row will also delete ALL nested Rows. If you do this by accident, click the Undo button at the bottom of Page Designer.
Notes
NOTE: We recommend limiting nesting to three levels (i.e., Row 1 > Row 2 > Row 3) to ensure page load speed is not degraded. This is especially true if you're nesting several multi-column Rows with a lot of content.
NOTE: Nesting hierarchy has no impact on View permissions for content and widgets: this permission is still set on a per-content and per-widget basis, regardless of where it is located.