The Cornerstone page builder from Themeco has always been promising. Lately dt has been generating quite a buzz in the WordPress community. This modern drag and drop editor is a powerful and innovative solution. It’s a 100% front end page building tool for beginners and power users alike. It makes editing fun, easy and efficient. Today we are going to give you an overview of Cornerstone and what you can do with it.
Themeco, the developers behind Cornerstone realized that WordPress users were in need of a better way to utilize shortcodes. This became the inspiration behind Cornerstone. It was created it as a component of X Theme, but quickly developed into an intuitive front end page builder. According to Themeco’s website:
“At its core, Cornerstone is a collection of shortcodes which can be utilized to build out complex page layouts with near infinite customizability. Beyond that though, it’s much, much more. Cornerstone takes these integrated shortcodes and provides alongside them a simple, streamlined, drag and drop frontend interface, allowing users of all experience levels to take full control of their page layouts! “
We couldn’t have said it better ourselves. This powerful building tool is modern, efficient and very flexible.
What’s Unique About Cornerstone
If you are a longtime user of Visual Composer, you may be wondering why you would need another page builder. The answer is simple. While there are some amazing page builders for WordPress, you haven’t seen anything like Cornerstone. This page builder brings a fresh and innovative approach to the table. It’s super simple yet very powerful. Editing pages is fast and intuitive. Below are a few key reasons that make Cornerstone stand out.
Fast loading can save you time. It’s built on HTML5, Backbone, Marionette and Sass. Edit in real-time to see your changes instantly. You can also preview how your page will look on different screen sizes.
It’s 100% Frontend and 100% Responsive. You can add shortcodes from the native WordPress editor if you want, or do everything from the front end. Everything you add or edit is responsive.
Cornerstone can improve workflow. Not only is it fast, it’s organized in a very simple manner. It’s simple to get back to where you started. It’s not hard for even the newest users to figure out in a few minutes. Power users will love the built-in text editor, which contains some powerful features. Get more done in a shorter amount of time.
Building a Page
Below we have a short screencast showing you how to create some sections with elements. I wanted to demonstrate how fast and easily you can add things like headlines, text and cards. We are only just scratching the surface but you can see just how powerful Cornerstone is.Get CornerStone Live Demo
Let’s dive right in and see what this bad boy (or girl) can do. We aren’t going to get too dirty. If you can’t code your way out of a paper bag, don’t worry. In future posts I will get more in depth and build some demo pages, but for now we are going to take brief guided tour through the frontend. If you are familiar with the language of the web (which I hope you are), you will enjoy just how powerful Cornerstone can be.
I am running the standalone version of Cornerstone on WordPress 4.5 on the Twenty Sixteen theme. After you install and activate the plugin you can begin working. There’s a few ways to get to the frontend editor. From the Pages in the Dashboard you can click on Edit With Visual Composer.
You will be taken to the editor. If you have used the WordPress Customizer you’ll feel right at home. It’s like customizer on steroids and designer smart drugs. Below is a quick rundown of all the main panels.
As you can see things are laid out very simply and everything is able to be edited. This keeps things nice and organized. Cornerstone takes a queue the modern web’s appcentric functionality. Working in the editor is like using any web app. In the top left corner you will see 4 panels you can use to build.
From this area you can add and edit layouts. The Layout pane is where you can manage anything related to the structure of your page. Here you can add or edit rows, columns and work with templates. Templates use blocks and pages. Blocks are small sections of elements and pages are groups of blocks that replace current content when implemented.
The Elements pane contains the library of elements. This tab can be selected to add elements into your page. Drag and drop an element onto a section and customize it them. To find an element, begin typing in the search bar and an alphabetically ordered list will populate with Cornerstone’s elements.
The Inspector can be used to edit any item. This will be your best friend. The Inspector will allow you to select any object and edit it. For example, when you click on an element in the preview area, its properties will pop up in the editor for you to adjust. Getting lost is very hard to do. You will also see the path of the element appear at the top of the control section. You can use this path to navigate up to parent elements to get back where you started.
There are a lot of things we didn’t touch upon in this post. There are lots of premade templates available to download and many more options to configure. Cornerstone is constantly improving. The developers are taking feedback from the community and making improvements constantly. I am definitely going to be using this in the future. With Cornerstone you have the power to design your pages in just minutes. Cornerstone is making big waves in the WordPress world and we are excited to see how it develops. Everyone has their own preferences when it comes to working with WordPress. Please share your thought’s in the comments section. Don’t forget to share this post and let us know what you think of this modern page builder.