Con, Pros, And Need To Knows When Building A Website With Oxygen

hi this is david mccann for web tng this video is meant for people who are considering oxygen for sight building oxygen is not like most builders as it is both more involved and more powerful in a companion video i created an oxygen site from scratch so that people could see the process and what was involved in this one i'm providing my assessments of the cons pros and need to knows when building a site with oxygen so now let's look at the pros the first one is that oxygen has a really feature rich editor it's a combination of a code editor and a visual builder and it lets you work on all the levels from pre-design content all the way down to the php in a balanced clear and logical way this is what helps to make oxygen unique in the wordpress space and it's very appealing to many site builders let me show you what i mean about the different levels so for example here are the design libraries these are full sites you know several pages and they are sections as well they're available within the oxygen library you can go here to design sets and here are all of the design sets and you can include elements of those you can include them as sections pages or full sites so comes with a lot of pre-made content you also have all of these elements there are i don't know maybe around 50 of them and each of these has some primary settings which are different based on the element and then a big set of advanced settings and these advanced settings are pretty standardized across all of the elements these help you to layout and design your site you know these are kinds of things that are analogous to gutenberg blocks or elementor widgets or beaver builder modules okay then we also have these types of settings here like the colors fonts headings body text these more or less global settings oxygen exposes to you the ids or classes you can easily add classes oxygen has a selector manager for managing these here are the different classes and you can manage them in oxygen then oxygen also exposes the html and php directly where you can edit them oxygen also exposes wordpress dynamic tags such as those related to the post to feature image author current user site information archive information and here's an option for advanced return value from a php function oxygen also has a code block where you can add php and html directly you can add css and javascript so it is possible to add for example php into elementor or beaver builder for instance but those are pretty advanced and they might like in elementor's case require third-party add-ons so my point is that within the editor you can work with all these different levels from pre-designed content right down to the php html css and javascript and it's all pretty balanced it's all integrated together and you're working with those in a visual editor so i think that this powerful editor is one of the main features of oxygen now another powerful feature of oxygen is its theme builder where you can create templates and oxygen has the ability to inherit from base templates and it has the ability to set a template priority if you have multiple templates that might apply to the same content and this kind of thing where you can assign the template to different post types and to single and archives and special types of pages that's not that uncommon elementor pro and beaver themer have something similar but the oxygen theme builder is probably more powerful than those because you're building the templates with the oxygen editor so another strong feature of oxygen is the easy posts element this is what you use to create your post listings and all builders have some post listing ability often they're predefined widgets that have some range of features but oxygens is really the most comprehensive that i've seen so here's the easy posts widget here note we can go into the query we can use the default query we can customize the query by post type we can add filtering order and count or we can even go in and edit the query parameters manually you have style for title meta content read more and responsive options that's probably pretty standard but then you also have templates and you can go into the php template and this for example if you wanted to add a custom field to your archive it's very trivial to do that with oxygen and then you also have a template for your css for the easy posts element with some builders you might have three or four different post listing options oxygen comes with 15 presets and the cool thing about these is when you choose say grid image with title overlay and then you go into the template for that or the style sheet for that you're actually editing the style sheet or the template for this view i've noticed that for example beaver themer lets you go in and edit the code to create a post listing however when you click to go into that edit mode it reverts to its default so you don't have as much of a head start as you have with the oxygen easy posts element and this is something that i really like a lot about oxygen another feature of oxygen that is very powerful is that you can set display conditions for any element and you access those here on this condition settings button you can have and or or conditions and then this is for the editor sometimes you might want to show things that are hidden so that you can do the layout but then when you go and set your conditions and you have a very big list of possible triggers that you can use in your display conditions so that's pretty powerful there as well i mentioned it when talking about the editor but it bears mentioning again that oxygen has good support for working with dynamic data you can insert dynamic data here using one of these elements or as i showed before you can insert it here into a text element this ability to work with dynamic data and to insert dynamic data based on a php function return value or based on wordpress functions or php code that you add yourself and incorporate that directly into your templates i think that's a strong feature also here's the oxygen website where they talk about dynamic data oxygen has very strong support for advanced custom fields and also supports tool set another very favorable feature of oxygen is that outputs very clean code so that page sizes are optimized and lightweight in fact i think the output of oxygen is probably the closest to what you'd get to a hand-coded site of any of the major wordpress page builders beaver builder is probably the second in this regard but brizzy and divi and elementor the way that they achieve their enhanced design output is by layering the content in a large number of html div elements performance is obviously a priority to the oxygen team i'm looking here at oxygen's own comparison between itself and elementor beaver builder and divi and if we look at this asset size just as an example the oxygen output is just over 295 kilobytes while elementor is 1.5 megabytes and then beaver builder is 444 kilobytes and divi is 1.7 megabytes and you see something similar when you look at the number of requests to the website 12 for oxygen 39 for elementor 16 for beaver builder and 20 for divi obviously it's possible for someone to build a poor performing website with oxygen and on the other hand it's also possible to use a lot of caching tools and mimification and other techniques to make elementor brizzy or divi perform well so it's not and be all end-all but it is the foundation that you're starting with and so it's obvious that this is another strong feature of oxygen another pro of oxygen is that the third-party add-ons ecosystem has started to bloom i noticed it's really picking up about a year ago there are add-ons that add elements that enhance the editor that offer design sets and other features most of these contributions are from solopreneurs or small shops here are a few sites for example just a small number of sites that are offering oxygen add-ons here's hydrogen pack here's oxy power pack here's oxy extras here's oxi ultimate and here's oxy toolbox there is a growing third-party add-on ecosystem and i see that as pointing to the strength and enthusiasm in the community and then there are a couple of other features of oxygen that are worth mentioning oxygen has a gutenberg add-on that allows you to use oxygen to create gutenberg blocks so that's very interesting oxygen also has a woocommerce add-on that allows you to work with all of the elements of woocommerce and then oxygen has just released a preview of their own elements library where they're adding elements like an accordion a slider a flip box icon button mega menu hover scroll image table of contents etc and these are the kinds of things that you get in add-on packs with other builders the first con i want to look at is that some common theme features are missing oxygen disables the wordpress theme and you're required to create the theme parts or import pre-made ones from the design library this is different than the theme building functionality of most page builders like elementor pro or beaver themer as they allow you to create templates as needed so you can use a mix of theme and user created templates there's nothing wrong with the approach that oxygen uses but themes provide many features that we may take for granted there are two features provided by themes that i noticed that were missing in oxygen sidebars and what i'm calling safety styles here is an oxygen site and you can see that oxygen has disabled the theme note that there's no widget area showing that's because the widget menu item only shows when a widget area has been defined like the sidebar there are some simple plugins and code snippets available for creating sidebars and for that reason the missing feature doesn't really stop you however sidebars are nothing more than widget locations and the ability to create widget locations seems like it would be useful and easy feature to add now what i'm calling missing safety styles is more serious all good wordpress themes contain styles for making images responsive for handling typical content that may overflow or break content containers and for common widgets and gutenberg blocks it's part of the accumulated knowledge of accomplished theme authors and many site builders used to using high quality themes also take this functionality for granted oxygen replaces the theme but it does not provide these safety styles i'm sure that a good argument can be made that this is not oxygen's job however the result of the missing safety styles is that every new oxygen user has to go through a fire drill when their site breaks i think the most common of these safety styles should be included in oxygen even if only as an option let me show you an example of that here and i'm going to inspect this page in the chrome dev tools and so watch what happens as i make the browser size smaller you see there's a point where it breaks the image isn't responsive it doesn't resize with the size of the browser window and it pushes out the side of the page creating some white space beside the header styles to handle these types of issues are common features of a good theme oxygen has style sheets that apply site-wide but they can only be edited from within the oxygen editor when you're cleaning up and testing your site you find a number of small things that need to be tweaked navigating to the oxygen templates menu opening a template for editing loading the editor and opening the style sheet is time consuming and cumbersome it would be nice to be able to quickly edit the universal style sheet without opening the full oxygen editor let me show you what i mean so here we are testing our site we found an issue and we want to add styles to fix it so what we would do is we go back to the dashboard we go to oxygen templates we go to the template we go to manage we go to stylesheets we pick our style sheet and then we add our styles i think it'd be nice to have a link to the universal style sheet available directly another gotcha that i've seen was first mentioned by alan smiles in the dynamic wordpress group and i experienced it firsthand let's go open a template so we're here in the editor looking at the template let's add a link wrapper this is the kind of element that you might put for example around an image when you want to have a link to it and then you go and you say okay i'm going to paste in the url to go to everything looks good right well actually look oxygen left this part of the url in the placeholder so you have to go manually delete that a lot of tools when you click in to edit the placeholder text gets deleted out automatically here let me show you another example let me add a section here and then in that section add a text widget so i double click to edit and the cursor goes inside see how i like selected and it didn't keep the selection i mean what you have to do is you have to double click and then delete it out and then type in your text so anyway i think that's a little cumbersome and it's something that could be improved on the next thing that i wanted to point out is that global styles are not really global site-wide and this is a pet peeve of mine it's not limited to oxygen many builders themes or add-ons describe their features as being global but what they really mean is that the feature is available tool wide in this case for example the oxygen global colors are available in the color palette within oxygen or they're not available in gutenberg so here's a new gutenberg post and if we look at the color palette here it has nothing to do with the color palette and oxygen and having the color palette truly be site-wide makes it easier to keep your brand and color consistency so there are community contributed scripts that will copy the oxygen colors into gutenberg but oxygen has a gutenberg add-on and i think it would be nice if at least when that add-on was active that the oxygen color palette would be active in gutenberg also to make it truly more global now another thing to point out is if we go look at the settings you'll notice that oxygen provides the free version of awesome and a set of linear icons as svg sets and the really nice thing about svg icons is that you can resize them and no matter what size they are they'll maintain a nice crisp resolution however if you want to work with these svg sets you're limited to using the elements that come with oxygen so to go back to the editor here we type in icon we see that oxygen offers us an icon box an icon itself and social icons but you're not able to use these svg icons for example in your menu or in line when you install font awesome as an icon font on the other hand you are able to use the icons in your menus or in line so this is perhaps just a small inconvenience but something i noticed because at one point i wanted to add icons in with the menu so we've looked at the pros and cons now let's look at the need to knows or the things that i think it's important to keep in mind when deciding if oxygen is a good fit number one it's an advanced editor for power users builders like brizzy divi and elementor purposefully hide the code from view and that makes it harder to achieve some of the advanced functionality oxygen on the other hand is targeted towards users who are comfortable seeing some code and don't shy away from it it doesn't mean you need to be a programmer but a bit of wordpress php and some css can go a long way because you can access the code some of the harder functionality is in easier reach number two you're taking responsibility for the theme with oxygen you use an advanced tool and play the role of the theme author you also need to bring some design skills or make intelligent use of the design library or third-party design assets you'll need to deal with some of the small glitches like browser differences or the mobile display of menus and embeds so i imagine it's a good to plan for more testing number three theme builder versus page builder you can use oxygen as a theme builder or a page builder in this video i've talked about it as a theme builder oxygen uses short codes like divi and if you move away from a builder that uses short codes then there could be cleanup of your content that issues probably been blown a little out of proportion especially if you just use the builder for some standard pages however if there are many content pages built using a short code builder then the cleanup could be significant so for that reason i recommend using oxygen as a theme builder and suggest that people use gutenberg as much as possible for their posts and pages the last thing i think you need to think about when deciding if oxygen is a good fit is the future of oxygen so fly the company behind oxygen does not have a road map and they generally don't discuss the long-term plans there's a strong rumor that oxygen version 4 is being rebuilt in vue.js which would be great enhancement and allow the team to overcome some of the limitations of the current architecture however it was mentioned that when oxygen moved from version 1 to version 2 there was no backward compatibility though users were given a license to the new version and the old version was still supported i didn't really think about that much until i saw someone mention that we don't know if version 4 will be backwards compatible if it's not and you want to upgrade then you need to recreate your templates by way of conclusion let's talk about who oxygen is for as we've seen it's not for new site builders it has a steeper learning curve you're going to get the most out of oxygen if you're willing to work with code at least a little bit if you've been making wordpress sites for a while then you're very likely a power user and have the background you need for using oxygen if you're not afraid to see a little code you can free up some time and you're interested in oxygen then i suggest that you give it a try it'll take a few days to get a good feel for it believe in yourself and also join some of the good oxygen centered groups on facebook such as the official oxygen group and the wp dev design group there are now tons of online resources as well i don't think you'll get stuck of course that doesn't necessarily mean that you'll come to prefer oxygen but you shouldn't worry that it will defeat you even if you don't switch to using oxygen as your regular go-to solution there may be circumstances where it makes sense one place where oxygen could be a good fit for people who regularly use other builders is when a project calls for a bespoke design with custom functionality that relies on dynamic data these are sites that back in the day would have required a custom theme with custom coding they have application like functionality it's not uncommon to see page builder users who need application-like functionality beyond what their builder or even add-ons make available and in these cases oxygen may provide more flexibility will i be switching to oxygen i've made one site with oxygen that i plan to build out and i want to use oxygen with custom post types and custom fields and create some more complex templates i'm also very interested in gutenberg and want to see how oxygen works with it so i plan to continue my oxygen exploration i don't intend to convert any of my other sites to oxygen at this time but after working further with oxygen i might consider it in some cases so when you look at the cons that i talked about it's pretty clear that there are mainly convenience issues now compare the cons to the pros and the power and significance of the pros far outweigh those inconveniences a lot of people are wondering if they should be using oxygen does it make sense for you i hope this discussion helps you understand oxygen better and make that determination there's a text version of this video available on the web tng website along with other resources and walkthroughs i hope you found this video useful thank you for watching

Channel: David McCan

Views: 7,052

Keywords: oxygen, oxygen tutorials, oxygen builder, page builder, wordpress, webtng

Id: evJSwMdbjxg

Length: 26min 33sec (1593 seconds)

Published: Sat Jan 16 2021