In this article we’re going to discuss two must have add-ons for Oxygen Builder. The Oxygen Builder for WordPress is an incredibly powerful tool that allows you to create pretty much anything technically possible, but it is lacking a few core features that would seriously speed up your design workflow and save you from a bunch of headaches.
Because of that, when you purchase the Oxygen Builder, there are a collection of must have plugins that you should buy alongside it. Unfortunately, we learned this the hard way, and after adopting the page builder as our main tool, we discovered these plugins over the course of several months. Of course, we wish that we had found them sooner, as a lot of time and money could’ve been saved.
I’ve jokingly stated on the Facebook group that the development team behind Oxygen Builder should offer these two plugins as a bundle when checking out, it would really make many peoples lives much easier. Hopefully, you land on this article as you’re doing your preliminary research before buying the tool, and pick up these plugins as well.
The first plugin on our list is an absolute must have Oxygen Builder add on that focuses on making the builder better and easier to use. This plugin is called Hydrogen Pack for oxygen, and it comes with a ton of features that are aimed towards professional developers and agencies. The sole goal of this plugin is to make the tool easier to use, saving you time and money.
The main selling point of Hydrogen Pack is the right click menu that allows you to easily copy and paste styles, elements, and more throughout the page. Copying styles will save you a ton of time in the long run as you won’t need to go into the advanced settings every time you want to make a single change. For example, if you’re setting up a column that has the same styling throughout, simply copy and paste from the first column into the following ones.
The right click menu also makes it easy to wrap elements in a div, set conditions, make reusable, and duplicate/delete.
For us, hydration pack also has two other major selling points that makes it a must have add on for the Oxygen Builder: first are the keyboard shortcuts, and second is the sandbox mode.
You can create keyboard shortcuts for virtually anything, from saving your work to inserting a section. These are completely customizable, and make it so you can quickly build pages without the need to click through many menus. This is a huge timesaver, especially once you commit these keyboard shortcuts to muscle memory.
The sandbox mode allows you to work on various changes in oxygen, present them to your client with a secure link, and only publish them upon approval. This is essentially a staging environment for your website, directly on it. It works really well, and is created for agencies in mind. Definitely a timesaver, and it also means that you won’t have to go ahead and set up a staging branch.
Hydrogen also fixes several infuriating bugs/drawbacks of the Oxygen Builder like the difficult to use structure panel, global CSS stylesheet regeneration, and more. Basically, purchasing this plugin means that you’ll save a lot of time, money, and headaches. Even better it’s a $59 lifetime deal for unlimited installations. The whole pricing structure is lifetime, keeping with the oxygen style.
Finally, this plugin is created by a developer on the oxygen team in his spare time, meaning that it will always be compatible, and works seamlessly with the Oxygen Builder.
To save time when it comes to developing, we recommend purchasing a framework for oxygen. There are several on the market, but the one that our agency uses his oxygen cord. We’ve also been creating our own framework specific to our agency, and recommend that you do the same. The framework is a collection of CSS styles and rules that you can easily apply by using the global styles feature of Oxygen.
For example, if you want to set a standard padding or margin, OxyCore has that. Instead of going into the advanced settings and adding the pixel values, simply add the spacer class from the oxygen core framework. This allows you to create sites faster, with a very consistent look.
We use and really like the OxyCore framework because of the developer behind it, continuous addition of classes and sections, as well as a design library of premade elements that can be used to easily put together the structure for any website.
First, the core framework has a bunch of CSS grid columns, cards, typography settings, sizing and spacing classes, colors, and more. All you need to do is easily import them into your oxygen website, which is done automatically through the Oxy core plugin, and ready to be used on your website. The reason that you want the framework is because you have global and consistent settings that are easy to remember for your developers. By having this framework, your sites will look the same, and if you have multiple developers on a single project, they won’t be confused.
Furthermore, it just makes the development much easier and quicker. If all you need to do is add CSS classes that you have memorized, instead of attempting to remember all of your global settings, and then apply the manually in the advanced settings section, you can create much quicker.
We really love OxyCore, but there are also several other frameworks out there that are typically built off of existing CSS frameworks like Tailwind. Here’s a quick list of the frameworks that we have identified, grabbed from our Add-ons for Oxygen Article.
In our opinion, these two plugins or plugins like them are absolutely mandatory for a successful project built with the Oxygen Builder. Of course, you can use the page builder by itself, by adding these two tools on top of it, you can save yourself a ton of time, money, and headaches. Oxygen is a great option for pretty much anybody out there looking to develop advanced WordPress websites quickly. However, it comes with its drawbacks which are adequately remedied by hydrogen pack, which addresses all issues and adds additional , Time saving features, and framework which adds templates and global styles for consistency.
If you have any other plugins that are a must have for the Oxygen Builder, feel free to comment them down in the comments section below!
Advanced Scripts is a code editor, manager, snippet solution and more. Super easy to use, powerful, well designed, and great for debugging. Integrates with Oxygen features.
Here's a review:
Cheers James this is very useful for a newbie like me
Super glad to be helpful. Let me know if you have any tutorial requests for Oxygen Builder!
Hello James, thanks for the useful tips! Question: reading the article I get that the OxyCore plugin is mostly useful for developers and agencies... do you think it would be necessary/valuable for a beginner freelancer making her own site? Thanks!
I'm biased here because I've adopted it into my workflow. In terms of 1 single site, maybe not worth it.
For any build, Hydrogen is a must have, and for anybody doing several sites I'd definitely req Oxycore. But not sure what the value prop is with one site. Perhaps somebody else can chime in!