Cornerstone: Interface – Layout

This article was last updated on the January 2, 2017.

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 do:

  • Sections – The highest structural element available and can container 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. Spacing between columns on these 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 button from the two main actions near the top of the editor (you’ll find that most panes have two main items like this at the top for important actions). Doing this will replace the Cornerstone welcome message in the preview area with a section surrounded by a dashed outline and featuring our element icon in the middle:

Example 1

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 has this new section 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 two distinct parts:

  • The Handle – The large area to the left with the label that turns white on hover is known as the handle of the sortable item, and it typically has two functions. Firstly, clicking it will activate something, such as a subpane of options to appear for further adjustments or highlighting a particular element. Secondly, 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.
  • The Controls – For the most part, sortable items will have two controls that appear, which are typically duplication and deletion. In the instance of rows (which we’ll get to in a bit), there is an additional control to inspect that element just in case a user wants to get to it a little easier.

Since we only have one section for now, let’s go ahead and click the handle to take us through to our row and column management subpane.

Row and Column Management

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

Example 2

As this might be your first time to click through to a subpane in Cornerstone, keep in mind that you’ll never go any “deeper” than this in the editor. If you ever need to get back to the top level of a pane, simple click the back button at the top of the pane.

Below that back button the first thing you’ll see is an input that contains the same text as the sortable control before we clicked on it. This is the title control for a sortable item and it is used to label sortables to your liking for easy recall later. The search icon to the right of the input is an inspect button for the section you’re currently on and is one of a few ways you can inspect sections as needed.

Next, we have another sortable control representing your rows. You can add multiple rows here as needed using the “Add” button below the sortable and can inspect, duplicate, or delete your row using the controls present. Clicking the handle for these rows will activate the column layout and order controls for that row below (you’ll note that active rows are highlighted green to show that they have the current focus). We’ll come back to all of this in just a bit.

Finally, at the bottom of the pane you’ll see two 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.

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:

Example 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 is 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 (which we’ll cover in another article):

Example 4

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

Clicking the Templates button on the Layout pane will take you through to a subpane where you can utilize and manage predefined content in your layouts. The quickest way to get started is with one of our predefined pages or blocks. The important distinction between pages and blocks is that blocks are small sections of elements whereas pages are combinations of blocks that replace existing content (that last bit is very important as outputting a page will completely overwrite anything you currently have, so use them carefully).

Adding Blocks and Pages

To begin, lets add the “Get in Touch” block to our content. To do this, go to the Themeco Blocks select control and find the proper block, and then select the Insert button to the side. Doing so will output the following content to your page:

Example 5

If you want, you can head back to the main Layout pane and click on the section to see how the structure is setup (this is a great way to learn about how to setup your own blocks and pages in Cornerstone). After adding a block to your page, the next thing you’ll want to do is go through it and update the information and content to match what you want it to be. This might be as simple as swapping out the default text with your own, or you may actually move things around a bit, change colors, alter the design, et cetera.

Saving Blocks and Pages

Once you’re done making the changes you want to make, we’ll go ahead and practice saving out our new content. To do this, you’ll click the Save button at the top of the subpane, which will reveal a small flyout from the top of the editor:

Example 6

Simply give your template a name then choose between Download or To Library. Downloading your template will allow you to upload it later and choose what to do with it, or you can use it on another installation that is utilizing Cornerstone. Saving to your library you will be prompted to keep it as a block or a page. Once you have selected how to organize your content, new selects will appear featuring your own items to use over and over again as you need them.

Alternately, if you already have a template downloaded from earlier, you can click the Upload button to reveal the file upload flyout. All you need to do is select your previously exported .csl file and then click Add to Layout. In doing this, you will choose between adding it as a block or page, so remember to choose wisely depending on what you need.

Templates are a great way to manage large pieces of content easily or utilize similar blocks and pages 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.