WordPress
Article

Understanding the Power of WordPress Page Builders

By Rakhitha Nimesh

In recent years, we’ve seen a huge increase in WordPress plugin development, in both free and premium versions. Page builders are one of the most popular trending plugins among developers, as well as regular WordPress users. In this article, we’re going to take a look at the power of WordPress page builders and their usage.

What Is a Page Builder

A page builder is a plugin or component of a theme that lets you structure and design pages with minimal effort and time. Many readers will be already familiar with the HTML components of the ‘Text’ view and actual ‘Visual’ preview of content in the WordPress visual editor. A page builder can be considered as an advanced version of the visual editor.

Page builders use components to build responsive page layouts inside a grid view. The widgetized sidebar of WordPress theme is a great example for understanding the concept of a page builder.

In WordPress themes, we can just drag and drop the available widgets into a sidebar and rearrange them easily. Once we save the sidebar widgets, we get a sidebar on our site with many built in features without any coding required.

Page builders provide similar structure and features to the page/post content area instead of sidebars. We can either use existing components or create our own components to design pages with a page builder.

In short, a page builder is a perfect tool for designing websites fast, with quality design and without needing to know code.

Why We Need Page Builders

WordPress has been one of the most popular choices for creating websites for many years. Now, it’s expanding at an even more rapid pace, with the support of advanced plugins and tools.

Many people are willing to create their own web sites without designers or developers, due to the support of such tools. Page builders simplify the process of designing websites for users with limited technical knowledge.

Let’s take a look at the main reasons for choosing a page builder for your WordPress site:

  • Rapid development with minimum effort
  • Avoid fees and availability issues of professional designers
  • Design websites with limited or no coding knowledge
  • Ability to switch themes without major impact

A page builder can satisfy many of the main requirements of designing a website.

Understanding the Workflow of a Page Builder

Usually, we edit content in either the default ‘Visual’ or ‘Text’ editor view on WordPress pages and posts. Page builders have their own visual editor with powerful components.

Most page builder plugins replace the default WordPress editor with a new plugin specific visual editor. We have the ability to switch between default and plugin specific editors while editing the page layout. The following screenshot shows the page editor created from a popular page builder.

Page Builder

The front end and back end page editing support is common for most of these page builders. If you haven’t used a page builder yet, you may not be aware of how front end editing works.

Standard page editing is a tedious process. We have to make the changes using visual editor, save the changes to page and switch to the front end to view the output.

The front end editing feature of these page builders allows us to edit the page on the front end view and get the output instantly. The following screenshot shows the front end editor of a page builder.

Velocity Page

The content elements are the heart of any page builder. These elements range from basic HTML elements to advanced components such as image sliders. Consider the following image for a preview of sample content elements.

Add Element

Generally, most page builders provide a content element called a ‘Row’ to structure the layout of a page. ‘Columns’ are also provided as a sub component or setting in the row element.

First, we have to structure the page using the necessary rows. Then, we follow it up by separating these rows into multiple content areas using columns. Once the page is structured with rows and columns, we can use other content elements within those columns. Let’s now take a look at a preview below of rows and columns.

Page Builder Rows and Columns

In normal circumstances, changing the column size of a layout is a tedious task involving a lot of CSS and HTML modifications. With page builders, we can customize the column size and change the number of columns with a click of a button. All the content elements within the columns are instantly rearranged to match the layout. Changing the structure doesn’t affect the components within the main containers. The following two images demonstrate how easy to change the page design with page builders.

First, we have one row with 3 columns and 3 content elements.

Page Builder Columns

Now, assume we want to change the layout to 2 columns. The components inside column 3 will be automatically adjusted as shown in following screenshot.

Page Builder Column Adjustments

Usually, page builders limit the ability to add content to only two levels. We can add rows as the first level elements. Then, we are allowed to add elements inside a row. However, it’s rare that page builders allow us to create rows within rows and support more than 2 levels. Consider a situation where your design is too complex to handle using default features. In such scenarios, all you have to do is insert a text block and manually place shortcodes within that block.

We can save the content from both front end and back end editors. Once saved, your database post table content will contain a bunch of shortcodes. If you switch to default WordPress editor, you can see all of those shortcodes and how they are structured.

Page Builder Shortcodes

On most occasions, a page builder will be slower than the default editor. So, people tend to use the default editor for adjusting content and shortcodes, created using a page builder. I strongly recommend you only edit pages in the page builder view rather than the default WordPress editors view. There is a possibility of creating major conflicts by using both the page builder and default editor.

In this section, we looked at the general workflow of a page builder. However, this can be varied based on the features of different page builders.

Free and Premium Page Builders

Shortcodes have been a popular choice for building WordPress pages for many years. We can find thousands of plugins that use shortcodes to provide specific features, we can even create our own custom shortcodes.

The introduction of page builders has also expanded the use of shortcode plugins. These days, page builders have become somewhat of a norm in designing sites for non technical people. You will find an enormous number of both free and premium page builders.

In this section, we are going to look at some of the most popular choices amongst WordPress users.

Page Builder by SiteOrigin

Page Builder by SiteOrigin is the most popular free page creation plugin for WordPress. It makes it easy to create responsive column based content, using the widgets you know and love.

This plugin offers both front end and back end editing capabilities. However, limited components are available compared to other premium page builders.

Page Builder by SiteOrigin

Type – Free

Websitehttps://siteorigin.com/page-builder/

Visual Composer

Visual Composer is one of the most popular premium page creation plugins for WordPress. This plugin also offers both front end and back end editing capabilities.

Visual Composer is integrated into many premium themes and hence has a very large user base. It comprises of many advanced components and there are some awesome features of this plugin that come with its various addons. Currently, there area 50+ addons with a wide range of design components.

Visual Composer

Type – Premium

Websitehttp://vc.wpbakery.com/

VelocityPage

VelocityPage is one of the recent additions to page builders by WordPress core developer Mark Jaquith.

This plugin also offers both front end and back end editing capabilities. It currently provides a limited number of basic components, this is expected to increase in future. Simplicity and performance are the key features of this plugin. VelocityPage really has the potential of becoming the most powerful page builder.

VelocityPage

Type – Premium

Websitehttp://velocitypage.com

Above I covered 3 of the most popular page builders. There are dozens of other page builders in both free and premium versions, some come as part of themes such as Divi. I chose to cover the above 3 page builders based on the following requirements:

  • I wanted to introduce a free page builder for those who don’t have the ability to spend money on a premium plugin. So, Page Builder by SiteOrigin was the most popular free version.
  • Next, I wanted to introduce a fully featured page builder for a low cost. Visual Composer is one of the most complete and cost effective solutions.
  • Finally, I wanted to introduce a simple and high performance page builder and hence VelocityPage was the ultimate choice.

Please feel free to try out other popular page builders to compare further features and performance.

Pros and Cons of a Page Builder

Identifying pros and cons is an essential task before using any new plugin or service. Even the most powerful and stable plugins will have limitations in certain scenarios. Let’s explore the pros and cons of using page builders.

Pros

  • Most page builder components are responsive by default and hence no additional design work is needed. If your theme is responsive, pages created through page builders will automatically become responsive.
  • A complete website can be designed in short time frame using drag and drop components.
  • Coding knowledge is not required to create awesome designs.
  • Many page builders provide the ability to add our own shortcodes as components for designing pages.
  • Components and layouts created with a page builder are independent of the theme. Therefore, we can switch themes without major modifications.

Cons

  • Page builders use their own shortcodes and structure. Once a page builder is used, it’s almost impossible to migrate to another page builder or default HTML content.
  • Using a large amount of shortcodes makes it difficult to maintain pages. A minor mistake while editing a page can make the entire page unavailable.
  • A major drawback of a page builder is the lack of performance. Large amounts of shortcode usage and complexity of content editors can cause performance issues.

Conclusion

Page builders seem to be the ultimate solution for designing modern WordPress powered websites. As a user, you have two tough decisions to make before choosing a page builder.

First, you have to consider whether page builder is the right choice for your website. If your answer is ‘Yes’, then you need to decide which one of these page builders to use.

It’s still early days for WordPress page builders and therefore we may not have the perfect solution just yet. The future seems bright though, as WordPress core developers are involved in creating page builders. Many of us would love to have similar page builder features within the WordPress core editor. We hope that WordPress core editor will be improved to support these drag and drop page building capabilities in future releases.

Please feel free to let us know your thoughts and suggestions.

Comments
bulletinmybeard

I love the Visual Composer and it's not a big pain to combine the output code from the Visual Composer with semantic-ui etc., If you are using a caching system in the background, you can rewrite the output code and replace, remove or add css classes, html elements and more to adjust the raw output from the Visual Composer and make them frontend ready.

The Visual Composer brings along many practical functionalities and doesn't really need any extended-plugins to work good.

cheers

zackw

I used Pagebuilder on a project but eventually got rid of it. It was confusing for the end user to edit content because they couldn't see it within the blocks. The blocks introduced unnecessary elements to the page, like forced <h2> titles for example. I had to enter edit mode on each block to see what was in there.

Great idea, necessary in some cases, but not refined yet.
Plus if you have 2 or more pages that need a similar layout, you'd have to build it all over again for every page. Unless they have generic layouts that can be applied and you just fill in the content?

So useful, yet such a pain!

rakhithanimesh

Thanks for your suggestions and feedback.

Can you explain more about how to repalce the out put code with a caching system? I haven't used such a system. So I would like to know and our readers might like to know as well.

Agreed. There are enormous possibilities in Visual Composer with the addons and certainly my favorite as well.

Thanks

rakhithanimesh

Thanks for your suggestions and experience.

It can be confusing some times. Why did you want the end users to edit content with a page builder? Can you explain the scenario you worked on. Usually, only admins have access to designing pages with page builders.

agreed to your last comment its not perfect yet. There is code duplication when creating similar pages and its difficult to change the structure if you are using the default method.

Thanks

bulletinmybeard

Sorry for the confusion. That solution isn't related to a caching system but if you're using a complex theme structure, you have an quite complex html output to manipulate (rewrite, replace, remove...) and a caching system is recommended in this case. Otherwise the page load will getting worse!

Unfortunately, I don't have an example for manipulating the page builder output but in one of my blog articles I explain how you can manipulate the content output for semantic-ui components: http://rschu.me/rewrite-semantic-ui-html-tags-in-wordpress/. For a complex html structure the PHP Simple HTML DOM Parser is very useful.

cheers

jeffreylees

It can be confusing some times. Why did you want the end users to edit content with a page builder? Can you explain the scenario you worked on. Usually, only admins have access to designing pages with page builders.

Isn't this one of the points of making easier to use GUI tools, so that the user does not have to be an experienced webmaster or programmer or the like?

Design websites with limited or no coding knowledge

As stated there, and implied in general? If so, why would you not expect your users to use it? smiley
For example, if I'm a freelancer building a small business site for a client, I'd build it, hand it off, provide them basic coaching on the CMS, and walk away, in many cases without a service contract, since they have the means to do small edits, etc on their own. However, if the builder or interface are confusing or frustrating to that user, they're bound to be dissatisfied with both my service and the product we're employing.

RyanReese

We have "reporters" here at my work where it's almost an admin. They can edit only the content and create articles. It works perfectly since they can get content created and they have no access to changing our design.

There are uses for content-only editable people in CMS.

jeffreylees

Yeah, for sure. I've even seen multiple tiers of it in some places, too.

zapata99

Thanks for the wordpress article!
nice work

zackw

Since the Pagebuilder is used from within the pages themselves, the end user would have to edit their content by the Pagebuilder blocks.
I don't know how I would use Pagebuilder to setup the layout part and then allow the end user only access to the content within.

For my web projects, I'm always thinking in terms of letting the users edit their own stuff when I'm done. I don't like building something where they require a developer to make changes. Pagebuilders don't really allow this separation of content from template.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in WordPress, once a week, for free.