Hydrogen Pack for Oxygen Builder is Freaking Awesome

hey everybody welcome back to another perma-slug episode today we're going to be talking about hydrogen pack for oxygen and i'm not going to lie to you i bought this at some point last year and just figured i didn't really need it the stuff that it added wasn't really that important but i wanted to just support the creators of you know pretty much any oxygen add-on so i typically buy them and i started playing with it recently and i can't believe that i didn't use this before now so if you're not familiar with hydrogen pack it adds a lot of really cool features to oxygen however like i said when i first started looking at this i was like copy elements copy styles right click keyboard shortcuts i was like yeah i mean i guess that all sounds cool but i didn't really use it for no particular reason but i'm gonna walk you through some of the super cool things and i am definitely going to start using this so hopefully you kind of get a little picture of what you can do and maybe it's something you want to add to your workflow okay so i'm in oxygen now and i have hydrogen pack installed so some of the super cool things right off the bat is you have ctrl c control v so you can see i just clicked right inside that div i did control v on my keyboard and it copy and paste stuff in there which is just amazing so that is extremely cool because what i would typically do and i'm sure you guys have seen me do this in other videos is i would have to basically duplicate this image and then drag it over here which i mean is not like that difficult it obviously works but it's just so much easier for you to be able to copy and paste stuff like that just how you would in any other you know word editor you also have the cut and paste so you can do control x or command x if you're on mac and paste that in there and as you can see it took one of those images out so again command x i'll paste that in there and bam that image is now cut and pasted which is just so cool it's a little thing but it's just amazing now the other thing is there's a lot of keyboard shortcuts so i'm just going to walk through quickly some of my favorites you can do control s to save the page you can do control a and that brings you up to your structure panel search then i can just type in you know like code block or whatever i want another thing that's really cool is you know how you have ids of elements sometimes you might want to change it and what you can do is actually do control f2 and it brings up the little dialog box here for you to be able to rename the element id which is really clunky if you try to do it this way it's like sometimes really really hard to get it you know get your cursor in there and actually be able to rename it the other thing is that in your structure panel of course you have the option to go ahead and click on rename right here but you can also just click on an element and just hit f2 and it brings up the name that you can see corresponds over there in the structure panel so it says code block 51 here so i'm just going to type in you know like my custom css and there you go so if you're someone like me that really values keyboard shortcuts which is hilarious as i say that because of course i haven't been using this you would probably really enjoy a lot of these keyboard shortcuts now the keyboard shortcuts get even better so i'll show you in a minute that you can rebind all of them but a couple other really cool really cool shortcuts is the ability to add elements quickly to the page so i'm just going to do shift s here and you can see that pops in a section you can do shift k and that brings in a code block there's a ton of them shift h is heading you can see all that stuff is just populating in there really quickly so if i think about some of the common things i'm adding on a regular basis it's headings sections code blocks images so shift i for image as you can see you can do shift v for video all this stuff can be bound to whatever keys you want so again you don't have to keep it this way and you can also change it so if there's a letter that makes more sense for you then you can definitely do that another extremely cool keybind here is you can change your mobile device breakpoints all you have to do is hold ctrl or command and use your arrow keys left and right so you can see i'm shrinking down to the mobile break points and i can just bounce back and forth so that's just so much faster i think that feature alone is worth the whole price of the plug-in because i mean it's not like it's not like this is particularly hard to click the drop downs but it's just so much quicker and if you need to quickly get down to one and then back up you just want to take a quick peek you can certainly do that and then pop all the way back up that one is just so cool now another really cool thing is you have the ability to you know click on an element and double click this and start changing the heading here so you can say you know i'm a heading something like that but what you can do is actually just click it and go control e and it puts your cursor inside of that so instead of you having to like basically triple click to get into that heading now i can just start typing as you can see so again i'm just going to demonstrate that and basically all i did click the element control e and now i can start typing so that one's pretty cool i like that one a lot a couple other things is you also have a right-click menu so i know a couple people have mentioned to me they came from elementor where they had the right-click menu and this is super awesome so one of the main things that i really love about this is the wrap with div functionality so there's a lot of times where i'm going to be building different layouts and i find myself in a situation where i do need to wrap a div and of course you can come over here and click wrap with div but if you just have the ability to right click and hit wrap with div it just makes it so easy you obviously saw that there's also the link wrapper in this case i can't actually do it because it's a code block so let me come down here to this heading so wrap with link and there we go now my heading is linked so it's just really really quick and of course you don't actually have the option to wrap something in a link wrapper over here you can only do a div and then you have to basically you know click the link button here to turn it into a link wrapper so just a small little thing but it's those usability improvements that i think are extremely welcome now obviously just like a typical right-click menu you do have copy cut and paste just like you would expect you also have copy styles which is really cool and of course you can do those with the keyboard shortcuts so ctrl shift c and ctrl shift v is copy style just like in most other you know typical word and any kind of content editors out there those are pretty standard you also have as you can see the ability to set conditions directly on this window which brings us to another point that the conditions window is just a bit more clean here as you can see so the fields are all a bit wider makes it really nice so you know if we choose dynamic data we can just stick in i don't know like the post title and you can just see these fields just look a bit better this one is a little bit shorter and this one is a bit longer so just looks nice i think the other thing you have in the right-click menu is again change id and delete so that's just another way for you to get to the ability to change an id of an element and then you also have delete but not only that is also the delete key on your keyboard work so i'm just going to hit that and as you can see all that stuff is now being deleted just with my delete key so that makes it nice and easy actually you'll also notice over here in my structure panel that things look a little bit more compact so by default it does turn on the structure panel kind of compact mode they call it which basically just makes each element in this list here a little bit shorter and then it also adds an icon for each of those elements which i think is a nice improvement so of course you can just read it and see what it is but having that icon there does give you a good indication of what you're actually going to click on especially if you've renamed things so instead of it saying heading the little h here is going to give you the indication that you're looking at a heading and not a text block which is kind of neat so now let me take you over into the hydrogen pack settings in the back end so there's a ton of different toggles here and you can see you have the ability to enable or disable certain features one of the other really cool things that you may or may not like is the ability to disable the edit lock so you know if you're in oxygen in one tab it's going to prevent you from getting it open in others sometimes that's really annoying and you shouldn't be in oxygen twice unless you know what you're doing but sometimes it's really annoying because you'll want to update content let's say in like an acf field and you can't do that when that oxygen editor is open so that can let you turn that off another kind of cool thing is auto regenerate css cache on save so if you have some really heavy caching that could be a benefit for you and sandbox mode we'll touch on in a minute we'll come back to that we looked at the right click menu and by ever by default everything is ticked here but if there's certain things that you don't want you can certainly go ahead and disable those one thing i don't have is the gutenberg add-on installed so we didn't see copy to block you can convert a section or div or whatever into a block which is very handy down here you also have clipboard functionality so these are pretty self-explanatory keep element active is kind of cool so you can see it says keep the focus on the current element after you paste new elements so what that would mean is if i was copying two images instead of it shifting my focus to the new one that i just copied it's going to stay on the old one which you might want it's totally optional for you but now here we are into the keyboard shortcuts section so like i said almost every one of these are set to to the default you know what it's going to look like for you right out of the box but to change one it's really easy all you have to do is just click in one of these fields and you just press the key combination that you want and it's rebound for you which is amazing so you can see there's tons of them and in fact there's other ones here that are actually completely disabled like copy conditions there's a lot of times where i'm going to be setting up two elements to have really similar conditions they're going to have like one difference so that would save me a bunch of time so i'm definitely going to bind the copy conditions to something what that is i'm not exactly sure maybe like ctrl i if that's not already bound i don't think it is so yeah something like that like i said most of these elements are bound in a way that makes sense the other thing that i didn't mention was activate parent is p control p so if we go back over here let's uh let's stick this code block inside of this columns element here so if i go ctrl p it's going to select the next container up which is kind of neat so control p again and i select the columns control p again and it selects the section there for me now of course you can just always go to the structure panel and select the one up but sometimes that's just going to be quicker especially you know just ctrl p getting exactly to where you want that one actually is pretty neat so i already showed you how you can switch between the different break points with the control arrow left and right but you can bind a specific breakpoint to a specific set of keys if you want to jump straight to that which is kind of neat and then i already showed you adding those elements with just really simple keybinds so all i was doing for the section again was just shift s all these kind of line up you know add columns as c add div as d all these make sense the code block being k is a little far for me to reach with my left hand so perhaps i'll rebind the code block to something else maybe like shift w because i use that a lot i use the code block a lot so that would kind of make sense add repeater is r let me toss that in real quick so shift r there we go it's so cool it's so cool i love it so yeah there's a div i just did shift d to get that in there and then i already showed you video text block was one i didn't do so just shift t that's amazing i use text blocks all the time so now i can just delete oh i deleted everything i smashed the delete key too much but i mean it's working and then obviously thankfully i have undo so i can redo all of that pretty easily jumping back over here to the settings let's scroll down a bit so there's a bunch of other elements basically everything else in here is unbound at the moment but you can certainly do that edit size and spacing man i didn't notice that one earlier so i mean to bind that one let's think of something that would be like size and spacing so maybe like alt shift p or something like that just trying to think of something that's not already bound so i have alt shift p so let's save that and then i'm going to refresh oxygen so my size and spacing on this image alt shift s wow that's so cool that's so cool so you could be like 25 pixels of margin there and then do it again over here actually my finger is stretching to alt shift e for some reason i guess maybe just the way that my hand position is on the keyboard alt shift e might make sense but what other ones were over here so if we go back we were down here at edit size and spacing so what else would we typically use here like effects for box shadow i use that all the time so that one would make sense for alt shift e i think i would just have to get used to the alt shift s for the size and spacing and edit effects as e now that one's a really cool one because that takes quite a few clicks to get there all right so on this image here i'm going to go alt shift e and it takes me right to the effects that's so cool i mean it's it's basically saving you two clicks but having to choose the element then go to advanced then go to effects that's just so amazing it's like the time saving things in terms of your efficiency and how quickly you could speed up your workflow with all this stuff is amazing now while i was waiting for this to reload i noticed some other pretty cool things down here so you can basically get to anything in oxygen with whatever keybind you want but in any case what i wanted to get to was all these other options down here so there's a million different things edit custom css javascript toggle selectors panel toggle structure panel go to front end go to back end let's do let's do go to front end so what will we do uh ctrl shift t i don't think is going to be a good one but what about like alt shift t that's kind of a weird way to stretch your hand but just to demonstrate let's see if that works so i'm going to save this now i'm hoping this opens in a new tab and it sure does that is so cool that is so cool so again i just bound that to alt shift t and it just takes us right there very very cool i love that one all right so coming back down here what else do we have go to back end i mean we essentially could just bind that to like alt shift i don't know r instead of t because b is pretty much my hand is like contorting to try to make that work so i think alt shift like r would be a good one for that so in any case you can see me rebinding these keys all day long but this is as this is just like insanely exciting so hopefully it's cool for you now moving down to the structure panel i already touched on the compact style and the element icon you can also set it to open the structure panel on load and expand all items by default which is pretty neat and then you can go ahead and change the panel width here to whatever you want so if you want it to be shorter we could set it to 200 pixels and now i have it to open on load and expand all items so let's save oh turns out you actually have to have it higher than 300 so let's go 400 and just see what that looks like okay so as you can see the page just loaded the structure panel width i think is probably too much except maybe in a case where you have like a really big site and there's lots of stuff nested down but as you can see it opened it by default the structure panel came out open and then of course everything is expanded which is pretty cool so those are totally optional choices for you to make but that is available for you one last thing before we close out that i wanted to cover is the sandbox mode so this is really cool basically what happens with sandbox mode you enable that you go into oxygen and then whatever you have there saves to the sandbox and only you and the specific people that have a link that you share can see that doesn't affect the front end until you turn that off and then re-save and what you did is from visible on the front end so let's go ahead and turn that on and then switch back over to oxygen so now you can see my blue save button turned into kind of an orangish red save sandbox so let's go ahead and delete some of the stuff that we added earlier and then i'll just toss in something from the design library so we can have some changes and see what that looks like on the front end so there we go so now we have a save sandbox button so we'll go ahead and click that and then if we go back over here to the hydrogen settings and scroll down now that we have the sandbox setting turned on you can see we have the sandbox link here so i'm going to go ahead and copy this link so as an administrator of course you see exactly that but if we take this and go look at it in an incognito window then you can see this is what we were looking at before we deleted all that stuff and saved it in the sandbox now of course as an incognito window i can go ahead and just take this sandbox link paste that in there and now we see the sandbox environment so this is of course not actually affecting the live front end and you can give that link to your client or whoever needs to see it which is pretty awesome relatively easy to use it did take me a moment to kind of figure out how you turn it on and what it impacts but in terms of it being really easy i do like that a lot now not only that but if you decide that you're ready to publish those changes you don't have to go rebuild it all you need to do is click the button for publish sandbox changes and slide it over there it regenerates your css cache and you're good to go so in any case i wanted to take you on a tour of hydrogen and just kind of show you how excited i am for this and hopefully you are too there's a lot of things that i didn't think would be as useful as they actually are but in terms of how this i think is going to optimize my workflow it's going to have a big impact so definitely check this out just so you guys know this is not a sponsored video i'm not being paid for this i actually bought the plug-in with my own money i just haven't used it and now that i am i think it's worthwhile to share that with you so hopefully this is interesting to you and i'm excited to hear your thoughts on that thank you so much for watching and i'll see you in a future video

Channel: Permaslug

Views: 6,291

Keywords: hydrogen pack for oxygen, oxygen builder addons

Id: SMsV9AHSiAc

Length: 15min 55sec (955 seconds)

Published: Fri Feb 05 2021