Top 5 Oxygen Builder Tricks for Beginners

hey everybody welcome back to another permaslug episode my name is jonathan and today what i'm going to do is walk you through a few of my favorite kind of air quotes hidden features of oxygen things that i didn't immediately find out but i find myself using all the time and hopefully some of these help you so what we're going to start off with first of all is the copy shortcodes so this is a functionality in oxygen that will allow you to clone any page or any template to either you know another new page or new template on your site but it also allows you to clone those across oxygen installs so you can take a page and its exact design will be carried over to a new oxygen install which is really cool so let's say in this demo we have going on here we have a bunch of content on our page we're really happy with the way it looks and more or less what i want to do is copy this page so perhaps i can make a variant of this page maybe some different headlines different photos but overall the structure and the styling is pretty much set now you might immediately jump to the structure panel and try to go over here to make everything a reusable part while you can do that that's a little time consuming and also a little bit annoying to make it a part save it refresh add it delete it all that kind of stuff it's a mess to do it that way so there's a much much more simple way to do it so on this homepage here i'm going to go back to the admin screen real quick and what we'll do here is scroll down to the edit with oxygen area and if you notice there's this little plus shortcodes option here so you have all of these shortcodes it's you know a bunch of gibberish to us but it's what oxygen turns into your real page so what we're going to do is basically go ahead and copy this now of course this page here is just called home and we have the url of slash home so let's just call this one home too and so now what i'm going to do is go down to the shortcodes area you can see it's empty because of course this is a brand new page and we'll paste in those shortcodes go ahead and publish this and then now what we'll have on the front end is an exact replica of our other home page here so you can see if we scroll down a little bit everything about the styling and the structure and everything is pretty much exactly cloned now every once in a while when you do that clone shortcode functionality some styling might not carry over columns may not align perfectly fine but all you have to do is actually just edit the page with oxygen you don't have to change anything you just simply save it one time refresh on the front end and you'll be good to go now to take this a step even further what's so cool about this to me is that you can actually do this with templates too so if we have an oxygen template here and we go to the short codes option then you can do more or less the same thing note this url is joyful crab and i'm about to move over to a totally separate wordpress install this one here is called kind swiftlet and i have no templates on this site right now so if i go to the home page i'm just left with whatever's in my page content or in the you know wp content box on that page so what i'm going to do is basically just paste in those short codes here so we'll go to add new template we'll just call this main or something like that if i can spell properly we'll apply this to our pages on this site and then same thing we're going to go to the short codes paste those short codes in publish it and then now if we go to our home page here on the kind swifflet then you'll see our header with those links up there and then our footer and all we had to do is just copy over those shortcodes so if we take a look at the other site real quick you'll notice the header and the footer look exactly the same and again it's going to bring over all the styling any coding anything that you did to those particular sections in that template or that page it's going to copy them over perfectly fine which is amazing i find myself using this you know plus short codes functionality fairly often when i don't want to make changes to either a live page or a live template or if i want to make a backup of something before i start working on it if i am going to work on the live version of it i'll just simply copy these short codes paste them somewhere safe some other saved text editor editor somewhere outside of the site and i have a really good backup of what i was working on i often will do this to just basically more or less do exactly what we did over here to where i'm going to have a homepage and a home page too if this is a live site i'm going to basically just edit home to get the design kind of finalized and finished up make sure everything looks good and then i'll just copy my shortcodes back to the home page and then just delete home too so that could be a viable solution for you if you don't want to make changes to a live page so we're going to reset the slate here and move into a different section of this particular video all right so we've worked our way back into the oxygen editor here and now what we're going to do is demonstrate the reverse column order functionality that comes built into oxygen now if we scroll down here what you'll see is most of the oxygen design library items have the columns element and built into that is the reverse column order so this is really cool because you can set it to change the orientation of that column at a certain break point so you'll notice we have this image of the beach here on the left and then you know the boats over there on the right if we switch this to less than 992 what happens is at that or less you can see now the picture of the boats is first and then everything else is basically flipped which is really handy so this is mostly going to be used in situations where you have like an alternating layout with an image on the left text on the right and then on this side you know you'd have text on the left image on the right because then on mobile you're going to have two images that touch each other instead of the text which can be a little clunky so this is already built into the columns element but if you're like me and you want more control you often will find yourself building this with divs so let's just go ahead and demonstrate that from the top i'm going to add a div here we're going to set this guy's width to 100 i'm going to set this to horizontal i'm going to add in two more divs one let's say one's gonna be 48 percent and actually we can just go ahead and duplicate that i'm gonna go back to our main kind of wrapper div here set this to space between and in this one let's toss in an image element i'm just going to steal actually let's just do this one right here so we're going to take this image right there and then i'm going to copy this text throw it over here in this div and actually this is another great time for me to demonstrate another one of my tips that i was going to show you so if you're like me and you sometimes have trouble dragging and dropping certain things into divs or columns or whatever one thing that i like to do is basically just select the div in the structure panel and just go add in a text element then you have something inside of it and all you need to do is just pop what you actually want inside the div delete that text element you added and there you go you might argue they should improve the drag and drop functionality which i mean i guess i would agree with but that's just a little workflow kind of tweak that you have to make if you're struggling with that i think there are some third-party oxygen add-ons that improve the drag-and-drop functionality but i personally don't use those for the most part now back to our reverse column order demonstration here so what i'm going to do is basically just clone this text a couple of times we'll set this div to middle align and then i'm just going to add some margin underneath this let's just go like uh for rem or something and then what i'll do is just basically reorganize these divs to be alternating like that okay so this is pretty much exactly what i wanted so if i look at this div and let's say we step down to like 992 of course because this is an actual div we need to set it to stack vertically and then we would need to set our widths here on these divs so 100 is what i typically do we need to go to the div wrapping the image and perhaps i should have done this before i cloned it but that's okay i'm just going to do this one more time this is a good demonstration of how you can build your own layouts which i do pretty much always i almost never use the columns element because it just gives you so much more control to do it this way so this actually works out well once again we're just going to set this width to 100 so here we go this is what i wanted to show you once you have these column layouts at your lower breakpoints kind of collapsing a bit then what you have is two text elements that are sort of disconnected they don't really go with anything especially if you were to have a heading in this so what you can do which is really really cool is you can go over here to your main wrapper div that has your text element and your image inside of it and whatever break point you want them to flip in my case less than 992 is where i want it to flip you go to advanced layout and then all you need to do is just take the little box that says reverse and so now you have your image text image text which is amazing now what's super cool about this is if we set back up to the all devices break point we're still left with that same alternating image left image right layout and then of course you could just basically duplicate exactly what we just did so if we just take that section and then we just put it underneath this other one and now we're just going to have that really nice kind of alternating layout let's go look at this less than 992 there we go so that's exactly what we wanted i used this reverse column layout more often than i would have ever thought but it's a very very useful thing for you to be able to learn and that kind of ties in with me building my own layouts via divs instead of using the columns element primarily because i want to be able to control the spacing a bit better like having this space here or having borders and box shadows that don't really overlap but that's probably a topic for another video so we've now covered effectively three pieces of what i wanted to do the short codes reverse column order and then also just a little tiny tip of adding something in a div to be able to drag inside of it and then getting rid of it okay so we're resetting again and now what i want to do is show you another really cool feature called margin auto so what i'm going to do is have this topmost section selected everything in here is set to center align but let's say we want it to be left aligned so it does look a little clunky not too concerned about that but what i'm going to do is basically delete this text i'm going to take this image we were working with pull it outside of that div and then just delete its container so let's also just add some margin underneath this so what we're going to do is utilize the feature called margin auto left and right which basically will align any element whether it's an image text div buttons whatever you want perfectly in the middle of the page now i run into a lot of cases where i don't actually want the entire section or the entire div to be aligned one way or the other but i want certain elements such as maybe like a single heading or a single image to be center aligned and what you can do is go to advanced go to size and spacing in the margin click on this little pixels and change that to auto and you can see it's going to push it as far right as it can go and then on the right side we're just going to do the same thing now it's basically going to stick the photo in the middle of the content which is really cool since this image is so big let me just shrink this a bit let's just drop this to like 50 and you can see the effect is a bit more pronounced whenever i turn off one of them you can see how that alignment kind of plays out there so this is another really cool thing that i find myself using really often and like i said pretty much everything if it has margin on it it has the ability to change it to auto so i will typically do this for things like headings at the top of a section so let's actually demonstrate that real quick so let's say we want this heading and this text here to be centered what i'm going to do is go to the heading really simple you just watch me do it but just as a demonstration you can just go to size and spacing margin left and right you just switch to auto and there you go so now whatever you do to the content underneath it is not really going to play into it except in this case that text element is aligning kind of weird so we could just go to typography center and then this section you know you could just play with the alignment however you want and because those elements have the margin left and right set to auto whatever you do to the div or the section doesn't actually make any difference okay so let's go ahead and reset and we're going to move into our final little tip here i'll hopefully do more of these videos once i discover more that are worth sharing but what i'm going to do is go ahead and grab one of these divs that we were working with earlier our kind of column layout here let's actually real quick add a new section in and here's another little instance of that tip from earlier where i'm going to add in something just to this section for a moment so i can actually get the sort of expanded view there and then i'm going to toss in these divs and then basically just delete this text element and we are going to be good to go so in this case i'm going to change this div layout just a little bit here i'm going to flip the image to the left side and then i'm going to make this text quite a bit shorter here now what i want to do is on this particular section let's go to background and let's just set it to kind of like an off-white color something like that it sort of blends into the next section but that's okay what i'm going to do now is go over here to my div on the right hand side i'm going to set this background to white let's give it some padding of like 25 pixels all the way around and then what i want is these columns to be aligned so i want them to stretch basically to fill the whole height so that they match in terms of their height this isn't always something that you would want to do but this is totally possible all you need to do is just select your wrapper div and make sure you have the layout set to horizontal and then you can change this to stretch and then what you'll see is now these are going to align to be the same height now our div on the left hand side here is just simply dictated by this particular image in terms of its height so this div on the right hand side is just matching that now if you wanted this to be centered vertically and horizontally you can still do that in this case this is a text element so it's acting a little funky i'll just go ahead and center that and now what we have is our columns matching in height this is really useful if you had like a super tall image on the left hand side you know let's say 750 pixels or something you can make the columns automatically stretch to be the right height and the reason why i changed the background was so that you could kind of see that effect this is especially common for sites that have multiple sections or multiple blocks of these divs where they want one to be the full height and others to be maybe like a third or half of the height of the other one so this is a really cool feature again all we did was just basically select this div make sure our layout was set to horizontal change that to stretch and then you can see how that behaves so i'm going to go ahead and delete the height off of that because the stretch looks terrible and makes me sick but hopefully these tips have been helpful for you again we went over margin auto reverse column order copy short codes and then just that tiny little tip about adding something inside of a div or a section to be able to drag stuff into it more easily hopefully this has been helpful for you if you have an oxygen tip to share i would love to hear it please put that down in the comments below and i will read it as always thank you so much for watching and i'll see you in a future video

Channel: Permaslug

Views: 11,358

Keywords: oxygen builder, oxygen builder tips, oxygen tutorials

Id: 6bywIbaozB8

Length: 14min 32sec (872 seconds)

Published: Mon Jan 11 2021