• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • Rocket.net
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • A2 Hosting
    • WPX Hosting
Sponsored

Oxygen 2.0 Review: Flexible Visual Website Building For WordPress

Last Updated on: June 23, 2018 Colin Newcomer 5 Comments

Oxygen 2.0 Review: Flexible Visual Website Building For WordPress

Ever wished that you could build your entire WordPress theme with a drag-and-drop visual editor?

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 review – Oxygen 2.0.

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.

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.

Oxygen 2.0 Review: How It Works

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…

  • 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?

Drag and drop editing…visual design…Oxygen is just a page builder, right?

Well…kind of. But there are also some important differences.

First one – it completely replaces your theme.

I don’t know of any other page builder that does this.

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.

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:

oxygen 2.0 code

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.

There are plenty of smaller differences, as well – but those are the two that stick out to me.

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.

How Oxygen 2.0’s Templates Work

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.

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:

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

And you’ll also add styling for all those elements.

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:

oxygen 2.0 review the templates

Simple enough so far, right?

Here’s where Oxygen’s templating system gets pretty cool, though:

Template Inheritance

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

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.

Essentially, this lets you use those subsequent templates to only design the content that sits in between the header and footer.

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:

inherit templates

Template Priority

In the example above, I said you could have:

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

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)

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:

template priority

Again, this is another way in which Oxygen makes things pretty flexible.

Using The Oxygen Editor To Build A Template

To actually build your templates, you’ll use Oxygen’s visual editor, which has gotten a complete revamp in Oxygen 2.0.

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.

On the left, you can use the sidebar to add elements to your design:

oxygen editor

These elements are divided into five different sections:

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

If needed, you can also bring in content from other plugins that you’re using, as well.

Building Layouts Using Oxygen

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.

First, each section has these Child Element Layout and Horizontal Item Alignment settings. These let you do two cool things:

  • 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

To demonstrate this, I added three elements to my design. Watch how easy it is to manipulate them:

layouts

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…

Rather than needing to manually adjust padding and margins*, you can just click and drag to adjust spacing. Watch:

spacing

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:

resize

*You can, of course, directly access margins/paddings if you want.

Rearranging Elements In Your Layouts

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.

Another way is to open the Structure tab, which shows a full DOM Tree for your design, including divs:

dom tree

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.

Styling Elements And Sections

As you kind of saw in the screenshots above, you style your elements using the sidebar.

In the Primary tab, you can set up all the basic details for an element:

css selector

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

advanced

And one thing developers will love is how accessible Oxygen 2.0 makes CSS.

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:

using css

All your code is applied in real-time:

live preview of css changes

And you can also directly edit and create your own stylesheets:

stylesheets

And there you have it – a whirlwind tour of the new Oxygen 2.0 experience!

How Much Does Oxygen 2.0 Cost?

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.

For now, you can buy Oxygen 2.0 for $99 for use on unlimited sites. And that includes client sites.

Better yet, you also get lifetime support and lifetime updates. So it’s $99 all-in for life.

Final Thoughts + Who Should Use Oxygen 2.0?

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.

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.

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.

Additionally, I love the way the new layout engine works – draggable spacing and sizing is really convenient.

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’s a 30-day money-back guarantee, so you’re not risking anything by giving it a try.

Get Oxygen 2.0

+ Share
Disclosure

Colin Newcomer

Colin Newcomer is a WordPress writer for WPKube. He uses WordPress more often than any sane person should.

Related Posts

Back to all articles
  • Jupiter X Theme Review: Multipurpose, Customizable, And Powered By Elementor

  • Oxygen 2.1 Update: ACF/Toolset Integrations, Sticky Headers + More

  • Related Posts Plugin by Bibblio – Are You Using It Yet?

Coupons

View more deals
  • Recipe Card Blocks Coupon
    15% OFF

    Recipe Card Blocks Coupon

    Running a cooking or food website can be fun (and tasty) – but
    Get This Deal
  • WP 2FA Coupon
    20% OFF

    WP 2FA Coupon

    Security should be at the forefront of all site owner’s min
    Get This Deal
  • Themskingdom Coupon
    20% OFF

    ThemesKingdom Coupon

    First impressions count. As such, you’ll want a WordPress t
    Get This Deal
5 Comments Leave a Reply
  1. CursosFormacan says

    June 23, 2018 at 8:02 am

    Colin Newcomer, thanks for the article post.Really thank you! Great.

    Reply
  2. Sami CHANGUEL says

    June 23, 2018 at 6:17 pm

    Nice plugin but with only 60 installations and almost 1 year for the last update it won’t be easy to use oxygen instead of siteorigin page builder !!

    Reply
    • Louis Reingold says

      June 24, 2018 at 7:32 pm

      That’s the free version of Oxygen you’re talking about, which is a stripped down version of 1.x. We need to give the free version of Oxygen some love, but right now we’re focused on the 2.0 pro version which has thousands of users.

      Reply
    • Alex de Borba says

      June 27, 2018 at 5:12 pm

      I do agree with Sami statement when a builder takes over one year to provide updates, and then focus primarily on clients other than the community, it reminds me of most Envato developers that start well, then slack on further releases just because they secured a fanbase.

      It should follow the concept of Elementor, that sees for paid and community users equally other than prioritising.

      Reply
  3. Morgan Newall says

    August 27, 2018 at 9:36 am

    As someone who JUST discovered Elementor 2.0 has a Theme Builder, and watched a video so am now totally informed (not).

    Can you clarify how this could be better for someone like me that wants Clean-CSS design control, but would also like to churn out existing designs I like as quickly as possible?

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

18 Best Cheap WordPress Hosting Providers in 2023 (From $1.99)
210 Best WordPress Hosting Options for 2023 (Pros & Cons)
38 Best Managed WordPress Hosting Providers for 2023 Compared
45 Best WooCommerce Hosting Providers Compared in 2023 (All Budgets)
5Top 9 Landing Page Plugins for WordPress (2023)
69 Best List Building Plugins for WordPress In 2023
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Thrive Themes Review: A Look At The Full Membership
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2023)?
10OptimizePress Review: Create Landing Pages with Ease
11How to Make a Website: Complete Beginner’s Guide
12Top 22 Best Free Stock Photo Resources For Your Site
1317 of the Best Google Fonts for 2023 (And How to Use Them in WordPress)
14How to Start a Blog in 2022 (Step by Step Guide)
15How To Fix ‘503 Service Unavailable’ WordPress Error
1611 Best Contact Form Plugins for WordPress in 2023
17How to Add a Custom Logo to Your WordPress Site
18How to Fix Error Establishing a Database Connection in WordPress

WPX Hosting: 50% OFF

Save 50% on WPX Hosting using our exclusive coupon code.

Get this Deal

Flywheel(our review)

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.
Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2023 WPKube ® All Rights Reserved.
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy