- Editor Rating
- Rated 3.5 stars
- Very Good
- Reviewed by:
- Published on:
- Last modified:
- Ease of useEditor: 90%
- FunctionalityEditor: 65%
- PriceEditor: 100%
- Support & documentationEditor: 90%
In a relatively short period of time, drag and drop page builders have become popular tools in the hands of anyone looking to build and launch a WordPress website.
The biggest advantage that comes with using a page builder is the fact that simple to intermediate level page layouts can be built with relative ease — potentially saving hours of time and effort.
One of the biggest draws to page builder plugins is that they can be used with almost any theme. In most cases, the learning curve is relatively short and despite the fact they usually come with extensive documentation, it’s often possible to learn on the fly.
In this post, we’re going to take a look at the inner workings of Cornerstone, a WordPress page builder by Themeco. Although this particular plugin was designed to work with the X Theme (also from Themeco), it can also be used with most any other WordPress theme on the market.
In this review, I’ll be using the Epik Theme which runs on the Genesis Framework.
Although I have tested and used several page builders, this will be the first time I have used Cornerstone and the first time I have used a true front-end page builder.
In an effort to either demonstrate the ease or difficulty of using the Cornerstone Pagebuilder, I’m going into this review without spending any time at all perusing through the documentation — I’ll be learning on the fly.
Towards the end of this post, I’ll include some final thoughts the plugin as well as a final thumbs-up (or down) as the case may be.
Building pages and posts with Cornerstone
Installing the Cornerstone Page Builder Plugin was a painless process. No fancy intro screens or welcome instructions — just upload, activate and you’re ready to go. In order to begin editing an existing page, you’ll find an “Edit with Cornerstone” right next to the other page quick-links as seen in the image below.
Because I’m accustomed to using back-end page builders, the front-end experience offered by Cornerstone took a little getting used to. When first editing a page or post, you’ll be greeted by a “Welcome to Cornerstone” message that provides some basic instructions.
The left pane of the editor window contains all the options you’re looking for.
Admittedly, the first 30-60 minutes of using almost any page builder are the most difficult. Usually, the easiest thing to do is jump in and start poking around. Although the plan was to create a brief tutorial, there are simply too many options available in order to cover every single one.
The steps we’ll run through below are enough to get you started with a basic layout but you could get lost for hours experimenting with the possibilities.
Navigating the Page Builder
The top navigation in the builder window offers several options that include:
This is where you’ll add the main content sections of your page layout. How this works is actually fairly simple:
Each page can have as many sections as desired. Each section consists of one or more rows. Each row can consist of one or more columns. In the image below you see how I’ve created two sections. The first one has two rows (the first row has two columns) and the second section has one row.
Creating these layouts is as simple as it looks. Clicking “Add Section” will drop a new section into the right side of your editor window. You can add as many sections as you like or focus on building one at a time.
Since content sections can contain multiple rows and multiple column configurations, it’s just a case of adding as many sections, rows and columns as your layout requires.
Adjusting the column layouts is simple as well. By clicking on the section label (Section 1), you’ll be able to alter the layout of each row to any configuration desired (single, half, thirds, quarters, fifths etc). It sounds complicated but once you’ve built your first page, it becomes second nature.
In addition to the basic layout, each section, row and column can be individually edited. Just a few of the options include:
- Background color
- Fade-in effect
- Borders and colors
- Text Alignment
Elements and inspector tabs
Cornerstone offers over 40 elements that can dragged and dropped into the desired section(s). While the layout is where you build the foundation of your page, elements are the meat and potatoes — it’s the content of your pages and posts that your visitors will see and interact with. Each of those elements can then be customized using the Inspector Tab.
Just a few of the available elements include:
- Block Grids
- Code Snippets
- Calls to Action
- Audio and Video Embeds
- Pricing Tables
- And Much More
Selecting a specific element is as easy as dragging and dropping it into the desired section. You can also drop multiple elements in a single section. For example, in the image below I’ve added an image element in the top left column and in the top right column I’ve added the following:
- Headline element
- Text element
- Call-to-action element
In the second row, I’ve added a “Block Grid Element” and some custom text.
Once elements are dropped into place, you can edit the individual properties in order to achieve the desired appearance and functionality. For example, clicking on the button will bring up the previously mentioned Inspector Tab in the on the left-hand side.
Depending on the particular element in question, this is where you can change things like text, padding, alignment, links, icons and colors. If a particular element can’t be changed via the inspector, you can also add custom CSS or JS in the Settings tab.
With a little practice, creating and editing page and post layouts takes a few minutes at most. If you find yourself struggling when you first start, there are plenty of templates available that offer a great way to get started.
Located at the bottom of the editor panel are two options that can come in handy when you’re creating your pages:
- Device views – A convenient way of visualizing how you site will look on a variety of device sizes. Sizes range from 1200 pixels and more wide to 480 pixels and smaller (typical of mobile devices). This visual representation makes it easy to see how your site will look on a specific device. However, what’s missing is the ability to adjust elements based on the device size. As far as I can tell, some changes will require that you resort to media queries.
- Layout overview – As you begin building more complicated page layouts, it can be helpful to get a big picture overview. This selection allows you to see the entire layout of your page in a single view.
Located in the WordPress Customizer is a separate panel that allows you to change some of the Cornerstone Global Settings including things like text colors, button colors, button sizes, link colors, global CSS and global JS.
It’s important to note that any changes made to these settings are lower in priority than your default theme settings as well as any element specific changes you have made to individual pages.
Cornerstone review and opinion
The first section of this post was designed to be a brief tutorial that showed how easy it was to get started with the Cornerstone Page Builder Plugin. It’s by no means a comprehensive tutorial — there are just too many options and features available to accomplish that in a brief post.
In addition to the tutorial overview, we thought it was important to provide an opinion based on my experience (albeit brief) of working with the plugin.
Ease of use
This is a critically important aspect of every plugin. How easily can the end user jump in and get started? I hate having to spend time reviewing documentation so for me, intuitive use is very important. My experience with Cornerstone in this regard was very positive.
I had the plugin installed and was building my first page in just a few short minutes. After spending about 20 minutes with the plugin, I was relatively comfortable and proficient at finding what I was looking for. Creating a basic custom page could literally be completed in a few minutes.
Cornerstone is a true front-end editor. This means that the changes you’re making are represented in real time — what you see is what you get. The jury is still out on whether this method is better than a back-end editor. Personally, I still prefer to edit in the back-end.
Sometimes, ease of use comes at a cost. Unfortunately, I felt like this was the case with Cornerstone. After using a page builder plugin like Divi Builder, I really felt like Cornerstone was a little rudimentary. Of course, you can still change any element you desire but there were many times where jumping into custom CSS was the only option.
For example, after adding a headline element, I wanted to adjust the styling. While I could easily switch between the different heading tags (H1, H2, H3, H4) as well as the color and alignment, there were no other options available without delving into CSS.
For some users, this might not be the end of the world but when compared to a plugin like Divi Builder that offers control over almost every text element (font size, letter spacing, line height etc.), Cornerstone felt restrictive and basic. The whole purpose of using a page builder is so that you don’t have to mess around with CSS, right?
What’s the deal with shortcodes?
This is an issue that is not specific to Cornerstone but is still worth mentioning. Once you create a page or post using this plugin, you’ll find that your Visual and Text editors are full of shortcodes.
If you ever want to stop using Cornerstone or extract the text from a page, you’ll have a real mess of code to sort through (see the image below). It’s not a big deal, as long as you know what you getting into ahead of time.
Support & price
I didn’t get an honest opportunity to test support for the Cornerstone Page Builder, which can be interpreted as a positive.
It’s important to note that if you purchase X (the theme) you’ll be entitled to support for the cornerstone only when related to that theme. However if you purchase Cornerstone as a standalone plugin you’ll have support regardless of which theme you are using.
A regular Cornerstone license costs $35 and includes 6 months of support from the developer along with updates.
Page Builder Plugins are becoming increasingly popular, and for good reason. They have the potential to dramatically reduce the amount of time it takes to deploy new pages and posts. If you’re creating landing or sales pages on a regular basis, it doesn’t take long to realize their true value.
Whether or not a front-end or back-end page builder is better — that’s a debate I’ll leave for another day — a lot comes down to personal choice in my opinion. And for that reason, I don’t necessarily think Cornerstone wins any points being of the front-end variety.
Cornerstone is developed by Themeco who also develop X — one of the top selling themes in the Envato Market. As a result, it has a strong user base and I would assume, plenty of improvements ahead. A strong user base is always a good selling point in my books.
Technically there is nothing wrong with Cornerstone, it’s easy to use, powerful, has a great UI, is fast and at $35, it’s very reasonably priced.
My only issue with this plugin is the lack of control of many elements. Sure, CSS is an easy solution but for many people, the decision to use a page builder is based on their desire to avoid doing just that.
- Simple installation and easy to use interface
- Short learning curve
- Works with any theme
- Very reasonable price
- Leaves plenty of shortcodes behind if you stop using the plugin
- Not as many elements can be customized when compared to other page builders
Summary: Cornerstone is an easy-to-use page builder plugin that has the potential to dramatically reduce the amount of time and effort required to deploy new post and pages. Although it’s not as feature-rich as some of the other plugins in this space, it’s still a very capable option. If you’re willing to delve into some custom CSS, then the sky’s the limit.