Nested Layouts

In this article, we're going to discuss the nested layouts of Cornerstone and Pro Content Builder. Our focus will be using the Layout Pane and the Row Element.

  1. Layouts in Cornerstone and Pro Content Builder
  2. Standard Vs. Nested Layouts
  3. Nested Layout Implementation
  4. Summary

Layouts in Cornerstone and Pro Content Builder

Cornerstone and Pro Content Builder have a layout pane which is used to add the structure of the page. The page can be structured as Sections, Rows, and Columns. Click here for more information on how you can use the features of the builders to create standard layouts.

Standard Vs. Nested Layouts

Using the Layouts Pane, you can add standard layouts which contain a Section as the main wrapper, one level of rows and inside each row one level of columns. This can be done with the help of the Layouts Pane and covers most of the layouts needed on a website. But there are cases that there is a need for more complicated layouts. Following is the introduction to a complicated layout which is not a standard one, and we can call it a Nested Layout.

Imagine a case scenario that you want to have a Section which contains one Row, and the Row contains two Columns, the left, and right columns:

Nested Layouts Pane

The preview of such a standard layout will be like this:

Nested Layouts Preview

Now, you want to add a nested Row inside the Left Column, and that row, in turn, is going to have two Left/Right nested columns. The desired Layout Pane for this case scenario should be like this:

Nested Layouts Pane Nested

And the Preview Pane like this:

Nested Layouts Preview Nested

Nested Layout Implementation

To implement a case scenario that we described in the previous section, you have two choices:

  • Layout Pane
  • Row Element

We are going to explain the two methods in details.

Layout Pane

In the Layout Pane using the Add Section link to add a new section. Expand the section, and you will see a default Row:

Nested Layouts Additional Row

Double click on the Row 1 and change the name to Nested Row. Then click the Magnifying Glass Icon of the Nested Row and add two Columns to that. Then expand the previous section and drag the Nested Row into the Left Column of the previous section. Alternatively, you can double click on the columns and change their name to Nested Left/right Column. The result will be the nested layout which we talked about in the previous section.

Row Element

Click the Add element icon inside the left column of the section in question:

Nested Layouts Row Element Add

Search for "Row" and drag "Row" element to the canvas:

Nested Layouts Row Element Add Search

The Row element has all the specification of the layout row, and you can set necessary columns inside the row and create the nested layout in question.

Click here for more information about the Row Element.

Summary

We discussed how the nested layouts work in Cornerstone and Pro Content Builder. We talked about the Layout Pane and Row Element to implement the nested layouts.

See something inaccurate? Let us know