Cornerstone’s Layout Pane is where everything begins! This is where you will start by laying out your core structure in the form of sections, rows, and columns. Before we get into the actual mechanics of doing this, let’s delve a little deeper into what each of these elements does:

• Sections – The highest structural element available and can contain one or multiple rows. Depending on the design you’re going for, you may be able to fit numerous rows inside a section, or you may only want to use one row. Sections can be spaced out as needed, but for the most part, you will want them to stack on top of each other for a consistent page structure.
• Rows – After you’ve started off with a section, you can then add rows to that section. Rows can be spaced out from one another as needed or be stacked on top of each other.
• Columns – These are the most granular structural element available and they provide the horizontal spacing between elements. When the browser viewing your website is 767px or smaller, columns will stack on top of each other for a responsive view. The spacing between columns on this mobile view must be added as needed (more on this later).

Now that we understand some of the basics of the scaffolding that Cornerstone provides, let’s get into some practical examples.

Adding Structure

If you want to start a new page completely from scratch, the first thing you’ll want to do is add a new section using the Add Section link in the editor section of the Cornerstone:

If you already have sections added, the Add Section link will be available at the very end of the sections list or in between them.

Clicking on the Add Section button will create a dashed outline and featuring our element icon in the middle:

Anytime you see one of these areas, it is outlining a column, which is a droppable area for elements. These areas will move around depending on how you structure your output for your pages. You will also notice that not only this new section has been added to the preview area, but a sortable item has been added to the editor. These sortable items are a common facet of Cornerstone, so we’ll take a second to discuss them. Sortable items are made up of three distinct parts:

• The Handle – The large area to the left is known as the handle of the sortable item. If you click and hold on it, you can drag the sortable item around. If you have multiple sortable items, you can rearrange them in a new order by doing this and whatever they represent will be reordered in the preview area.

• Magnifying Glass Icon – Clicking this will activate subpane of options to appear for further adjustments or highlighting a particular element.

• The Controls – For the most part, sortable items will have two controls that appear, which are typically duplication and deletion.

In the case of sections, they have an additional arrow section at the very left section which will open up the Row and Columns management options.

Row and Column Management

Once you’ve clicked on the arrow option of your section sortable item, you will see the row and column management subpane that looks like this:

Double Clicking the main handle of a Section or Row will give you an option to edit the name of the Section or the Row. That will help you maintain the sections better:

Also, hovering over a section or Row will show an indicator of the place of that section or row in the Preview Panel.

Next, we have another sortable control representing your rows. You can add multiple rows here as needed using the “Add Row” link below the sortable and can inspect, duplicate, or delete your row using the controls present.

Finally, at the bottom of the pane, you’ll see the controls for choosing the column layout and order of the currently selected row. The Column Layout control dictates the overall structure of your row, while the Column Order control is a special kind of sortable which we will go over in a bit. When using the Column Layout control, you can use one of the seven predefined options, or utilize the Custom option, which will display an input and allow you to use additional layouts as needed. Columns cannot be any smaller than 1/6 and must add up to a whole (for instance, 1/4 + 1/2 + 1/4 would be an acceptable input). Finally, you’ll note that these controls also end in the row that is currently selected.

At the very bottom of the section, you will see a link called Remove Spacing. If you enable that feature all the default margins and paddings of the section and rows inside will change to 0 and you will have a condensed section:

Altering a Row’s Column Layout and Order

Now that we have that out of the way, let’s see how to change the column layout of our row. For this example, I’m simply going to select the third predefined option, 1/3 + 2/3:

In doing this, we can see that quite a few things have changed for us throughout the builder:

• In the preview area, our single droppable area has split into two droppable areas (1/3 + 2/3 due to our selection).
• The Column Layout control is highlighting the currently selected row’s new layout.
• The Column Order control has split from a single column (i.e. 1/1) into two to represent our new layout.

So let’s say that we want to reorder this layout and use 2/3 + 1/3 instead. One way we could do this is to simply click the next predefined layout button, but let’s take a moment to play around with the Column Order control. As mentioned above, this is a special kind of sortable designed specifically for columns that are meant to visually detect the current layout of your columns. The entire column itself is a handle that can be clicked and dragged to move the ordering of the column or simply clicked to inspect that column:

Dragging the column into its new position is reflected in the preview area after we drop the column. Altering the core structure of your page nothing more than a few clicks and you’re good to go! The same type of structure within a section can be done for rows above by dragging their position up and down, but we’ll cover this in more detail in another article (note that by default rows will stack on top of each other, but you can alter their spacing by inspecting them and changing their margins as needed).

Working with Templates

At the very top section of the Layout Pane you have an option to Save and Load Templates:

Saving a Template

Clicking on the Save Template button the list of available sections of the page will show, which you can choose to add to the template. At the very top section, you can add a name for the template and save it.

You can select all or some of the sections available on the page for a template.

As soon as you save a template, it will go to the Template Manager and you can use it on other pages or export it to other websites. For more information about the Template Manager click here40.

Loading a Template

If you already imported a template from Template Manager or you previously saved a template you will be able to see those templates to load in the page by clicking the Load Template button. Then you will be presented with a list of those ready to use templates which you can choose from:

Templates are a great way to manage large pieces of content easily or utilize them across multiple installations if desired. If you happen to be using Cornerstone as a base builder across numerous projects, this can prove to be an invaluable tool to easily bring your library of trusty blocks and pages with you wherever you go.

There is also another feature available which is called Global Blocks which you can use to have a central place to do changes and see the changes applied to the whole website. For more information click here18.