Must Have Oxygen Builder Addons

hey everybody welcome back to another premise lug episode my name is jonathan and today we're going to be covering what i consider the must-have add-ons when you're working with oxygen builder and also just for general website design now a number of these products are specific to oxygen builder but a few of them aren't but if you do use oxygen every single one of these are going to benefit you almost all of them except one are a paid product and none of these are sponsored placements so all of what you're going to see in in today's video i purchased myself many of them i use extensively there are affiliate links in the description below so if you enjoy any of this please consider using my link i do greatly appreciate it now the video here is going to deviate just a little bit from the written format of the post which is what you're looking at on the screen here so if you want to read my thoughts in maybe a little bit more detail or a slightly different angle then you can read the post but this video we're going to cover what i'm actually talking about in that written post so you can see it a little bit more clearly now we're going to go slightly out of order but we're going to cover the exact same things there won't be any differences between the written and the video here now first of all we're going to cover the hoverify chrome extension and there's actually a firefox version as well so if we click over here you can see i have the hoverify extension now the main component of this is the inspect functionality and just quickly i wanted to mention that a lot of the stuff i do have individual videos on so quite a few of them i already have reviews and walkthroughs a few of them i don't but if you're interested in something i'm missing let me know and i'll be happy to consider adding that in the future now hoverify is really cool because it's like the chrome inspect functionality but to me it's a bit easier and a bit more visual so it's more friendly if i click on inspect then you can see immediately anything i put my mouse over i have the ability to see all of the styling and layout information at a glance now if i go ahead and click on something let's say like this section right here then i can see everything about this section in terms of its size and styling every bit of css you could ever want to know is right here if there are multiple media queries you would see those down here scrolling back up i could click on the color for the background it tells me this section's class it tells me its height and width which is pretty amazing and then if i wanted to i could even open this in a codepen so if i click on this then what it's going to do is bring in the html and the css layout for this particular section which is pretty neat so if you want to start modifying things you can certainly do that now the other really cool thing is that you also have this gridline feature so you can see exactly how a website is laid out this is really beneficial if you like a layout but you're not quite sure how they achieved it you can kind of get a sense with these grid lines as to how they did that which is pretty neat you can of course move this toolbar around so if you find that it's better in one place you want it you know kind of over here in the middle of the screen then you can certainly have that the other cool thing is if you click on this little b you get every font used across the entire site on my site here things are pretty consistent you also get this edit pencil so you can start changing things to prima slug is the best or you know whatever something like that and then you also have a total color palette too so every color used across this site you could go ahead and just click it and it copies to your clipboard which is super awesome you also have the ability to delete elements or hide them entirely so if i wanted to remove this entire section i can totally do that and then you also have the search functionality so if you know the name of an id or a class you can go ahead and just type that in so this extension keeps getting better too because what we just did was only the stuff that was in the inspect tab you also have the color eyedropper so you can pick a specific color off the page you have this really nice kind of targeting functionality which makes it super easy to pick a particular page which was nearly impossible with the other eyedropper tool i had before this and you can see it gives you the hex and the rgb color in real time you simply just click it and then that little window stays here for you to be able to copy this one click copy for both the rgb and the hex color as you can see going back over into the main menu here we also have the assets function so this is going to show you every image on the page and i can go ahead and click the little download or i can choose the save all and of course it's going to save every image on the page for me the next thing we have is the responsive options so you can take a look at your website on a bunch of different screen sizes which is super handy and then last but not least you also have the take screenshot so you can do full page visible area or all tabs which is pretty awesome the full page is pretty cool for like a portfolio if you wanted to have a full-size screenshot to showcase a site that you built and that pretty much covers hoverify so it's extremely powerful again there's a lot more to it that we could sit there and go into for a long time but that is probably one of the coolest browser extensions that i've ever used now next up we have hydrogen pack and this one is oxygen builder specific but it adds a ton of functionality that you probably are not going to be able to live without once you have hydrogen pack installed so the main things that adds are a right-click menu you also have a clipboard for copy and paste you have a bunch of other options like keyboard shortcuts which are incredibly powerful you can see that these can be bound to basically anything ctrl alt shift and then the key itself to make your own keybinds but a lot of these right out of the box make complete and total sense so what i've done already is go ahead and just open up the oxygen editor here and if i just hit shift s then it adds a section if i do shift d it adds a div if i do shift i it's an image shift v for video you can see it just makes adding elements to the page extremely easy but it also has a lot of other really cool things so one of my favorite things is if i hold ctrl and go with the left and right arrow keys then it shifts the breakpoints up and down for me so of course clicking this little drop down and choosing your breakpoint isn't exactly hard but it does just make it so much faster so if you're a person that's a fan of efficiency then this is definitely the add-on for you now you can see it's not just adding elements to the page there's all kinds of other things so you can add individual elements like we looked at you can also get to different portions of the oxygen interface let's go to edit typography for instance so if you just click in the field and then press the key combination that you want then it's going to work so let's do something like ctrl shift g which typography doesn't really make sense for that particular example we'll come back over here to oxygen and refresh okay so i lied turns out ctrl shift g was already bound to something else so i switched it to alt shift g and i'm going to go ahead and just add in a heading so do shift h there's our heading and then if i go alt shift g then it's going to take me to the typography page for this particular element now again it's not like it's that hard but clicking the advanced tab and then going to typography it just makes it so much easier so those keybinds are all completely customizable and there's tons of them basically everything that you could think of is in here then the other thing we haven't touched on yet is the right-click menu so that this is super cool you have essentially everything that you would expect with a right-click menu except a lot more cool things such as wrapping with the div or wrapping with a link making it a reusable part you also have copy styles which is amazing you also have copy conditions so if you have more than one condition this can save you a ton of time because i find myself in a lot of cases having two different buttons and they should have essentially just the inverse condition of one another but instead i have to go create it twice now with hydrogen i can just copy the condition and typically change one drop down and i save myself a bunch of time so hydrogen has a ton of time saving features the other cool thing is there's also hydrogen paste which is an add-on that's free and it allows you to copy elements between oxygen sites super cleanly and it works perfectly so hydrogen pack is probably my number one if you had to pick one extension to buy specifically for oxygen i think hydrogen would be it and i think there's a lot of people out there that would echo that same sentiment all right so next up we have oxytoolbox and this is a plug-in that essentially adds a ton of really useful kind of efficiency tweaks and lots of other things to your oxygen builder websites and this is a massive list of things but i've turned on a few of the things that i personally really like so the main thing is this navigator functionality so what i've done is turned on a bunch of quick links to get me to my template for instance if i click this it's going to take me straight inside of oxygen to that template instead of me having to go and load that template in the back end then click edit with oxygen again just saves you a time and efficiency step which is super cool now as you can see every single one of these things can be turned on and off as you wish so that's what's really cool about this is if there's things that you don't want you don't have to bog down your interface or your site you can just simply uncheck it and it goes away now for this thing right here like conditions if i expand this little option you can see there's a ton of conditions and here that you can turn on and off and these just basically magically appear right inside of oxygen and you're good to go now i think probably my favorite condition here is the current post author so this would allow you to add like an edit post button that only shows up if that person is the post author which is pretty amazing now of course there are a ton of these in here there's so many conditions and there's all kinds of other interface tweaks and just you know life improvements usability improvements here so i'll let you look at the docs for this but essentially the oxy toolbox is like quality of life improvements and sort of behind the scenes improvements it's not so much elements for the page as it is just overall kind of usability and efficiency tweaks now of course that's not a totally accurate like blanket statement because you have something like the text edit here and what you can do is just simply click the little check box do save changes and then if you refresh then you can see that text editor turns on the ability for you to edit the text over here in the oxygen dialog instead of having to do it on the visual editor screen so this is useful for some cases where elements or are hidden or maybe they're behind something you have a z index and in the editor it's not working quite right of course you can just start typing you can just say like this works great so that one is really cool again there's lots of other awesome things inside of oxytoolbox and it is currently a lifetime deal which is great and it's made by two really well respected developers in the oxygen community so next up we have a design set for oxygen which is called oxy ninja core this one i've done a review video on here on my channel i also have used it myself personally on client websites and i know there's a lot of people in the community that really love this so if we switch over here to oxygen a design set you can simply find in your library tab under design sets you have of course all of the default ones but we have core down here and then there's just tons of pre-built elements here so there's a million of them and they all look fantastic so let's just choose something like a header since we're on our site-wide template here so this is a mega menu that just works right out of the box and what i love so much about these elements in oxyninja is just the fact that they all use the built-in oxygen elements so if we take a look you can see in our structure panel we're using columns text links divs link wrappers it's basically pre-built elements using oxygen and there is some custom code mixed in don't get me wrong but for the most part all of the stuff is set up in a way that you could very easily manipulate it and you're not stuck with a solution that was some code written for you that then later on down the line you don't know how to change now not only this but core gives you a couple of other really cool things so it comes with the css framework from the oxy ninja team and essentially it has a lot of usability utility classes as they're known so you can see like c menu link is going to give you specific styles for a menu link then you have c margin bottom s so what that means is that margin bottom on that element is small all those range from extra small up up to extra large and you can do any direction or all sides so the css framework is extremely powerful again if you're a person that likes utility and efficiency then you're going to love the css framework in oxyninja so of course you have the prebuilt elements you have the framework you also have class lock too which is kind of neat so you can go ahead and lock any specific core class you can see if i try to click on it it won't let me select it and that's to keep your design really consistent which of course is optional so that way you don't accidentally make changes to the wrong class what's cool about that is if you go ahead and add your own class that has the c in front of it you can call this like c premise log and let's say you do some styling to it then again i won't be able to get to that because it's got that c indicator in front of it now if we go over here to our settings core also gives you the ability to copy all of your selectors between your sites so if let's say you change some of the utility classes you could simply just click on this copy you just simply click the paste option here you paste in what it just copied for you and you're done now every change that you just had even on a totally separate site carries over to this site which is really neat let's go back real quick to the actual design library and take a look at some of these other elements so in the content tab you can see there's tons of pre-built elements here you could pretty much get a fully functional site right out of the box in no time at all which is really great and i use these in a lot of cases for client sites where we're going to be quickly adding content the design is not super critical but more functionality is i will definitely lean on core in a circumstance like that to get something live and ready in a very short period of time i'm going to go ahead and just pick something here let's just take a look at this three column content and what i'll do here is open my structure panel and it actually stuck it inside of there which is not what i wanted so let me get that out so this is another case where hydrogen is going to excel because the drag and drop here is much easier with hydrogen pack installed than it is with just core oxygen so now we have our three column content container here that we just added and this is another demonstration of where those utility classes are going to come into play here so if we go ahead and click on this columns container this is actually built using the core classes and not an oxygen column container so i'm going to unlock my classes real quick here and if we take a look what we have is a three wide column which is this class our c columns l2 class here is basically everything 992 and below that will make the columns container drop to two wide instead of three so i'll show you that real quick as you can see it's swapped to two and then if we go back up to our desktop then it's three wide then the other classes here is the columns s1 which is 480. you can see then it drops to one wide which is really cool and then the other thing is the columns gap large that's just the gap here between the elements so we could remove that and we could just go with something like gap and you could do let's just say like medium and you can see the gap is just ever so slightly smaller but i didn't have to do anything i just changed one class and it applied to this whole columns element so again we could spend a ton of time on the advantages of core but in this particular case the main things you're going to get are the pre-built designs you're going to get the framework and the ability to copy styles between sites which is super awesome core also has a bunch of other neat stuff and there's also an entire woocommerce design set that one is a separate purchase so we won't cover it here but if i were to pick one it's going to be core for sure okay so next up is not an oxygen builder specific add-on and this one is actually free which is called acf tools now this is going to be really helpful for when you have an acf field that for whatever reason is not quite working in oxygen this extension gives you the ability to copy the code for a particular field and you can basically just slap it in a code block in oxygen so this obviously will really excel if you are using oxygen but if you are trying to hand code something this is really helpful so what you can do is when the extension is installed it just looks like this again it's called acf tools it's really nothing you have to do to set it up you just install it and then give it permission on each individual page which i like actually and then you simply hover over this you can click copy code and if we go back over to oxygen i would just come in here to my php section i would apply this code and now that file field is going to pop in now in my case that file field is not populated but you can see the code is there for you and it will start working another thing that i like about this particular extension is that what it does is allow you to just click on a field name and then it automatically copies that field name to your clipboard so there's a lot of cases where i need those field names in different places such as like when i'm creating facets in wp grid builder which i'll get to in a moment so this is just a really easy way to copy and paste stuff and it's just a small little extension that can save your life sometimes it's really really great especially for more complex fields like flexible content for instance so i just mentioned wp grid builder and that is the next one that i wanted to cover so this is basically a filtering plugin for wordpress in general but it also has an oxygen add-on specifically for it which is great so this is an alternative to something like facet wp or a number of other search and filter plugins out there but as you can see there's a ton of different facets right out of the box and i do have some more detailed videos on this so we're not going to spend much time on this particular plug-in today but i definitely do recommend this if you're on the hunt for a filtering plug-in wp grid builder is definitely the way to go it's just so easy to use and set up there's just no fiddling with it and it just works that's what i love about it so much the other thing is you also have the ability to create grids and cards so again i mentioned this is not specific to oxygen and what's great about that is that you won't have the repeater like you will in oxygen if you're in a theme or you know some other page builder so the grid gives you a lot of what the repeater can do granted maybe not as much flexibility but the cards look fantastic right out of the box and then the grid functionality gives you a lot of really good layouts that you can then incorporate with your filters so for more specific videos on this i have an hour-long live stream here on my channel where we look at wp grid builder in oxygen specifically in detail so a lot of what you see there will carry over into other page builders as well and then i also have multiple other videos around wp grid builder so go ahead and check those out as well so rounding out our pack here is oxi extras now this interface probably looks pretty familiar one of the developers involved with oxy extras is also the developer of oxy toolbox so with that said the interfaces do look a little bit similar in the back end but in terms of what they offer in my opinion it's two totally separate products now you can see these are all almost always to do with elements that will appear in oxygen so just like from before you go through this list and you decide what you want you simply turn it on and then you just click save now you might not know what every single one does right out of the box but you can go ahead and click on the little dock button and it takes you to the corresponding docs page on their website where you can get a really good sense of what it does with some visual representations like you see here now what i love so much about this like i said is that you just turn on and off what you don't want once you have what you do want turned on you just simply come over here to oxygen you can go to let's stick in a section real quick before we add some content and then you can go to the extras option here and everything that we just turned on is there which is super cool now the best part of this stuff to me is that if you go ahead and click on the mega menu then you have all of the controls to configure these elements in your oxygen window here this is not some you know slapped in code block for you which is great in a lot of cases but if you're someone like me that wants really granular control and is maybe not super proficient in code then this is going to be really welcome for you if we take a look at some of the other components that i turned on hotspots is extremely cool so if we go take a look at that in the documentation in a moment you can see why that one is super cool we also have the infinite scroller which is super cool because you can basically tell it what kind of component you're looking at so whether it's you know repeater easy post product list etc and you can tell it what you want it to do once it gets to the end of that list so that one is really neat you also have something like read more which i didn't turn on but you have the preloader which is super cool this could go in your sitewide template and give you a really nice preload effect so there's not you know like flashes of unstyled content and that kind of thing and then you could also have something like this dynamic text for like a copyright year which of course it just finds for you now again just like we looked at with oxytoolbox there's a million different options here we don't have time in this video to go over every single one but all of them are amazing and again just like oxy toolbox very well respected developers that put this together this extension is actually not something i originally included in my written post but everybody told me to add it and i agree i should have added it in there anyway but here we are and i definitely recommend this so that pretty much rounds out everything that i would consider a must have when it comes to oxygen so just to kind of reiterate we looked at hoverify hydrogen pack oxytool box oxy ninja acf tools wp grid builder and oxy extras so lots of oxy there but all of this stuff is incredibly powerful and very useful to your sites with all of that said thank you so much for watching as always and like i mentioned earlier at the start of this video if you're interested in checking out any of this stuff there are links in the description below some of them are affiliate links and some of them aren't but i would certainly appreciate you consider using those links anyway it does help me out and it doesn't increase your cost thank you so much for watching this video and i'll see you guys next time

Channel: Permaslug

Views: 6,965

Keywords: oxygen builder addons, best oxygen builder plugins

Id: lNAvZJvAeI4

Length: 20min 50sec (1250 seconds)

Published: Mon Mar 29 2021