Understanding the Power of WordPress Page Builders



Originally published at: http://www.sitepoint.com/understanding-the-power-of-wordpress-page-builders/

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.

Continue reading this article on SitePoint


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.



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!


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 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.



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.



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.


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.


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


Thanks for the wordpress article!
nice work


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.

closed #12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.