Oygen 4.0 Released!

A Much Needed UI Overhaul

So Oxygen builder has now officially released version 4.0 and brings with a host of new features. However, the most obvious change is to how to UI looks and it's a very welcome lick of paint.

The team behind Oxygen builder are on record in saying Oxygen aims to be WordPress's answer to Webflow. Whilst I still feel Webflow is unbeatable at the moment, Oxygen builder for WordPress is still an amazing tool and comes extremely close to a Webflow experience, especially now the UI has been brought more up to date.

The only aspect of the new Oxygen UI that niggles me slightly is the way in which icons are laid on on the elements panel. A previous version of the Oxygen 4.0 beta has everything laid out horizontally. On the Oxygen facebook group, users on the whole seemed to not like this and prefer what has now been released where icons are laid out in a three column grid.

Personally, I don't agree and whilst I understand it's perhaps easier to get to every option this way, it just looks a little off to me. Thankfully, this is a relatively easy change and I altered the CSS to get all the icons back on a horizontal plain. If you agree with me and want the same, just follow the Steps below.

How to Change the Side Panel

Step 1:

Go to your admin dashboard and click on "appearance" followed by "customize".

Step 2:

Click on additional CSS and then enter in this code:

.oxygen-add-section-element img {
 width: 22px;
 height: auto;
 margin: 0 0 8px 0;
 display: block;
.oxygen-add-section-element {
 border-radius: var(--oxy-border-radius);
 background-color: var(--oxy-dark);
 margin: 0px 8px 8px 0px;
 width: calc(100% - 8px);
 display: flex;
 align-items: center;
 justify-content: flex-start;
 flex-direction: row;
 font-size: var(--oxy-small-text-size);
 color: rgba(255, 255, 255, 0.6);
 height: 35px;
 cursor: pointer;
 text-align: center;
 position: relative;
 padding: 8px;

.oxygen-add-section-element img {
   width: 22px;
   height: auto;
   margin: 0 15px 0px 0px;
   display: block;

Step 3:

Click on publish and reload your oxygen page. If you ever want to revert back, just delete the code and publish once again.

Other than that minor aspect (and it may just be me) I think Oxygen have done an amazing job on this new release and I hope it means more people end up trying Oxygen Builder. For the few occasions where Webflow is not the appropriate tool to use, having Oxygen as a Webflow alternative is fantastic.

Start a project

We're a UK digital agency specialising in design and development & SEO.
contact us

book a free consultation

start a project