Oxygen Builder ISN’T a pagebuilder (and that’s why it’s great)

My highly-favorable review of the Oxygen pagebuilder by Louis Reingold (Soflyy).

If you’re a diehard coder (or developer-minded WordPress user) looking to build custom WordPress site designs…Oxygen deserves to be on your shopping list.

I don’t even like pagebuilders…actually, I HATE THEM…but I’m absolutely smitten by Oxygen.

Brief history on pagebuilders

Before pagebuilders, there really wasn’t a user-friendly way to customize WordPress sites. Most people were begging for help on theme support forums and hacking in random snippets that sometimes worked but other times broke their site (especially after updates).

Somebody came up with a fantastic idea of this god-like WordPress editor that took over your website entirely and forced you into an entirely different interface but gave you seemingly limitless power to edit every element of your page AND add tons of flashy effects. Whatever cool effect or animation you saw in those agency sites…you could now do the same! Average WordPress users everywhere were given the magic wand over night and boy did they go to town on their sites! (LOL)

But with great power, comes great responsibility.

Great responsibility that users (and even developers) did not take into account. Many popular themes were weighed down by incessant displays of effects, and page load speeds were getting so bad it spawn a subculture of “WordPress speed” addicts. As expected, buffets do not encourage moderation.

So what happened next?

The evolution away from pagebuilders (and toward Gutenberg blocks)

It’s happening as we speak. More and more developers creating custom blocks for building pages. Some blocks are for design. Others are for content. Even more powerful is that you can mix and match to your heart’s content. Why waste your time with a big bloated pagebuilder when you can recreate the same cool effects with just individual blocks?

Search “blocks” in the WordPress plugin repo and you’ll see for yourself. I’m telling you! The future WordPress themes will be customized using blocks, not pagebuilders.

And you know why?

It’s because pagebuilders were only necessary to customize content, not necessarily the theme.

Theme customizations are easy. Usually there’s theme options or customizer settings for colors, fonts, and all that. The only hard part was making multi-column layouts, adding cool backgrounds, and styling libraries (the silly effects).

So when you think of it, pagebuilders were really only necessary as a “content builder”. (The key word being “WERE”.) And now with Gutenberg blocks, you can build and style content in a much better way!

So what makes the Oxygen Builder so great?

What makes it so great is that it’s not a pagebuilder. It’s not a bloated piece of bad-code spitting content builder taking over your WordPress content-editing process and page templates in a non-native WordPress way!

REASON #1 – Oxygen is really a themebuilder.

Oxygen is so much more powerful than mere “pagebuilders”.

Pagebuilders operate at the page template level, usurping their power from the WordPress editor (hijacking your editor box). It’s a bit messy and really confusing, in terms of user interface and also programming logic. You end up having theme styling alongside pagebuilder styling. Even if they co-exist without issues, it’s still lots of wasteful code bloat!

How Oxygen works is that it still appears (and functions) like a pagebuilder, BUT it also takes over the entire theme function. In other words, Oxygen BECOMES your theme. Whatever theme you had activated before, activating Oxygen will deactivate it. Your theme is not used at all whatsoever. This key behavior is the main reason why Oxygen is a “love it or hate it” kind of tool.

You will LOVE Oxygen if:

• You want full design control of your theme and pages.
• You hate wasted code bloat from unnecessary overlap of theme and pagebuilder styling.
• You like to design from scratch.

You will HATE Oxygen if:

• You only wanted a pagebuilder for a few simple layouts or effects.
• You hate (or don’t feel comfortable) from a developer’s point of view.
• You like your theme styling already and don’t want to change much.

REASON #2 – Oxygen was built for developers.

To clarify, it’s built for responsible-developers and logic-abiding designers!

You couldn’t have gotten my attention any better than with this. Oxygen truly is built for developers. Beautiful code, beautiful design, interface, logic. And by “developers”, I mean like legit coders who can build themes from scratch. And I’m NOT talking about lazy developers who don’t want to code, or low-budget agencies who can’t afford a coder.

• Want to add unique ID’s or re-use CSS classes? Easily done.
• Want to individually CSS style or assign JS to specific elements? Easy!
• Want to throw raw code onto your layout or content? Also easy!
• Want a super cool outline of your content tags/blocks? Also done.

There are so many things about Oxygen Builder that feels so friendly and intuitive for developers; I can’t list them all. There’s nothing more inviting for developers than being able to see the live view as well as the wires at the same time.

I knew I’d fall in love with Oxygen the moment I joined the Facebook group and saw tons of developer-minded questions. Lots of questions about css fixes, hooks and filtering logic, efficiently building content with the included dynamic query. It was a pleasant relief from the usual newb questions I see in Elementor/Beaver Builder groups like “how do I change header size? font color?” or even worse…”is Bluehost a good webhost?” Hahaha.

I mean absolutely no offense to newbies (and there’s nothing wrong with their questions). My only point is that there are more experienced developers using Oxygen Builder.

Oxygen community will make you a better developer.

I always love being in communities with experienced developers/designers. You learn more. You get more inspiration. You’re part of a much more impassionate bunch of people working on way cooler projects and deploying way more skills. Enthusiasm is infectious. Everybody is doing cool sh*t and sharing how they make it happen.

You get to rub shoulders with much better developers, meet people you would actually hire. Get interesting thoughts. Talk to developers who are literally creating the future of web development. You see new ways of doing things (rather than questions from people who don’t even understand basic web design).

Oxygen lets you code from scratch.

Want to build some areas with a convenient editor but hand-code other parts? Oxygen lets you do that. You aren’t stuck or handcuffed to a visual editor. It allows programmers the best of both worlds (working in code, or in a visual editor). I don’t think you can get any more flexible than that.

Do you already have a finished design to work off of? No problem! No stupid distractions, example widgets and layouts and effects to get in your way. You’re not a newb wandering around in the backend. You’re a damn professional with a crystal clear vision of the end goal!

Oxygen labels things by their proper “programmatic” terminology.

Section, div, header, id, class, container. Not “modules” or “row”. This might seem unfriendly for non-coders but it makes way more sense when people want to look things up or ask for help from developers. We already have standardized programming terminology; there’s no need to invent a new one for non-coders!

Just working in a tool that uses proper coding terms will help you understand programming and developer’s lingo that much quicker. Without realizing it, you’ll subconsciously learn how different parts of HTML, PHP, and CSS fit together and know how to refer to them when talking to developers. Having a common language helps you pick up technical concepts so much quicker!

Oxygen was inspired by Webflow

If you don’t know what Webflow is. It’s a super popular and widely-adored design tool used by professional designers (considered by many as the “finest visual builder” ever made). Basically allows you to turn fancy agency-grade designs into live functioning websites. Industry-grade stuff right here. Used by PROS! And I’m not surprised at all considering Oxygen feels lightyears ahead of any pagebuilder right now. If you want to build and design like a pro in WordPress, Oxygen is the closest you can get to being both non-coder-friendly AND coder-friendly!

REASON #3 – Oxygen is the leanest visual-builder.

Oxygen outputs about 5-10 times less code than other pagebuilders.

Beaver Builder is somewhat clean. Elementor ain’t too bad. But none of them will ever be as lean as Oxygen because:

1. They load a full-featured (bloated) pagebuilder on top of your (already) full-featured theme. That’s gonna be way more CSS styles, way more JS scripts…and waaaaayyyyyyyy more DOM elements to render. Way more code to process and reprocess.
2. They create far more html code for the same amount of visual elements.

You may have seen that funny video where Oxygen’s founder shits on pagebuilders for throwing tons of divs and messy code. Also that those divs make a mess out of your content when disabling the pagebuilder (aka “shortcode soup”). Perhaps some of you were even offended by it or felt he was just too full of himself.

Well, I’m here to say Louis is a genius. I’m gonna tell you what he did is nothing short of being absolutely extroadinary. He’s built the first true clean-coded WYSIWYG editor that I’ve ever seen in any CMS. Really…he coulda have just made it his own damn CMS. Why even waste time integrating it into WordPress? Hahaha.

And in case you think I’m kidding, I’ve seen this theme-builder concept attempted time and time again for the past 10 years. Nearly 10 years ago, there was the Dynamik themebuilder for Genesis themes. It was a respectable child theme builder, but far from “user-friendly”. Around that time was also the Thesis theme which is a theme made of Matryoshka containers, and later the supposedly superior Headway theme. But those fell out of popularity rapidly because A) they weren’t friendly for users, and B) they weren’t friendly for developers either. Hahaha.

But here we have…for the first time in all of WordPress history, a freaken WYSIWYG website-builder that actually looks easy enough for average users to understand, yet respects developers’ workflow logic, ANNNND actually spits out valid code. Holy f*cken sh*t! GUYS! This is the pyramids of Egypt in terms of WordPress extensions. It’s been attempted numerous times throughout the years but only achieved by one.

What’s more impressive is that it seemed (to me) like he did it easily. He saw what pagebuilders were failing to do (for both average users and developers/designers) and saw how he could do better. He had a clear vision and saw it through in such short time. No wasted time pivoting back and forth to “stay ahead of the trend”. No wasted discussions fielding ideas from other staff and “industry leaders”. Not so many wasted beta-years collecting community feedback to figure out what the market needed. Oxygen Builder is the Model T automobile in the age of trains and horses (pagebuilders).

REASON #4 – Oxygen has the best pagebuilder UI.

Oxygen builder is easier to use.

I look at it and I understand it within a few seconds. All the panels and labels look intuitive for me. It feels like a mix between a graphics editor (Photoshop/Sketch) and a desktop code editor. Even if I don’t know where certain settings are, I feel like I know where to look for them.

Maybe I’m biased because I understand basic HTML, coding syntax, and how CSS is applied to content and containers. I can’t help but see how easy it is to not only add what I want but EDIT what I want. With other pagebuilders, I’m often lost clicking on the wrong elements like 70% of the time. (Granted, I’m no pagebuilder expert. I only use them because my clients have them).

The Oxygen editor lets you see everything clearly (visually AND in code).

There’s no silly flipping back and forth between “frontend view” and “editor/code view”.

• You can see the entire design all at once.
• You can see EXACTLY what it looks like live. (Without stupid settings icons over each element.)
• You can see exactly the boundaries of each element (upon mouseover).
• You can see the code for each element.
• You can see exactly which element you’re editing. (AHHH YESSS!)
• You can easily target the next parent container up. (Instead of guessing for the parent div).

It’s an absolute thing of beauty. And it sounds so simple yet other pagebuilders can’t even do that right. Many of them show some weird backend version with confusing box outlines and only shortcodes to the content instead of the content itself…zero help whatsoever when you don’t know what they’re connected to. Put it in “frontend view” and you still can’t figure out which or where is the parent container. You’ll mis-click a hundred times before inevitably editing the wrong thing and then pulling your hair out trying to UN-DO. Yeeesh, I can only imagine what end-clients have to go through!

The Oxygen interface is so much cleaner (yet more informative).

• Settings panels are quiet grey colors (not distracting purple, orange, blue, red, yellow, etc).
• All settings are shown neatly within the left panel and accessible within 2 clicks. There’s no fear of overlooking settings elsewhere. Oh and no dumb@$$ settings panels covering the freaken content they’re affecting! ARGHHH!
• All element settings show size and spacing in the first panel tab, then effects in the second. So much cleaner this way compared to the usual pagebuilders with seemingly-arbitrary settings for spacing and styling that don’t explain exactly how those settings affect your element IN RELATION to other elements!
• The structure outline panel (on the right) is so freaken beautiful. I wanted to cry when I saw that. You have no idea how comforting it is to see an outlined version of your page design. It’s how developers like to work. I’m amazed to hear only Elementor has the same feature (and only very recently).

Oxygen is so much easier to re-use elements, sections, styles.

One tedious part of design is doing repetitive functions. Make a section, put a box in it, size it, style it. Then make another one just like the first. Then maybe take that whole section and copy it elsewhere. Aghh…sounds like a lot of work. Not only that but it’s scary.

Take DIVI for example…if I want to copy an element styling, I click on “Copy Module Styles”. Now what “styling” does it copy? Just the CSS stuff? Or does it include the design settings or effects, too? I have no idea. I hate having to learn new terminology when there’s already existing ones. Label translation is not fun!

With Oxygen, everything is called exactly by it’s proper coding terminology. An “id”, a “class”, etc. If I want to copy styles, I can easily create a global CSS class and style it and then apply that class to other elements.

Now put aside the styling. What if I want to re-use an element and copy-paste it elsewhere onto the same page? Easy. Or if I want to re-use a whole section that encompasses several elements on another? Also easy!

Oxygen can create parent containers above your chosen element.

This may sound like a silly feature but hear me out. Pretend you created an element and then realized you forgot to put a big background behind it. With most pagebuilders, you gotta delete or “CUT” the element you were working on. Create a parent container for it and then paste or rebuild it back in. With Oxygen, you can easily 1-click create a parent div around any element. This is a fantastic time-saver for those design moments when you put the cart before the horse so-to-speak.

REASON #5 – Oxygen can output plugin-like functionality.

Honestly, the Oxygen Builder was already the best pagebuilder from all my other reasons but this is where it’s just being a total showoff. It’s now a gym bully, like some 300lb bodybuilder flexing next to a scrawny middle-schooler.

Oxygen Builder can output dynamic calls.

I’ll do my best to explain in layman’s terms. If you think about it…all content is either static or dynamic. Static content is entered manually through the content editor. Dynamic content is (usually) entered through a plugin which then outputs the content based on the settings you choose.

Don’t worry, I’ll provide some real-world examples:

• A plugin that shows a bunch of posts (based on recency, popularity, category, or manual selection).
• A plugin that shows a specific post type (products, testimonials, directory/home listings).
• A plugin that shows images in some animated effect (slider, grid, carousel).
• A plugin that shows content from somewhere else (social network activity, weather, game scores, rss feed).

And if you think of it again, what content plugins do is output dynamic content. SoooOOOOOoooOOOoo…if Oxygen can output dynamic content (just like plugins), that’s a big freaken deal because that means you can build plugin-like functions using just Oxygen….and forego the use of more unnecessary plugins! How freaken awesome is that?!

• Less CSS/JS to load. (Faster page loads.)
• Less plugin CSS/JS to conflict with theme CSS/JS! (Fewer conflict issues.)
• Less custom-styling hassles for developers (faster development).

Sure, I think Elementor and Beaver Builder have “dynamic content” options as well but nowhere near Oxygen’s level.

Oxygen Builder also allows PHP function return and also Conditions.

I think most people (including me) are not on the level to care about these but they’re incredibly powerful in controlling how dynamic content is displayed and when/where it’s displayed. With the “Conditions” feature, you can decide whether to show certain elements depending on whether the user is logged in, or has certain roles/capabilities. It’s really incredible stuff.

Imagine showing a login or purchase form for regular visitors, but then special info or upsells for logged-in users. There are so many possibilities for not only developers but also non-coders as well.

• If you’re a developer, you’ll appreciate a simple GUI interface to put together plugin-like functions.
• If you’re a regular user, you’ll appreciate the ability to follow tutorials (by other people) and also use the same GUI interface to make plugin-like functions.

A visual design-builder is really cool…but a visual PLUGIN-builder? Mannnn…that’s next level stuff!

OXYGEN WEAKNESSES

Here’s where I get to be really critical and try my best to tear down this incredible tool. I haven’t even used Oxygen much to be a credible auditor but will try…

No UN-DO function

It’s a running joke among Oxygen users. You would think such an immersive tool would allow a simple CMD/CTRL + Z hotkey. Or at least some undo button somewhere. I think this function is especially important when you accidentally mis-click and drag things.

However, Oxygen does have revisions and then there’s this checkpoints. Other workarounds are to constantly save your work and if you ever mis-click, just refresh the page without saving. You can install a plugin to hotkey the “save” function to CMD/CTRL + S.

EDIT: Sridhar Katakam just told me he’s releasing a 3rd-party addon plugin to resolve this. Woohoo!!!

Fewer 3rd party integration

I’m grasping at straws here but it’s a valid statement nonetheless. There are fewer companies and theme-makers out there using Oxygen. That means fewer prebuilt designs out of the box. Fewer 3rd-party plugins to integrate with. Of course…that doesn’t really matter because quality beats quantity and you probably don’t need 99% of the junk out there anyway. I could care less because most of those designs and products are made for the (unrefined) masses. But for regular users…yeah, it definitely means fewer options for them to play with.

Prebuilt designs need more mobile-menu styles

I wish the prebuilt mobile-menus had more variety. You can see what I mean by visiting their Design Library and clicking on the hamburger menu on all their designs (in mobile view, of course). All of them have the same white background with links dead center. I want variations of dropdown panels, or side-panels pushing the site over. Luckily for me, I’m a guy who hates hamburger menus but just thinking for others.

Another mobile design stickler of mine is how the search function is designed in mobile. Does a searchbox magically slide down into view? Does a solid background and search line take over the screen? Sadly, there are no prebuilt layouts for this in their design library. A massive oversight for content/ecommerce sites which also aren’t featured at all in their design library.

Lack of template overrides options

Toted by Sridhar Katakam as “Oxygen’s only one true limitation“, Oxygen does not (natively) allow for custom template overrides by plugins. Many themes use that to customize pages for certain plugins (WooCommerce, forums, tables, etc). Some themes already come with custom templates. Others don’t and you have to create one yourself. Since Oxygen completely disables the WordPress theme function, it obviously won’t be able to override plugin styling from theme directories.

Luckily, there are some workarounds (and not all that hard either):

• There’s an Oxygen Theme Enabler plugin made by Sridhar. What a freaken hero! It allows you to re-enable your theme for only certain pages.
• You could also copy the code and put it in a “Code Block” inside the corresponding Oxygen templates. I don’t think that’s too hard at all! Anybody savvy enough to hack page templates would also be savvy enough to copy over their code. I’m relieved at how easy this is, actually.
• Also code snippets from the community. WooCommerce, Easy Digital Downloads, Restrict Content Pro.

Oxygen is an all-or-nothing tool

You can’t (officially) run it alongside your existing theme. Once you activate it, your entire theme is Oxygen. This makes it inconvenient in several scenarios:

• Theme preservation – you like your theme and only wanted Oxygen to build some content layouts. (It’s ok, use 3rd-party blocks in this case.)
• Gradual conversion – you want to switch from one pagebuilder to another or remove it entirely. With other pagebuilders, you can slowly remove your pagebuilder reliance one page at a time. You don’t have to do it all at once.
• Testing purposes – you want to test Oxygen on certain pages before enabling it globally. With Oxygen, the only way to test is to rebuild your entire theme (content areas AND header/footer) otherwise…your site looks totally different. That’s a lot of initial effort just to test.

In short, Oxygen feels fun and empowering if you want to do a whole new site design. But if you only want to change a few areas, Oxygen (inconveniently) forces you to rebuild your entire existing design in another tool. Hey, that’s still a massive benefit in code reduction…but you could also get similar results going the Gutenberg blocks route.

Element ID’s could be cleaner

Oxygen outputs a unique ID for each HTML element, about 10-15 characters long and usually unnecessary. But in retrospect, they only take a tiny bit of space and still far more lightweight than the “divception” brought on by other pagebuilders. Thanks to Sridhar Katakam for pointing this out.

Oxygen isn’t totally newb-friendly.

The fun of it for me is that it’s totally clear and clutter-free. No distractions. An empty canvas with limitless possibilities. But that’s just me. A newbie user might prefer something more like a giant toybox with all kinds of fun widgets and effects to choose from. Perhaps something more like this. But hey that’s the difference between someone working off a clear vision (or finished design) versus someone just randomly clicking around.

Don’t get me wrong, Oxygen has all those toybox options too but it forces you to deploy things in a more programmer-like way. First you have to know which container you’re working in, then decide how much space you want to allot to this element, and then FINALLY you get to deploy whatever widget thingy you want.

The way programmers place things onto the page, the WHERE is much more important than the WHAT. But when you think about how newbie-design tools are made, they let you choose the object first and THEN you figure out how to shove it onto the page. Of course, that method will always be messier.

Oxygen has some autoloads

If you’re longtime user, you know exactly what I’m talking about. That big ct SVG set thing and also the Google fonts. What a shame and I hope they improve this soon.

I can’t wait to play with Oxygen Builder

The most exciting visual builder for aspiring professionals.

If you’re a developer or DIY who loves pagebuilders and you appreciate learning how to develop websites in a more professional way, the Oxygen Builder is an absolute no-brainer. I’ve long been an advocate for hard-coding everything and will have to say this is the first visual builder that’s ever made me rethink my workflow.

I love that it never called itself the “Oxygen Pagebuilder”. Pagebuilders don’t deserve to be compared to Oxygen whatsoever. They’re little more than convoluted prebuilt wireframes and endless dropdown effects. Oxygen is actually meant for converting professional designs into coded themes.

Oxygen Builder still has “Lifetime Pricing Deals”

At the time of this writing, you can get the unlimited sites and updates/support forever package for only $169 (one-time purchase).

The competition pricing:

• Beaver Builder – $99, $199, and $399 per year for varying packages.
• DIVI – $89/year or $250/lifetime for unlimited access.
• Elementor – has FREE version, PRO costs $49/year (1 site), $99/year (3 sites), and $199/year (1000 sites).

Go try the Oxygen Builder!

• Try Oxygen Builder today.

I’d also like to give a special shout out to Sridhar Katakam who’s unloaded a wealth of tutorials for Genesis (my favorite theme for developers) and also runs WPDevDesign.com (an incredible site for Oxygen tutorials). He regularly gives me a heads up on developer products and services worth trying and was the one to give me a personal walk-through of the Oxygen Builder. I felt like I learned 90% of the important areas within 1-2 hours and there’s no doubt others could learn just as easily. (Hey Sridhar, maybe start a service for that.)