Cornerstone: Interface – Introduction

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

Now that you’ve got Cornerstone setup, we’ll start diving into the interface and discussing a general overview of how things are structured and how to get around. While we’ll provide a general overview of things here, each of the four main panes of the Cornerstone editor will be covered in more detail in additional individual articles, so definitely be sure to check those out after reading through this.

Editor + Preview Area = Cornerstone

The Cornerstone builder is broken down into two overarching ideas, the editor and the preview area. Cornerstone’s editor is its sidebar where all adjustments and settings are specified, and the preview area is the larger section next to it where you can see a live preview of your site. If you’ve used WordPress’ Customizer before, you’ll find this interface very familiar to work with.

Example 1

Between the two sections, the preview area is a little less involved, so we’ll start there in explaining how it functions within Cornerstone.

The Preview Area

One of our main goals we set out to accomplish in Cornerstone was to make the preview area of the site as clean and clutter-free as possible. In doing so, we essentially reduced the preview area of the builder to one function: inspecting elements. Once you have actually added some elements to your page (this will be covered when we discuss the editor), you can start hovering over your items in the preview area. Any element that can be inspected will be highlighted by Cornerstone’s observer.

Example 2

Clicking on an observable element will activate it in the editor’s Inspector pane. Once you have done this you will be able to alter the appearance of that element or its child elements if there are any (such as with tabs or accordions).

Finally, the last action you can carry out in the preview area is dragging elements around to reposition them on your page. The only elements you cannot reposition in the preview area are sections, rows, and columns as these are all handled via the Layout pane. When dragging an element all “droppable” areas will be highlighted with a dashed outline and elements inside will appear slightly transparent so you can focus on where to position your element you’re currently dragging.

Example 3

The Editor

When working on the editor we sought to break down the main workflows that come with laying out a page. Ultimately, we came up with four areas, which are represented by the icons at the very top of the editor:

  • Layout – The Layout pane takes care of anything structural related to your page. This includes adding sections, rows, and columns, as well as managing and working with templates. Templates include blocks, which are small sections of elements, and pages, which are combinations of blocks that replace all current content when output.

    Example 4

  • Elements – The Elements pane is a library of all available elements you can drag into the preview area. Similarly to repositioning elements in the preview area, when you’re dragging in an element all “droppable” areas will be highlighted with a dashed outline to see where you can place items. Note that some elements are not available in the library (such as dropcaps for example) because they need to be placed inline with content.

    Example 5

  • Inspector – The Inspector is where all element level adjustments are handled. When you click on an element in the preview area it will be highlighted here to work on. The element you’re currently inspecting will appear at the top of this pane to give you a context for what you’re currently working on. Additionally, the path to the inspected element will appear at the top of the controls section and can be used to navigate up to parent elements such as columns or rows to make quick adjustments.

    Example 6

  • Settings – The Settings pane is used for managing miscellaneous options that don’t have to do with any elements included in Cornerstone. This includes things such as WordPress page templates, parent pages, comments, et cetera. Additionally, you can manage custom CSS and JavaScript here, as well as a few special elements such as responsive text. It should be noted that any WordPress settings that are adjusted will need to be saved to reflect their changes.

    Example 7

Each of these panes will be covered in more detail in additional articles, so be sure to read through those for a more thorough rundown of everything they entail.

Finally, the editor footer contains quite a few useful pieces of functionality and critical actions for working with the builder. From left to right, they include the following:

  • Collapse Editor – The collapse button will make the editor slide out of view in the browser window, giving you a quick way to approximate the look of your site without having to leave Cornerstone. Doing so will clear up some things as well so you can more easily observe your design, such as making the observer and gaps go completely invisible.

    Example 8

  • Leave Builder – Clicking this item will trigger a flyout to appear, which will let you know when you last saved your page. Depending on if you should save or not, this section will appear red or green. Below the save notice are two actions to either return to the page or post’s backend admin page or to go see it live on the frontend.

    Example 9

  • In Builder Settings – Clicking this item will trigger a flyout with two toggles for Help Text and Advanced Controls. These can be toggled on or off at any time while using the editor to suit your needs. The descriptions beneath each of them give a simple overview of what they do.

    Example 10

  • Responsive Preview Area – When clicking the responsive viewport icon, a flyout will appear that gives you quick access to preview your site’s design at Cornerstone’s five major breakpoints. Depending on the size of your screen, the preview area may not change appear to change size (such as clicking the “Large” option), but you will definitely see it change as you go down smaller. Keep in mind also that when your preview area is made smaller, your mouse must be positioned over your content to scroll it up and down.

    Example 11

  • Save – You guessed it, it saves your content and greets you with a friendly little message when complete.

    Example 12

Editing Existing Pages

To make things fast in Cornerstone, all page structure is saved out as a separate data object in your WordPress installation that we can use to parse things quickly and render elements in a snappy manner. Because most other builders will look at your markup and try to “figure out” what you want to do, this can make things slow and laggy. Due to this setup, if you try to edit an existing page in Cornerstone that you may have handwritten before, your page will appear as blank when you open the editor, which is because the data object mentioned previously hasn’t been created yet. Because of this, it means that you cannot readily switch back and forth between handwriting pages and then hopping into Cornerstone or vice versa; however, this was done for numerous reasons such as speed and ensuring that a consistent workflow is kept. Switching back and forth can be a cumbersome and error-prone process, which is why we have opted to do things this way in an effort to make using the tool as efficient as possible.