Oxygen and the WordPress ThemeBuilders

WordPress has seen a wave of Themebuilders over the past few years and coming from two sources – themes with builtin PageBuilders and PageBuilders taking over many theme functions. On the theme side there are 7 popular themes which come with PageBuilders as part of the package – Avada with Fusion Builder, X with Cornerstone, Monstroid2 with Power Page Builder, Strata with an included copy of Visual Composer, Qards with basic page building features, Customify with its Customizer based editor + Elementor or Beaver Builder Lite free Pagebuilders, Make with the Make Layout Engine. There are significant differences among the themes’ PageBuilders on how well they support the basic PageBuilding functions:
1 – Drag and drop components for layout anywhere in the content area of a page including moving and resizing the components in the layout area;
2 – Each component has associated with it a very wide range of page styling options for coloring, typography, spacing, animations, etc;
3 – Ability to edit separately the styling of desktop, tablet, and mobile device layouts;
4 – Ability to export and import complete page or sections of a page, or specialized blocks as templates for reuse and customization;
5 – when customizing templates able to make changes global or local and apply conditions for reuse among 404, archive, post, pages, and other layout objects;
6 -Ability to incorporate 3rd party components directly or by means of shortcodes.
But consistently these Theme Builders take advantage of the WordPress Customizer to set global styling and layout settings for a website. In addition, many add their own [or third party plugins] for sliders, galleries, popups, and other specialized components.

On the PageBuilder side, a lot of theme building capabilities have been assumed/provided by the PageBuilder including the layout of headers, footer, sidebars, and other page areas. Beaver Builder and Elementor were the first PageBuilders to offer theme layout [user designed headers, banners, footers, and sidebar placement]. But there are a flood of recent PageBuilders in the past half year offering bolstered theme layout and design features including Divi 4, Themify Builder, TemplateToaster, LayersWp which is now owned by Elementor. So it can well be said that Theme based Builders and PageBuilders are converging. So now enter Oxygen as one unification of Theme and Page Builders.

Oxygen – Some Coding Smarts Required

The following screenshot tells the story where Oxygen sits in the WordPress World:

Oxygen takes over most of the theme functions and in the process requires more coding smarts especially CSS and some coding methods like conditionals and lopping. Also in taking over theme functions unlike say Divi or the X theme which use the Customizer, Menu and Widget tools, Oxygen bypasses most of these theme features and implements them within its layout engine. So Oxygen does provide extensive control over headers, menus and their appearance on user pages as seen in this video tutorial:

These conditional and template setting features match the best of Divi, Elementor, and Beaver Builder. However, the downside to the Oxygen approach is that a number of traditional WordPress UI features like menus and widgets are left abandoned to the confusion of veteran WordPress users and developers.

The bottom line is that Oxygen demands that developers become comfortable with a new workflow when both designing and styling their website.. First, Oxygen the Builder must be used to set the theme layout for pages and posts before starting to design individual pages and posts. Yes, there are template files to shorten the layout and stylings; but developers will have to master doing their own template layouts. Here is a detailed walkthrough of the new layout workflow in Oxygen:

As you can see in the video, Oxygen has many options not just for layout but also controlling responsive layouts for tablets and mobiles with innovative features.
Recently Divi and Elementor have released Woo Builder versions with special Woo components and templating capabilities. Well, Oxygen 3 sports a similar set of Woo Commerce based components and templates. Thus we can see Oxygen is matching the latest capabilities of the top WordPress PageBuilders.But there is another area that has seen Oxygen state of the art innovation – Advanced CSS Styling..

Oxygen’s Advanced CSS Styling

One of the distinct advantages of WordPress PageBuilders over the Gutenberg UI is that they have comprehensive styling options available to developers for every one of their components. And the top PageBuilders like Divi and Elemento have a wide selection of styling options; but the new leader is Oxygen with one of the most complete implementation of CSS2, CSS3 and JavaScript advanced styling options.

The Line up of Advanced Styling Features

If you look at the list of of Styling feature it seems to be nothing unusual for a good PageBuilder. But at the top of the style settings are three fields that give Oxygen a starting advantage in styling.

First is the device dropdown which reveals the media device which stylings will apply to. this device dropdown is seen in the adjacent Designers can have separate stylings for every device size and stacking up and using several advanced stylings for each device.

Second is the CSS selector field which identifies what component the styling will apply to. When users select a component this selector field is automatically filled in by Oxygen. But here is where “No Coding Required” gets stretched because Oxygen allows the CSS selector field to be changed to a Class that will apply to this and any other component that has added that Class to its styles.Yes, this delivers multi-component styling to Oxygen. But it also assumes a fair amount of CSS knowledge and how it works – knowledge that a Web Designer and an astute Web Developer might have but not likely a WordPress newbie. Hence the importance of Oxygens Rule manager where access to these commands can be controlled.

Third is the pulldown, state [seen in the screen shot below] confirms the CSS sophistication of Oxygen. Users need to know what :hover, :before, :after and original do, again upping the ante on CSS knowledge.

Finally, there eight advanced settings groups, some of which will be discussed here. Each styling group contains at least one unque feature not found in the other PageBuilders. This is what will make Oxygen CSS styling compelling for Web Designers.

Device Dropdown and Animations

This screenshot illustrates how the mobile responsive setting in Oxygen can be applied to creating animations.. For example, on hoevring over a component users can trip a differnet animation>. But most important Oxygen users unlike other PageBuilders have complete control over every anmation’s settings:

Animation Type – Determines the type of animation that will be used, such as flip, slide, or fade.
Animation Duration – Determines the number of milliseconds over which the animation takes place.
Anchor Placement – Defines which position of the element, in relation to the viewport, should trigger the animation.
Animation Easing – Defines the speed curve of the animation. Ease-in-out, for example, will cause the animation to be slower at the beginning and end and faster in the middle.
Animation Trigger Offset – Defines offset of animation trigger point (in relation to viewport scroll position) in px. A positive value can be used to ensure the entire element is in the viewport before the animation is triggered, whereas a negative value can be used to trigger the animation before the element enters the viewport.
Animation Delay – Determines the length of time between the animation being triggered and the animation beginning.
Anchor – Allows you to trigger the animation based on another element’s position. Insert the element’s ID in this field to trigger the animation when the target element’s position reaches the designated Anchor Placement location.
Animate Only Once – By default, an element leaving the viewport re-sets the animation and causes it to be re-triggered when the element re-enters the viewport. You can disable this behavior by choosing “Yes.”

State Setting with Effects

The state setting allows for some special styling used with the Effects group from the advanced settings. Use original for the default setting and :hover for effects whenever the mouse hovers over a component. This is a valuable toggle for triggering an opacity or filter or wild & wooly transform effect only to be removed immediately when the mouse exits from the component. In contrast, the ::before or ::after act as locational tools for such things as bread crumbs and icon decorations; how ever the CSS is challenging to make it work. so it is often generated by JavaScript.

Transform Group of Stylings

Divi has had one of the first 3D transformation styling options for WordPress PageBuilder. But it is no longer alone with Oxygen matching the skew, scale, rotate, and 3D transformations . These transforms work well with an image or section block on scroll or hover events to capture attention or emphasize a point of view. One of the problems with WordPress Flexbox and Grid layouts is that they become cookie cutter common. Transforms + Opacity present opprtunities to breakout of cookie cutter layouts.

Layout Control

Web Designers and CSS Experts will know that Layout options like Clear, Visibility, Z-index, and Position are the ingredients of sophisticated styling. Like Elementor, Oxygen has adopted FlexBox controls as well. The downside -Layout requires savvy CSS smarts.

Text Styling

Here is the meat and potatoes for Styling – – text stylings. Oxygen provide both basic Primary and Advanced typography controls.

As can be sen in this samping of the major Oxygen styling tools, they are jam-packed with capabilities going beyond what is available from the top PageBuilders like Beaver Builder, Divi and Elementor But these PageBuilders have two distinct advantage over Oxygen. First, they have done a better job of assigning specific styles to components. This lowers the learning curve to minimize the amount of CSS advanced knowledge required is lowered notably. Second, all of the major PageBuilders have a Copy and Paste Styles so it is easy to move styling from one component to another. This styling time saver is unavailable in Oxygen through a more complex CSS Class based system.

This is a recurring theme with Oxygen – it exposes full features not just in CSS styling but also in Templating and its Design Library . But because Oxygen has bypassed having a default page layout and does not use the Customizer , developers will have a whole new and more complex workflow in using Oxygen. Complexity of workflow is a problem which all the Page Builders encounter. But Oxygen requires detailed WordPress programming and CSS/HTML savvy as seen in the following tutorials on Repeaters used with Advanced Custom Fields and Dynamic Data. This is a recurring “Learning Curve” need for Oxygen; so pay attention to the following tutorials.

The Oxygen Learning Curve

Oxygen is definitely not for newbies to WordPress. But Oxygen is also a new entrant into the top rung of WordPress PageBuilders. Users will see this in the first tutorial which describes the essential role of Oxygen templates. Given that there is no default page or post layout in Oxygen, mastering Templates is essential for getting started and getting the most out of the Oxygen Builder. So your first order of business is to build two templates – one for pages and a second for posts. But as you will see Oxygen’s template systems packs a powerful set of options for structuring all elements of your WordPress website:

The bottom line is that normally WordPress themes rely on template files placed in /wp-content/themes/ to display the content on your site. Oxygen simply provides a visual replacement for the normal WordPress template hierarchy, allowing you to design every part of your site visually, inside WordPress, without requiring a theme or any theme files. This provides an opportunity for broad and creative layout designs.

Now Oxygen has a Design Library that is the equivalent of Elementor or Beaver Builder templates. So this can be a source of confusion for users familiar with these popular PageBuilders. Templates in Oxygen are closer to the WordPress core meaning. Let see what Oxygen provides in its Design Sets for storing Oxygen assets:

As the tutorial shows, Oxygen provides a full set of website, page, and section code assets. These assets bring along template and block definitions. So Oxygen has import and export of code assets similar to other PageBuilders. Howver, how updates to the Design Libraries are treated – local or sysnced up with all uses of the Design Library assets is not clear.

But viewng these tutorials one can see how Oxygen presents a formidable learning curve to new users but tries to simplify that with the use of templates and prebuilt Design Sets This is the Design Kit approach taken by such PageBuilders as Divi 4 and another new entrant Brizy. The idea is to prebuild key UI component and whole sections and then allow the user to customize them to their individual needs.

Summary – Pros and Cons of Oxygen

Nearly a year ago, this reviewer did just that for a client curious about Oxygen. And since this user employed a lot of ACF-Advanced Custom Fields with scrolling animations/popups while planning to move to Gutenberg with the upcoming release of WordPress 5 – all areas that Oxygen 2 was new but shaky with. In effect, Caution was the word regarding Oxygen as tools like Beaver Builder and Visual Composer showed much better integration with ACF , scrolling effects and Gutenberg.

Then in mid-October of this year a Toronto WordPress Meetup attendee mentioned the Oxygen 3.0 release and asked for a quick review. And this is that review. After a quick trial this reviewer was impressed with the Oxygen 3.0’improvements. First Oxygen has vastly improved its Gutenberg connections and also has beefed up its ACF and Custom post integration. Finally scrolling animations are primetime ready.Second, the Theme building [or Oxygen templates] are equal to the the top PageBuilder features with Design Sets and many templating layout options. However, ease of use is problematic despite video enhanced documentation.The intricacies of setting up and properly using templates adds to Oxygen’s learning curve.

Third, the Styling capabilities of Oxygen are as good if not better than the Top PageBuilders; but again, ease of use and deployment falls down – notably in the ease of copying and pasting styles among sections and components. Fourth, the Oxygen components match most of the better PageBuilder components while having top of the line features for the Slider, Gallery and Easy Posts [portfolio of posts] components. In general, the excellent styling options help to buttress Oxygen’s Basic and Helper elements. Finally, there are a few more Responsive options but Divi and Elementor have content editing for different devices sizes.

Fifth, in scrolling animations/effects, modal objects, and parallax effects, Oxygen leads in the first two while being behind in the latter. Sixth, in runtime performance Oxygen has built a case for superior runtime speed, less memory required, and better response time than all the other major PageBuilders. Readers will have to wait for a second performance review in which we shall attempt to confirm the runtime performance. However, a caution is due. Running Sofly Sandbox cloud machine, the admin interface was subject to 4-10 second waits for major transitions. So this reviewer is still from Missouri on Oxygen performance.

Seventh, there is no doubt about the price and value. Oxygen is delivering a true ThemeBuilder which matches if not exceeds the top PageBuilders like Beaver Bulder, Divi, Elelmentor and others but at a bargain price – $99/US for unlimited websites and unlimited lifetime updates. Buy the WooCommerce and Gutenberg addons and the package is prices tat $169US [but this is a limited-time discount from the regular price of $249US]. Only Divi has an equivalent unlimited websites and lifetime updates and support offer of $249US.

So th bottom line is that Oxygen has leaped into the top tier of WordPress PageBuilders. But Oxygen is not for newbies to WordPress and PageBuilders – Oxygen is definitely “coding savvy required, especially CSS.”. Even pro developers will have a large learning curve because of 1)Oxygen’s abandoning traditional WordPress tools like theme and the Customizer; 2)lack of default getting started website layouts, and 3)getting used to the layout and workflow of Oxygen’s builder screens and popup tools. Potential buyers are encouraged to use Oxygen’s trial sandbox where a complete copy of Oxygen in WordPress is open for testing for 7days. Be sure to checkout the solid video+ text getting started documentation here.