Oxygen – A Complete Design Plugin for Creative Professionals

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.