Looking for a more flexible way to build your next WordPress website? Oxygen, a visual WordPress website builder that we previously reviewed back in 2017, is about to release Oxygen 2.0.
Oxygen 2.0 completely eliminates your WordPress theme from the equation, instead offering up a powerful drag-and-drop visual builder and templating system to let you visually design every single aspect of your WordPress site.
In general, I think Oxygen 2.0 is a noticeable upgrade over Oxygen 1.0. And the addition of drag-and-drop editing to the equation should pique the interest of page builder fans.
If you’ve ever wished you could design “more” with a page builder, you should definitely give my Oxygen 2.0 review a look for a look at everything this theme builder offers.
Oxygen 2.0 Review: How It Works
As I said in the intro, Oxygen brands itself as a “visual site builder”. That’s not the same as a page builder. In fact, you can actually still use a page builder page with Oxygen if you want – the two don’t have to be mutually exclusive.
Oxygen 2.0 also does not rely on a WordPress theme. So unlike the theme building functionality you get with something like Beaver Themer or Elementor Pro, there’s actually no trace of a third-party theme on the front end of your site if you look at the code. Oxygen completely replaces your theme.
Ok…so there’s no theme. How do you build your site then? Oxygen 2.0 lets you create three types of content.
Templates – think of these basically as building a theme from scratch. They’re your site’s foundation. For example, you can build templates for:
- Singular for blog posts, pages, or custom post types. This is what visitors see when they view an individual post.
- Archives – this is what visitors see when they view a list of posts, or a category/tag/date archive.
- Front page – a separate template for your front page.
- Blog Posts Index – a separate template for your blog page.
Reusable Parts – these are things you’ll want to constantly reuse in your templates. Kind of like a section or block.
Pages – you can also design individual pages either from scratch or based on one of the templates that you create.
Setting Up Oxygen 2.0
When you first install Oxygen, you can choose between loading one of the included Premade Websites or starting from a Blank Installation.
Right now, Oxygen has 5 pre-built sites. Each “site” includes a variety of pre-built pages, templates, and sections. For example, a single “site” might have 11 different headers to choose from.
You can choose from one of these Premade Websites if you want, but I’m going to use a Blank Installation for this review so that I can show you everything from scratch.
Hands-on With Oxygen 2.0: Building A Template
Above, I told you what a template is. Now, let’s build one!
To do that, you go to Oxygen → Templates → Add New Template.
When you create a new template, you can choose where it applies using the simple accordions and checkboxes.
For this example, I’ve configured it so that I’m designing the template for what someone sees when they view an individual blog post (like you’re doing right now!):
What’s cool is that you can also only apply your template to specific:
- Taxonomies
- Parent IDs
And you can also set up another helpful feature called Template Priority. Essentially, Template Priority helps you handle a situation where more than one template applies to the current post.
For example, you might have:
- One template for ALL posts
- Another template for posts in a specific category
Template Priority lets you specify which of those two should be given priority:
It’s important to note that you can also combine multiple templates together by having templates inherit design from other templates.
Why is this useful?
It lets you, say, create one template that has a basic shell for your header and footer. Then, you can use individual templates to control the content that goes between the header and footer by making each one of those templates inherit the header/footer template.
This concept might take a little getting used to if you’re not a developer – but it really does open up a ton of flexibility for creating different types of content once you get the hang of it.
Using The Oxygen Visual Editor
Here’s what the Oxygen Editor looks like when you first open it:
There’s a lot going on here, so let me try to break it down…
On the left side, you can add new page elements by clicking the + Add button. These elements are broken up into 5 sections:
- Basics – simple elements like text, containers, images, your own code block.
- Helpers – more advanced elements, like a header builder, social icons, post grids, pricing boxes, etc.
- WordPress – WordPress-specific elements like a menu, comment form, login form, sidebar, post information, etc.
- Library – access to the pre-built design sets.
- Reusable – access to your own saved reusable parts.
You’re also able to bring in plugin content – like forms or other plugin outputs – and similarly style plugin output using the controls below…
How To Insert Dynamic Data Into Your Designs
One of the main areas where Oxygen goes beyond standard page builders is how easy it makes it to import dynamic data, which is essentially anything from your WordPress database. For example:
- Post title, content, featured image, etc.
- A custom field (including fields you add with Advanced Custom Fields, Pods, etc.)
- Current user display name
- Etc.
There are two ways to insert dynamic data. First, you get an Insert Data option when editing certain elements. For example, if you add a heading or a text element, you can click the Insert Data button to open all the options:
Then, you can use the Previewing drop-down to choose a specific piece of content to preview (that is, Oxygen will dynamically pull in data from that piece of content). Here’s what it looks like to pull in a dummy post’s title:
You can also dynamically insert data at other parts of your site. For example, you can have a section’s background image dynamically pull in a post’s featured image:
And Oxygen also offers pre-built Dynamic Data elements that you can directly add without needing to use the Insert Data interface:
For example, here’s what it looks like to insert a custom field with the Custom field element (for reference, I added this field with Pods):
How To Style And Edit Elements
For each element that you add, you can edit that element using the same sidebar:
You have a lot of options here – you can set up:
- Background
- Colors
- Typography
- Spacing
- Etc.
But one of the things that developers will probably like is how easy it is to work with custom CSS/JS.
For each element, you can quickly apply CSS selectors, including media queries for responsive design:
And you can directly work with CSS and JS by opening the editor in the Advanced tab:
Again – you can use the device drop-down to apply styles to specific devices, if needed.
Moving Elements Around
Ok, now that you know how you can add and style elements, let’s move on to actually arranging those elements on the page.
Oxygen 2.0 now has drag and drop, so one way to do that is simply by dragging the actual element around the page:
But you can also open the Structure area, which shows you a tree for all the elements on the page (including CSS elements).
Using the Structure tree, you can also drag and drop elements to new positions:
Easy Layouts/Spacing
One of the nice things about Oxygen is how easy it makes layouts. First off, Oxygen is based on Flexbox, which you’re probably familiar with if you’re a designer.
Then, it gives you this handy Child Element Layout setting when you edit an individual section. This lets you control how every element inside the section is aligned:
So you could, for example, center-align every element in a section without needing to manually align each individual element.
You also have that nice Stack Child Elements Horizontally setting that lets you create horizontal layouts without needing to set up separate columns like you’d have to do in pretty much every page builder.
And you can also apply these settings differently for different devices. For example, you could:
- Stack items horizontally for large screens
- Stack items vertically for mobile devices for a better responsive design
And another nice layout-related thing you can do is drag the margins of a section to change its spacing:
You can also add spacing to individual elements using the same click-and-drag approach.
Querying Posts For Archive Pages
If you need to display posts or custom post types (say, for an archive page or a shop page), Oxygen includes a detailed query builder that lets you:
- Query by post type
- Filter by taxonomy or author
- Choose the order
- Limit by count
Exploring A Few Other Options In The Builder
In the Manage section, you can manage and add stylesheets for your theme, including directly editing your stylesheets in the code editor:
And you can also manage Selectors using a similar interface.
Building Pages With Oxygen
Beyond setting up templates, you can also use Oxygen on individual pages.
When you edit a page with Oxygen, you can either render it using an existing template, or you can build it from scratch using the Oxygen editor:
You can, of course, still use the regular WordPress editor, as well.
How Much Does Oxygen Cost?
If you’re a developer or agency, Oxygen has a very attractive licensing system.
It’s $99 for use on unlimited sites. Yes – that includes use on client websites.
But here’s the kicker:
You also get lifetime support and lifetime updates.
If you build a lot of sites for either yourself or clients, that’s going to save you a ton of money versus the competition. Especially as time rolls on and the renewal fees for other products add up.
Final Thoughts On Oxygen 2.0 And Who It’s For
If your goal is to find a tool that lets you build your entire theme, I think Oxygen 2.0 succeeds at offering more depth than something like Beaver Themer or Elementor 2.0. The templating system, including how you can have templates inherit from other templates and set priorities, gives you easier control over different content types.
Additionally, the flexbox layout does make it a lot easier to set up page layouts without needing to rely on columns or manually setting the alignment for each individual layout. Even if you could achieve the same end result with a page builder, Oxygen’s approach feels quicker and simpler to me.
The trade-off for that flexibility, though, is that I don’t think it’s as beginner-friendly as something like Beaver Builder or Elementor.
I think that’s fair because there’s always going to be a trade-off when you pit “ease of use” against “depth of functionality”. And I do think it’s still possible for a non-developer to use Oxygen, especially in comparison to Oxygen 1.0. There’s just going to be a learning curve while you pick up, say, how it works to make one template inherit another template.
Here’s the good news, though:
Oxygen offers a 30-day money-back guarantee, so you’re not risking anything by trying it out.
Give it a try and see if it will simplify and speed up how you build WordPress sites.
0 comments:
Post a Comment