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 three 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.

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 the 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.

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 it’s 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.

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. For more information about the templates click here11.

• 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.

• 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.

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.

Sidebar Options

At the very left section of the Cornerstone window, you will find sidebar options which include additional none element options:

• CSS – Clicking on this option will open up a separate pane which you can add your custom CSS code which will be limited to the current page which you are editing using the Cornerstone.

• JS – Clicking on this option will open up a separate pane which you can add your custom Javascript code which will be limited to the current page which you are editing using the Cornerstone.

• Skeleton Mode – Clicking on this option will bring the wireframe mode of the page which you will be able to use to edit the page in a different mode than the preview one.

• Settings – The Settings option 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.

• 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.

• Leave Builder – Clicking this option will open up a new browser tab/window which will show the actual frontend of the website. Make use of this option if you have elements for 3rd party plugins such as the Revolution Slider which does not have a view in the Preview Area and you will need to check the actual frontend of the website to see the result.

• 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.

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

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 hop 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.