Oxygen Builder: A breathtaking page builder?

Giorgio confesses that he can no longer “live without it.” For David, it’s simply “a dream for developers.”

And Mark says it helped change his career. Nothing less.

Giorgio, David, and Mark are not my groupies, nor are they members of a hot new boy band.

Giorgio, David, and Mark are committed users — fanatics? — of Oxygen Builder, a page builder that’s made them crazy.

A look at the official website of the product in question gives the impression of having found a rare gem, a kind of bomb that seems to be even more powerful than Elementor or Divi Builder, the two strongest page builders on the market.

Of course, you can imagine that we wanted to get a closer look.

So, does Oxygen deserve so much praise? What’s really underneath its shell, once you’ve scratched the surface?

Is it right for you, if you’re going to adopt it?

That’s what you’ll find out in this new article.

What is Oxygen Builder?

A page builder… that isn’t really a page builder

Launched in July 2016, Oxygen is a page builder in its own league.

Like some of its competitors (Elementor Pro, Divi Builder, Beaver Builder), it should rather be called a site builder, in that it allows you to modify all the elements of your content, from the header to the body of the page, including the footer.

But what makes it really different from its competitors is that it doesn’t need a theme to work. Yes, you read that right.

Well, technically speaking, you still need to have a theme enabled on your back office, because WordPress needs it to work.

But to put it simply, this theme will not affect the design of your site: Oxygen takes care of that.

Apart from that, Oxygen builder has the reputation of being very light and powerful, in contrast to the usual criticisms of page builders.

Among the other features of our guinea pig of the day, I should also mention a very advanced control of your layout (alignment, spacing) thanks to the use of Flexbox (Elementor also allows that, for info).

Flexbox is a CSS3 standard that allows you to control the layout of your web page elements, and make them responsive (adaptable on computers, tablets, and smartphones).

While other page builders will usually “just” use columns to organize your content, Oxygen Builder will generate shorter and cleaner code to do the same thing.

How does Oxygen Builder work?

Oxygen may be unique, but it also has most of the features you would expect from a page builder:

• It can be used with drag and drop.
• You have a real time preview of the changes/additions you make to your content.
• Ready-to-use page templates are available if you don’t want to start from scratch.
• There are dozens of modules (titles, buttons, images, calls to action, etc.) to add content to your page.
• It allows you to finely customize all parts of your WooCommerce store (a minority of other page builders, including some of the biggest players on the market, also allow you to do this).
• Thanks to Oxygen, you can customize and change all the colors of your site in a few clicks, via the Global colors feature.
• You can use conditional logic to display only certain elements of your site.
• Oxygen integrates with the WordPress content editor (Gutenberg). You can create your Gutenberg blocks in the Oxygen interface without coding, then add them in a few clicks on the Gutenberg interface.

After these nice promises, I suggest you take the tool in hand by investigating its interface.

How easy is it to use?

Oxygen is a premium plugin only: you won’t find it on the official WordPress directory.

Once you have purchased one of the three licenses to choose from — I’ll come back to this in detail later — you just have to activate the plugin on your WordPress Dashboard, in the “Plugins” menu.

You will then be offered two options:

1. Use a “Premade Website,” meaning a ready-to-use template that you can customize as you wish.
2. Choose “Blank Installation” to build your site from scratch.

The developers of the plugin recommend using a “Premade Website.” So let’s follow their advice.

Click on “Default Install.” By default, Oxygen Builder will install a demo called Atomic.

An interface that’s a little limited…

First observation: the plugin doesn’t knock you out with recommended actions and other unwanted messages on the Dashboard.

That’s one good point for Oxygen Builder!

You will see that it adds a dedicated menu on the left column of your Dashboard:

To get to the heart of the matter and start using the tool, click on “Add A New Page”:

You are now on the WordPress content editor interface. Continue by giving your page a name (e.g. “Oxygen test”), then save it by clicking “Save draft.”

Finish by clicking on “Edit with Oxygen”:

In terms of visual presentation, this is the kind of tool that web designers know well: bare. Not really what we’re used to seeing with a page builder.

Frankly, it’s a bit confusing, especially since at first glance, the options are pretty basic. You have a preview of your page on ¾ of the window, and about ten options in a horizontal toolbar at the top of the page:

In particular, you can:

• Access settings, style sheets, and selectors.
• Check the responsive display of your page on different devices (desktop, tablet, and smartphone).
• View the structure of your page, i.e. the different sections that make it up.
• Add ready-made modules, which are included on the left column.

Ah, the “Add” button. Let’s talk about it. Though it lists about thirty essential elements (e.g. title, text, buttons, images, videos), they are all quite basic.

For example, unless I’m mistaken, there’s no element for creating a contact form.

You’ll have to fall back on your favorite form plugin.

Finally, there is a much smaller number of elements than in other page builders such as Elementor or Divi Builder, to name but a few.

In short, we’re not quite satisfied.

… And not really easy to use

For an optimal use of Oxygen Builder, you will need (a lot of) time, especially if you’re new to WordPress.

Personally, I use page builders from time to time and I may have some habits that have been created.

But for the time being, I was a bit lost when I got my hands on Oxygen Builder, which I found less easy to learn than Elementor or Divi Builder, for example.

My first steps with the visual editor were frustrating, especially because I had to get used to a new interface.

The fact that I opted for a black and white interface didn’t really help me to see things clearly.

I also think that some settings could have been highlighted better. For example, the buttons for adjusting the appearance of some modules (e.g. the “Heading” module for adding a title) are small and hidden at the top of the page.

So, you have to turn your head to the right, to the left, and to the top to find the setting you need. It’s a pity that everything hasn’t been centralized.

Slow and steady wins the race with Oxygen

Another important point to note: Oxygen is a site builder more oriented for technicians. It doesn’t cater to amateurs very well.

To build your custom layouts, Oxygen Builder uses three main elements, which will make sense to you if you understand a little HTML language:

1. Sections: These are general containers that will contain the content of your page.
2. Columns: To create columns.
3. Divs: These are containers that are used to group elements within a section or a column. You can then modify their formatting without affecting the other elements in your section or column.

When you first get to the builder interface, you’ll feel pretty alone for few moments. But once you understand how it works, you get used to it.

To be honest, after some frustration, it took a little bit of time to read the documentation and watch some video tutorials to start understanding how the tool works.

However, the global user help is very well done. You will find answers to a lot of questions on:

• The plugin documentation
• The Youtube channel of the plugin
• The official Facebook group
• Trello

Frustrations, but advantages all the same

In summary, it’s better to be patient with Oxygen and to accept that there will be a long learning curve to master it properly.

Besides that, not everything is frustrating; far from it. As soon as you start to understand the tool a little, you will gradually notice some of its advantages.

Personally, I find the “Structure” panel very useful and practical to use.

It’s a kind of skeleton of your page, which lists all the content and gives you a quick overview of its appearance.

You can, for example, duplicate, rename, or delete elements in one click.

Then, you can modify any element of your page by clicking on it. Of course, you’ll have more or fewer options depending on the element you’re customizing.

For example, for a text block, you can change its size, color, and font, but also apply more advanced effects (drop shadow, animation on mouse over, etc.).

Moreover, since the release of Oxygen 4.0 in May 2022, you can even rename your elements by clicking on them, directly from the control panel.

And to go faster, keyboard shortcuts (copy, paste, duplicate, delete, undo, etc.) save time without clicking buttons.

Finally, the live editing of your modules works perfectly: I noticed no lag time.

Oxygen Builder in use: overview of the major features

Layout and design customization

Very precise management of the appearance of your elements

In terms of layout, Oxygen stands out from its competitors on two levels:

1. First, you don’t need to create columns to align your elements horizontally within your container (a section, for example).
2. Second, you can change the spacing between elements in your container manually, by stretching them, without having to enter margin and padding values. That’s very nice.

Moreover, it is of course possible to fine-tune the visual appearance of your containers by playing with the background, the typography, and the borders, and by applying effects (e.g. scroll animation, drop shadow, etc.).

Beyond that, managing CSS classes is a breeze (a class allows you to apply a style to an HTML tag).

With Oxygen, there is no need to edit each element one by one, even if they have the same class.

The page builder knows how to recognize them and all the changes made (e.g. modification of the color of an icon, of a typography etc.) will be reflected on each element. This definitely saves time.

Convenient “global” options

In the same vein, five other features are very useful and allow you to apply general settings to save time.

• “Global colors”: The “Global colors” feature allows you to specify a color, then apply it to the elements of your choice throughout your site (e.g. blue for all your titles, red for all your buttons).
• “Global fonts“: Works on the same principle as the “Global colors,” but with the fonts this time. Note that Oxygen gives you access to all Google Fonts.
• “Page width“: To make sure your content is displayed in full width, you can specify its size in pixels through the Settings > Page Settings > Page Width menu (for each page). For a global change throughout the site, go to Settings > Global Styles > Width & Breakpoints. By default, the value is set to 1120 pixels.
• “Show/Hide Element“: Allows you to show or hide an element based on certain conditions (e.g. date, time, article title, etc.).

• “Header Builder”: With this element, you can create a custom header and display it on all pages of your site. You can also design the header of your choice for a specific page and make it sticky (fixed to the scroll) in one click. Finally, you can also make it transparent so that it fits perfectly on your background image.

The library of ready-to-use templates

One of the advantages of a page builder, in addition to the fact that it doesn’t require any knowledge of code to use, is that it can save you time when designing your site.

To allow you to deal with the most pressing needs, all page builders on the market offer site or page templates in a whole range of niches (e-commerce, blog, freelancing, catering, sports, health, fashion, etc.).

Very popular with beginners, these templates allow you, in a couple of clicks, to have a ready-to-use site without having to start from a blank sheet.

And of course, you can still modify them as you wish, later on.

For comparison, Elementor and Divi Builder offer several hundred, so there are plenty of choices.

Oxygen is much more sparse in this respect. You will find “only” eighteen of them in the “Oxygen builder library.”

The models cover a wide range of sectors, which can be adapted to a number of activities: marketing, wine, finance, dentist, bed and breakfast, etc.

In terms of design, the templates are characterized by their colorful, clean, and minimalist aspect. The emphasis is on visuals.

Look what it gives with the Winery demo, for example. To be consumed with moderation: I’m relying on you. 😉

The sites are beautiful and give an impression of elegance; no comments on that.

It’s a pity the choice is quite limited.

Oxygen Builder templates

Without going into too much detail, because the subject becomes technical, know that Oxygen allows you to create your own templates.

You can apply these custom templates to different parts of your site (e.g. on your articles or pages), or on your entire site.

For example, you can create a template with a specific header dedicated only to your blog posts, or a template to customize the appearance of your 404 pages.

To create them, everything happens from your WordPress administration, through the Oxygen > Templates menu.

Then, to apply the template of your choice, simply go to the desired page and select one of the templates you have designed.

Integration with WooCommerce

Do you have a WooCommerce store, or do you perhaps want to get started soon?

If you answered “yes,” read the following carefully, because Oxygen Builder will become a great ally.

The site builder has a very advanced WooCommerce integration. It will allow you to do whatever you want with your online store, customizing it in every corner.

The WooCommerce integration is only available with the Ultimate and Oxygen + Breakdance packages, which automatically activate the Oxygen Elements for the WooCommerce plugin.

For this, Oxygen offers more than 20 modules to customize the default pages of WooCommerce (My Account, Payment, Shopping Cart), and your store products.

At the product level, for example, you can add the following custom elements:

• Images
• Prices
• Buttons
• Ratings (stars)
• Associated products
• Etc.

And of course, you can set colors, typography, background, borders, buttons, links, etc., whether it’s on a specific page, or on your entire WooCommerce store at once.

The Gutenberg Builder

Now, let’s take a look at the WordPress content editor: Gutenberg.

In its Ultimate and Oxygen + Breakdance versions, Oxygen Builder provides you with a plugin called “Oxygen Gutenberg Integration.”

Thanks to this plugin, you can do two very interesting things.

The first one? Make a page created with Oxygen editable on Gutenberg.
To do so, you just have to check the box “Make this full page editable in Gutenberg,” as shown in the picture below:

The second one allows you to transform specific content areas (e.g. a section) into Gutenberg blocks.

You will then find the block in question in your Gutenberg Library, under the names “Oxygen Blocks” and “Oxygen Full Page Blocks.”

You can then modify the text as you wish.

In my opinion, Oxygen’s Gutenberg plugin is really useful if you want to let a client control the content of your website.

The client will be able to make a few changes on his own, without having to call on you and… without going to the Oxygen creation interface, which requires a much longer learning curve than Gutenberg.

Moreover, if you or your client is used to writing posts, you can imagine creating Gutenberg blocks with a specific design with Oxygen (e.g. calls to action). You can then add these blocks in one click to your content.

WPMarmite does this with Elementor. See, for example, the results of adding this insert to promote our newsletter:

How does it work with themes and plugins?

Compatibility with themes

On this side, you have nothing to worry about.

Remember the beginning of the article: Oxygen Builder does not need a theme to work.

As stated on the plugin’s FAQ, “Oxygen completely disables the WordPress theme system. This means that while your theme won’t conflict with Oxygen, its styles and layout also won’t be applied to your site while Oxygen is active.“

Finally, a word about “classic” page builders. At first glance, there is no point in using them if you decide to make Oxygen Builder your number one working tool.

Except perhaps in a very specific case, explained by the creators of the plugin: when you have already designed a site with a page builder, but you still want to switch to Oxygen to replace your theme and have more control over your header, footer, and templates.

But be careful if you are interested in this option. First of all, many page builders can also allow you to modify your entire site( including header and footer). This is the case for Divi Builder, Elementor, and Beaver Builder.

Then, activating a page builder will inevitably slightly affect the performance of your site, which is not great for the user experience and SEO (Search Engine Optimization).

Compatibility with plugins

If you are planning to test or adopt Oxygen, you may also be wondering about its compatibility with plugins.

Rest assured, Oxygen is compatible with the majority of plugins in the WordPress ecosystem.

However, there are some exceptions. Developers admit that integration with multilingual solutions is not always optimal.

According to them, “integration with WPML, Polylang, and Weglot is rudimentary.” So take care if you use this kind of plugin.

For example, you can test their compatibility by using a demo site.

In general, the risk of incompatibility with other plugins may exist due to the way Oxygen Builder works.

Since it disables the WordPress theme system, plugins that use this will not work in some cases.

For example, while browsing on some forums, I found feedback from users who noted incompatibilities with wpDiscuz or Login Designer.

Performance, SEO, responsiveness: a closer look at three major aspects

Influence of Oxygen Builder on site performance

Oxygen Builder has the reputation of being a plugin designed and optimized for performance.

Clean and well coded — pages incorporate basic HTML elements such as section, div, hn, p, a, img, etc. tags — it claims to load only the scripts and styles “required by your design.”

All the while boasting that it loads at lightning speed and claiming to be “50x lighter than Divi, 25x lighter than Elementor, and 10x lighter than Beaver Builder.”

And to finish off the self-satisfaction, the Oxygen developers claim to have achieved a load time of 349 milliseconds when testing a page with no cache or optimization plugins.

I don’t know about you, but I thought it was worth checking out.

To sort out the real from the fake, I gave it a little test.

Here is how I did it:

• Test service used: Pingdom Tools (using London as location)
• Test of a page with the Oxygen “Freelance” demo activated.

The above results give a first impression, but cannot be considered as a final judgment. You might get different results at home, depending on your hosting, or the plugins you use.

Beyond the respectable loading time (1.28 s), what is most striking is the ultra-light weight of the page (barely 4 KB), and especially the almost non-existent number of requests made.

This means that Oxygen is not overloaded with useless scripts. It contains the minimum necessary to function, which does not slow down the loading time.

If you want to optimize a WordPress site without breaking the bank, I recommend you read this article on the WPMarmite blog.

SEO optimization

On the SEO (Search Engine Optimization) side, Oxygen is also a good student.

To ensure that the search engine robots that will crawl your site understand your HTML structure, you can choose the tag of your choice in most modules, both in terms of hn tags that optimize the referencing of the page, as well as in terms of div, header, footer, span or p tags, which allow you to structure the content well.

Moreover, Oxygen Builder claims to “work with any SEO plugin,” citing Yoast, SEOPress, and Rank Math.

I tested it with Yoast, the plugin used on WPMarmite, and I can confirm that everything works like a charm.

To learn more about optimizing your site for SEO, check out our guide.

Responsiveness

With Oxygen, will your site display correctly, whatever the medium used by your visitors?

Answer: yes, and you can do your part.

First of all, you can preview the rendering in real time, based on the device and the screen size (measured in pixels).

Moreover, you can also choose to display or hide this or that element depending on the device used by your visitors.

To do this, simply choose the medium of your choice (for example, less than 480 px), select the element of your choice (e.g., a photo), then check “None” in the “Layout” menu of the “Advanced” tab.

To make sure that your site is responsive, from Google’s point of view, you can use its in-house tool, the mobile optimization test.

What is the value for the money?

Oxygen does not have a free version and offers three paid packages:

1. Basic ($129)
2. Ultimate ($149)
3. Oxygen + Breakdance ($149)

The Basic package is the most affordable, but also the most limited since you don’t benefit from WooCommerce and Gutenberg integration, for example.

If you are not limited by $20, it is better to go directly to the Ultimate license, which contains all the options offered by Oxygen Builder.

Note that you can also get, for the same price ($149), another page builder offered by the creators of Oxygen (the company Soflyy). It’s called Breakdance, and is primarily intended for beginners.

Is Oxygen Builder a cheap tool?

Let’s kill the suspense right away: Oxygen is extremely cost-effective.

At the time of writing this article, one of its big advantages is the lifetime payment. You only pay once and don’t have to renew every year (but beware, this could change over time).

Moreover, whatever the chosen offer, you can use the plugin on an unlimited number of sites and benefit from support and updates for life.

And for those who are hesitant to take the plunge, Oxygen Builder offers a 60-day money-back guarantee.

Compared to its main competitors on the market, there is (really) no comparison:

• Elementor Pro (affiliate link) does not offer an unlimited lifetime version. Its most extensive offering, called Agency, allows the page builder to be used on up to 1,000 sites, and costs $999/year.
• Divi (affiliate link) offers a Lifetime License for $249.
• Beaver Builder (affiliate link) does not offer a lifetime purchase. Its most affordable plan (Standard), usable on an unlimited number of sites, costs $99/year.
• Spectra (affiliate link) is a page builder that integrates into the WordPress block editor. It adds powerful new blocks, access to block patterns, wireframes, readymade templates and some excellent productivity features such as block presets and copy paste styles.

Our final opinion on Oxygen Builder

Well, before we conclude, it’s time to consider Oxygen’s pros and cons.

Strengths

• With this plugin, you have control over your entire site, including the header and footer.
• Performance and loading time. From this perspective of permanent optimization, Oxygen 4.0 has for example decided to use the JSON format (rather than PHP shortcodes) to store the data of your pages. You can even change their appearance without reloading the builder, directly from the WordPress admin (provided you know how to code a little, though):

• A clean and light code.
• The option to create your own templates.
• The page builder for WooCommerce.
• The Gutenberg block builder.
• The ability to create a custom interface for your customers, for example with limited access to certain options or users, depending on the role you assign them.
• The page builder’s very low price.

Areas for improvement

• Getting started is not easy and will require a lot of time, especially if you are a beginner.
• A number of modules that leaves us hungry. However, this is also a bias of the developers not to overload their plugin.
• Compatibility with some plugins is not always assured.

Who is Oxygen Builder for?

Oxygen Builder is a complete plugin that is primarily intended for developers, or at least people with good knowledge of code (CSS, HTML, and JavaScript in particular).

As stated in the FAQ on the page presenting the different licenses of the page builder, “Oxygen is an advanced page builder. If you want to create a site with HTML and CSS within a visual interface, you will love Oxygen.”

To get the full power, you’ll need to get your hands dirty. And in this case, you won’t be disappointed.

On the other hand, if you are a beginner or don’t want to code at all, I advise you to turn to less technical page builders, easier to use and quicker to learn. I’ve mentioned some of them throughout this article.

The same goes if you’re creating sites for clients and intend to let them control the design later on.

If you put Oxygen in their hands, they may pull out some hair if they don’t know anything about it. Think carefully about this if you find yourself in this situation.

If you feel up to testing the beast (remember, there’s a 60-day money-back guarantee), head over to the official website to get it.

So, do you plan to use it to create your next website? Or maybe you already use it?

Whatever the case, share your opinion and/or feedback in the comments below.