WordPress page Builders

I have been testing a few popular and upcoming page builders this week and would like to share my thoughts on the same in this blog post.

I have rebuilt Parallax Pro’s homepage using Elementor, Brizy and Oxygen as a learning exercise and to get familiar with how these page builders work.

Here are the links to my test sites:

• Elementor
• Brizy
• Oxygen

I started doing this with Beaver Builder but got frustrated trying to do even a basic task such as centering multiple modules in a row (w/o writing custom CSS). I suspect this to be a case of operator error but I did not pursue further as I am not a fan of their pricing. Beaver Themer should come with the plugin in my opinion.

Why do the HTML and Text Editor modules not have center alignment option when a Heading module does? I do not know.

Want to add a curvy or slanted border for a section? Nope. Not included in the paid version. Go buy a third party extension.

This is where Elementor shines – offers a ton of functionality and is just a better value for money.

Brizy

Brizy is the newest entrant in the page builder market. Written in ReactJS, it is pretty nifty and fast.

By default it takes over the entire page but can easily be made to render inside the frame in between site header and footer.

Under active development and is not quite ready (features-wise) for real-world production sites. Give this a year or two and this could be #1.

Pro version is not released yet but you can pre-purchase it at https://brizy.io/pro/.

In its current state, I like this as a quick tool to generate mockups mainly because the HTML output suffers from a severe case of divception.

Pre-built blocks look good.

Elementor

Good value for money. Free should be fine for most users. Lots of elements are included with extensive controls for each. If you want to use Elementor for building the various WordPress views like single posts, archives etc. you need the Pro version.

This has the largest ecosystem with the biggest community and the number of free and commercial plugins that extend Elementor is staggering. Also has a ton of tutorials in YouTube.

Surprisingly, there is no Parallax background setting for sections but I used a free plugin for the job.

Pre-built blocks look good.

Nested div structure in the output is reasonable and better than Beaver.

These are a few of my recommended Elementor add-ons:

1. Crocoblock – especially for the Jet suite of plugins
2. Element Pack
3. Elementor Extras

Oxygen

Boy oh boy! This is a fantastic tool that not many might have heard of. As a matter of fact, I’ve only learned about it yesterday.

And what about Oxygen 2.0?
Inquiring minds want to know… 🙂

— Christoph Herr (@Christoph_Herr) June 14, 2018

You can find a link to purchase v2.0 in their Facebook group.

Nothing is more important to me than the quality and compactness of HTML markup that is output. The new Oxygen 2.0 shines in this area and has the leanest HTML with the smallest footprint.

The Flexbox-based layout engine, the interface to adjust properties at responsive breakpoints, the philosophy of not having to create columns when you want to show elements side-by-side, dynamic WordPress content, templating.. the list of positives goes on and on.

That said, this Angular app is not for everyone. I see this as more of a niche developer tool. An average user could get frustrated with the learning curve involved (easy to learn with the videos but takes time to master) and the lack of variety in the elements.

One pet peeve with the interface is the color scheme. It looks dull and gloomy.

Also, it is a little unsettling how Oxygen completely takes over the control from the active theme. This means you have to build the site header and footer yourself. Some may see this as a benefit though.

There are a large number of walkthrough screencasts on YouTube which cover the various features and the documentation is excellent. I am yet to go through all these.

As of today, there is no built-in option to enable animated parallax backgrounds but I created a functionality plugin that enqueues Jarallax on the homepage and initialized it from within Oxygen.

One major problem for me with Oxygen is that HTML5 tags like header, nav, section are not used in the markup and there is no Schema in place. The dev is open to suggestions though and will hopefully implement this in the future.

I am no designer but the pre-built blocks are drab.

Summary

If you are a WordPress enthusiast, all the three are definitely worth checking out. Brizy and Elementor free versions offer a lot of features. Brizy is impressive for its age. Oxygen is more dev-centric and is only $99 for a lifetime license.

My general recommendation is to go with Elementor. It’s got a ton of features, crazy number of extensions, the largest page builder community (check out the Facebook group). Any design element you ever need is most probably already available out there for a quick drag and drop and to control to your heart’s content.

Brizy needs time to mature.

I will be keeping a close eye on Oxygen.

To give a rough analogy,

Beaver Builder is like DesktopServer.
Elementor is like Local by Flywheel.
Oxygen is like Laravel Valet.

Finally, I will continue to develop designs by hand coding using the Genesis framework.

Perhaps no other WordPress framework has so many passionate developers contributing to what already is the richest and deepest framework with tons of developer-friendly hooks and filters and improving voluntarily on a single theme than Genesis has. The Genesis Slack workspace is always abuzz with activity. Not to mention, the theme is by a well-established profitable company with a large team and support staff, StudioPress.

I can build a high-quality, lean, pixel-perfect, HTML5 schema compliant custom site by hand probably faster than using any of the above page builders as I have automated many tasks like code snippets insertion, local site creation, linting, pretty printing, Sass compiling, version control and deployment. If all these buzzwords sound unfamiliar, go with Elementor Pro.