The world of WordPress has been going crazy for a few years, and the development of page builders has been as much a part of the launch of Gutenberg. In this post, comparing Oxygen, a relative newcomer on the scene, with Divi, a leader in the market for some time.
[Full disclosure: The bulk of my experience has been with Divi. But, in the last four months I have been working with oxygen].
And, before I get into the specifics, I want to acknowledge that almost every product that we once called a page builder (like both Oxygen and DIVI) today is actually a “site builder”.
Differences at a Glance
Oxygen’s user interface can be described as ‘dark mode’.
At this stage, the products are very different, one can say night and day. This would be a very appropriate description because at the UI level, Oxygen can be described as “dark mode”, while Divi has a much brighter interface. While not operationally important, in one way or another there are important user preferences.
A very bright, full screen UI and editing environment in Divi
Like many similar products, Oxygen does not have a true front-end editor like the DIVI visual builder. It provides a visual representation of the page that can be adjusted at different zoom levels. And you get limited text editing and drag the text en drop arrangement of elements on the screen, but nothing remotely like the “tinemacy-like” content editing box proposed by Divi’s module.
They Have Similarities
It is not hard to imagine that there are many similarities between products that perform the same function – surprisingly, compared to oxygen and DIVI, it does not have many.
The approach of oxygen is to ask where you want to use it first
When I initially started working with Oxygen in September, Divi 4.0 had not yet come out. So in fact Oxygen was the first product I used with the “Theme Builder” capability. When Divya came out with 4.0 in October, I was surprised at how similar the two approaches are. truth!
The DIVI asks you to design it first, then decide where to use it
Both break a page into three parts: the header, the main content, and the footer, allowing the designer to style the entire design power of each product in any or all areas. They then further ask you which page (s) the template should apply to.
This implementation is simple, flexible and powerful. And as far as I’ve found, neither product has any limit on how many templates you can have.
For many web professionals who have used these products for some time, the “tree view” of the page is like an old friend. Most devices such as DiVi and Oxygen have moved towards a visual development environment, but both still provide a schematic way to visualize the page structure.
Implementation in Divi is better because all the functionality of visual editing views is still available in the tree view, including modifying settings and adding new modules. In oxygen, the structure is limited to removing, duplicating, reusable, renaming operations on the panel, and into a div-plus drag and drop ridding.
In both Divi and Oxygen, these “ideas” are invaluable for being able to select a component that is harder to select than one below or otherwise.
Are Compared as Design Tools
Both Divi and Oxygen are marketed as tools for designing WordPress websites; The people for whom they are marketed are quite different. Divi, the creator of Elegant themes, claims that great websites can be built using their tools without any coding. Oxygen markets their software as a visual site design tool that can make great sites, but they are careful to lure their product towards experienced users and developers (as opposed to designers).
And, in my view, this is quite appropriate because the learning curve for oxygen is indisputably stable.
Approach to Design
Divi and Oxygen design differently. While in Divi you can use CSS classes and IDs; You should use them in oxygen. How does the style differ in oxygen. Of course, in CSS, how classes and IDs are actually styled, but Divi takes care of the scenes behind you.
Local vs. Site-wide Styling
It is easy to come up with an example. In Divi, I am fond of using their “extension styles” command, for example, extend the style from all blur in a single line. (But not all spots on the site). This simple operation in Divi is a single click.
In Oxygen I just have to make the class style as I want and apply it to the elements I want to style that way. There is no real short cut; There is no simple way that I have found.
CSS Visual Control
What both products are designed to do – and they do it very well – is put a graphical UI between their users and CSS. We decide that we want a range, an animation, an overflow setting, sizing, whatever (almost) —and both products we have to set without code.
Dozens of settings for this title (not all categories even fit on screen)
Neither product offers a UI that covers 100% of CSS; However, Oxygen has a much broader set of layout commands included in their UI than Divi. Oxygen also provides direct access to pseudo selectors such as: before and after.
Both offer different types of CSS units in their settings.
[In a September evaluation of the page builders I did for a local meetup, I found Divi and Oxygen far outnumbered Visual Composer, Beaver Builder and Element and could set their UI straight.
Library and Reusable Components
A large library of design and reusable components, along with the tool’s productivity characteristics (next), helps sites get through quickly. Divi and Oxygen both offer a large number of great design resources, but they do it differently.
Divi focuses on the entire site designs, offered one page at a time. They have many, and they are of very high quality. Oxygen has full site designs, less than Divi but more than enough to get you through. (They call them design sets).
Oxygen library approach showing reusable parts of a design set
But oxygen has two things that I like. The first piece is a large library of parts: portions of pages, CTAs, headers, footers and so on. In my view, doing it this way is a bit more flexible from Divi’s point of view. Second, in oxygen you can name global colors to use in your designs. For me, although it is a trivial matter, it is really helpful to look for a descriptive English name as opposed to decoding the hex or RGB color code.
[Both products offer reusable library components, and you can save your own. I have not seen how or how Oxigen implements global modules like Divi does].
In the competitive agency world, how quickly we can complete a reliable site is of critical importance – and it is our right to expect the tools to develop our site, which helps us in the process Support with features.
I have always felt that Divi was the market leader in this type of specialty, and my evaluation of oxygen has not changed it at all. Sadly, Divi has many of them, hardly oxygen.
Instead of beating on oxygen, I just wanted to mention for Divyang users who are fond of them – two features that lack Divi and oxygen.
The ability to filter settings is a great time in the world
When working on a complex DIVI module, the ability to filter to show only modified styles or only responsive styles is a huge time-saver. And then the ability to expand genres, is another great tool.
A place where Divi and Oxygen have taken different paths to their client interface: Oxygen provides a single command that turns a page into a Gutenberg block where the client can only change images and edit the text .
While we as an agency do not transfer clients to Gutenberg, there is no denying the utility and security of this approach.
Comparing the output of each
We all know what code these products are writing for us, right? The question is, how good is that code? How efficient is it? This is where the two products are very different.
The code of oxygen output is much shorter than Divi. Instead of opinions and resulting arguments, let me just tell you that a bare divi installed on a page is more than 1Mb. The installation of bare oxygen is about 100kb. This test is easy to do.
In a world where page time and bounce rate are closely watched metrics, and one where Google is measuring page speed for search rankings, you can’t really afford a slow site.
We have seen all celestial sites that are faster than the recommended maximum page load time of 3 seconds. But the raw page weight number that I have shared with you should be the least cause for concern.
Pricing and Licensing
As far as cost is concerned, I just want to make a simple statement that these are the two best prices on the market — and oxygen is far superior to Divi.
Both products offer unlimited sites with their licenses – something that is rare in this market. Divi offers both an annual license and a lifetime license; Right now, all oxygen licenses are life-long.
I have opposed publishing specific prices because both products can often be found on one particular. But I have to explain that Divi is “all in one” for a price. Oxygen has a basic tier, a tier that adds Vue Commerce integration, and a final tier that adds Gutenberg support.
Up to date pricing is available: https://www.elegantthemes.com/join/ for Divi and https://oxygenbuilder.com/pricing/ for Oxygen.
Something like Conclusion
It was never really my intention to choose one over the other, or to recommend it to others. In fact, I think they are both great tools and capable people will be able to succeed either.
But they differ from what I recommend you to consider where you really are as a user to decide which is best for you. I say that the more comfortable you are with CSS, the easier it will be to go with oxygen. In a different way, learning Divi is easy.
If this will help you decide, my agency owns the license for Visual Composer, Divi and Oxygen. While the first is a legacy item, we fully intend to use both DIVI and oxygen for the new business going forward.