Interested in a tool that bills itself as “more flexible than typical page builders and as powerful as hand-coding”? Oxygen is a new WYSIWYG visual editor plugin for WordPress from Soflyy, the same team behind WP All Import.
It lets you build your entire website – headers, footers…everything – all without leaving the confines of your WordPress dashboard. While it’s probably not for total beginners, WordPress designers and intermediate WordPress users can jump in and start designing detailed sites from scratch.
In my Oxygen review (that sounds weird to say!), I’ll take you hands-on into this visual website builder and show you how everything works.
Oxygen Review: How Does it All Work?
Oxygen is a website builder in the form of a WordPress plugin (similar to Divi landing page builder or Elementor). While it is a plugin, it pretty much completely replaces your WordPress theme. That is, Oxygen is all you need to style your site.
With its collection of fundamental building blocks, pre-built components, and standard WordPress elements/shortcodes, you can completely build out your site without needing to code everything from scratch.
Additionally, detailed styling options let you easily change things up with custom CSS or Oxygen’s built-in styling tool.
And what’s cool is that you can still use all of your other favorite WordPress plugins…including regular WordPress page builders.
Who Is Oxygen Built For?
If you’re a casual WordPress user, Oxygen isn’t really built for you (nor is it marketed towards you). Oxygen aims to be the “tool of choice for WordPress web designers.” So if you’re a WordPress web designer, Oxygen wants to help you build WordPress websites…faster and easier.
But even if you’re just an intermediate WordPress user who likes to build your own websites, you’ll probably get value from Oxygen. It’s user-friendly enough that you can still build a unique site even if you don’t know much, if any, code.
That being said, if all you want to do is add some styling to a few pages or posts, you don’t need Oxygen. Oxygen is a complete website builder – not a page builder. As I mentioned, you can actually use Oxygen in conjunction with page builders – so this isn’t an either/or scenario.
Article Continues Below
Quickly Building a Homepage With Oxygen
I’ll dig into the Oxygen Visual Editor in more detail in a second, but first I want to show you just how quickly you can build a page with Oxygen and its included components.
When you fire up the Oxygen Visual Editor, you’ll see a big blank canvas like this:
On the left, you add elements, widgets, shortcodes, templates, and more. And on the right, you get a helpful DOM Tree, easy Stylesheet access, and information about selectors. There are other smaller menus tucked away…but those are the basics.
If you just want to build a page as quickly as possible, all you really need to do is add a header:
And then round things out by similarly adding some body text and a footer:
And that took me all of about 30 seconds. To edit text, it’s as simple as point and type. Obviously, in real life, you’re probably going to want to customize things a bit more. This is just the high-level overview.
Let’s go a bit more in-depth with Oxygen…
The Oxygen Visual Editor In More Detail
Ok, the above was the rough and tumble “aha” moment. But let’s go a bit further into everything in the Oxygen Visual Editor.
Adding Elements With Oxygen
While I added pre-built components to my example page above, you aren’t limited to those designs. You can actually choose from 5 different categories (with some overlap between categories):
- Fundamentals – basic elements like text blocks, headings, divs, and more.
- WordPress – WordPress specific content like shortcodes and widgets.
- Re-usable – your own saved designs that you can quickly reuse
- Components – pre-built designs, as well as specific WordPress content like author boxes, pagination, and more.
- Design sets – themed elements. They overlap with the components category but are organized in a different manner.
To add an element, you just click on it (not drag and drop). Once the element is on your page, you can easily change its basic ordering by dragging and dropping its position on the DOM Tree:
Styling Your Elements
To style elements, you can approach things in two different ways.
First – there’s the manual way. You can quickly open up an existing stylesheet or add a new one. And Oxygen always makes it easy for you to find the specific CSS selector:
But you can also click the More button to open up a styling box that lets you:
- Add margins and padding
- Change positions and alignment
- Change sizes
- Set up backgrounds
- Choose typography
- Add borders
- Easily add custom CSS to that specific element
Reusing Elements Across Multiple Pages
Say you create an element that you’ll want to reuse across multiple pages. Obvious examples are headers and footers – but it can be anything on your page.
All you need to do is pop into the DOM Tree, click the hamburger icon, and tick the Make Re-Usable box. You can also rename each specific element, which comes in handy.
Once you do that, you can quickly reuse it from the RE-USABLE tab that I showed you earlier.
What About Blog Posts – Archives and Singles?
Ok – now maybe you’re wondering – what about actual WordPress posts? How do you create a blog page that matches the style of the rest of your site?
Don’t worry – the Soflyy folks didn’t forget that you probably want to display blog posts somewhere on your WordPress site.
Technically, Oxygen lets you set up templates for anything. But they have two dedicated options for archives and singles:
If you click on, say, Archive, you’ll get a bunch of options to select which posts show up in the archive view. Note that you’re not limited to posts – you can also choose custom post types, custom taxonomies…pretty much anything.
Essentially, it’s replacing the WordPress template hierarchy with a visual interface. Nice!
Once you publish it, you can pop into the Visual Editor and style how your archive will look using the same interface I just showed you.
You’ll likely want to add the WordPress Content → Archive component. Then, you can style it (again) just like I showed you before:
For an idea of what’s going on under the hood to generate this list, you can always turn on the Code Editor and see what’s happening with the PHP:
You can see that the component pretty much just adds “the loop” for you.
Similarly, if you’re creating a WooCommerce store, you could build out your WooCommerce product archives with dedicated WooCommerce components:
General Thoughts on Oxygen
As I feel the need to restate in most complicated reviews – I’m not a professional web designer or WordPress developer. I have built plenty of sites with WordPress…but I’m still an amateur.
That being said, I found Oxygen to be a fairly easy way to build a custom-looking WordPress site. The pre-built components make it easy to get a framework up and running. And Oxygen gives you ample opportunities to style things, either through custom CSS or Oxygen’s built-in styling options.
The only thing I’d appreciate is a bit more flexibility in adding WordPress post types. While it’s certainly possible to add your own styling to create, say, a grid, I’d love if there were an “out of the box” way to create a post grid.
Again, I fully concede that this criticism might just be my “amateur coding skills” talking because it’s still a bit complicated for me to add a responsive grid via custom CSS. But given how easy Oxygen makes it to add pre-made static content, I wish the same applied to the dynamic content.
That’s really my only criticism (which probably isn’t a real criticism if you’re an actual designer). I found everything else about Oxygen easy to work with.
If you want to check alternative visit our comparison of Elementor and Visual Composer.
How Much Does Oxygen Cost?
Currently, Oxygen costs $99 for lifetime updates and lifetime support on unlimited sites. Yeah, that’s a pretty generous offer…which is why it isn’t permanent. That’s just the introductory offer. Prices are likely to rise in the future.
With your purchase, you also get a 30-day money back guarantee.
Oxygen also will set up a demo site for you to test out the Oxygen Visual Editor in a live environment. So you can try the full Oxygen Visual Editor before you bust out your credit card.
All in all, if you build WordPress sites and want to speed up your development process. Or if you’re an intermediate WordPress user looking for some more control over your site, Oxygen is definitely worth checking out.