Oxygen 2.0 Review: Flexible Visual Website Building For WordPress

To avoid this conflict, Oxygen 2.0 lets you set up Template Priority. Essentially, this lets you dictate which template should “win” in such a situation:css selector
All in all, if you’re looking for a flexible, cost-effective way to build entire WordPress websites, I think you should give Oxygen 2.0 a look.
There are plenty of smaller differences, as well – but those are the two that stick out to me.

Oxygen 2.0 Review: How It Works

dom tree

  • Build templates to control how your entire site looks using a visual drag-and-drop editor
  • Create individual pages or reusable parts using the same editor
  • Easily apply CSS selectors to elements and work directly with your own stylesheets
  • Use responsive controls to set different styles for different devices
  • Bring in content from plugins – like a form or an event calendar – and style it using the same Oxygen visual interface
  • Control layouts using simple column-less settings and with draggable spacing

How Is Oxygen 2.0 Different Than A Page Builder?

Here’s where Oxygen’s templating system gets pretty cool, though:
But if you’re building complete websites for clients, or if you’re the type of person who wants to build your own WordPress site from scratch, Oxygen 2.0 is made for you.
Even if you use Beaver Themer or Elementor Pro 2.0, your WordPress theme still plays a role and you’ll see it in your site’s code.
All your code is applied in real-time:
On the left, you can use the sidebar to add elements to your design:
Additionally, I love the way the new layout engine works – draggable spacing and sizing is really convenient.
In fact, you can still use your favorite page builder with Oxygen – the two are not mutually exclusive tools. For example, you could use a page builder to design the content that goes inside the Page template that you build with Oxygen.
To actually build your templates, you’ll use Oxygen’s visual editor, which has gotten a complete revamp in Oxygen 2.0.

How Oxygen 2.0’s Templates Work


  • Where the blog post title goes
  • What author meta information to include and where
  • Where the blog content goes

Get Oxygen 2.0
And one thing developers will love is how accessible Oxygen 2.0 makes CSS.
And there you have it – a whirlwind tour of the new Oxygen 2.0 experience!
Second – Oxygen’s templating system is way more detailed than you’ll get with a page builder. You’ll see this more in the hands-on section.
Another way is to open the Structure tab, which shows a full DOM Tree for your design, including divs:

Template Inheritance

One of the areas where Oxygen 2.0 excels is its flexbox-based layout engine. It has a couple of features that make building layouts easier than your average page builder.
What was once merely a dream is now becoming more accessible thanks to tools like Beaver Themer, Elementor Pro 2.0 and – the subject of today’s reviewOxygen 2.0.
A template dictates how specific content looks. For example, if you build a template for a single blog post (like the post you’re reading now), you’ll use Oxygen to specify:
Pretty simple! But there’s still that odd spacing where each element is mashed up against the other one. And that brings me to another part of Oxygen 2.0’s layout system that I like…
First one – it completely replaces your theme.

Template Priority

And then the Advanced tab gives you a lot more settings:

  • One template for all posts
  • One template for a specific category of posts – say the “Photography” category

live preview of css changes
Rather than needing to manually adjust padding and margins*, you can just click and drag to adjust spacing. Watch:
I find having access to the DOM tree really convenient. The Thrive Architect page builder includes a similar concept and I find myself using it all the time to switch between elements and their containers.
But there’s a problem with that, right? If you set it up like that, posts in the Photography category would have two templates that apply to them (because All Posts would also apply)

Using The Oxygen Editor To Build A Template

But Oxygen really does completely eliminate your WordPress theme from the equation. Even though you still need to technically have a theme active, you’ll see no trace of that theme in your site’s front end code:
*You can, of course, directly access margins/paddings if you want.
Oxygen 2.0 is a visual drag-and-drop website builder for your WordPress site. Via its powerful editor and templating system, it gives you the power to build literally 100% of your WordPress site using visual design.
That’s another really convenient way to speed up your workflow. And it’s not just for spacing either. You can also, for example, adjust the size of a button:
oxygen 2.0 review the templates

  • Basics – simple building blocks like sections, text, images, etc.
  • Helpers – more advanced building blocks, as well as tools to help you build your header, post grids, and more.
  • WordPress – these let you insert WordPress-specific elements. For example, you can insert menus or sidebars. Or, you can insert any information from your WordPress database – like a post’s title, author information, etc.
  • Library – Oxygen 2.0 includes pre-built design sets that you can import designs from to save time.
  • Reusable – you can also save your own designs as reusable parts and then access them here.

Then, you can choose exactly which posts to apply that template to. For example, you could create a single template for all posts. Or, you could create a special template for a specific category of posts:

Building Layouts Using Oxygen

As someone who’s used both Oxygen 1.0 and Oxygen 2.0, Oxygen 2.0 feels like a big improvement, which is always a good thing (read my original Oxygen 1.0 review for a comparison). The inclusion of drag and drop editing makes it feel a lot more intuitive. And they’ve made it a lot speedier to build content by reducing the need to rely on custom code as much as before.
To control how different content on your site looks, you use templates. If you’re familiar with how WordPress themes work, you should grasp this concept pretty quickly. But if you’re not, it might take a little to get up-to-speed.

  • You can create horizontal layouts without needing to set up columns (though there is a column element if you want it).
  • You can set the alignment for all the elements in a section without needing to edit each element individually

When you build a template from scratch, you’ll see a blank editor to start. But if you’re inheriting from another template, you’ll see the inherited template around the buildable area.
As you kind of saw in the screenshots above, you style your elements using the sidebar.
Drag and drop editing…visual design…Oxygen is just a page builder, right?
For now, you can buy Oxygen 2.0 for for use on unlimited sites. And that includes client sites.
We actually previously reviewed Oxygen 1.0 back in June 2017, but now the developers are back with a massive update in the form of Oxygen 2.0. Keep reading my Oxygen 2.0 review for a look at what this revamped tool can do.
First, each section has these Child Element Layout and Horizontal Item Alignment settings. These let you do two cool things:
There’s a 30-day money-back guarantee, so you’re not risking anything by giving it a try.
Though the developers stress the current price is “limited time introductory pricing”, right now Oxygen’s price is hard to beat, especially if you’re building sites for clients.

Rearranging Elements In Your Layouts

For example, you can create one template that includes your site’s header and footer. Then, rather than having to manually add your header and footer for every content type on your site, you can just have other templates inherit the header and footer template.
oxygen editor
To demonstrate this, I added three elements to my design. Watch how easy it is to manipulate them:
Not only does this save you time in the present, it also means that if you ever need to change your header in the future, you only need to edit your header/footer template one time:

Styling Elements And Sections

Simple enough so far, right?
I don’t know of any other page builder that does this.
In the Primary tab, you can set up all the basic details for an element:
Better yet, you also get lifetime support and lifetime updates. So it’s all-in for life.
oxygen 2.0 code
using css
And you can also directly edit and create your own stylesheets:
You’ll see this a lot more in-depth over the next few sections, but here’s a quick summary of Oxygen 2.0’s basic functionality. You can…
If you just want a solution to help you build pages inside your existing WordPress theme, Oxygen 2.0 is not for you. Stick with a more traditional WordPress page builder.
These elements are divided into five different sections:
If you need to rearrange elements in your layouts, Oxygen 2.0 now has drag-and-drop editing. So one way to rearrange them is to just click and drag.
Essentially, this lets you use those subsequent templates to only design the content that sits in between the header and footer.
Well…kind of. But there are also some important differences.

How Much Does Oxygen 2.0 Cost?

First, you can have templates inherit from other templates. This opens up a lot of flexibility.
template priority

Final Thoughts + Who Should Use Oxygen 2.0?

inherit templates
You can use the controls at the top to select different media queries and apply CSS selectors. And then you can directly work with CSS using the full editor:
In the example above, I said you could have:
Again, this is another way in which Oxygen makes things pretty flexible.
If needed, you can also bring in content from other plugins that you’re using, as well.
Ever wished that you could build your entire WordPress theme with a drag-and-drop visual editor?
And you’ll also add styling for all those elements.

Posted by WordPress Guru