alogo

Cornerstone & Divi PageBuilders

Here are two WordPress PageBuilders which support important features that make for productive development – extensive styling options for each UI element plus targetted  section as well as page templates. One of the key advantages of PageBuilders is that they deliver  frontend, WYSIWYG editing so end users as well as developers see what they are getting  in both post and page design layouts.

So out-of-the-box, developers see how a page or post or custom post types will look in production. Thus users are guaranteed mobile responsive designs which they can immediately fine -tune for specific device layouts as seen in Cornerstone here:
Cornerstone, like Divi Builder, allows users to make edits to specific tablet and/or mobile views. In this case the changes can be specific to mobile devices with 481 x 767 screens or larger. This certainly enhances delivery of mobile responsive websites.

Another key attribute  of PageBuilders is the ability to work with any WordPress Theme. This has become important for 2 reasons: WordPress has over 10,000 actively used themes and there is a specific category of WP themes – Multipurpose or Multilayout themes which are revolutionizing WP development. Our tests cannot speak for the ability of either Cornerstone or Divi Builder to work with 9,996 WordPress themes; but I can verify that both Cornerstone and Divi Builder do work with 4 of the best Multipurpose/Multilayout themes.

Here is Divi Builder used to create a unique Welcome page layout using the Multilayout Total theme:
Note that the there is no header, no sidebar, nor footer on this Welcome page,  just a button to goto the Home page. More buttons could be easily added to take users to a special Events pages etc. The ability to easily design unique layouts for any or all pages on a website is creatively liberating and the attraction of Multilayout themes. So it is good news that Cornerstone also works with Multilayout themes.

Another compatibility question is how well do PageBuilders work with the vast array of WordPress plugins. One of the plagues with PageBuilders is that they can clash with other UI and performance enhancing plugins. Again, I cannot speak for the 47,000 WordPress plugins, but I can say that Cornerstone and Divi Builder do not clash  when both are activated and used at the sametime. This raises the question of the tools’ Developer Features.

Developer Features

The better WordPress PageBuilders have been instrumental in delivering DIY Development for end users.  DIY Development is important because clients want more control of the ongoing look and feel of  their websites. Both Divi and Cornerstone have excellent front end editing capabilities; but both offer features which target developers in particular. Backend skeleton view is an example – this feature allows developers to see  the layout of a page or post design as a skeleton of encapsulated elements. Here is the Divi Builder skeleton:
Since Divi Builder was first built on this backend capability it is more polished and feature rich than Cornerstone’s tool. DIY users are sometimes leery of backend skeletons; but many developers like the speed of layout and moving elements in the design tree. Also frontend bugs can be quickly revealed and fixed in the backend skeleton.

Page Templates  are the second developer tool of interest. Right off there is a huge difference in the 2 PageBuilders capabilities here. Divi Builder has scores of pre-designed  page templates, while Cornerstone has none yet [but the the X and PRO themes using  Cornerstone do].Now DIY end users like to check out the page templates for landing page, event promotion, or start page designs. But developers really appreciate the added template features like the ability to insert a template before or after or replacing existing page code. Or to download only the copy and layout of the template not the sample images or videos which have to be later removed from the Media Library.

The biggest advantage of page templates is the ability to create your own templates, save them and use them on other pages or websites. Here is where Cornerstone improves – it like Divi Builder allows users to create and save their own Sections [portions of a Page or Post] and then reuse them on another Page or Post. Again like Page templates reuse, this can be invaluable in speeding up website design because developers can target the specific reusable sections of webpage code.

Dynamic UI Element Styling  is the third developer tool of interest. In most PageBuilders each UI element has associated with it a set of CSS styling options so that the final look and feel of a page can be adjusted immediately to make the best styling design. Here is the Cornerstone Dynamic CSS Styling tool in action:
Now DIY end users are interested in this capability until they see the daunting amount of settings required in Cornerstone to get the styling right. This reviewer likes the approach used by  PageBuilders like Thrive Architect that are allowing more drag and drop operations like resizing columns, positioning images and inline editing/styling of copy text. It is interesting to note that the slider vendors like Slider Revolution offer Hero Landing Page designs using layers  and timelines to provide much easier layout of full width pages. By controlling  layers and objects [think text, buttons, and other images] appearance by using  animation  timelines stunning  hero pages can be created[see here]. Again both Cornerstone and Divi  have some of the element  to create fullwidth landing pages with animations,  but not with the features and  ease of layout possible with top end sliders.

The last Developer Feature  is support for PageBuilder editing of Custom Post Types. Both Cornerstone and Divi Builder support editing of custom post types [which DIY end users are generally allergic to]. But the important benefit is that there are now with  these PageBuilders much richer options for updating  and displaying custom post types.

Quirks and Qualms

I used Cornerstone on a project about 9-10 months ago. Ditto for Divi. Cornerstone ‘s move to version 2 is like the progression of Angular.js  from version 1 to 2. The Cornerstone differences are profound and the documentation has barely kept up. In contrast, Divi Builder has benefitted from a major effort to document new features and operations with videos and better [but far from complete documentation]. This is indicative of the fast pace of development in PageBuilders in general as they see their marketplace invaded by the WordPress Gutenberg tool.

There are a rash of quirks in both tools. Cornerstone now has 42 UI elements to master and  Divi Builder  has a flood of templates to come up to speed with. Cornerstone’s interface icons do not have  hover hints while Divi Builder still  bugs out unexpectedly so I have to revert to its backend skeleton tool. Fortunately both tools have revision histories available so stepping back to earlier versions of a page layout is  doable.

But my biggest beef with both Cornerstone and Divi Builder [plus Visual Composer and  WP Bakery Builder] is that you cant use them as quick Try-a-Design tools. This occurs where you want to create a quick Sketch-like page for a client but be able to quickly backout and try another PageBuilder. Both Cornerstone and Divi Builder leave copy and images littered with shortcodes. In contrast, Beaver Builder and Elementor leave gracefully, with copy and images intact and roughly laid out as designed.

Summary

Clearly both Cornerstone and Divi Builder are accomplished tools and are staying up with the rapid improvements in the technology. Both are offering key tools to developers. But  both have a critical shortcomings. Both have poor exit results leaving designs littered with shortcodes. Divi Builder implies using  Divi theme [but as we have seen in this review, is not required]which is  well behind the best WordPress Multilayout themes. Cornerstone has no page templates but like Divi Builder, has a very good section template feature. Will developers be happy with these tools – yes, at the prices charged they will make back their purchase cost likely with the first project they are used on. Will DIY end users be happy – more likely Divi Builder than Cornerstone. But remember, both are on a very rapid change and improvement schedule.

5 thoughts on “Cornerstone & Divi PageBuilders”

    1. Hi Jane

      Divi has admitted to being coded in Reactjs in part, SiteBuilding ambitions with Header and Footer templates like Elementor, and keeping up a steady stream of free templates. Divi is moving up in capabilities quickly.

      Jack

  1. Really great post, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up!

Comments are closed.

Pin It on Pinterest