30.1.2020

Presentation of Oxygen Builder (January 2020)

I've been actively using Oxygen Builder for almost 2 years on various client projects. Even the pages you are currently reading have been built using Oxygen Builder. So Oxygen is a page builder add-on for WordPress, clearly designed for the more experienced website builder. The strength of Oxygen is that it allows you to edit PHP, JavaScript and CSS directly from the builder. This may not sound like much at first, but read on and I'll try to open up this story for you too.

Note! Neither Oxygen Builder nor anyone else has paid us to write this blog article. There are also no affiliate links in the article.

History in brief

The Softlyy company released the first version in 2016. The idea was to release a page builder that gives the user as much power and control as possible to edit their pages directly through WordPress. The project has progressed quite a bit from here and new updates are being seen quite steadily on a quarterly basis. At the time of writing we are at version 3.1.1 and among the latest features are Gutenberg integration, WooCommerce integration and repeater fields.

Themes straight to the trash

Oxygen Builder is also special in its approach to themes. Namely, it disables themes completely. Oxygen is also not a theme in itself. So with this page builder, you build your entire site from scratch.

theme disabled

Creating a page with Oxygen Builder

I'm creating a new page to show you how Oxygen works in practice. We are currently building a new sub-page on the Tuonetti website for SSL certificates that will be available for sale, so it is a good example to use.

Our normal workflow involves first building the page header and footer templating, and then building the content of the page itself. So in Oxygen you can build templates, which are then always displayed in the content of pages. It is then easy to build the content of the site itself on top of these templates. We have already built a template called "Header & Footer" for our pages.

Once the header is built, an "Inner Content" block is added below it, which renders the content of the site itself. This allows us to set the header to appear in the same place on every page and the "Inner Content" to appear correctly.

oxygen builder open

Oxygen Builder itself already comes with a large selection of different "Block" elements that make building pages much faster. You can save your various works of art in the so-called. "Reusable blocks" section. This allows you to build yourself a set of repeated elements and further speed up your build. For example, the first section of our pages is often repeated, as it contains an icon, a title and a short introductory text.

So the construction is easy in its simplicity, but quickly becomes more difficult when you want to add fancy effects to the page. Knowledge of HTML, Javascript and PHP is therefore useful when using this builder.

oxygen builder editorial

10 reasons why I like Oxygen Builder

  1. The site code stays clean, and no extra code is always downloaded. For example, Divi and Elementor load a huge amount of completely unnecessary code as standard, which slows down the loading of the site. With Oxygen, your site code always stays clean and pages always load quickly, even without caching or other optimization add-ons.
  2. Customizability is significantly better than competitors. Global colours and added class attributes make it easy to edit the colours and styles of your site in parallel. Even if you notice at the end of development that the font and colours are wrong, you can change them all with a single change.
  3. Easy to add PHP, Javascript and HTML. Oxygen itself has an element called "Code Block", which allows the user to add code that they have coded themselves directly within the builder.
  4. Flexbox CSS integration. Oxygen natively supports Flexbox, which makes building responsive pages even easier and better. Learn more about Flexbox here.
  5. Custom Post Types and ACF compatibility. You can build a separate template for each CPT and import ACF data natively using the builder. This makes it easier to build dynamic pages.
  6. Speaking of dynamic pages, Oxygen's repeater fields is the only block of its kind for building repeating elements. With this feature you can build really cool and dynamic listings of, for example, houses for rent or cars for sale.
  7. Pages never look the same. More and more Finnish (or foreign) online shops always seem to be built around the same themes, elementor and woocommerce. There is nothing unique about them anymore. With Oxygen, this problem doesn't arise because you can edit everything.
  8. WooCommerce and Gutenberg integrations. Read more about these below.
  9. A great community to support. Although like the Elementor Facebook group, the discussion in the Oxygen FB group is a bit more technical and sophisticated. So your Facebook wall won't be repeatedly filled with posts asking which theme works best with Elementor or which caching plugin makes Elementor pages load quickly.
  10. A large number of useful videos to help you build functional pages. The Oxygen team publishes lots of money-saving tips on their YouTube channel.

Clean code = Fast pages

Below are a few examples of pages built with Oxygen. Here you will also find good documentation on how much unnecessary code is loaded by other page builders, even if the pages are completely empty.

fpc gym
snapshot
tuonetti

WooCommerce integration

One of the newest and most desirable features of Oxygen is the WooCommerce integration. With this feature, Oxygen took a big leap forward by enabling the creation of truly unique WooCommerce pages. Thanks to global variables like colours, creating a new e-commerce page is easier than ever. Using different blocks, you can build product pages and category pages exactly the way you want them. So WooCommerce pages don't always look the same as others.

Gutenberg integration

WooCommerce integration is of course a feature that other web designers have, but it is a feature that few have. The Gutenberg integration brings blocks built with Oxygen Builder directly into the WordPress Gutenberg editor. So you can build a site where all of Oxygen is hidden from the end user and your customer can edit the content directly from Gutenberg. Thanks to this feature I have been able to provide my own customers with pages that they can edit themselves without having to see any difficult to use UI. They only need a short training on how to use Gutenberg. The Oxygen team has made a good video showing this feature in practice.

Oxygen vs Elementor

But now for the comparison that you will all be most interested in in this whole article. How will Oxygen fare against that other page builder giant. However, Elementor is quite a bit better known in Finland (and in fact the rest of the world) than Oxygen.

Pros

OXYGEN BUILDERELEMENTOR
+ Wide customisability+ Easy to use
+ Embed your own code+ Lots of extras
+ Cleaner code and faster pages+ Huge amount of documentation
+ Flexbox and horizontal elements without columns+ Faster to build pages from start to finish
+ Better use of dynamic data+ JS Parallax

Cons

OXYGEN BUILDERELEMENTOR
- A longer learning curve- Heavy base, which slows down the pages
- Requires more knowledge (JS, HTML, PHP)- Weak customizability, custom code not so easy to use.
- Limited visibility and less external support- The number of bloat is increasing
- Not as many compatible add-ons.- No repeater fields, and no extensive support for dynamic content.

That one big minus above all others

Update! The Undo & Redo feature is now available in Oxygen, among several other improvements.

Oxygen Builder is clearly younger than other page builders. You can see it in the so-called. lack of basic features. The biggest minus of Oxygen is the lack of "undo" & "redo" features. Of course, it is only a matter of time before these features are updated, but at the time of writing they are not yet available. So when you make a serious mistake you have to download the previous version from the revision history. Sometimes this doesn't save you and can cause frustration when you have to take some new steps. So I recommend that you hit the "Save" button quite actively.

Licence and price

Oxygen Builder vs other page builders uses a slightly different pricing methodology. When you buy Oxygen Builder you will get all future updates for it. So you will never pay any annual license. There is also no limit to how many pages you can activate the license for. Oxygen prices start at $99.

Summary

I'll say it straight out: I clearly prefer Oxygen Builder. That's why I'm not qualified to say which is really better. But I think that each has its place. Elementor is still a giant and a favourite of many, and rightly so. Oxygen, on the other hand, is much more popular with professionals. So I would still recommend Elementor for those who are in the early stages of WordPress development and want to get ahead quickly. I would recommend Oxygen to someone who has been coding pages raw for years and has been exposed to many different systems before.

More material

If this wasn't enough to improve your understanding of Oxygen Builder, don't worry, here's a list of really good resources. If you are interested in Oxygen Builder, please contact me and I will be happy to help, I have already built close to 100 sites with Oxygen. I might know a thing or two.

Written by Tuomas
Yrittäjä @ Tuonetti
Strong Finnish Internet Partner
finnish company
code from finland
finnish keyflag
fi broker
google cloud partner
© 2022 Tuonetti - All rights reserved.