isotropic-2022
Share
Blog
Search
Menu

Oxygen Builder V 4.0 Review - Design, Features And Workflow

By James LePage
 on January 11, 2022

Oxygen Builder V 4.0 Review - Design, Features And Workflow

By James LePage
 on January 11, 2022

Oxygen Builder 4.0 is here, and in this article we are going to take a look at all the new features, changes, and workflow that come with the new version. Oxygen is a well-known and well loved WordPress page builder that completely replaces the theme system.

oxygen-builder-4-0-1024x576-1

For the past couple of years it's been on version three, and seen great additions such as CSS grid, a complete MetaBox addition, and additional speed optimizations and both the front end and the backend. People love it because it packs a ton of power in a relatively well designed user interface, well also I'll putting incredibly clean code making for a fast loading Website that is great for Core Web Vitals.

The headline features with the fourth iteration of Oxygen Builder are as follows:

Brand New User Interface

There's a growing collection of third-party plugins that redesign or reskin the backend builder of Oxygen. The team behind the tool must've got the hint that their UI was getting a bit outdated, so that is the headline feature for this release.

image-3-1024x591-1
Oxygen 4.0 Builder Interface

From the screenshot above we can see that the "add elements" panel has been re-created to show more elements in a screen, break points have been added to their own position on the top bar, and other top bar functions such as the undo redo, style sheet toggle, and more have been moved around.

Here's what was done:

  • Enhancement: Inherited values from larger breakpoints are now shown in Properties Pane fields (#3665)
  • Enhancement: Modals now animate out using the same AOS animation they animate in with (#3550)
  • Enhancement: You can now upload custom screenshots for design set pages, blocks, and individual Sections (#3574)
  • Enhancement: You can now double click an element's name in the Properties Pane to rename it (#3547)

A great way to keep your website structure easy to navigate.

  • Enhancement: Added visual indication for whether a Properties Pane field is styled via class or id (#3548)
  • Enhancement: Added search field for Selectors Pane (#4037)

If you have a ton of CSS classes managed in Oxygen, this will allow you to find them quicker, and make global changes on the website.

  • Enhancement: Added keyboard shortcuts for duplicate, save, delete, copy, paste (#3951)

This is an incredibly welcome enhancement that allows you to now duplicate, save, delete, copy, and paste elements within a builder instance. While they did not add a right click menu, they said the stage for it, and added many of the capabilities via the keyboard shortcut that you would expect in a menu.

You will find other various user interface changes throughout the builder, such as the way margins and paddings are handled. It's now much more like a dev tools experience:

screenshot-2022-01-11-at-12-43-25-add-new-post-isotropic-wordpress

You will also notice that the actual colors within the builder changed, and are now very focused on various gray shades.

screenshot-2022-01-11-at-12-43-37-add-new-post-isotropic-wordpress

Overall, we find out the new UI and additional ease-of-use enhancements make the tool a more efficient an easier way to build websites that version 3.0. All of these changes are super welcome, and for some users it may even remove the need to purchase Hydrogen Pack (as there are now keyboard shortcuts).

image-2-1024x884-1
New loading animation

Fix Repeater Duplicate IDs

An incredibly welcome fix - Repeaters no longer duplicate IDs across the individual posts that they display. This was one of the biggest issues with 3.0, and caused SEO problems as well as simply did not follow best practices.

screenshot-2022-01-11-at-12-44-00-add-new-post-isotropic-wordpress

Here's the actual markup - you can see that each ID has a number after it, allowing you to style specific cells, and removing repeated IDs which is not good for SEO.

PHP8 Support

This was a massive request in the Facebook group, and the tool now supports PHP version eight. Version 3.0 simply would not work or load on this new version of PHP. We can now utilize the speed enhancements that this brings.

Here's why PHP 8 is great:

php-benchmarks-2021_wp-5-6-1024x759-1
Much more quicker

Builder Loading Speed Enhancements

There are also some enhancements that directly impact the builder loading speed such as the removal of duplicate SVGs loading and an update to AngularJS 1.8.2, the latest supported version (#4031).

Read: Oxygen Builder Backend Loading Time Test

New Way of Storing Data

Previously, Oxygen pages and templates were stored in the backend as short codes. This was great for security, but wasn't the most efficient way to do things. With version 4.0, new pages are stored as JSON which is much more quick and efficient. There is backwards compatibility with sites built with 3.0, so no need to worry about any breaking changes.

image-4-1024x373-1
Old shortcodes vs new JSON format

After you upgrade, if you resign short codes, they will be converted into the new JSON format.

image-1024x90-1

Additional WooCommerce Elements and Changes

This comes along side the new release of the core builder. Oxygen WooCommerce 2.0. There are two new elements, including a mini cart and a cross sells/upsells component.

screen-shot-2022-01-04-at-5-33-41-pm-1024x948-1
New mini cart

The addition of several new Woo specific conditions is great, and will allow you to further customize your site depending on specific e-commerce situations.

Also, if you are familiar with themes, you can now override WooCommerce templates from a pre-designated folder instead of having to do a custom plug-in and reroute where will Connors looks for these template overrides.

Notes Regarding Oxygen V4.0

There are a few things that we wanted to cover in this blog post. The first is that both alpha and beta releases should never be used on production websites because something will probably break. You should wait until the RC (or release candidate), or the actual version 4.0 to come out. We see a ton of posts on Facebook saying that their website was broken after updating to version 4.0, and this is an expected thing if you were using alpha or beta.

Because the UI changed, as did the CSS, meaning that things will appear broken if you don't clear your browser cache and regenerate CSS - so definitely do that!

The final word of caution is that third-party plug-ins may break due to this new version. They do things a little bit differently in terms of adding components, and the CSS styles, but we expect that most major oxygen builder third-party developers will have their plug-ins compatible by the time that the RC comes out.

Further Reading:

Conclusion

The fourth version of Oxygen Builder brings with it much-needed user experience an interface enhancements like keyboard shortcut to copy and paste elements, a new easier & design, PHP8 support and WooCommerce improvements. This release should set the stage for additional native tools like a right click menu and further backend speed enhancements.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Moh
Moh
1 month ago

Hey!
Thx for the info!

May I ask when the release date for the V4?
I'm very excited to get it ASAP...

I'm dropping the Fu**ing Elementor once and for all because of Oxygen!

Regards

Rob
Rob
25 days ago

I recently built a site for a small-town local public/charter school.
Bluehost shared hosting (I know... you get what you pay for. Yeah, yeah) slammed us into PHP version 8 without warning, and no option to revert. The budget is super-tight, so we can't just switch hosting providers. So we need Oxygen V4 update ASAP as our site is currently not unusable. We're like a boat drifting in the ocean at the mercy of the current.

This comment it mostly just to complain about it. I know nobody can speed them up in their release. But good grief, this is taking forever. I really like Oxygen otherwise, but this is pretty frustrating.

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty