Author: Blue Li

Author’s summary

Thanks to Sridhar Katakam & Vitalii Kiiko for bringing everyone together and making this idea alive. It was so fun to be part of it. And I gave my best. Oxygen Builder is an excellent site builder to build highly customised websites. The project took me around 6 hours to complete, and some extra hours on troubleshooting. I am still using oxygen 3.9 for client projects for sustainability reasons. This is my first time working with Oxygen 4.01 and It is fantastic.

The setback   

The site was set up in a WP Multisite environment. Oxygen should have worked properly. But for some unknown reason. The Oxygen CSS selector cache file does not work on this particular host. The styling I made does not reflect on both the frontend and backend. Despite that, I continue with Microthemer – an excellent CSS frontend visual editor.

Another fatal error I encountered blocked me from editing the oxygen template. In the end, the Oxygen support team helped me to resolve the problem. It was ‘.length’, this particular naming for a CSS selector that conflicts with the template JSON. Once it was removed, the error was gone. This reminded me whenever possible, always avoid using common names. 

Overall, working with Oxygen is a joy. For this project, I can code and implement custom elements directly from the editor without any plugins. I have complete control over almost every element. I would say It is one of the best tools to build a website with complex design. 

I jumped to Oxygen because of their no bloat idea. Years ago I had a very complex e-commerce project built with another builder. The slowness is especially noticeable when loading an ajax result via product filter due to the page’s massive DOM elements. Later I heard Oxygen is fast & no bloat. I decided to rebuild the site with it. 

Following are some explanations on how I use Oxygen on this project. Keep reading if you are interested.

No more excessive DOM size

Some page builders can come with lots of redundant elements. For example, adding a text link button with an icon is not just simply a text & image div wrapped by a link div. It could be wrapped by multiple level divs in order to give more style control to the users via the style panel. Like a div that controls font size wrapped by a div that controls text style wrapped by a div that controls background colour wrapped by a flex-box container, and so on. 

Avoid large numbers of DOM elements that also means reducing memory usage, and style calculations, in other words, the page can load faster. Oxygen HTML element is simple and gives users complete control but it requires understanding HTML and CSS. There is almost no limitation on how you use the div element. You can build elements like the pricing table with accurate design directly with the oxygen editor without writing any HTML code but if you prefer with code, you can also do it with the Code Block module. 

Making a Pricing Table without plugin

The challenge here is an interactive table toggle. The Code Block module makes the job done easily. I first found an example from Codepen, and copied the needed PHP & JS code into the Code Block, followed by some CSS tweaks. That’s it. I just completed a toggle in less than 15 mins by referencing someone’s work. *credit to https://codepen.io/shra-one/pen/qgvzGJ

The Testimonial Slider Section

Oxygen offers some useful pre-build composite elements like Dynamic Sliders. It is powered by Swiper JS. It is simply a Code Block with CSS selectors for targeting the slide. I can also add some more code to tweak the slider if I need to.

Dynamic content with oxygen

For this project, we were encouraged to make the testimonial dynamically. Using dynamic content is the best way to allow users to update content without learning how to use Oxygen Editor. I chose Advance Custom Field (ACF) for this project. Oxygen natively integrates with ACF so I don’t need to write any custom function to display those ACF repeater field data. Combining with Repeater module and a dynamic slider is completed. 

There are two ways to create a WP loop with Oxygen

The Repeater module is a visual loop builder. If you prefer doing it with code, you can use the Easy post module. I used it for the blog section for demonstration. Both Repeater and Easy Post Modules offer the same advanced query feature. You can use it for most of the common queries without knowing how to code correctly. Very handy.

Doing styling all in one place.

I barely use the Oxygen element styling panel. It can do most of the things but not everything. I am a huge fan of Microthemer. The way it handles CSS media queries is a huge plus not to mention its real-time editing capability. I usually write more than a thousand lines of CSS and create hundreds of selectors for each project. It is a nightmare to manage them without a tool.

I like to use BEM methodology combined with utility CSS. My utility CSS method is inspired by OxyNinja. I found it works well, easy to learn because it only offers the most commonly used selectors. For this project, I did not install OxyNinja. Just copied some to use. 

And I also like to use CSS variables. Reusable items always make everything effortless. Besides, the Oxygen styling panel also supports using variables. No reason not to use it.

Menu for Tablet and Mobile Devices

Oxygen has a Modal module. It can be triggered by an element. Doing a mobile menu is simply using this module with needed elements in place, and creating a trigger button. Done.

Easy to do optimization

Oxygen is already so light. It loads only what is necessary, not much optimization needs to be done. But if you want to do something other than speed performance. Oxygen allows the use of custom attributes & HTML tags. For this quick demo, I make the input field by using a custom HTML tag ‘input’. And if you are building a website that needs accessibility implementation, custom attributes & HTML tags are your good friend.

For this project, I tried to optimise the site as much as possible. The performance score for the Oxygen site was terrible compared to other candidates’ sites. The no-cache rule for this project is a killer. It makes a very noticeable FOUC (A flash of unstyled content). So I must find a way to eliminate it. In the end, a simple CSS trick to avoid the FOUC and improve the performance score, surprised me.

What I did is to hide the entire HTML canvas, and unhide it when everything is loaded. First, add a style to wp_head. It hides the whole HTML when loading the page. Then use a CSS stylesheet to unhide the whole HTML. So when the page is loaded, everything is ready before revealing the whole HTML, no more FOUC. Before this, I never knew FOUC is a factor that this analysis tool would count. Now I am happy with the result.

Note that: Oxygen Builder is a frontend builder. This code will also hide the Oxygen editor when editing. Scripts Organizer is able to allow this code to be excluded from loading in the page builder.   

Should you use Oxygen Builder?

I used to be a full-time graphic designer. Thought that doing a website is kind of similar to doing a print publication. Both are just combinations of images and text. Would it be cool if I could transition from print to digital? 

I did not have much CSS, HTML & JS knowledge. My first project with Oxygen was more like an experimental product. Second build on the same site. It made me feel better. But the third round to rebuild the same site really made me feel it is ready. Oxygen is too raw. Those are usually taken care of by a WordPress theme, I have to do it myself. It really takes time but in return. I have a chance to learn lots of fundamental skills along the journey, all thanks to the Oxygen community. 

I have been using Oxygen for more than 2 years. Before that I have used some other builders but I find web development workflow with Oxygen is more effective and this is the reason I prioritise using Oxygen for client projects. I think anyone who wants to build a better website should give it a try. Despite this, there is a deep learning curve. But If I as a designer can do it, probably you can do it better. 

Anyway, this wp builders fight is a very interesting experience for me. I hope this project gives you some insights. Cheers.

Themes/plugins used on the project

• Oxygen 4.7
• ACF PRO 6.2.1.1
• Microthemer 7.2.4.4
• Scripts Orginizer 3.5.7

GTMetrix example results

PageSpeed Insights example results

Screenshots of the template

Disclaimer (!) Unfortunately, sometimes elements are not shown with their proper styles on these screenshots. This is a technical issue of the software, not the template!