Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
Blocksy Theme
Brand Building
Bricks Builder
Digital Marketing
Email Marketing
Fluent CRM
Fluent Forms
Fluent SMTP
Google Fonts
Hydrogen Pack
Kadence Theme
Meta Box
Online Business
Oxygen Builder
Piotnet Forms
Piotnet Grid
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
Work From Home
WP Social Ninja
Zion Builder

Ultimate Guide to the Oxygen Builder Best Practices

Written by:
Mohammed Wasim Akram
First Published on:
December 3, 2020
Last Updated on:
June 20, 2021
Post Categories:
✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.

Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.

However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.

Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.

Feel free to explore our Legal Policy Pages.

If you're a beginner Oxygen Builder user and struggling to use it due to not having a proper process in place yet, then in this post I am going to share with you all my best practices to consider while using Oxygen to build websites easier and faster.

When I started using Oxygen Builder it was so overwhelming for me especially due to the reason that I had come from the Elementor arena which seems so easy to use being a non-coder point of view at that time.

But I made my mind that I would keep trying and learning Oxygen because I knew it will push my limits to become more comfortable with coding, and gradually I get to understand more and more about Oxygen.

So down the road, I have learned so many things about Oxygen Builder from the most helpful Oxygen Community, and still learning every single day as I believe there are much more to learn as compared to whatever I know today.

Hence I wanted to share my learnings with you through this post regarding the best practices while working with Oxygen so that you don't have to learn things hard way as I did.

Keep All the Oxygen Related Essential Resources Handy

If you have just started to work with Oxygen then the very first thing you should consider doing is to bookmark all the essential resources as they are going to help you every single time while building websites with Oxygen.

A resource can be anything in this context starting from the tutorials, tips and tricks, code snippets, design sets, forums etcetera.

However, I have put together a very important resource post that contains all the Oxygen Learning Hubs, you could consider bookmarking it for future reference.

Create A System & Process to Work with Oxygen Builder

Don't just jump on working with Oxygen instead you should create a process to make the workflow smoother. There are so many things you could incorporate into this part such as creating a design system, CSS Class structure, and Utility Class System etcetera.

You should start with a design system as it is the most important part of this process. You can find a very nice video tutorial about this topic by Elijah Mills from the Oxygen Team.

Use A Lightweight Blank Theme as Oxygen Doesn't Need It

If you are new to Oxygen space then let me inform you that Oxygen Builder doesn't let you use the WordPress theme as it completely disables it once you activate Oxygen.

Hence whatever theme you use with Oxygen it doesn't matter, thus I prefer to use a lightweight blank theme just because WordPress requires it and in this way, you will also save some server space.

Hide Oxygen Editor for the Necessary Post & User Types

Oxygen gives you the option to hide the editor for the selected post types and users OR/AND user types where it's not necessary to use it.

For example, when you already created a template for certain post types for example blog posts then it is better to hide the Oxygen editor for that post type to prevent any accidental edits which can cause the broken layout.

If you want to give limited access to certain user types or specific users then consider giving them limited access so that they can't mess with the design you have created, for more details check this post about Oxygen Client Control.

Use the Oxygen Builder Compatible WordPress Plugins

Oxygen Builder is a little different from all the other WordPress Website Builders, as you already know that it completely disables the theme features, for that reason sometimes a few plugins that require a theme to work don't work with Oxygen.

Therefore it is a safe practice to find and use the plugins that are compatible with the Oxygen Builder in the first place, hence keeping that in mind I have put together a list where you could find the Oxygen Compatible Plugins suggested by the community.

Use the Oxygen Builder Add-Ons to Make Your Life Easier

Oxygen Builder is a powerful tool to build great websites but still, it is not perfect and there are many things that lack in this tool, so to fill those gaps many talented developers jumped in and created addon plugins to complement the Oxygen Builder in many ways like by enhancing its workflow, providing exclusive elements etcetera.

If you want to see all the Oxygen Builder Add-Ons in a single place then consider checking our list of all the addons I put together to make things a little easier.

Also, check the reviews of our favorite Oxygen Add-Ons:
Hydrogen Pack Review:
Swiss Knife Review:

Customize Oxygen Related Settings Before Start Working

Whether you use Oxygen, the add-ons, or any other plugins, you should always customize the basic settings as in the Oxygen Builder you need to add the license, set up the color palettes and typography etcetera.

Hence as soon as you install and activate Oxygen Builder, the addons, and other plugins, consider customizing all the necessary settings of all those tools before playing with them.

Keep Element IDs as Active Selectors to Prevent Disasters

Oxygen Builder allows you to style your website using selectors like ID OR/AND Classes.

When editing an element with class selectors then you can edit multiple elements of the entire website at once if the same class is assigned to those elements which is a great feature, but sometimes it can be a disaster if you accidentally edit something and it destroys the entire website.

Therefore I always prefer to change the selector from Class to ID after editing an element and keep it as the active selector to prevent any accidental disaster because editing IDs won't change anything on the website like Classes.

Rename All the Elements from Oxygen Structure Panel

Oxygen offers a great structure panel where you can see each and every element you use while designing the page, creating complex designs can make it really messy to find and edit a particular element from a particular section of the design.

Hence I always prefer to rename almost all the elements of the structure panel at my convenience so that I can easily find anything quickly when I need to make some changes on any particular element.

Design One Page then Check Everything Before Cloning

It is a normal practice to design a page then clone it to use the same design and create other pages on the same website, you can do the same thing with Oxygen but I would highly recommend first design a single page and then check everything carefully on that page such as the padding, merging, text sizes, names of the structure panel elements and then clone the design for other pages to keep things consistent across the site.

Re-Sign All Short Codes & Regenerate Oxygen CSS Cache

If something goes wrong (especially after website migration) and all of sudden a few parts of the designs from your Oxygen-made webpages are missing, then in most cases Re-Signing all the Short Codes & Regenerating CSS Cache could fix the styles related issues.

Following these two steps could fix most of the styles related issues but if it doesn't help then consider checking this troubleshooting guide by Oxygen as the reason for your problem might be different and in that case, this guide could help you out.

Discuss with the Oxygen Community If You Need Help

If you face any kind of issues while working with Oxygen and you're not able to find any solution then consider posting it to the Oxygen Facebook Group to seek help as the community is really helpful and most of the time someone from the group would help you find the solution.

I can assure you that Oxygen Group alone can help you learn much more than you could learn from anywhere else only if you participate in the group discussions, and you would love the community for their helpfulness and willingness to help.

Contact Support If the Community Couldn't Help You

As I already suggested you first ask the community if you face any problem while working with Oxygen Builder and in most cases, you're going to get the solution from the community which will eliminate the need to contact support.

However if that doesn't work then consider raising a support ticket and explain your problem to the Oxygen support team, and I'm damn sure that they will reply to your ticket with a proper solution in their first reply if you have explained everything properly with complete details.


I have written this full-fledged article about all my best practices while using Oxygen Builder with the hope to help the newbie members of the Oxygen Community.

If you find this post helpful which I strongly believe you do then consider sharing it with your friends and community to also help them figure out the best practices while working with Oxygen Builder.

Also If you think something is missing from this post then consider suggesting your best practices while working with Oxygen Builder in the comment box to help the newbies and make their lives a little easier, if I find it helpful then I would including it in this article as well.

Thank you for visiting our website

Become an Insider to Syncronize with Web-Success.

email Newsletter
Facebook Group
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
Join FB Group

Related Resource Posts

January 19, 2019
Google AMP for WordPress [Definitive Guide]

Know everything about the Google AMP project, its benefits and how it can help you increase your WordPress mobile website loading speed up to 80%.

Read More

Leave Your Feedback

Notify of
Inline Feedbacks
View all comments

Blog Categories

Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram