I’ve been building my sites with Elementor for a few years. As my css skills grew and my designs became more complex I often ran into limitations with Elementor’s system, especially regarding formatting post galleries (page of posts).
I was enthusiastic to try Oxygen Builder, which allows designing your own post gallery in detail (in oxylingo, a “Repeater”). I was also hopeful to make the switch because Oxygen has lifetime pricing, while Elementor is a hefty annual payment.
I worked for about 5 weeks, 3-8 hours a day with Oxygen on staging sites of 4 of my websites, replicating the more difficult parts of my Elementor designs. I should note that I don’t use woocommerce or gutenberg, so Oxygen’s offerings regarding those are not part of my evaluation.
The Oxygen back-end workspace definitely has a more professional aesthetic, but as I moved back and forth trying to do the same functions in both page builders, I didn’t find very many things that Oxygen actually did that Elementor didn’t do comparably.
- At first I was impressed with Oxygen’s integration of the stylesheet into the page editing process, but in fact Elementor also provides integrated access to the stylesheet while editing any page, with the same number of clicks. (Oxygen allows you to have multiple stylesheets and enable and disable them.)
- From both builders, you can also access global color and font settings without leaving the page you are working on.
- Both builders offer an interface with a hierarchical structure of the elements on the page, allowing you to reorganize elements there. While neither builder’s hierarchy works well (often you click, drag, release, and nothing happens), Oxygen’s is significantly worse. Even after the purported improvements to this functionality in v. 3.9 I would spend minutes repeatedly trying to nest or de-nest an element.
- Both builders allow you to save and edit re-usable parts. Elementor annoyingly distinguishes between reusable widgets and sections (parts that include more than one widget). Oxygen easily allows you to choose to add either an identical instance or an editable one. Disconcertingly, however, in Oxygen when you save an element or section as reusable it immediately becomes uneditable, so you have to then delete it and add an editable version. Neither builder makes it easy to make global changes to reusables, requiring you to save a new copy with a new name, generating confusing template clutter.
- Both builders allow you to apply classes to elements and both implement this badly in different ways. In Elementor, adding a class has no effect in the editor, only on the front end. In Oxygen, it’s not clear which parameter settings are attached to the class and which are attached only to the unique element. If you set a bunch of parameters and then add a class does it save those existing settings into the class? Or do you need to decide in advance to create a class before setting anything? In Oxygen I often found myself hunting for where a setting was generated. This can happen in Elementor too, but I found Oxygen far more obfuscating – I suppose there is something not intuitive about the ID, class, and state selector system. (Oxygen seems to know it’s easy to get confused here, because they have a “lock” button for the class. Maybe there’s a better UX solution to that?) Elementor only allows state selection on particular elements, which at least keeps it out of the way, and clear when you are messing with it. I find it easier to write css for hover states, something that’s not possible in Oxygen due to the ban on selectors in the custom css.
Oxygen Builder did severely disappoint in several significant ways:
- It’s only possible to work on one page or template at a time. I’m used to having 5 or 6 tabs open in Elementor at a time, so having to do only one thing at a time really disturbed my workflow. When I realized I needed to make a change to a global template or reuseable widget while working on a particular page, I would have to remember what I wanted to do and then go do it later. In Elementor I can open a separate tab to fix a template or widget in parallel with the work I’m doing on a page. In Elementor you can actually click into the header and footer from any page. Again, allowing you to make small fixes immediately.
- While every Oxygen and Elementor widget has a “custom css” box, Elementor’s allows you to use css selectors on children of the element. Oxygen does not allow selectors in the custom css box so you can only target the parent element there. If you want to target a child, you have to use the stylesheet, even if you are just styling one small thing in a child of an element. There is an inline “code block”, but this requires php and html along with the css and generates errors when you try to leave those blank. (When fine-tuning elements on a unique page, such as a landing page, I often style things in ways that really don’t need classes –and to create classes would be clutter. For example: applying borders or custom hover effects to element children.*
- Very limited copy/paste functions. No ability (like Elementor) to copy just the formatting from one widget to another, or to copy from one page to another. Since in Oxygen you can’t have two pages open anyway, to copy an element from one page to another, you have to save it as reusable, again adding clutter to your template folder.
- Oxygen does offer some effects and pre-programmed widgets, but far less than Elementor. It has animation on scroll, but no entrance animations. It has a pricing box widget, but it’s both simplistic and awkward to use compared to Elementor’s. It has just 6 “composite” widgets (reserved to the more expensive plan), but these are not strikingly good designs.
- Speed: One of my main motivations for trying Oxygen was the claimed increase in page load speed, against Elementor’s purported “bloat”. After a few weeks working with Oxygen, I built two identical landing pages in two separate installations, one running Elementor and the other running Oxygen. I checked to be sure that all the same plugins (aside from the page builders) were activated in the two installations. Since my Oxygen site is a staging site, google page speed wasn’t able to give me the full analytics on that site, but the basic speed metrics turned out to be exactly the same for sites built with both builders. This was really a shock.
The few things Oxygen Builder really does better than Elementor:
- You can see the div structure and manage css display formatting through an interface, including a css grid creation interface (although I expect css grid will come to Elementor soon).
- When you apply a class to an element the changes are immediately visible. In Elementor, classes are often only applied on the front end, and not in the editor.
- Less administrative clutter. Oxygen offers just one post type for its templates, which can cleverly call one another as layers. Elementor “organizes” templates in a proliferation of useless categories and even more useless grid-view browsers (quite silly when templates don’t have or need featured images anyway).
- Oxygen offers fast, personal, no-boilerplate customer service (for now).
- Built-in visibility conditions for every element – both for media queries, user logged in/out, user role, taxonomies, etc. (available with the Dynamic Conditions plugin for Elementor).
- Cloning templates works with Oxygen, and doesn’t seem to work with Elementor. (But in Elementor you can just copy and paste.)
In addition to the robust custom css box on every element and the ability to edit multiple pages simultaneously, Elementor’s flying colors are:
- Robust auto-save. In Oxygen, when my login would expire I had to reload the page, losing any work I had done since the last save. In Elementor, I can re-login without losing changes.
- Tons of pre-built cool widgets and effects (flip boxes with 3d effects), hover effects, entrance animations, forms, all with defaults programmed to look good as soon as you drop them in. In Oxygen you can create some of the same things, but you have to know what you want first and sometimes you have to drag in whole blocks of css. The few built-in effects all load with the defaults at zero, so you have to fiddle around to get it to look good. Some of these pre-built things are actually important, such as the option to use a cover image for videos.
I was hoping to eliminate a lot of plugins by switching from Elementor to Oxygen. Here’s the final accounting:
- Plugins I need with Elementor that I don’t need with Oxygen : Dynamic Conditions, Ele Custom Skins (to customize the repeater), SuperCat ajax filter,
- Plugins I need with Oxygen that I don’t need with Elementor : Contact Forms.
Overall, as a user I conclude:
- Although I have had many frustrations with Elementor over the years I’ve been using it, I found Oxygen far more discouraging. Especially because I couldn’t quickly work in parallel on the body template at the same time as a page, I found myself feeling unproductive and stuck.
- With Elementor’s built-in animations, effects, and accessible hover toggles, you can easily play and explore possibilities. When you activate any effect or animation in Elementor it’s already set to optimal defaults that look nice and can still be adjusted. While you can built similar widgets to Elementor’s, they don’t look quite as good, and require far more tweaking. Most significantly, Elementor’s pre-built offerings make it easy to play around with a colleague trying out design ideas, while in Oxygen you have to already know what you want to build and then do it parameter by parameter.