WordPress Page Builders

[et_pb_section admin_label=”section”][et_pb_row admin_label=”row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Post Title” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

WordPress Page Builders

[/et_pb_text][et_pb_text admin_label=”Intro” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

WordPress is immensely popular. It is estimated that WordPress makes up between 20% and 25% of sites on the world wide web, and is used to build web sites and blogs by anyone from a personal interest blogger to a fortune 500 company. Of sites using content management systems (CMS), WordPress is king, with more than a 60% market share, which dwarfs its next competitor (Joomla!) by around a 10:1 ratio. It may surprise you to find out that the World’s most ubiquitous CMS, which is the base for millions upon millions of websites, was originally developed to be a simple blogging tool.

Compared to websites, blogs tend to use a much more limited tool set. Think about most blog posts you see (including this one) and you’ll notice that they are generally very simple, often containing little more than text, images, and hypertext links. Websites these days use a much wider variety of visual elements. It’s like comparing a document that was made in Microsoft Word with one that is built with the gold standard to graphic design for print, Adobe InDesign. Word is a word processor, not a tool designed for creating complicated layouts, and delivering the visual punch that you might be looking for from a brochure or catalog. So imagine if Microsoft made Word open-source, and the development community transformed it from a solid word processor into a juggernaut of graphic design.

So WordPress has evolved into a powerful CMS, but at it’s core, it is still a blogging tool. Today’s websites demand a great deal of control and creative freedom. Developers have done some incredible work in PHP, JavaScript, HTML, and CSS to morph WordPress to meet their needs. While this work allows them to create virtually anything, it is labour intensive, and requires a very particular skill set in order to execute.

[/et_pb_text][et_pb_text admin_label=”Enter Short Codes” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Enter Short Codes

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

One of the huge benefits of such a large community of people working in the WordPress ecosystem is that there are lots of people creating high quality tools to help others do what they cannot without mastering a handful of programming languages.A few years ago, if you purchased a premium WordPress theme, it would come with shortcodes specific to the theme. The shortcodes were predefined elements which were entered in the text editor to create buttons, light boxes, galleries, pricing tables, etc. It made the contents of WordPress’s default visual editor (which wasn’t really all that visual to begin with) even less visual. You put a button into your layout, and in the visual editor, rather than seeing the button, you see a shortcake like this:

[buttonx link=”http://www.google.com” type=”icon” icon=”search” newwindow=”yes”]” Search[/buttonx]
Organizing content into columns made it even worse. The only way you could get an idea of what you were building was to be continually previewing. Layouts could easily break, and you would spend a lot of time just trying to work the bugs out. Considering this was the editing interface for those who didn’t know how to, or didn’t want to code, it still seemed very cumbersome.

[/et_pb_text][et_pb_text admin_label=”Page Builders to the Rescue” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Page Builders to the Resuce

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”2_3″][et_pb_text admin_label=”VC” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Visual Composer

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

I’m bringing up Visual Composer first, since it is the most popular option out there. Many premium WordPress themes include a copy of this popular plug-in built right into it. Visual composer gives you two different editing modes: front-end, and back-end. The back end editor shows your layout in blocks. You can simply click on a block, and make changes to content or settings. The front-end editor actually shows you a more-or less rendered version of your site. You can then click on an element and make changes.

The success of visual composer may be because of its expandability. It comes with a bunch of really cool modules, which allow you to build many common web-elements with very little effort, but there are several add-ons which can add additional modules to Visual Composer, making it even more versatile.

Pros

• Very Popular and widely supported
• Very expandable
• front-end editor is great for those who are intimidated by looking under the hood.
• Integrates well with SEO by Yoast.

Cons

• Its popularity may make some of the modules look like everybody else’s if not modified
• The front end editor is very processor intensive and sluggish
• Pages build in VC tend to be bloated, resulting in slower load times

Visual Composer is built by WPBakery, and is available exclusively on CodeCanyon.net
A single-site license costs $34 USD

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″][et_pb_image admin_label=”Image” src=”https://www.missionbellmedia.ca/wp-content/uploads/2016/03/visual-composer.jpg” alt=”A page in Visual Composer’s Back End Editor” title_text=”VC Editor” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”2_3″][et_pb_text admin_label=”Cornerstone” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Cornerstone

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Cornerstone is a relative newcomer to the market.  At the time of writing this, it is available only as part of the hugely popular ‘X’ WordPress theme.  Themeco, the developers of X have announced that it will be released in the near future as a stand-alone plugin.

Cornerstone does a lot of the same things as VisualComposer.  In fact, the X Theme came with VC for the first couple of years it was available.  When version 4 of X was released, they substituted the newly created Cornerstone for visual composer, which they are in the process of phasing out.

Cornerstone is very comparable to VC’s front-end editor, with two major differences:  The editor see’s the site, and can click on elements to make changes, but the actual changes are made in a narrow editor panel on the left side of the screen.  The other difference is performance.  Cornerstone is much more responsive than the VC’s front end editor.

Pros

• Intuitive yet powerful front end editor
• better performance than Visual Composer

Cons

• currently only available with X Theme
• not expandable the way VC is

Cornerstone was developed by Themeco, and is currently part of X, but will likely soon be available on CodeCanyon.net

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

[box type=”info”] UPDATE: Cornerstone has been released by Themeco for sale on CodeCanyon.  A singe site license is $35USD.[/box]

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″][et_pb_image admin_label=”Image” src=”https://www.missionbellmedia.ca/wp-content/uploads/2016/03/cornerstone.jpg” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid” alt=”A Page built in Cornerstone” title_text=”Cornerstone Page Builder”] [/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”2_3″][et_pb_text admin_label=”Divi Builder” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Divi Builder

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Divi Builder is a visual editor created by Elegant Themes.  Like cornerstone, Divi started out tied to a specific WordPress Theme (Divi), but is now a stand-alone plugin that can be used with any theme.  What is intriguing about this plugin is the constant improvement it has undergone.  A year ago, the Divi Builder (at that time called the Elegant Theme Builder) was at best a poor man’s Visual Composer.  It was compelling because of the way the licensing worked, for those who build a lot of Websites, and wanted a common builder across all of them.  More recent releases have given the editor a great deal more design control, and made this plugin one to be reckoned with.

Divi Builder is an entirely back-end editor.  To my knowledge, there are no plans to make it a front-end builder.  It is comparable to VC’s back end editor, but in my opinion possess a better UI.  The block layout uses colours to make the layout easier to follow.  The blocks appear less cluttered.  The editor window used to make changes is also very well organized into 3 tabs. One give you the basic design settings that you would need to edit in almost every instance.  There is an advanced options tab, which gives you further control of things like spacing, colours, fonts, etc.  Finally it has a CSS tab, where you can use custom CSS to change just about anything along with adding CSS class and id.

Pros

• Great licensing for multiple sites
• A lot of options and controls
• quick responsive editor

Cons

• No front-end editor
• expensive for a single site license (requires subscription)
• no expandable the way VC is.

Divi Builder was developed by Elegant Themes, and is available with a subscription to Elegant Themes at the developer level, which is $89 USD/yr

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″][et_pb_image admin_label=”Image” src=”https://www.missionbellmedia.ca/wp-content/uploads/2016/03/Divi-Builder.jpg” alt=”A Page built in Divi Builder” title_text=”Divi Builder Page” show_in_lightbox=”off” url_new_window=”off” use_overlay=”off” animation=”left” sticky=”off” align=”left” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Beaver Builder” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Beaver Builder

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

I’ve not had a lot of experience with Beaver Builder, so I won’t go into a lot of detail.  Beaver Builder is a front-end editor. It uses the same row and column layout structure as all of the above.  I will say that the the styling options are somewhat limited. CSS classes and ID can be assigned, so styling can be achieved through custom style sheets, but there doesn’t seem to be enough options to make it as useful as any of the options above.

Beaver Builder is available from beaverbuilder.com.  Like Divi builder it requires a subscription, and can be used on unlimited sites by subscribers.  Subscription packages cost $99 – $399 USD (I am assuming per year).

[/et_pb_text][et_pb_text admin_label=”Page Builder” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Page Builder

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Finally I will touch on an option with which I have no experience.  There is a page builder available in the WordPess plugin repository for FREE.  So if you want to try out a page builder without having to shell out some green, you can try out Page Builder by Site Origin.  At first glance, it looks to be fairly simple.  It rates well (5 star with 247 reviews), and has a large install base with 800,000+ installs.  Perhaps is you have more insight into PageBuilder, you can leave it in the comments below

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]