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:
The preview of such a standard layout will be like this:
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:
And the Preview Pane like this:
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.
In the Layout Pane using the Add Section link to add a new section. Expand the section, and you will see a default 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.
Click the Add element icon inside the left column of the section in question:
Search for "Row" and drag "Row" element to the canvas:
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.
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