One thing experienced web developers and amateur one-time website designers may have in common is the need for WordPress Page Builders. Even the everyday WordPress user would attest to the fact that Page Builders are one of the handiest tools to have if you are a web designer interested in WordPress.
That is not the case today.
Page Builders exist to make web design faster and easy – A task that can be done by anybody.
Though this is not the best analogy, but you can think of them as light sabres. Anybody can turn it on and use it. But only a Jedi can effectively harness the power and use it effectively.
Likewise, in the hands of a WordPress expert, it is an indispensable tool to bringing any website or landing page to life, and in the hands of a WordPress beginner, the only light in a dark tunnel.
What then is a Page Builder?
WordPress Page Builders enable you to create, edit, and customize your web or landing page layout without writing any code. They are simply WYSIWYG (What You See Is What You Get) Visual Editors for WordPress.
Why use Page Builders?
Page Builders offers drag and drop functionality to WordPress. This enables anybody with any skill level to easily design a website. It makes web design faster with easy to edit, format or customize DOM elements.
They also make it easy to build your page layout and customize its components. These components can be anything like adding multiple columns, parallax backgrounds, full width images, content slider, etc. Users can use these components as building blocks to creating their own layouts within their WordPress themes.
However, keep it in mind that Page Builders are not the solution to fixing all of your Website design issues. They are very useful tools, but definitely have their drawbacks. They provide quite a bit of flexibility when it comes to visual output, which is almost always a double-edged sword. WordPress beginners that are unable to read HTML in the WordPress Text Editor will probably make a page really ugly in a Page Builder.
Cons of Page Builders
Despite the many pros of Page Builders, they have their drawbacks which can make using them counterintuitive.
One of such drawbacks is shortcodes.
While you are busy using the polished, intuitive UI, your Page Builder plugin converts your layout into its component shortcodes.
This is how it achieves relatively complex designs with so much ease and flexibility — the code is hidden in the shortcodes.
And because shortcodes are plugin specific, this means once deactivated, you lose all your fancy designs.
Note though that some Page Builder developers are trying to this problem and building their plugin without an over dependence on shortcodes.
You should know that those simple shortcodes we listed above are basically shortcuts for longer, more complicated strings of code.
When you use lots of modules and extended component from the Page Builders, this means you’re placing more shortcodes on your page which means lots of extra hidden code. This places a greater demand on your web server. As a result, it leads to a slower, more sluggish website.
The cost of using Page Builders is steep if the result is lower performance. This can negatively affect your SEO score.
Although a more efficient Page Builder plugin coding might reduce the effect to a more negligible value.
Best Page Builder Plugins
There are several drag and drop Page Builder plugins available for WordPress. Some are theme dependent while others are plugins you can install on any theme to use. This article would review the later because we believe it’s imperative to have content, plugins, and themes that are independent of each other so that it doesn’t have a single point of failure.
So, using insights from our in house web designer, theme shops and users feedback, we will use the following criteria to compare these Page Builders.
- User-friendliness and Ease of use
- Combination of price and functionality
SiteOrigin Page Builder is one of the most popular page creation plugin for WordPress. It is powered by SiteOrigin grid engine. It makes it easy to create responsive column based content using widgets. One reason for its popularity is the price. It is completely free while also offering the required functionality of a Page Builder.
User-friendliness and Ease of Use: Site Origin Page Builder was created with an intuitive interface that looks just like WordPress itself. It’s easy to learn and use. It makes building a beautiful, responsive content an easy task.
Interface: Offers both Front-end and Back-end Editing
Interface User Experience: Non-glitchy
Combination of price and functionality: Page Builder has a large Site Origin library of widgets you can chose from. It also supports the default WordPress widgets. This enables you to add any component you need to design your website.
Page Builder support live editing which offers a Front-end interface to edit components. This tool lets you see your content and edit widgets in real-time.
It also comes with a history tool which allows you to undo / redo changes that you made. This is a huge time saver, and it gives you a peace of mind knowing that you can revert and undo changes.
Cons of Site Origin Page Builder
While SiteOrigin offers a free widgets bundle to give you some much-needed flexibility, you still won’t achieve the diversity of elements offered by premium Page Builders.
Verdict: For a completely free tool offering these functionalities, it earns 4stars.
Visual Composer is one of the original WordPress Page Builders, and it started out as a very simple back-end builder that came preinstalled with dozens of popular themes. But today, it has extended it functionalities to both back-end and front-end, and racks up over 1.5million installs. It is shortcode base and offers both a free and paid version.
User-friendliness and Ease of use:
Visual composer is user friendly as it offers simple drag and drop content elements around the page to design your layout. No coding needed. If you want to create complex page layouts without having to code, Visual Composer is not necessary the best but it is a good choice.
It offers a simple user interface, yet needs a bit learning curve to get used to how it works. It also offers the one click site import from templates feature which can help new or experience users save time by selecting one of the ready-to-use websites templates.
Interface User Experience: Glitchy and slow.
Combination of price and functionality
Visual composer free version offers all the features and functionalities of a Page Builder except the ability to edit the header, footer and sidebar of your WordPress website.
It mobile functionality enables you to adjust responsive settings for any device type. Hide elements or control spaces for desktop, tablets or phones. You can also See how your website will look on desktop, tablet or mobile without leaving the Frontend editor.
It also offer a very extensive design options like Parallax effects, Gradient background, Slideshow background, Zoom In/Out background, Video background, Element animations, Background image position, Shape divider and hiding elements.
Additionally, there are a huge number of add-on plugins available to extend its functionalities to include the options you need.
Cons of Visual Composer Page Builder
One of the major flaws of visual composer is that it is very slow to use and websites created with it are equally slow.
Beaver Builder is a front-end flexible drag and drop Page Builder. It’s feature-rich and make all your content creation as effortless as possible.
Unlike visual composer, beaver is not shortcode reliant. This means the content you create with Beaver Builder will remain the same even if you decide to stop using the plugin at some point. This is a very valuable feature.
It is extremely fast and comes with a built in on-boarding tour that quickly familiarizes users with their interface.
User-friendliness and Ease of use:
Beaver Builder is arguably the easiest Page Builder option in the market and comes with pre-made templates to help you get started.
It has an easy learning curve and requires no prior knowledge of HTML. You can build custom posts and pages by simply dragging and dropping elements on to a canvas.
Interface User Experience: Simple and fast.
Combination of price and functionality
Beaver has a lite version that is free and offers enough functionality to design your website. But its premium plan offers more features to build a more robust website. It Works with Pages, Posts, and Custom Post Types.
Beaver litePage Builder features include the following:
- Content Modules: HTML, Photo, Text Editor, Audio, Video, & Sidebar.
- Layout: Full-width, column-based layouts.
- Performance: Lightweight and semantic markup for maximum performance.
- Backgrounds: Photo, colour, and video row backgrounds.
- Mobile: Mobile-friendly, responsive layouts.
- Customization: Add your own CSS classes and IDs.
- Flexibility: Use WordPress Widgets and shortcodes.
For standard one website price of $99, you will have the following premium features:
- Additional modules: Contact Form, Tabs, Slider, Pricing Table, Map, Blog Posts, Subscribe Form, Social Icons, and many more.
- Beautiful pre-made layout templates.
- Save, export, and reuse full-page layouts, rows, and modules.
- Building your own custom modules.
Cons of Beaver Builder
It lacks a lighter faster backend editor.
The major con is the price. It’s one of the most expensive Page Builder out there.
WordPress Page Builders make web design a matter of drag and drop and Divi Builder is not any different. Divi gives you the opportunity to explore exciting layout opportunities. The Page Builder concept was developed from the very popular Divi Theme. It takes everything we loved about the Divi theme and packages it into a Page Builder plugin that can be used with any theme.
User-friendliness and Ease of use: The user interface is pretty well-designed, and most WordPress users have found it pretty easy to figure out. It has a lot of module options and page templates, a pretty high level of design control, and a frequent update of features. Unlike like Beaver Builder, it has a steep learning curve for new users.
Interface User Experience: Simple and fast and non-glitchy. However, a lack of a front-end editor might require a little getting to know time for beginners.
Combination of price and functionality: Divi Builder does not come cheap. It is going to cost you between $69 to 249/year depending on your plan. That’s too expensive if you planning of designing a website with just the basic functionalities. Although it packs a lot of functionalities, but not what you wouldn’t get from its competitors.
Divi Builder uses modules from its large collection of builder modules to add content and functionalities to your webpage. It makes it easier to extend by offering custom Code Module if you feel like integrating third party plugins. The Divi Builder has a module for most of what you would want to build bring users vision to reality.
It Configuration Options are easy to implement and building layouts requires absolutely no coding experience. The Divi Builder’s Advanced Design settings give users full control over every aspect of their layout’s design. It becomes easy to modify colours, spacing and typography without any knowledge of CSS.
If you are a CSS guru and would like to do more tweaking, no problem.
Divi Builder allows for custom CSS and easy application of custom styles to individual parts of individual modules. If you want to get your hands dirty and dig in with some customizations, Divi Builder empowers you.
Cons of Divi Builder
For a Page Builder with this price tag, we expected more.
At least a Live front-end editor will go a long way to make using Divi Builder much easier for WordPress newbies.
It is also shortcode driven which means uninstalling Divi messes up you webpage completely.
With over 400,000+ installs at the WordPress plugins repository, Elementor is getting increasing popular and quickly adopted by WordPress users around the web. That is impressive for a fairly new Page Builder.
This Page Builder quality depends on the code it is built on. Elementor was built with the best code architecture in mind. It is light and fast.
Like SiteOrigin, Elementor is free. However, it now offers a Pro version with some extended features.
User-friendliness and Ease of use: Elementor is very user friendly and it does take a bit of getting used to but there’s plenty of great information to guide you through the initial learning curve. New users can quickly and easily adapt to it usage.
Elementor also come with a large selection of high-quality templates which acts as predesign website templates. This makes designing your website a seamless task.
Interface: Elementor offers a Live Front-end editor which is faster at loading elements in real time.
Interface User Experience: Every control, elements and components was carefully designed to provide the best user experience and allow you to design your webpage at record speeds.
Combination of price and functionality: Elementor is the first free and open source front-end page builder, that includes full access to all the design features and back-end codes powering it. The resulting page code is compact and optimized for every device and screen. However, the Pro version contains extended components that enable you build a more functional website.
Elementor offers the following features:
Layout Customization: Elementor offers a total customization over layout section width & height. You also can change the gaps between columns in order not to choke your webpage. By changing the gaps at once, you can try out different column layouts, and visually decide which one is the best fit for that page. This setting is simple to customize, but makes a huge difference on the result.
Go beyond the oversimplified and generic page designs, by having more control over the various sections. Elementor’s page sections make up the basic architecture of the page, and allow you to reach a level of design reserved until now for high budget custom designed websites.
Highly Customizable widgets: Elementor includes many useful widgets that have been custom fitted to work inside the live Page Builder. From changing the overlay of button colours to controlling the spacing inside the progress bar, there are endless design possibilities to explore. It is also compatible with 3rd party widgets. This means you can include your favourite plugins and WordPress widgets automatically, and simply drag and drop them into the page.
SEO optimized: DOM elements of Elementor is based on the most recommended coding standards, making your pages SEO optimized out of the box. Elementor uses the power of WordPress community to expand the functionalities of its Page Builder with new widgets and plugin integrations
Cons of Elementor
- Forced styling by default
- Cannot edit elements directly
- Lacking some marketing-oriented features
- No undo button (revision history isn’t always ideal)
Thrive Architect is a visual Page Builder that is built from the ground up for market-oriented business and conversion focused websites.
It is a powerful front-end Page builder that offers 100% WYSIWYG (what you see is what you get) functionality. This enable you build your pages exactly how your readers will see them.
User-friendliness and Ease of use: Thrive Architect is a very intuitive builder on the whole, but it could do better with some slight interface tweaks. It is easy to use and offer a true front-end Page Builder.
If your website is business oriented and you are more focused on conversion, then Thrive makes it very easy to create a high-converting homepage, sales pages, webinar pages, product launch pages, landing pages to validate your business and grow your mailing list
Interface: Thrive offers a Live Front-end editor which is light and less buggy.
Interface User Experience: Interface offer great user experience and an easy learning curve.
Combination of price and functionality: Thrive Architect is a completely paid Page Builder and offers no free version. However, for the steep price of $67, you would have all the functionalities and full access to their template library.
Theme Architect offers the following features:
- Layouts: Thrive lets you create flexible column layouts or full-width layouts with a wow factor. Creating your ideal layout is easy; just drop elements next to each other. No special column container, row, segment section or whatever else is needed. If you want to change the layout, easily add or remove and drag-and-drop resize columns anytime. You can also create vertical split layouts.
- Styling: With Thrive Architect, styling every detail of your webpage is easy and requires no prior CSS knowledge. You can style every element with ease with a live updating preview as you make your changes.
- Mobile: Every template in Thrive Architect and everything you build with this plugin is mobile responsive. In most cases, if you just create your page and don’t worry about it, the result will look good on mobile phones and tablets as well. However, we know you want more control than that. And if you’re building complex and unique layouts, you want to be able to ensure the best possible experience, regardless of screen size.
There are 3 major mobile responsiveness features in Thrive Architect. You can instantly preview your page on different screen sizes, toggle the visibility of elements and entire content blocks and Tweak every detail with mobile responsive editing.’
Cons of Thrive Architect
- The properties panel seem a little bit crowded
- Elements not freely draggable. Still glitchy
- No new elements have been added for a long while
- Cannot save/use global content templates