Oxygen vs. Divi: Which WordPress Builder Is Best?

Divi is one of the most popular drag-and-drop WordPress builder themes out there today. As a long time Divi user myself, I was super excited (and envious) when I learned about some of the killer features of Oxygen, a newer WordPress builder that claims to create fast bloat-free code.

After building a couple of sites in Oxygen, I’m still gung-ho about it, but I have a better understanding of its pros and cons compared to Divi, and let’s just say that I’m not ready to abandon Divi yet.

I compared Divi and Oxygen in some important areas and tried to determine a winner in each category. Here are my results:

Note, the links to Elegant Themes in this article are affiliate links, and I receive a percentage of each sale made. The opinions in this article are my own honest opinions after using each of these products.

1. Fastest Development Time: Divi

If you’re talking about creating a website from scratch using these two builders, then Divi will get you a finished product quicker in most cases. One reason is that Divi provides many website elements, such as usable menus, footers, and archive pages for you right out of the box, whereas in Oxygen, you have to create each of these. In Oxygen, you even need to create a 404 page.

Now, there’s a big caveat here. Both Divi and Oxygen provide pre-made templates that you can use to get you going so that you don’t have to start from scratch. If one of Oxygen’s templates does the job for you, that reduces Divi’s advantage in this area, but not completely.

The other caveat is that Oxygen can do some things that Divi can’t without creating a child theme or shortcode plugin. If you need some of these special features, then Oxygen will get you to the finish line faster. More on this later.

But, for most clients who want a “standard” website, Divi will usually get that done faster, so I’m giving this category to Divi.

This is the Wireframe mode of the Divi editor. You can also edit in Visual mode which lets you see the actual site.

2. Best Out-of-the-Box Design Polish: Divi

I don’t think I’m going out on a limb by saying that Divi’s default elements look better and are more refined than Oxygen’s.

One of the areas where this is most apparent is in the menus, especially the mobile menus. Divi’s mobile menus open with refined animation, whereas Oxygen’s mobile menus are downright clunky. There is a “Pro Menu” with more adjustability and animation options, but it’s pretty ugly out of the box too, and as of this writing, was not working on touch screens for me.

This is the default Oxygen mobile menu; it covers the whole page with a white background with no animation.

Oxygen’s menus are also not accessibility-friendly either. As a fix, many Oxygen users use the Max Mega Menu plugin and dispense with the built-in Oxygen menus all together.

Another example is Divi’s search form. If you want search in your menu, you check a box and a magnifying glass appears in the menu. If you press it, the menu animates away and a search form appears.

Oxygen doesn’t provide any slick animation like that; they just give you a search form that you can put in the main menu if you want. I made my own slide-out search form in Oxygen, but it took a bit of time; certainly more than checking a box!

I’m not saying that you cannot make nice sites in Oxygen. Of course you can! But I believe it takes more work if you’re starting from scratch in Oxygen than it does with Divi, for most websites with a standard layout.

3. Most Flexibility / Customizability: Oxygen

Okay, here’s where Oxygen really shines. One of the first killer features I discovered with Oxygen is the ability to easily edit post feed templates. In Oxygen, you have access to blog feed PHP template right in the editor, so you can customize it however you want. This is just not possible with the Divi Blog module. To get around that, I’ve had to use complex CSS or create my own feed from scratch using a plugin.

The Oxygen Builder editor

In fact, you can add PHP or JS code almost anywhere in your Oxygen pages. Now, that could easily be abused, but it can come in handy.

Oxygen has an elegant templating system where one template can inherit from another. So, you might create a template containing just the header and footer. Then, create a page template that inherits from that and adds the page title. You could then create a post template which inherits from that and adds a sidebar. You get the picture.

Oxygen also lets you customize more of the CSS. A huge example is the ability to set your media query breakpoints, something I know folks would love to have in Divi. Oxygen also gives you access CSS flexbox settings and access to modifiers like “:after” right in the editor.

4. Ease of Modifying Content: Oxygen

If you’re building sites for non-techy clients who want to manage site content themselves, then ease of updating content is very important.

The Oxygen Gutenberg Integration plugin lets users edit Oxygen page text using the Gutenberg editor. Basically, the page appears as a huge Gutenberg block with editable text areas. This is great if your clients only want to edit text.

5. Ease of Modifying Structure: Divi

In my experience, clients who edit their sites often want to change the site structure. This is where Divi is way easier to use. The Divi editor is more intuitive and makes it less likely for your clients to really mess things up. I have non-techy clients who’ve embraced Divi and can update their own page structure, which is great!

There’s no way I’d let clients mess with the real Oxygen back-end; it’s way too complex.

So, if your non-techy client wants to really jump in and edit their own site, Divi is the better option.

6. Fastest Loading Speed: Oxygen

Oxygen is famous for producing code with minimal bloat, and it is true. An Oxygen site might be hundreds of KB smaller than an equivalent Divi site (or Elementor site or most other theme builders for that matter). It will also have fewer levels of divs (which even Oxygen admits won’t affect load time noticeably though).

Divi and other builders like Elementor have a reputation for being bloated and slow. Some of that is warranted. But, with good hosting, optimized images, and smart plugin usage, you can make Divi sites plenty fast too (i.e., load in around a second). To prove it, here are the GTmetrix scores for my home page, which I made in Divi:

GTmetrix scores for brianshim.com showing "A" grade and 1.1 second paint time
GTmetrix scores for my home page, done in Divi

But if you need the ultimate in site speed, go with Oxygen.

7. Best Documentation: Tie

When learning how to use a new WordPress builder, good documentation is super important.

Happily, both Divi and Oxygen have lots of excellent tutorials and videos to guide you along. Divi has more of them, but I’ve almost always been able to find documentation or a video on what I’m looking for in Oxygen. Kudos to both.

8. Faster Editor: Tie

When you’re developing a site, nothing is worse than getting bogged down in a slow editor. WordPress builder editors can be slow because they need to do so much, like supporting drag-and-drop.

Neither Oxygen or Divi are great in this respect.

One of the first things I noticed about Oxygen is how long it takes to load the edit when you enter it. On Chrome, it takes me 11 seconds or more to enter the Oxygen page editor. Users online have reported similar or longer numbers (i.e., 15 seconds). The same type of page in Divi takes 5 seconds to edit in Chrome.

Users have said that using Firefox improves this. When I use Firefox to edit an Oxygen page, it takes 8 seconds, a significant improvement, but still not as fast as Divi.

Another downside is that the Oxygen editor loads content from the Internet, so you can’t use it offline. However, there is a plugin to get around this.

9. Best When Multiple Developers Are Working the Site: Divi

Oxygen has become known as the theme to use for developers but since it stores code in the database, this presents a problem when multiple programmers are working on the same site. You can’t have your code in any kind of version control system.

With Divi, you can put your custom code in a child theme, which can be version-controlled.

The Oxygen editor has another drawback: You are not allowed to have two Oxygen editor browser windows open at the same time, or else weird things could happen. This makes it a pain to manually copy content from one Oxygen page to another. This limitation might be a showstopper in some applications.

I’ll keep an eye out for solutions to these issues, but for now, I would avoid using Oxygen when the site needs to have multiple people working on it at the same time.

10. Compatibility: Divi

Oxygen does have some plugin and hosting compatibility problems. Here are a few examples:

  • A PHP error is generated if you try to use Elegant Themes’ Monarch social sharing plugin with Oxygen (this is due to the fact that Oxygen takes over the theme, and Monarch looks for the theme).
  • Users in the Oxygen Facebook group have reported that Rankmath is not fully compatible with Oxygen.
  • Users in the Oxygen Facebook group have reported that Oxygen does not support the Advanced Custom fields Options Page.
  • If you migrate an Oxygen site on Gridpane, you’ll encounter rate-limiting errors when you re-sign shortcodes (something you have to do when you move an Oxygen install). Happily, there’s a solution for it.
  • The Oxygen editor is not searchable with the WordPress search form. There is a workaround using the Relevanssi plugin described in that same GitHub issue, but that plugin adds a lot of bloat to the database. Note, if you use Oxygen to design your templates, but the page content is in the regular WordPress editor, that content is searchable. This is just referring to content in the Oxygen editor.

I don’t know of any plugin compatibility problems with Divi, so Divi wins this one.

11. Accessibility: Tie (both are bad, but fixable)

Out of the box, both Divi and Oxygen are lousy for handicap accessibility. This is an increasingly important topic given how accessibility lawsuits are increasing.

The good news is that some of the problems are fixable with plugins.

The Divi Accessibility plugin is pure gold, and fixes many Divi keyboard access problems.

Oxygen doesn’t have an accessibility plugin that I know of. But, if you use the Max Mega Menu plugin for your menus instead of the terrible native Oxygen menus, you’ll at least have keyboard-accessible menus.

I’m tempted to give Divi the edge here, since its native menu is fixable with the plugin, whereas with Oxygen, you have to throw away their native menus (unless you write your own code to fix them, which I have done in the past). But unfortunately, neither Elegant Themes nor Soflyy seemed to have placed importance on accessibility, so I’m making this a tie.

Conclusion

So which is better? As you might guess, each builder has pros and cons, so it depends on what is important to you.

If you need a highly-customized site (i.e., custom CSS breakpoints or custom feeds and repeaters), or if your client is obsessed with website speed scores, then Oxygen might be best.

If fast development time is important, and your client is going to be editing the structure of the pages, then Divi might be best.

When I first discovered some of the killer features of Oxygen, I thought it was going to totally replace Divi as my WordPress builder of choice. But, after making a few sites with it, I’m probably going to stick with Divi for most of my clients mostly because it’s easier to edit page structure in the back-end, and a lot of my clients like to do that.

Click below to check out Divi from Elegant Themes:

Divi WordPress Theme

Still, I’m really glad to have the Oxygen Builder as another tool at my disposal which might be ideal in some cases. I’m already using it in my main blog. I haven’t used it on a client site yet though

What do you think of Divi or the Oxygen Builder? Please comment below. – Brian

Leave a Comment or Ask a Question



This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares
Share This
%d bloggers like this: