Oxygen – A Complete Design Plugin for Creative Professionals

Looking for a comprehensive WordPress design plugin to tackle all your coding needs without add-on costs? Oxygen is a full-site builder that gives you complete control over every aspect of your WordPress site design – in just one plugin. No more add-ons. No more hacking theme files. No more bloated code weighing down your site speed. Oxygen gives you complete control over your website design vision even if you aren’t a code-guru.

Have you ever cringed whenever it was time to make a design change to your WordPress website? I have.

The blood, sweat, and tears that come with modifying a WordPress theme are real. Pre-designed themes, no matter how you slice them, are limiting to anyone who isn’t a code-guru.  It’s a challenge to find a theme that can execute my vision completely.

If I find one that’s close enough, making changes to it always leaves me wanting. Some themes are bloated with features I don’t need while others need extra plugins merely for added design elements.

Over the years, my plugins choices were geared to such design needs, like a grid plugin to display my portfolio when themes and page builders couldn’t execute my design.

While the interface for customizing themes has improved over the years, there is still a lack of control needed for design nuances. Page builders coming into the market have benefited non-coders, but often require add-ons to control various design aspects of a site built on WordPress, such as headers, footers, or cool animations.

Enter Oxygen. It is not a page builder. Oxygen is a full-site builder that gives you complete control over every aspect of your WordPress site design – in just one plugin. With Oxygen, you don’t need a theme. Instead, you design your own theme, without hand coding.

Since Oxygen handles all your design needs in one app, you can save your precious plugin space and budget for extending WordPress functions.  Fewer plugins lead to fewer headaches and more money in your bank account.

As a writer and graphic artist, here are five reasons why I enjoy using Oxygen to manage my WordPress design needs. Oh, and it was previously reviewed on WP Mayor too.

The Layout Engine

If you’ve used any modern design application like Adobe Dreamweaver or Photoshop, then you will feel right at home with Oxygen’s UI. Like many design apps, Oxygen’s interface consists of a property panel on the left, a structure panel on the right (or as I like to call it, a DOM panel) and the canvas in the middle. The structure panel gives you both a bird’s eye view of all your nested elements on the page and granular control of placing them. The more nested your elements are, the more the structure panel becomes a crucial part of your workflow.

Oxygen’s layout engine offers a true WYSIWYG experience that lets you see exactly where your elements are on the page, with pixel-perfect spacing. Designers will enjoy not having to toggle to live-preview their designs as they work.

While themes and page builders offer options to hand code properties not available in their UIs, it’s a challenge to surf the W3C for non-coders. With Oxygen, the most useful CSS layout properties are available to you at your fingertips in the properties panel. Oxygen’s visual cues make your workflow easier and faster.

Oxygen’s biggest advantage is its flexbox, which offers simpler solutions to common layout tasks and eliminates unnecessary elements and nesting. Need to vertically stack two headlines above two horizontally aligned buttons? Themes and page builders offer columns to achieve the task. In Oxygen, a simple div using flexbox properties is a more elegant solution than nesting elements in columns and adjusting their spacing for each viewport. Save your column elements for more appropriate tasks, like long text boxes with adjoining images.

Full Site Builder

Oxygen’s template system allows the user to build every single element of a site, including the menu system, the header, the footer, the sidebars, and the page content itself. There’s no need for add-ons to build these elements. With Oxygen, you don’t just design pages, you design an entire site and template system, unique to your needs.  For even further control, global settings can be set for colors, fonts, headings, body text, links, page width, and more all helping to speed up your workflow and maintain site-wide design consistency.

Oxygen’s typography control is another feature giving users plenty of flexibility and extendibility. By default, Oxygen hooks into Google fonts, but the user can use Adobe Typekit or even upload their own Woff fonts. In addition, Oxygen lets you set which font weights to load on your site, contributing to the overall speed of your site.

Responsive Design

As a visually inclined developer, optimizing my WordPress sites for responsive design often made me cross-eyed. Toggling back and forth between the editor and a preview was time-consuming and frustrating when I got the code wrong. Oxygen’s flexible and fast responsive design feature eases the pain of layouts for various screen widths.

With four breakpoints, you can quickly see your layout changes right in the builder. No need to preview on a browser. Element alignment, typography changes, and image sizes can all be changed quickly using the properties panel within each breakpoint view.  You can even choose to display or hide elements based on viewport size. Want to delete the changes for a specific breakpoint? Easy! Just click the red X right next to the breakpoint indicating that styles have been set for it.

Selector Detector

Every time I use a plugin, whether it is for a form or a custom post-type, the display is always a gamble. If plugins come with style options, the options are usually limited to color and typography. Most don’t even come with padding or margin options. Plugins offering a lot of CSS options come with the cost of being heavy, loading unnecessary code leading to slower site speed. Oxygen’s selector detector makes styling plugins a breeze.

Want to change the spacing between two elements? Easy, just point at the element, click the selector detector style options and make your changes in the properties panel. If you want even more control, you can use the PHP or CSS options available with every element, but you likely won’t need to touch the code at all. With selector detector, you can style your forms and other plugins in no time letting you choose lighter weight plugins for their overall function, not their design features.

Helpers

Sometimes you need something requiring a little more complex coding. Visual designers will appreciate the helpers Oxygen offers, such as a slider, a toggle, galleries, icon boxes and super boxes that give a site dynamic and animated features.

I constantly rely on Oxygen’s Easy Posts helper to display more than just my posts, but my custom post types for my projects, clients, and portfolio. Most helpers come with various styling display options for a quick display, but if you want even further control, you can use the selector detector to style any helper exactly the way you want. The Easy Posts helper comes with several gorgeous design options, but like all artists, I tweak it until I’m happy.

 

My favorite helper is the Header Builder. Oxygen makes it easy to build responsive, multi-row, sticky headers. Each row can be controlled independently for responsive design. Vertically align one row on one viewport, hide it on another. The options are unlimited.

Video Overview

Here’s a video overview in case you want to take a closer look:

Conclusion

As a creative professional who’s used a variety of design programs, I’m right at home with Oxygen. The interface is intuitive for any graphic designer or creative professional who’s dabbled in code. It feels and acts like all the design tools you’re used to yet gives you full control of your site’s code.

I’ve always valued WordPress for its powerful CMS capabilities but like many visual artists, changing my WordPress design had become a drag. With Oxygen, design no longer a chore. It’s fun again.

Julie Starling
Julie Starling
Julie Starling is a writer and graphic artist who’s been dabbling in WordPress development since 2007. When she’s not writing stories for clients in healthcare or technology, she writes humorous, anthropomorphic stories about nature and animals on her blog, Wild Dingo.

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

7 Responses

  1. I recently installed the oxygen theme and saw that the theme-screen was completely disabled. That was a show-stopper for me, I removed the plugin and didn’t test it further.

    I believe plugin (and theme) developers shouldn’t break default WordPress behaviour to implement their own implementation. If they do break it, they should make sure that no other default WordPress functionality breaks.

    1. Hello Twan,
      Thank you for your comment. In the article I write:

      “Oxygen is a full-site builder that gives you complete control over every aspect of your WordPress site design – in just one plugin. With Oxygen, you don’t need a theme. Instead, you design your own theme, without hand-coding.”

      Perhaps I wasn’t clear enough. Yes, of course, Oxygen disables themes (but not other plugins) because the core benefit of Oxygen is to be themeless and design your own theme. It’s targeted at developers who want more control over their themes and not be stuck with a specific theme design they cannot change or be dependent on the cumbersome process of a child theme plugin to make design changes. If you are happy with your current development process and like your theme then, by all means, stick with it! But if you want complete control over your design and an easier way to design your own theme or make site-wide changes, then Oxygen is a great solution as it is a full site development tool. If you are still interested in Oxygen but really love your theme, there is a plugin you can download that will enable you to use your theme while Oxygen is enabled. It gives you the choice on each page which you’d prefer to use, your theme or Oxygen to build the page. I’d encourage you to to try Oxygen in a development environment rather than your live site so you can get the feel of designing your own theme before you use it live.

  2. This builder is proprietary software according it’s author. Despite being open source, the license ( for those read it ) is not GPL but instead a hostile custom language. It’s not even another 3rd party license that’s GPL compatible. It’s completely self serving and the antithesis of WP.

    Despite it’s functionality and abilities, it best to steer clear of this builder plugin because it’s among the only builder in the WP space that doesn’t adhere to the spirit of the WP community. I had hoped they would change it for v3 but that’s not currently the case.

  3. Hi Julie, I wanted to know if with Oxygen builder you can use System Font Stack so your website doesn’t not download any font but use the font already on user’s computer, thus increasing the speed of your website.
    Another question: I bought Premium WP theme so after reading your post, I understand my premium themes are useless?!

Leave a Reply

Your email address will not be published. Required fields are marked *

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share tutorials and genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.