30/01/2020

Oxygen Builder Presentation (January 2020)

I have been actively using Oxygen Builder for almost 2 years in various customer projects. Even these pages you're reading right now are built with oxygen builder. Oxygen is therefore a page builder add-on to WordPress, which is clearly developed for slightly more trained website builders. Oxygen's strength lies in allowing you to edit the PAGE's PHP, Javascript, and CSS directly from the builder. This may not sound so great right away, but read on and I'll try to open this story for you, too.

Note! Oxygen Builder or anyone else hasn't paid us to write this blog article. There are also no affiliate links in the article.

History in brief

Softlyy company released the first version in 2016. The idea was to publish a page builder that gives the user as much power as possible and the power to edit their pages directly through WordPress. The project has progressed at quite a pace and new updates are seen fairly evenly in quarterly terms. At the time of writing, we are in version 3.1.1 and among the latest features are Gutenberg integration, WooCommerce integration and repeater fields.

Themes directly in the Recycle Bin

Oxygen Builder's specialty is also its approach to themes. Because it completely disables themes. Oxygen is not a theme in itself either. So with this page builder, you build the look of your entire site from the beginning yourself.

Create a page with Oxygen Builder

I'm creating a new page to illustrate to you how Oxygen works in practice. We are currently building a new subpage Tuonetti SSL certificates that go on sale on the home page of ,1, so it's a good idea to use it as an example.

Normal workflow we have first includes building a page header and footer template and then building the content of the page itself. At Oxygen, you can build templates, which are then always reflected in the contents of the pages. On top of these templates, it is then easy to build the content of the site itself. We have already built a template called "Header & Footer" on our website.

Once the header is built, a "Inner Content" block is added below, rendering the content of the site itself. This allows us to display Header on each page at the same point and the content of the site, or "Inner Content," to appear correctly.

Oxygen Builder itself already comes with a wide range of "Block" elements to speed up the construction of pages tremendously. You will be able to record your various works in the so-being of the so-being. "Reusable blocks" section. This allows you to build elements that are often repeated to you and further speed up the construction process. For example, the first section of pages repeats several times because it contains an icon, a title, and a short introductory text.

Building is easy in its simplicity, but quickly becomes more difficult when you want great effects on the page. HTML, Javascript, and PHP know-how are therefore useful when using this builder.

10 Reasons Why I Like Oxygen Builder

  1. The code on the site remains clean, and no extra code is always loaded. For example, Divi and Elementor load a huge amount of completely pointless code as standard, which slows down the loading of the site. With Oxygen, the code on the site always stays clean and the pages always load quickly, even without cache or other optimization add-ons.
  2. Customizability is significantly better than that of competitors. Global colors and class attributes that you add make it easier to edit the colors and styles of your site at the same time. Even if you see at the end of the development that the font and colors are incorrect, you can all change all of these with one change.
  3. Easy to add PHP, Javascript, and HTML. Oxygen itself has an element called "Code Block" that allows the user to add self-encoded code directly inside the builder.
  4. Flexbox CSS integration. Oxygen natively supports Flexbox, which makes building responsive pages even easier and better. Check out Flexbox here.
  5. Custom Post Types and ACF compatibility. You can build your own template for each CPT and import ACF data natively with builder. This makes it easier to build dynamic pages.
  6. Speaking of dynamic pages, Oxygen's repeater fields are the only block of its kind designed to build repeating elements. With this feature, you can build really great and dynamic listings of, say, houses for rent or cars for sale.
  7. Pages never look the same. More and more Finnish (or foreign) online stores always seem to have been built with the same themes, elementor and woocommerce. There's nothing unique about them anymore. With Oxygen, this problem will not come, because everything can be edited.
  8. WooCommerce and Gutenberg integrations. Read more about these below.
  9. A great community to support. However, like Elementor's Facebook group, oxygen's FB group has a slightly more technical and developing conversation. So the Facebook wall is not repeatedly filled with posts asking which theme is best with Elementor or which caching plugin elementor pages can load promptly.
  10. A large number of useful videos that help build working pages. Oxygen's team publishes a lot of money-worthy tips on their Youtube channel.

Blow 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 loads with other page builders, even if the pages are completely blank.

WooCommerce integration

One of Oxygen's newest and most desirable features is WooCommerce integration. With this feature, Oxygen made a big leap forward as it allows you to create truly unique WooCommerce pages. Global variables such as colors make it easier than ever to create a new e-commerce page. With different blockes, you can build product pages and category pages into exactly what you want. So WooCommerce pages don't always look like the others.

Gutenberg integration

WooCommerce integration is certainly a feature that other page builders also have, but few have this feature. Gutenberg integration brings oxygen builder-built blockes directly to WordPress's Gutenberg editor. So you can build a site where the entire Oxygen is hidden from the end user and your customer can edit the content of the site directly from Gutenberg. Thanks to this feature, I've been able to offer my own customers pages that they themselves can edit without having to see any hard-to-use UI. All they need is a short training on how to use Gutenberg. The Oxygen team has made a good videothat introduces this feature in practice.

Oxygen vs Elementor

Now to the comparison that you are all most interested in in this whole article. How oxygen stacks up against that other page builder giant. However, Elementor is quite better known in Finland (and in fact in other parts of the world) than Oxygen.

Pros

OXYGEN BUILDERELEMENTOR
+ Wide customizability+ Easy operation
+ Embed your own code+ Lots of add-ons
+ Cleaner code and faster pages+ A 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
- Longer learning curve- Heavy bottom that slows down pages
- Requires more expertise (JS, HTML, PHP)- Customizability weak, custom code usage not so easy.
- Limited familiarity and less external support- The number of bloats is increasing
- Not as many compatible add-ons.- No repeater fields, and no broad support for dynamic content.

That one big minus over the others

Update! The Undo & Redo feature can now be found on Oxygen in addition to several other improvements.

Oxygen Builder is clearly younger than other page builders. You can tell by the so-bet. lack of basic features. Oxygen's biggest minus 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 do not yet exist. That is, when you make a serious mistake, you will have to download the previous version of revision history. However, sometimes this doesn't save you and can cause frustration when you have to re-make some steps. So I recommend slamping the "Save" button quite actively.

License and price

Oxygen Builder vs other page builders use a slightly different pricing method. When you buy Oxygen Builder, you'll get all the updates for the future. So you're never going to pay for any annual license. There is also no limit on how many pages you can activate. Oxygen prices start at $99.

Summary

Let me be frank: I clearly prefer Oxygen Builder. That's why I'm going to stay and tell you which one's really better. I believe, however, that both have their own place. Elementor is still a giant and popular with many rightly. Oxygen on the other is much more popular with professionals. So I still recommend Elementor to those who are in the early stages of wordpress development and want to get ahead quickly. I recommend Oxygen to someone who has been coding pages for years and familiarized them with many different systems before.

More material

If that wasn't enough to improve your understanding of Oxygen Builder then 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, but I have already built close to 100 sites with Oxygen. I might know something else.

The article was written by Tuomas Lindroos
Entrepreneur in the company Tuonetti - Turbo nerd web developer who specializes in creating websites and developing web servers.