How far has Oxygen Builder come in 4 years?

hey everybody welcome back to another permaslug episode my name is jonathan and today is a pretty special day for me it is november 1st 2020 and this is my four-year oxygen anniversary as i'm calling it and what that means is it is exactly four years to the day since i purchased oxygen now when i bought it it was actually oxygen version 1.1 which is pretty amazing because i bought it then and i've gotten all the future updates ever since then and i've never paid more than i paid back then which is kind of incredible to be honest one thing is that i know there's a lot of debate that has taken place i've witnessed a lot of it and probably many times i haven't seen it as to whether oxygen as a company can survive based on that model and clearly they can because the group is growing you know the community is growing at a regular pace quite frequently so what you're looking at right here is the oxygen app website and this is the former oxygen site and you can kind of see a preview of the layout on that site which interestingly this site is still up although there's this huge red banner at the top that says this is out of date come to the oxygenbuilder.com site and i just wanted to basically open with this so you can kind of get a feel for what the point of this video is and that is to walk you through some of the differences based on oxygen back then versus oxygen now in terms of my own use case i discovered oxygen because i had a really particular need at that time a client who came to me with a completed mock-up that wasn't uh you know something that i had consulted on they basically got it produced with somebody else who really wasn't a web designer and in any sense they were a print designer and what i had to to basically accomplish was how do i build this site in such a way that when something changes like you know as you can see here in that left-hand sidebar that i don't then have to go to all i think it was 12 pages on the site and make changes to all of the sidebars i just knew that if i built that in something like wp bakery or beaver builder or whatever else i just knew if i built it in that software that there was no way i was going to be able to stay sane having to make changes you know 12 times then the client doesn't like it and i got to go back and change it again 12 more times for simple things like you know business hours change or something like that in that example you saw on that left-hand sidebar i'd have things like the phone number like average service call price like hours of operation and so on something that if you needed changed in one spot it had to change everywhere else i kind of stumbled on oxygen by accident because i was a wp all-import customer and i got an email from lewis announcing oxygen version 1.1 and i went ahead and bought it that same day i just knew that that was the software that i was looking for and there was a lot of challenges that i didn't know i was going to face but ultimately it allowed me to build that site back then and i was very very inexperienced at that time i still don't consider myself a developer i'm more of a web designer but i at least have a lot more experience now than i did back then and even then i was able to fumble through it just enough to build that site how i needed to so the first thing i want to do is jump right into the oxygen version 1.4.3 interface and as you can see it looks fairly familiar version 143 i'm pretty sure was the final oxygen version before the team disappeared for a while and was working on 2.0 nobody really knew where they actually went and i don't think the community was big enough really back then to care where they were and then suddenly they re-emerged with 2.0 and it completely you know flipped the script for me personally and i'm sure lots of people and now everyone watching this video of course so it's really interesting because if we look at kind of the screen as it is right now and we were to move over into the oxygen builder editor for the current version which is 3.5 you can see it looks reasonably similar so there's a lot of similarities you got the add button you have your save the structure panel looks pretty familiar if we look at that side by side you can see the dom tree basically just the structure panel is right there you have your style sheets and your selectors those little tabs which is pretty interesting in the current version you would have to go to manage and then there's those other options as you can see let's take a look at the settings tab real quick here and let's go to page settings so we have a couple of things you know you have your page width which is basically inherited from your global width if you haven't already set that you have the overlay header for this particular page whether you want you know whatever options for the overlay header you want animate on scroll so if you have like hash links or you want to create animations as you scroll you can do that and then the scripts is the smooth scroll so if you have like a single page site with hash links in the menu and it scrolls you down smoothly instead of just instantly jumping to the content so you know not really a whole lot of page settings but if we look at oxygen over here and we were to go to the settings tab first of all the editor is across the top instead of the left left-hand side you know your your editing tools are across the top which is really weird and then your page settings there's one option it's page width so it's really interesting in this particular case i'm editing the home page of this site so i haven't set a page width in like a global template but it is just by default at 11 20 pixels now the global settings even more interestingly to me again i'm just editing a page but still you only have your fonts for this particular site which is pretty interesting if i were to go back over here and choose global styles there's tons of stuff that doesn't exist back then you have global colors amazing feature couldn't live without that fonts basically the same thing setting all of your default font weights sizes colors line heights all that for every you know h1 through six all the way down that's a pretty useful tool body text that's another pretty useful tool links changing link colors all of that kind of stuff i'll give you an example of setting the global link color and why that would matter especially if you're not somebody that knows css then what else we have defining custom widths and your break points here so your page width you can change and then sections setting your default container padding animate on scroll once again and scripts are the same thing so i won't jump into those but you can see that there's a pretty hefty set of global styles even when you're just editing a page because of the fact that global styles are truly global for templates and pages and everything so going back here of course your global settings are only two settings effectively now moving into what you would actually care about if you came to this site as a user and you're trying to build some content so you would hit add first thing you'd probably do is pop in a section and immediately you can tell it looks quite a bit different the structure pane looks effectively similar just a little less crisp but you can see you have your ability to edit the you know the id of the element then you can also add a class so you know like main section or whatever you wanted to call it so perhaps if you got really experienced with oxygen back then you could have set a class and then defined the padding for that given section and just duplicated that across your site but it's just those little nuances in the new version of oxygen or the latest version of oxygen i should say that you didn't have to you just don't have to worry about but back then you would have had to find some work around for so in terms of the id for this section the container is set to page with you have full width and custom just like you have in basically every builder you also have your alignment options but there's no flexbox so this stuff is not based on flexbox like the current oxygen version is which is just a fundamental tool for me to be able to lay out sections and not have to involve any kind of custom code or worry about things like float left and right gosh that stuff is such a nightmare to me even still so if you were to click on the more option this brings up the advanced settings tab as you can see and this is where it starts to become somewhat familiar so you have all of your options here to change like you know the section background color set images background position kind of replication options position and size you can change the container padding to like 75 pixels all the way around you can change the typography of a given section which is pretty cool you know you have all the default stuff like borders css and js but you'll notice you're missing the effects option so if i were to go in and add a section over here there are some things missing so your effects option is missing attributes is another one that of course just recently came out in oxygen but still wasn't present back then and the effects have tons of options in here box shadow and transition are ones i use quite frequently so the effects tab as a whole of course just didn't exist back then let's go ahead and add an element into our page here so this stuff looks fairly familiar as you can see what's really interesting is whenever i'm in the the current oxygen builder version i know exactly where to whip my mouse to whatever element it is that i'm looking for and i have to fumble around a little bit with this of course just because it's not familiar but it's funny to me how used to layouts and uis you get when you spend every single every single day in it like i do so i'm going to go ahead and add in a heading element here and i'm just going to change this to something else like this is a headline you'll notice that you have all of these formatting options that are just there every time you click on the the content of the heading whenever you go to change the text that all pops up that actually is really similar in the current version of oxygen too except it doesn't pop up right above your content it pops up up here which is one of those little things that i didn't realize that i liked better you know this way until i saw it kind of side by side because if you have something behind it that you need to be able to see of course that's hidden with this stuff right here but in the current version of oxygen it's up at the top which is pretty nice i'm going to write the same thing this is a headline we'll jump back over to the 143 editor real quick and let's add in like an image element it behaves pretty much the same way with the placeholder url with that image in there and then you can set the widths there's a lot of stuff that's similar like if you were to add an image in the current version of oxygen you do have the width and the height attributes kind of ready for you right there in your left hand sidebar so lots of the stuff you can see is very familiar then as it is now i'm going to go ahead and add in another heading element here just for the sake of example and let's say i want to take this heading and i want to move it up top here now of course you could just in your structure pane drag it but one thing that i got really used to that i didn't realize i use all that often was the ability to click and drag so if i wanted to take this heading element and move it move it up you just can't do it you can't do it in 143. like let's say i want to take this image and move it above the headline you can't do it drag and drop didn't exist back then which is crazy so let's go ahead and add in another image element real quick and we'll pop in another heading and of course sure enough i can just take this and i can just pop it right there on top again you can just use the structure panel to move your content around which works perfectly fine both then and now but the point is that drag and drop is not something that i realized i used all that much until it wasn't available like most things in life another thing that didn't exist then that does now is the ability to add margin to content with this little purple kind of i call it a slider down there this little purple element that pops up when you hover over like this heading you can just add margin by dragging that little purple box and then if i go into the heading i added 123 pixels of margin to that element just with a simple click and drag and you can see it kind of updates for you like that now if i wanted to add that margin to one of these headlines of course that little purple box doesn't show up interestingly that content overlaps which i find kind of funny but you'd have to go to more see position and size margin and then 50 pixels which you know it's not that big of a deal but it's one of those little nuances that again i didn't realize i used all that much until it wasn't available now another thing that i really struggled with back in oxygen 143 was not having flexbox and i didn't really know that i wanted it back then i had no idea what it was until oxygen 2.0 came out and really what that would enable you to do is let's say you want to have this content kind of all three uh stacked horizontally instead of them stacked vertically like this so in the current version of oxygen i would just basically take this section and i would change the horizontal alignment to stack like that then you'd probably set your your image width to i don't know like 250 pixels or something and you can see your content is sort of aligned like that this of course doesn't look very good but the point here is just how easy it is to change the structure of the content then of course you have all these other alignment tools like stretch and you have middle bottom top you can go space between space around all these other options that exist that have such a massive difference to your workflow especially if you're not someone that knows css and php moving back over here if i wanted to do that same thing be perfectly honest i don't even know how you would go about doing that so let's see i guess you would take this heading maybe float left you just set them all to float left is that what you would do image float left uh even then it doesn't really quite work what if i change this to just be something shorter yeah okay so there you go you have to kind of consider the content and how it stretches i don't know if that's actually the right way to do it but see that's exactly what i was having to do on that client project back then was just fumble around and just click stuff until everything kind of worked how i wanted it to and sure enough it it eventually worked i eventually kind of beat it with a stick enough until it sort of made the site that i wanted it to make but it was probably to someone who knew what they were doing just an absolute nightmare one thing that i found really funny is if you go to add you go to components let's pop in this header there's this header style 3 right here i'm going to add this component to the page and this works you know perfectly fine funny enough whatever server this image lived on didn't uh didn't see it through so i guess that image is missing whatever it was i don't know i guess it was the oxygen logo probably but what i noticed that's really interesting is first of all you can find this exact layout in the oxygen design sets which i mean there's no problem with reusing that i just found it kind of interesting but if you click on an element in here this left hand side bar doesn't go away it's super odd and now if i wanted to kind of edit some content i gotta i have to go click the more option here and then it goes away so just a weird little quirk which makes me think about the fact that i don't like the way this pushes my content up and down so that has to be why the sidebar is kind of on the left side instead of it being vertical like it was and 143 this is definitely the correct way to do it because this content moving up and down is super annoying your whole structure panel moves which i never noticed until just now in any case i wanted to primarily just show you that this heading is just a section there's an image right here and its alignment is the position of float left then you have this div here that position is float right inside of that div you have this left one that has the phone number you have another div that has all of these link wrappers in here so this is something that you could definitely achieve in the new version of oxygen but look at this like the display changes to inline block on this one whereas this has a display of block and a float of right like i would never i would never ever ever have known how to build something like this back then i just couldn't even conceive of even honestly doing that now but something like this would be so well i shouldn't say so simple that something like this would be totally possible in the current version of oxygen with no code whatsoever just to show you that this does actually exist i wanted to go over here and let's go to add under the library in atomic we go to sections and elements and headers see i think it's this one right here so it like popped itself inside of this section but yeah there it is right there so that's pretty much the same thing in fact it's nearly identical except for the colors and i guess the icons are a little bit different but anyway the point remains i just found that funny that that exact heading kind of exists there and it also exists now another really key component that is missing in the old version of oxygen is dynamic data so if you're not familiar with that what i would do is double click this headline and you have this new option up here that says insert data when you click on that you're presented with a bunch of dynamic data that you can throw in the page and you would typically do this on like a template for your pages or your posts to automatically pull in the post title so that way you don't have to go to every single post and add the title manually now of course you'd probably want this to be kind of at the top of your content so i'll bump that up to the top of the section right there i'm going to get rid of this image and then add some margin underneath that now i also have an advanced custom field on here just a simple text field and it's called subtitle and if i double click this go to insert data click on advanced custom field and the page subtitle whatever i have in the backend for this particular page is going to pull in here automatically for me let me just show you real quick what that looks like you can see i have this extra page field called premise lug rocks and sure enough that pulls in there automatically you would of course probably make this a little bit smaller if it were actually a subtitle and maybe a little lighter font weight something like that so of course a very rudimentary example but if i wanted to achieve the same thing over here in the old version of oxygen i would basically have to either know the code and know that there's a way to type php the title and then it automatically pops that in for you you'd have to add the code block and know the code and even know that that's possible because i didn't know that that was possible back then some of you guys are probably laughing like oh my gosh i can't believe you didn't know that but it's true and then also with the case of an acf subtitle once again adding in an acf field especially just a simple text field is super simple you know the field then basically the field name and it pops in but again you'd have to know that that's possible you'd have to add a code block and manually type it in then you'd have to add a class to it and style it basically using css that's just a heck of a lot more work than it is in the current version of oxygen because i pulled in that ecf field here i can then change the text color to whatever i want you know you saw me change the styling just in real time super super simple and that would apply to anywhere in that template you know across my entire site so this is an example where i had to have that kind of template functionality on that that you know example client site that i had from years past where if i had had to do something like that in wp bakery first of all the template functionality really didn't exist but i would have gone insane making those those changes all the time especially during kind of that like client feedback proofing round i probably would have just never finished the project one thing that i find really interesting is let's say i'm working on a heading and for whatever reason i want to set a background color on it and i wanted to make it some sort of dark color like that if i went to this heading and wanted to do the same thing it puts me back on the primary tab the advanced background background color i could go do it you know i just have to go back to that element and kind of dig for it whereas in the old version of oxygen if i went to more i went to background and color and changed that then i click on this heading it keeps the state of what i was just working in you know whatever option you have here so just to take this example a little further let me click on borders i'm going to add a color of red set that to a size of one solid and you can see there's that border red then if i click on this it keeps me in the borders tab red size 1 and sure enough it's got that border for me i wish that the current live version of oxygen did that where it kind of kept the state of whatever tab you are working on so like effects if i wanted to add like a transition effect to this heading for whatever reason i could do that and then here i'd have to go advanced effects transition so on which you know it's not that big of a deal it's like two clicks but when you're doing this all the time every single day that time starts to add up and it could be something as simple as a toggle on and off do you want it to maintain your state or whatever however you would work that just something like a toggle on and off in oxygen settings would be beautiful but unfortunately that does not exist another element that is really really useful in oxygen is even just the basic menu element and also the search function of course when you add in the old version of oxygen there's no search and for a long time there actually wasn't up until i don't know what it was somewhat recently i can't remember exactly what version but they introduced this search function to pull up the elements for you so this menu element makes it really easy to pull in a wordpress menu so i have one on this site just called main menu i can style it however i want and any changes i make in the back end you know under appearance and menus and wordpress is reflected anywhere this menu component kind of exists on the page which is super handy for someone like me who basically knew no css at that time you would go you know change the text color here and then let's say your hover color you want to be i don't know we'll do our atomic green and then for our active color let's just set it to like a bluish color like that so you can kind of see there's a little difference in color on that homepage and since that's the one we're working on if i wanted to build that on this site over here good lord the section looks terrible i want to delete that i'm going to add in a new one here go all the way back to my section and then let's go to add you'd have to go to wordpress because there's no menu component and then under widgets and then you could go navigation menu then it's like well you know what do i do from here you'd have to go to edit widget select the menu on the site and apply that it does bring in your links like that but it's super super basic so what would you do you know you'd go to more you would go to let's say like typography color and you change it and it's not changing the link color because it's you know not designed to change a links it's changing the bullet colors there you'd have to then know the css to change the you know basically the a-link color of this particular id and again it was just one of those little things that you kind of fumble through i mentioned earlier showing you where changing that link color in the new oxygen settings would really benefit you and this is a case where that would absolutely benefit you maybe there's another way to do it that i didn't explore or never came across but even in all of these components you know there's no dynamic header in any of these so you would have to use some sort of other plugin or you know basically just hand code it which was pretty much a non-option for me back then another fantastic function in the current version of oxygen is the easy post and the repeater so let's say you wanted to show a list of all of the posts across your site you would add the easy post element you would go to query custom and then anything in like the post post type for like let's say blogs you could then have that automatically pull in here while that's totally possible to do with php and css that's pretty much not something that you could do in the old version of oxygen without using some of the components so let's go to content let me see if there's a blog section in here it doesn't look like there's one in that particular section so where else would it be pricing video tutorials wordpress content social proof miscellaneous buttons no it doesn't look like there's anything that would allow you to just pop in some sort of pre-built element it's kind of what i was looking for to see if there was something that at least had a little bit of a framework for you but it doesn't look like there was video tutorials components no this is something i'm doing in real time hoping that there's something here so wordpress basics maybe maybe we're onto something here blog post in full so that would be like your singular post template so let's add that in how does this look okay so this right here is the post title so this is just a div that has been renamed to post titles and if i highlight this then i click on code editor this is actually a code block and you can see the title has been manually coded in there with that there's also a class so you would have to know to activate that selector for css changes unless it's been done in here which it has not as you can see the styling wasn't done in the oxygen editor here so this has all been hand coded so if you wanted to make a change to this it would be very difficult if you didn't know how to do that using php and css whereas in the current version of oxygen easy post is not the best example because it does require you to still know how to modify the php and css templates but you can just use the repeater element and more or less do the same thing and just design it yourself so the repeater you would go query custom post type is just post and then you would pop in like go all the way back to our basics you pop in a heading and then insert data you would go post title and bam now you have the post titles then you would add in an image element you would use your insert dynamic data function right here to insert the posts featured image like that and voila that obviously doesn't look very good you would want to shrink that up very significantly but the point remains that then you could do that another thing that would be nearly impossible if you didn't know how to code back then would be making a link to this particular post so let's just add in like a text link here and i'm just going to make this text link say read more then for the url all you have to do is insert data permalink there you go now you have a clickable link to that particular post without any custom code at all again pretty much inconceivable to build something like that without code in the old version of oxygen another thing that i find really fascinating is back then i submitted a couple support tickets and in basically every case lewis was the one that responded to me directly so back then he was part of the team answering support tickets and it very well may have only been him at that time now you would basically never get a support response from lewis there's a fantastic support team which i think is still relatively small he absolutely knocks it out of the park but the the whole support system is just really good there also used to be a forum on the oxygen site which is long gone and there also used to be a slack group i think it or maybe it was discord i think it was slack and that has basically died on the vine but the facebook group has 17 000 members which is pretty incredible lots of really cool stuff happens in there so my point with making this is just to show you how far oxygen has come in the last couple of years i'm really glad to be a part of this ecosystem and i hope you guys enjoy using oxygen if it's something new for you i hope it's as transformational for you as it was for me it literally helped me double my business just with no other changes all i did was basically bet the house on oxygen and build everything every client project even my own stuff in oxygen and i could basically never go back to any other builder thank you so much for watching this video if you have other suggestions for content please don't hesitate to reach out to me via my website at premislug.com or leave a comment because i do often read them and i will see you guys in a future video

Channel: Permaslug

Views: 1,612

Keywords: oxygen builder

Id: WtTSJdYVRZ4

Length: 25min 27sec (1527 seconds)

Published: Sun Nov 01 2020