• 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
Product Reviews

Oxygen Review: A WYSIWYG Visual Website Builder for WordPress

Last Updated on: June 18, 2017 Colin Newcomer Leave a Comment

Oxygen Review: A WYSIWYG Visual Website Builder for WordPress

With the slow collapse of Headway Themes, there’s been somewhat of a void in the WordPress visual website builder space. By visual website builder – I mean a tool that helps you build your entire WordPress site – header, footer, content…everything.

Thankfully, we’re due for a breath of fresh air from Oxygen, a new’ish WYSIWYG WordPress website builder from Soflyy, the same team behind the popular WP All Import plugin.

Oxygen sets you up with an in-dashboard interface that lets you build out sites from a mixture of pre-built components and basic HTML elements. Beyond static designs, you can also quickly create templates for archives, single post types, plugin content, and more.

All of this technically can be done without knowing any code – though CSS/HTML knowledge definitely gives you more flexibility. And what’s cool is that you have a code editor right inside the Oxygen interface for easy code editing.

In my Oxygen review, I’ll tell you a bit more about who this tool is for and what it can do. Then, I’ll go hands-on and give you a tour around the Oxygen Visual Editor interface.

Oxygen Review: Who Is This Tool For?

Oxygen bills itself as “quickly becoming the tool of choice for WordPress web designers.” That statement gives you a quick idea of who Soflyy built Oxygen for:

People who are actually building full WordPress sites.

If you’re a WordPress designer working with clients, Oxygen aims to help you speed up your development process. And if you’re a regular WordPress user, Oxygen can help you build your very own website.

That being said, Oxygen isn’t really for absolute beginners. It’s not a beginner-focused drag and drop page builder like Visual Composer (nor is it trying to be).

A beginner could create a website all by themselves. But unless you’re fine using only pre-built components (you’ll learn more about what these are in a second), you’ll want at least some basic WordPress, HTML, and CSS knowledge to be able to change things up.

How Does Oxygen Work?

Oxygen is technically a WordPress plugin…but it’s actually functioning as a theme here. That is, the Oxygen plugin will pretty much completely overwrite your theme and render it meaningless.

99% of the plugin is the Visual Editor. The other 1% is a backend interface that lets you easily set up templates for different post types.

I’m going to cover the Visual Editor in much more detail below. But just to give you a quick taste of how it works, here’s what the basic interface looks like:

oxygen review overview

On the left, you can choose the basic HTML elements, WordPress-specific content pieces, or pre-built components. On the right, you get a DOM Tree as well as quick access to stylesheets.

In the middle, you can point and click to edit specific elements (though the visual interface is NOT drag and drop). There’s also an interface to quickly add styling, as well as jump into the code.

This interface is what you’ll use to visually build out your entire WordPress site. Let’s go a bit more in-depth…

Using the Oxygen Visual Editor to Build Your Site

When you first open up the Oxygen Visual Editor, you’re staring at a blank canvas. To change that, you need to click the big ADD button in the top left.

Then, you can choose from a variety of different elements:

  • Fundamentals – this tab contains basic HTML elements that you can use to build your content. For example, <divs>, text blocks, links, images, icons, columns…basic stuff like that.
  • WordPress – this tab houses a bunch of WordPress-specific functions. For example, if you want to add a WordPress widget or shortcode, you can do that from here.
  • Re-usable – this tab starts off empty, but you can save your own elements to it so that you can quickly reuse elements across multiple templates. A common use would be to save your header and footer as re-usable elements so that you don’t need to build them from scratch each time.
  • Components – these are whole pre-designed elements that come with Oxygen. For example, you can quickly drag over pre-made headers, hero images, product feature lists, and lots, lots more. There are also components for WordPress-specific elements like archives, WooCommerce shops, and more. These can save you a ton of time when you build out your designs.
  • Design Sets – these are themed designs. For example, you can quickly import entire pages. Or, you can just browse a whole bunch of themed components.

For example, you can quickly insert components for premade headers and hero sections to whip up a basic framework:

The above design took me about 5 seconds…

Styling Your Designs With Oxygen

Now, you might be wondering how Oxygen actually lets you make your site your own. So let’s dig into how you can style your designs.

You have a few options. First off, Oxygen gives you an editor interface where you can quickly change up things like:

  • Backgrounds
  • Positioning and sizing (including custom margins and padding)
  • Typography
  • Borders

And then, you can always jump straight into the code to add custom CSS for the specific element that you have selected. Oxygen even queues up the selector for you right away:

Selecting specific elements to style is super easy thanks to the DOM Tree. If you hover over an element in the DOM Tree, Oxygen will highlight the element in the visual editor. Then, you just need to click to select that element:

You can also rearrange the basic ordering and positioning of elements by dragging them around the DOM Tree.

And you’re also able to select specific stylesheets or even create a new stylesheet – all without leaving the Oxygen Visual Editor interface.

Creating Archive and Single Templates With Oxygen

Everything I’ve showed you up until now has been fairly focused on static content. But Oxygen can also help you design:

  • Templates for singles for your various post types (including WooCommerce products)
  • Archive pages for all of your post types

In the Add New Template interface, you can choose between Archives and Singles (as well as a few other options):

If you select an option, you’ll basically see a visual replacement for the WordPress template hierarchy. That is, you can select specific post types, categories, tags, taxonomies, or authors to apply the archive to.

For example, you could create one template for regular posts, and a different template specifically for WooCommerce products:

You can also add ordering to your templates to cover situations in which multiple templates apply to the same piece of content.

Then, you can edit your template in the same Visual Editor interface. For example, to create a blog archive page, you’d just need to add the Archive component:

You could also build your archive page piecemeal by using individual components for titles, pagination, content, and more.

If you need to make a tweak, you can jump right into the Code Editor without leaving the interface:

You can see that the Archive component is basically just adding “The Loop” to your page.

To style your archive, you can either add custom CSS or use the same style editor I showed you before. For example, to change the color of each post’s title, you just need to click and edit:

It’s worth reiterating that Oxygen also includes similar pre-built components for WooCommerce. So you can also quickly build out WooCommerce product pages and lists using these same principles.

How’s Oxygen’s Documentation?

While documentation is important for any plugin, I think it’s especially important for a plugin like Oxygen. Oxygen includes a number of video series to get you up to speed with the plugin and its various functions.

Pretty much all of the documentation comes in the form of these videos. Overall, I’d say the documentation is quite good…though if you prefer text to video you’re a bit out of luck.

How Much Does Oxygen Cost?

Oxygen currently has introductory pricing that gets you unlimited updates and unlimited support for unlimited sites for just $99. That’s a pretty dang good deal.

But as I said, that’s the introductory price. So don’t expect this price to stick around forever.

Final Thoughts on Oxygen

I’m not a developer, but Oxygen feels intuitive to me. I like that it blends visual WYSIWYG designing with a built-in code editor to let you quickly jump into the code and add CSS, JavaScript or, when relevant, PHP.

In a perfect world, I’d like to see some easier ways to style archive pages and singles. Right now, you pretty much need to add custom CSS if you want to create, say, a post grid instead of a post list for your archive page.

While that’s fairly trivial for a professional designer, I think Oxygen could also catch intermediate users like me if that part were a bit simpler. Still…I recognize that Oxygen is primarily marketing itself towards WordPress designers, so I don’t consider this a major criticism.

All in all, I enjoyed my time playing around with Oxygen.

If you’ve been looking for a visual website builder for WordPress, definitely give it a look. You can try a demo of the Visual Editor for free – so you don’t need to pay a dime until you’re happy with how the plugin works.

Go to Oxygen

You can also use Oxygen with your favorite page builder. As well as all the other plugins you’d normally use, like contact form plugins, photo gallery plugins, and more.

+ 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
  • Elementor Review - Honest Thoughts

    Elementor Review: Honest & Complete Look At What It Offers in 2023

  • Blocksy Theme Review: Honest Thoughts

    Blocksy Theme Review: Honest Thoughts + Discount Code (2023)

  • Honest GeneratePress Review

    Honest GeneratePress Review (2023): 7 Key Features + Pros and Cons

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

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