How to Setup Oxygen Builder: Best Global Settings (Automatically Responsive!)

hey what's up everybody welcome back to the channel we're going to kick things off with an oxygen tutorial and honestly this is one of the most important tutorials that i'm ever going to record because it has to do with setting up a solid foundation for any website that you're going to build in oxygen namely we're going to be dealing with the oxygen global settings panel setting things like font sizes section padding and so on and i'm going to show you some magic tricks for making this stuff automatically responsive no classes no break points none of that nonsense we're going to do a few simple things and all of your headings all of your section padding it's going to be automatically responsive you don't have to know css to do this you don't have to be super technical you just have to follow this tutorial and let me reiterate this is of critical importance especially if you are an agency owner you're going to be building a lot of sites in oxygen or you're a freelancer you're going to be building a lot of sites in oxygen as well you need to be able to set up these oxygen installs super clean super responsive obviously and super efficient and you're going to love me after you watch this tutorial honestly because it's going to save you so much time so much headache and it's gonna make everything very clean if you don't do this right from the beginning you're gonna have a very messy install and you're gonna have to do a lot of extra work all right so let's go ahead and hop into the computer let's check out global settings in oxygen all right guys let's go ahead and dive right in this is a brand new wordpress install fresh copy of oxygen everything is currently at the default um so the first thing that we're gonna do we're going to go to oxygen and we're going to go to templates and we're going to hit add new template and then i want you to name this primary template we're going to do this just so that we can actually go and edit a real page and then we can add some elements to the page and you can see how the global settings that we're going to be dealing with affect some of those elements all right so you can just kind of follow along with me on this part i'm going to do a separate video on what templates are and how to assign them and and you know what you can do with them but for right now i'm not going to go through all the explanation just kind of follow along with what i'm doing so primary template we're going to assign this to pages and that's pretty much all you have to do we're going to hit publish and then i'm going to edit this template so we're going to open the oxygen builder and we'll pretty much do all the setup inside of this and then we'll probably go edit a page add some elements and see what some of our setup settings uh allowed us to do remember the the settings that i'm gonna give you are gonna make it a super clean super efficient foundation for building oxygen sites from all right so we're gonna go and hit add and just type in inner content and then click the enter content element so that's going to dynamically show whatever we put on a page then i'm going to go ahead and hit save perfect now while we are here actually you know what let's go ahead and jump out of here i think it would be easier if we just edited a page now so i have a home page here i have it set as the front page in wordpress i'm going to go ahead and hit edit with oxygen we're going to open the and and you'll you'll see if you didn't do the previous step if you didn't do a primary template and add an inner content element and you tried to go edit your home page it would say edit template because the template doesn't have an inner content element so you can't actually add anything to pages so by doing that inner content element assigning it to pages we can actually edit the home page now so here i'm going to add a section and i'm going to add a heading and then i'm going to duplicate that uh like a few more times so this one is the h1 this is going to be an h2 this is going to be an h3 this is going to be an h4 and this is going to be an h5 and then we'll probably just add some body text oh i don't want to add a link i want to add text all right so we're going to add text there so that's just plain old body text so we have a bunch of headings we have text and then we have a section and i'm probably going to add a background color to this section so that you can actually see what's going on um so let's let's just do that light gray that's cool all right not cool uh but you get the point all right so we're gonna go the structure panel now and i just well i usually sorry by default i make this bigger but i forget i can't really move it around uh while we are screen recording i'll probably start recording my whole desktop honestly all right so there in our structure panel you can see what we're dealing with headings and text level elements all right let's go ahead and start setting up our global settings so we're going to go to manage we're going to go to settings and we're going to be primarily working in this global styles section right here as you would assume by the label this controls everything globally so we have colors we have fonts we have headings body text links width and break points sections and columns animate on scroll and scripts let's for the sake of simplicity let's just go ahead and go in order so under colors you're going to see global colors you can add a color the only tip this is very straightforward the only tip i'm going to give you here is to not name the color the name of the color so like if your if your primary color like your action color all of that is is pink don't name this like pink all right name it primary and this is especially true if you're an agency and you're working with clients or you're a freelancer working with clients because what happens is they give you a primary color and then they're like oh we changed our mind it's actually this new color now and you have a label that you cannot edit that says pink but then the color's not pink anymore right so use very generic labels so i tend to use like primary and we'll just add that and then i'll do a oh actually that wouldn't be a good primary color um all right then i use a base so a base would be like a 333 something like that okay and then let's go back and edit this primary and let's let's say our action color like our primary primary color is red so i've primary i have a base then i would do a base like ultra light and then so this would be the um 333 but then like a lighter version of that like a lighter version i didn't actually need to type in 333 there let's just say this is our base ultra light all right cool and then i might have like a base medium right this is like between these so maybe that's our base medium and then i might have a primary hover okay so i take that same color there and i throw it in and then i just come up here and make it like a little brighter all right so that's like the that's gonna be the hover version of the primary and then you can have base alternates you can have uh accent colors but you just see the naming scheme that i'm using is very generic so that if these colors ever change the use case is actually staying the same like this this color may change like maybe they say i want blue but it's still going to be the new primary right so the label still works regardless of what the actual color is that's how you want to work your your naming conventions for your global colors all right so that's pretty much all you have to do whatever your global colors are put them in like that but use that more like generic naming convention would be my advice there fonts um this is again it's uh it's whatever site you're working on they're gonna have their own fonts the only thing here is just make sure you load the weights that you need right that's a little bit of a button that's a little hidden so whenever you choose your font click on weights and load the weights that you actually need that's all we need to talk about there headings all right now we're getting into the meat of what you really really want to know and need to know to set up a really clean oxygen install with a solid responsive foundation yes i said responsive foundation here's why this is one of the you're looking at this panel right here this is one of the main criticisms of oxygen if i come in here and i type in 60 pixels as my h1 font size and we'll do like 1.2 as the line height um you're going to see that well all of them changed let's go ahead and do like 50 here for h2 and we'll do 40. we'll just work our way down here uh 30 and this is not how you set this up guys i'm just showing you the problem with oxygen and and something that a lot of people have as a criticism so there's all of our headings and you can see the hierarchy here you can also see that when i work with breakpoints here these are not responsive and there's no controls over here to make any of this responsive so what has to happen is people will go in and they'll make like an h1 class and an h2 class and an h3 class and then they would assign uh sizes to the class at certain break points to try to make fonts responsive you don't have to do that you don't have to do that i'm going to show you a nice little trick here okay but before we do that let me go ahead and hit save we need to we're because we're not going to be working with pixels we're going to be working with rims and we're going to be working with the css clamp function and don't worry if you don't know css if you if you don't know anything about css you can still follow this tutorial you can still do the setup and it's going to work perfectly for you so don't freak out all right just because i said clamp i said a word you may not have heard before don't freak out it's gonna be okay all right so um we need to just to explain this real quick we're gonna go to manage and we're gonna go to style sheets and again if you don't know anything about css it's cool we're going to write one line of code and i'll even give it to you so you can copy and paste it um but i'll explain what we're going to be doing with this here all right so i'm just going to use a label here called base all right this is just categorization that's not actual code all right so we're going to type in html and then we're going to have the open curly bracket and we're going to hit enter and we're going to type font size 62.5 percent and then we're going to close it that is the only line of code that you need to uh write to get started to have this foundation all right now here's why we're doing that it the normal font size is 16 pixels we're going to take we're going to tell this to say we want and that's the base fonts it's like the default base font size all right for for like all sites we're going to tell this site that we actually want the base font size the html base font size to be 62.5 percent of 16 pixels which is about 10 pixels and the reason we're doing that is because when we use rim units we want to just be able to multiply the rim unit by 10 and automatically know what that translates to in pixels that's how it works with rim units all right so for example if my rim unit was 2 and i have this default font size set to 10 pixels then 2 times 10 equals 20 pixels i'm dealing with about 20 pixels there it's not exact but it's very very very it's close enough for government work all right you see what i'm saying so 3 ram equals what 30 pixels 3.5 rim equals let me just write it out this is not actual code i'm just visualizing this for you okay 35 pixels all right so you can by resetting this default font size you can multiply whatever rim unit is whatever the rim unit is by 10 and automatically know you know that's roughly the the number of pixels that we're dealing with here now i'm not going to go into rims versus m's and all these other units i'm just showing you how to set this up so this is nice and clean all right so html font size is 62.5 percent now we can jump out of we'll we'll save that and we can go ahead and jump out and go back into our global settings okay all right cool so let me just click here so that big panel goes away all right so now what we're going to do is we're going to delete all this because again we don't i was just showing you what the problem is with using pixels and even if i use rims there uh if i used ms like it would none of these are going to work for you none of in fact because none of them are going to work for you let's go ahead and select none on all of these because we're going to put in our own uh code and we're going to put in a clamp function and this clamp function is actually a clamp function you don't even have to write for any of these all right so i'm going to give you one of my secret weapons here we're going to go to my resources and we're going to go to this fluent sorry fluid responsive font size calculator and i'm going to show you how this calculator works i'm not going to show you how the underlying function works because it's insane but just follow along and you will you will love me after this okay so on the unit section we're setting that to rim i just explained that we're working with rim units primarily that's why we reset our base font size and so on um so the selector here does not matter you can ignore this box completely you can ignore this box the property box you can ignore that completely i'm going to go down here to this function and i'm going to just like surface level explain what's going on here so the way clamp works is we have clamp and then you'll have a value a value and a value three values okay the first value is the minimum size of that that that element can be so you're setting a minimum size it will never get smaller than this all right simple right this value the last value is the maximum size that an element can be so you're basically telling um the the system don't make that thing any bigger than this ever it should never get bigger than this regardless of what else is happening don't ever make it bigger than this this middle value is tough to understand this middle value is like the optimal size of that element so you're telling it like you know this is like the optimal size for this this is the max it should ever be and then this is the min that should it should ever be now when i was first learning clamp i always was it was obvious like all right i know i never wanted to get smaller than this and i know i never wanted to get bigger than this but what the heck do i put here right like what i don't know what's optimal okay so that problem is solved with this calculator and the way this calculator works is it takes into account a minimum because by the way uh let me go back here and just explain this real quick for any of you who want to know this so let's say the minimum was three rim the value uh in the middle the optimal was like five rim and then we never want it to be more than like seven rim right well you don't have to do this is like a very simple clamp function you can actually put a calc function in any any of those values and so you can and you don't again you don't have to know anything about calc functions or any of this stuff i'm just trying to explain how this works a little bit and so what we're doing with this calculator is you'll see here there is a calc function in the middle and what the calc function is doing is it's basically taking a viewport size okay so here's the viewport you see browser width so you tell it what the minimum viewport size is and what the maximum viewport size is and then you're going to put in values and it's going to calculate that optimal size it's going to give you a min it's going to give you a max and it's going to calculate the optimal size for the font or really the element this says responsive font size calculator you can actually use it for lots of things all right again i told you it's my secret weapon so in the setup we want a couple things that's very important here let me jump back and we're going to jump out of the fonts for a second we're going to skip to uh width and break points now i always change this width right here i i typically change it to like 1280. all right but whatever you want to put there just remember this number all right 1280. so if we divide that by 10 because that's our base font right we get 128 that would be 128 rim all right so if i go back to this calculator you're going to see i set that as my max viewport size 128 rim and then i set my minimum at 32 rim which is about 320 pixels so somewhere around those like kind of minimum mobile sizes this stuff doesn't have to be perfect by the way all right so 32 ram is my min 128 rim is my max you need to make sure that clamp is checked this calculator does a lot of different things all right we need to make sure excuse me that clamp is checked you can uncheck all of these boxes down here all right so let's start doing our fonts now okay so i'm going to go over to uh headings and we need an h1 font size all right so cool here's how this works i know that my minimum i want that h1 to ever be is 32 pixels or 3.2 rim i want the maximum to be 4.8 rim or 48 pixels okay that's it it is done now here's the thing i only select the actual clamp function so start at clamp come all the way down and get right before that closing bracket all right and then you're gonna so i copied that i'm gonna come over make sure this is set to none or this won't work you should see a little dash there and pop that in all right now you're seeing all of them change because these don't have values down here so i'm gonna i'm gonna go ahead and uh start to go down the scale here so the minimum on the h2 we're gonna say is 2.8 and then the maximum it can ever be is 3.8 rim and i'm going to come down and i'm going to grab the clamp function make sure you don't grab the calc function grab the entire clamp function and come back over and insert that into h2 now we're going down to h3 and guys you can set these these numbers right here you can set to whatever you want it's really based on your design and all of that so i'm going to go 2.4 and 3.2 and then you can always change this you can play around with it after the fact i'm going to go ahead and insert that into my h3 and make sure you have a good visual hierarchy here right like if the hierarchy looks all messed up you've you've probably done something wrong uh so this is going to go to 2.8 and this is going to be our h4 it you don't have to like click any of these it automatically uh redoes the calculation so that's going to be my h4 and then the next one is going to be my h5s it's going to be 2 and 2.4 these are all like probably too big for h5 and h6 level elements but whatever i'm just i'm just making stuff up right now uh and then we'll do an h6 an h6 maybe is like you know 18 pixels and then it's probably you know let's do as like it's minimum all right cool so we're going to copy that and we're going to pop that in excellent now i'm going to throw some line height in for these uh let's do one point oh definitely don't do that let's do 1.3 on all of these just for now i would recommend not throwing colors in here because it's going to be harder to override those with classes on you know sections and cards and things like that so use utility classes which we'll talk about in the future to set your colors on stuff um you could set a font weight on this one uh and on these we can do like so let's say we wanted this to be like super fat and then we want these to be not so not so much all right cool so none of this is really spectacular right here but you do you may want to set these you may want to not set them depends on you know what you're going to do but you can see a really nice clean pretty good hierarchy here right now before we do anything else let's go ahead and go to body text because we're gonna do the same thing let's set this to none i believe this still works even though we did the override um so i want 1.4 to be the minimum on mobile and i want 1.8 to be the maximum it's actually the same as as what i already had for the h6 and we'll pop that in here okay so i'm going to go ahead and hit save and again you you can remove this color if you want unless you have a super consistent base font color throughout the entire site uh but here we go see our hierarchy now i'm not going to show you the magic yet i'm not going to show you the magic because we still have one other thing to do yeah yeah pretty much just one other thing to do so go to sections and columns and you're going to see we're running the same problems here this 70 pixels default padding that oxygen gives you is not responsive and neither is this side now the side doesn't matter that much it's pretty much going to always stay i would recommend it always just stays the same but we do want it to be rim units and not pixels and then this columns padding here is just this is a nightmare waiting to happen if you don't get rid of this just trust me on this all right because these are super hard to override with classes you want basically no padding in your in your default columns so set it to none don't set it to zero because that actually is a value you want it to just not have a value at all all right so get rid of all of that and set it to none and on here guess what we're going to do we're going back to the fluid responsive font size calculator so i want the minimum uh like on the smallest devices i want the padding to be 80 pixels top and bottom so what is that that's eight rim right and then i want on you know the at 1280 like full width i want this to be 120 pixels or 12 rim so from 8 to 12 all right and everything else is the same so i'm just going to go ahead and copy the clamp function and i'm going to come over here and we're going to set this to none set this to none and then i'm going to remove remove and we're going to paste the clamp paste the clamp and so you see i have more padding now because it was 70 pixels but now it's going to be 120 pixels i like a lot of breathing room in my sections i'm going to set this to rim and i'm going to set this to rim and these are going to be like 3.2 which is like 32 pixels somewhere in there and that's going to be my left and right and i said those don't really need to be responsive all right so i'm going to go ahead and hit save perfect so now let's take a look at the magic remember before i said you know we we had headings that were a certain size and they just stayed that size forever regardless of the viewport so now when i go in and and remember what i said the solution was you got to put a class on all those headings or you have to write custom css for all the break points and you have to manually set all of those styles at all the breakpoints but you don't have to do that anymore so as i change these viewports you're going to see that this all scales down perfectly right it all fits the same hierarchy is still there it's all perfectly responsive now this looks like absolute trash because there's headings stacked on top of headings and there's no spacing between them or anything like that but you can see that this is we have responsive fonts which what do you also notice the section is responsive so the padding in our sections has changed look how big it is here look how much room there is between the first element and the top and now when i come down here there's much less room there's about hey 80 pixels and here there's about 120 pixels so it's uh i don't do anything else i don't have to put any any uh you know classes on anything this is all set from the jump from the i told you this was going to change your life all right so now in links i'm just going to run through the rest that's the magic guys if you want to jump out of here i'm just going to run through the rest real quick so links you know you have your text links you can definitely need to set your your default text link colors there set your all link color there uh the link wrapper i always leave blank and then under animate on scroll i always leave all of that blank under scripts i do sorry my dog's barking you probably hear uh smooth scroll to hash links and then i do like 500 milliseconds on that that is pretty much all you have to do for our setup so we have responsive fonts we have responsive section padding we have all of our defaults set that is how to set up oxygen perfectly from the jump to make your life easy when you go start building this website you are going to see just how much extra work that takes off of your plate and how much extra nonsense you you typically would have to worry about you absolutely don't have to worry about it anymore and i would say if you do uh need sizing on anything set with classes go back to this resp fluid responsive fontes calculator i'm gonna link to it in the description the show notes all of that stuff go to it and use it you know anywhere that you feel you might need it if you want something that's automatically responsive that you don't have to constantly set breakpoints for all right guys i hope you found this super valuable make sure you click the like make sure you click uh a share subscribe hit the bell leave a comment if you have any questions let me know i'll be back very soon with another video peace

Channel: Digital Ambition

Views: 45,288

Keywords: oxygen builder, oxygen setup, oxygen tutorial, oxygen global settings, oxygen responsive, wordpress tutorial, wordpress development, oxygen development, oxygen responsive headings, oxygen responsive text, oxygen responsive padding

Id: aO7QeE53Aqg

Length: 25min 57sec (1557 seconds)

Published: Sun Apr 18 2021