When it comes to WordPress site builders, there’s a compromise between convenience of use and the level to which you can customize and control the elements on your page.

Generally, visual editing tools for WordPress give you control over the content within the body of your page, but fall short for customization beyond that.

Oxygen, a new WordPress plugin from the people at Soflyy, promises to give visual, real-time pixel-level control over all site elements.

Oxygen aims to make site building easy for beginners, but it also packs features that lets power users customize to their heart’s content.

In this review, we’ll take a look at the main features of Oxygen, how to set it up and get running with it, and tell you what we really think of it.

Does Oxygen fulfill its promise of offering a new way to build sites quickly, easily, and with unlimited customization? Read on to find out.

Oxygen’s Main Features

There are a lot of features in Oxygen, here’s a rundown of its main offerings:

• Visually design your site with pixel-level control of everything, using fundamental HTML elements and CSS properties. HTML elements include sections, columns, Div blocks, headings, text boxes, text links, images, icons, code blocks, and more.

Oxygen allows you to edit not only body content, but also sections such as menus, headers, sidebars, and footers.

• See live previews of your site as you edit in real-time, without needing to refresh content.

• Oxygen includes a variety of premade components. For example, Next, which is built into Oxygen, consists of 160+ components (premade page blocks), 50+ pages (combined components), and five prebuilt website demos—all fully responsive and customizable. These prebuilt items allow you to quickly and easily build pages and entire sites.

• Create mobile responsive designs with device-level CSS.

• Easily edit element states (e.g. hover, before, after, active) and custom pseudo-classes.

• Create templates and target designs for specific content: pages, posts, ecommerce, post types, archives, taxonomies, categories, tags, and more.

• Write code for custom functionality (CSS, HTML, PHP, and JavaScript), and see the results of that code live, without having to refresh your page. Run custom WordPress loops, use WordPress API functions, and more.

• Use prebuilt Code Blocks to display content from the WordPress database.

• Easily set up custom post types and custom fields with Oxygen. Use Oxygen templates to apply post types. Use shortcodes or code blocks to add fields to designs.

• Reusable Parts allow you to have the same content in more than one place, edit a single version, and have all versions automatically update everywhere. Reusable parts can be used for menus, headers, footers, sidebars, and call-to-actions—any element that’s needed throughout your site.

• Insert third-party plugin output (e.g., sliders, mega menus, ecommerce, forms) into your pages using shortcodes, widgets, and PHP. Then, style the plugin’s output with CSS.

• Add widgets wherever you want—not just in sidebars.

• Oxygen includes 800+ Google Fonts and 500 SVG icons (from FontAwesome and Linearicons). You can also upload your own SVG icon sets from IcoMoon with one click. Oxygen also works with Typekit, letting you import fonts from a variety of type foundries.

• Tint background images to improve text readability.

• Forget having to use child themes with Oxygen—site designs are stored in the WordPress database, so updates to Oxygen are safe without them.

• Oxygen is compatible with third-party plugins, including SEO plugins and even third-party page builders such as Visual Composer, Beaver Builder, and Elementor.

• Pages created with Oxygen are search engine friendly, clean, and use high-quality HTML and CSS. Unlike other page builders, Oxygen doesn’t rely on grids or frameworks that add extra bloat and slow down your site. It only adds code for the elements you add to your page.

• Easily export and import designs created with Oxygen between sites.

Installing Oxygen

Here’s how to install Oxygen for WordPress:

1. First, you’ll need to purchase Oxygen from Oxygenapp.com. Then, from the Purchase Confirmation screen, click the Oxygen link to download the Oxygen.zip file.

2. On the same screen, copy your Oxygen license key. You’ll need it to paste into WordPress later.

3. In WordPress, go to Plugins… Add New.

4. Click Upload Plugin, Choose File, and select Oxygen.zip from your computer.

5. Click Install Now.

6. After it’s installed, click the Activate Plugin link.

7. In the WordPress admin, go to Oxygen… License, enter your License Key, and click Submit. Your license should validate.

By submitting your license key, you’ll get automatic updates for Oxygen.

Many prebuilt components and pages come with Oxygen. They can help you build your pages and website more quickly. They’re mobile responsive and act like placeholders, so that after you add them to a page, you can easily customize them with your own content.

Here’s how you get the components to use with Oxygen:

8. Return to the Purchase Confirmation screen at the oxygenapp.com site, and copy the license key for Components & Design Sets.

9. Go back to Oxygen…License in the WordPress admin, and enter the license key in the field next to Components & Design Sets.

10. Click Submit and your license should  validate.

The Oxygen Menu in the WordPress Admin

After installing Oxygen, you’ll see a new Oxygen link in the WordPress admin sidebar, with options for:

Templates
SVG Sets
Export/Import
License

Templates act like standard WordPress theme template files, except these templates can be designed visually. Like standard WordPress templates, their designs can be targeted for whatever content type you wish, including posts, pages, archives (e.g., for blogs), taxonomies, custom posts, custom taxonomies, ecommerce pages, headers/footers, and more.

SVG Sets allow you to upload new icon sets from IcoMoon into Oxygen.

Export/Import lets you copy the code for your site and take it somewhere else. It also lets you bring in code from other Oxygen sites.

License is where you enter your Oxygen license key for automatic updates, as well as connecting to Oxygen servers for extra elements, components, and pages for your designs.

Using Oxygen

Oxygen comes with many features for visual site building. Here are the basic steps for using Oxygen with WordPress:

1. Create a new page in WordPress by going to Pages… Add New.

2. Add a title for your page and click Publish.

3. In the Oxygen section under your page title, click the blue Edit in Visual Editor button.

This opens Oxygen and lets you start designing your page.

Note: Soflyy, the developers of Oxygen, recommend using Google Chrome when designing pages. They’ve done most of their testing with Google Chrome and recommend it for the most stable experience. This only applies to the builder itself. They say that pages created with Oxygen will render correctly in all modern browsers.

4. In Oxygen, click the +Add button in the upper left.

This reveals five tabs with different components for your pages. The five tabs are:

Fundamentals
WordPress
Re-Usable
Components
Design Sets

The Fundamentals tab provides basic HTML elements such as sections, headings, text, images, columns, links, Div blocks, code blocks, and more.

The WordPress tab lets you use plugin shortcodes and widgets. With Oxygen, you can add widgets anywhere on your page, not just the sidebars.

The Re-Usable tab is where “reusable” components are stored. In Oxygen, you can click on any page element, such as a header, and designate it as a reusable component. This way, you can use it throughout your site, change it in one place, and have it update everywhere.

The Components tab includes headers, footers, “hero” sections, content sections, call-to-actions, pricing sections, and more. These components are pulled over from Oxygenapp.com servers.

Design Sets include a wide variety of components and pages. Using the prebuilt elements here allows you the fastest way to build a site. These also come from the Oxygenapp.com servers.

The Next design set alone includes over 160 components and more than 40 pages of designs, including five demo sites (Personal, Legal, Photographer, Agency, and Main), that you can use as building blocks for your own site. Any page from these site demos can be copied to your site with one click.

5. To add a element from one of the five tabs to your site, just select it. Once they’re on your page, you can use the options from the toolbar or sidebar menu (read about them below), to customize them however you wish.

6. After designing your page the way you want it, click the Save button in the upper right.

7. To see how the page looks in your browser, click the back to wp button, and on the WordPress edit page, click the Permalink link.

8. To get back to WordPress, click the Edit Page link at the top of the page. From there, click Edit in Visual Editor to go back to Oxygen for further designing.

Oxygen Toolbar

As I mentioned above, one of the first things you see when you go into Oxygen is the + Add button for getting access to the five tabs of elements, components, and pages for your designs.

After adding a premade element from one of those tabs to your page, you can click on it and edit it with the Oxygen toolbar.

The toolbar displays the most common CSS parameters you’ll need for editing the selected object. Depending on the type of element you’ve selected, the toolbar changes the available options.

For example, when you add text, the toolbar gives you options for color, font, size, weight, link, etc. When you add images, the toolbar presents options for URL, width, height, link, etc. When you add a code block, the toolbar presents options for tags, along with the code editor.

When you click the More… button in the toolbar, Oxygen reveals more CSS properties for:

Background
Position & Size
Typography
Borders
CSS & JavaScript

These options cover every common CSS property and allow you to visually design your page elements at a pixel level.

And for properties that aren’t available from the visual user interface (e.g., gradients, transitions), Oxygen lets you write your own CSS and JavaScript, including your own custom selectors.

The toolbar also includes buttons for deleting or duplicating items, creating CSS classes and IDs, writing responsive styles for different mobile screen sizes, editing and creating pseudo-class states, and more.

Sidebar Menu

In the upper right of Oxygen is a button that slides out the sidebar menu, revealing options for:

DOM Tree
Stylesheets
Selectors

The DOM Tree is a tree of the objects on your page. It provides options for deleting objects, searching objects, making objects reusable, duplicating objects, wrapping objects with <div>, renaming objects, and collapsing or expanding the tree.

The Stylesheets section lists all the stylesheets for your site. It also allows you to write your own CSS. You can even style third-party plugin output.

The Selectors section lists all the CSS classes from your page.

Settings and Back to WordPress

Also in the upper right page of Oxygen is the Settings and back to WP buttons.

The Settings button tells you the pixel width for your site’s page, and the default header and text fonts for your site.

Clicking the back to WP button takes you out of Oxygen and back to the WordPress page editor. From there, you can see what your page looks like on the frontend by clicking the Permalink link.

Video Tutorial: Setting up and Using Oxygen

Support & Documentation

The support for Oxygen is very good, and includes contact support directly from the creators of Oxygen. I sent a couple of emails to them and received a response within a few hours.

Here’s the support options you’ll find for Oxygen:

Email support
Contact form
Online documentation, including a number of videos to get you up and running.
Test demo at https://oxygenbuilder.com/
Debugging support through their online server

Soflyy, the people behind Oxygen, view it as a continual work in progress. In essence, this means that they’re always looking for ways to make it better and incorporate customer feedback and feature requests. It’s a great attitude and philosophy for a company to have.

If you have any questions about Oxygen, they can be reached at support@Oxygenapp.com.

Pricing

Currently, Oxygen is available for a limited time introductory price of $99 (one-time charge).

It comes with a 30 day moneyback guarantee, along with lifetime support and updates.

Oxygen can be used on unlimited sites, including client websites.

Conclusions & Recommendations

Compared to other WordPress page builders I’ve used, I found Oxygen to be a unique user experience.

It stands out because it not only lets you quickly build pages and entire sites with its prebuilt components, but it also allows you get deep into the fine details with its coding features.

Not only does it allow you to take control of the content within the body of your site, like most page builders, but it also lets you control everything else on your site, including page headers, footers, sidebars, and menus. You can even create your own templates visually. It’s a true visual designer with unlimited customization.

With its real-time feedback, pixel-level control, and many other impressive features, Oxygen manages to meet the site building needs of both beginners and power users. Beginners will like the prebuilt elements that come with the theme, and power users will appreciate the ability to visually customize everything on their site, including writing their own CSS, JavaScript, and PHP.

If you’d like to learn more about Oxygen, you can do so at https://oxygenapp.com/