Oxygen 103 Global Styles. Learn how to use Oxygen Builder - Beginners Tutorial

in this video we're going to see the general settings of the oxygen builder hi my name is stratos and i'm constantly producing video tutorials about wordpress please subscribe to my channel for more videos like this in the previous video we saw the layout of the builder and how it looks and in this video we're going to take a look to the global settings of the builder now for me the global settings is the first thing that i touch when i start creating a page it doesn't matter if you are going to start with a template or a page directly what i do is go inside the oxygen and then go straight to the global settings and start changing the things that i want so in order to access the settings we're going to go into the manage and we're going into settings this will open up three options as you can see this is the page settings this is the editor settings and this is the global settings this is what we're going to change today so let's click the global settings and here we can see some options that we can change first we have the colors so once you click the colors we have the colors that we can add and these are the colors that we're going to use uh in order to style the website now of course that doesn't mean that you cannot add those colors later on or you cannot do that in a different way you can go into the text color that says here click here the text color type a code or select here a color and then once you have a color you can click here and have it global so it will go here where it says global settings this is the same thing but this is something that i do for my convenience and i think it's something that you can start doing once you're going to create a new project so we're going into global colors and then we are going to add color now how many colors you want to create in a website there is no answer that is right or wrong but keep in mind that you will not go and add too many colors and give all the rainbow colors inside here you have to go for a primary color which is basically a color that you will grab maybe from the logo this is what we usually do which can be a red blue or something uh keep in mind that if your client doesn't have a logo you will maybe have to do it yourself and i'm not an expert in colors but you will have to go to a color that reminds the website and the content that you are going to create so whenever you create a website you want the feeling of the product or the service that you're going to provide to the client to the visitor so if you're going for an nature for something that will go for like a travel or something for hiking or something else you may go for a green color if you're going for a vocational website you're going for blue which is the color of the sea if you're going for a something like uh jewelry or something like that that you will go with the black because it's a luxury color so you will have the same feeling when you visit the site of course i usually say to my client provide me the colors because i'm not someone that you can trust with that but there are many cases that i will have to come up with the colors now whenever you feel ready you can start going inside here and choosing the cloud that you want slide here and change another color and then have it uh and grab something different you can go and select the hex code if you know the hex code directly here or you can go and uh grab something from a website there are many websites that they can give you colors and something that it's for the cover color and for something like an accent color and make some common matches between colors there are many websites that you can look from google and if you type colors for websites you can find many pages for that and if you have your colors then you can go and start adding them we're going to add three or four colors and we're going to name those so let's start with the blue this is the blue and this is my main blue i'm going to name it as main blue of course the name is just for you to know what you're adding it doesn't matter what you add here add color and now we have the main blue which is here then we can click add color and add the next color will which will be something a little bit different than this and let's add that sorry this is the name and paste it here okay and then click here and i'm going for a little bit of lighter so something like that and this will be my hover blue so this is when i hover over to a button and i want to see a different color from the main color just for the visual to know that this is an interaction with the button or something so we have the hover blue then you can add a color that will be something like an off-white because in many cases you will need something a little bit different from the white color just to separate the section the one section from the other you don't want two sections one underneath the other and they both have the white color you need to have a little bit different color to the second section so we're going for a white and then we're going to go a little bit lower something like this so this is my off-white color and let's add another color and we're going to change that to black because i need something for the text so this is my text or i can put something different but usually my heading will be black color for the content we'll put it right in the settings they have a color for the content but this is for the text for the heading and let's add another color and this will be my accent color which will be a little bit different from the blue so let's go for an accent color and let's go for i don't know i'm pretty awful with colors as i've said something like that i don't know if they match but i'm going to do that as an accent color of course you can add as many colors as you want there is no limit on how many you want to add on you can add no you want to add there is a limit on how many colors you want to add but there's no limit on how many colors you can actually add here now something that is a very good that you have inside the oxygen is the capability to change the color and everything that is uh assigned to this color will change automatically so if i go to this button and go into the bottom color that says here and select that blue color you will see that that color is now assigned to this button but if i go here let's grab that to have it and go and change the color to something different you can see that the button change immediately so every element that is assigned to that global color will change automatically and that this means to the whole website not the page that i'm working inside here so if you create something for a client and that client later on decides that he doesn't like exactly that color but he want to change it a little bit you don't have to go to every button every icon everywhere that you have added that color and change it you need just go into the global settings and change the color from there and this is something that is really great and this is why i'm telling you because you need to use the global settings for that this is an awesome thing and if you may happen to find a client that needs to change something you will see that it will save you a lot of time and of course we can delete the color that we don't want or add any other colors that we want all the colors are added inside here and if we want to add a color manually from here we can do it exactly with the same way just selecting the color that you want and then clicking here and then you can select the color name and then select it as a global color as you can see here and click add i'm going to click outside and this is the global colors let's go back back again and then we have the fonts we're going to see that we have two fonts here display font and text font and this is the font for the headings and this is the font for the content for the paragraph element so what you choose here will be automatically assigned for all the headings and once you click something here select something here it will be automatically assigned for the content for the paragraph element and again of course if your client later on change his minds and say that he wants a different font for the content you can just go ahead and change here the uh font that you want and it will be automatically changed everywhere so let's go and add here uh the roboto robot consent that's what i'm going to change and here i'm going for the ubuntu again there are websites that can uh give you some advice on what matches you can go for the header and the text font and you can go and search into google and you will find some things also you can add another font for the action or something else and you can style it whenever you want here you can go for an accent and you can click ok and then go and select the accent this is the action font and select something that you want keep in mind that oxygen has all the google fonts that you want inside here but if you want to add the custom font there is a way but we were going to see it in another video so i'm going to delete that i'm going to click ok here i don't want a third font and then we have here the weights as it says here i'm going to click weights that says here and as you can see i have only the regular in here in the booty consent ubuntu consent because this is what google offers us so let's select the ubuntu just to have something different here as you can see we have all the weights here uh i'm going to select the weights that i'm going to use i'm going to select the 500 i'm going to select the regular and the 700 which is the bolt semi bolt and the regular i'm not going to select the italic i'm not going to select anything else this means that every other weight will be removed so it's not going to have the option for something different and it will remove everything else and this means that we will be a little bit lighter this like a tip so we're going to do the same with the text phone we're going to use the regular we're going to use the 700 and i don't have a 500 for the text so i'm going to leave it as it is i'm going to click save and we can go to the next setting let's go and see this is the headings so here you can change the size for the heading again this is a global settings everything else inside here is a global setting of score because we are in the global setting and the same goes here whenever you change something it will go into the whole website and change it so we can change the font size for the h1 this is an h1 if i click here i can see that this is an h1 and currently is in 36 so i can go 440 and it will change the heading size if i go with the arrow up you will see the different uh live so you can see that what is changing of course we can change the uh the height the font size here uh for the specific heading by going into here and selecting that we want that to be 30 and not 50 but if we have this empty this will take the default settings which is the 50. and it's a great way to set the size that you want for the whole website and in most cases i'm not going to change anything inside here i like how it is styled but you can go and make some changings and write them down because you are going to use that a lot if you find some settings that you like and some sizings that you like in most cases you will use the same every time we have the line height which i don't usually change i'm not going to do anything inside here but you can and also you can change the colors as well here of course i'm not going to let's go back and let's go to the body text this is where you can change the content so we're going to add the text element just to have something inside here and let's add a text element and this is the content the text element and as you can see this is the font size of 16. i usually put that in 17 i like the height of the sentence then i'm going to the font weight and i can put that 500 or 400 this is the normal this is the uh bold that we have but my font doesn't uh include the 500 so i have the same as the 5 the 400 if i go to the 700 you can see the difference so i'm going to leave it as 400 which is the regular and for the line height i like to put it 1.7 uh this doesn't look anything different because you don't have a different line but if i go and start typing here bear with me a moment i'm going to add some content inside here okay the second line and as you can see the distance between those lines are the line height so if i go here and put a number like three or four four you will see the distance between between those two lines so i do like the 1.7 better than the 1.6 and then we have the color which is the default color of the text i usually go and put that all the way to black and this is what i usually do i'm not going to use the global colors because this is a global color i'm in the settings but if you have a different color for the default color of the content please go and put it here okay next we have the links this is the color of the links and all the settings that you have for the links this is something that i usually do not change but the most common one is the text link and the link wrapper and that's the color of the links inside a text so if i go here triple click that or click here and then uh click the hyperlink uh not this one sorry this one which is happening and then put something like a google google okay.com this word has a link now and if i click ok and click outside you will see that now it's a little bit a light blue so you can change the color here in the text link and of course the hover link and you can change the link wrapper if you're going to use the link wrapper it's an element it's and it's right here the link wrapper of course since i do not use many times the links inside my word i use buttons to add links and this is what you're supposed to do i don't usually change anything here for the buttons you can go and select the font weight and the border radius which it's just basic features we're going to see different way to style the buttons later on don't worry about that so uh let's go to the next one which is the width and the break points now the page width means how many pixels will go for the content for the beginning of the logo until the end of the menu for the text that you have inside the pages that's the width not the width of the whole page the width of the content usually we have something for a background we have some content inside a section and the content is not from the beginning of the page until the end of that it's in a box and this says that this box will be 1120 pixels let's go to a website like apple or amazon or i don't know let's go for apple and let's go for apple and you will see what i mean so this is the content i'm going for the beginning of the logo until the end of the search button right here if i hover if i go and scroll down you will see that the content here is basically the same the line here begins from the beginning of the logo until the end of the search here of course there are some sections that go full width and this is because they like the layout it's nice but if you go inside here and you start reading something you will see that everything sorry for the greek language you will see that everything inside here are inside the same box it's not going from the beginning until the end of the page and i think they're way too big for a website but doesn't matter let's go to something else like skype okay skype.com i hope it's not in english in it not in greek but it's going for let's go for us us maybe it will go into okay english and as you can see this is the beginning of the logo until the end here and this is the content that i'm talking about if you can see this is the footer and it has the same box the same width if i go to a post and click here learn more i can see that everything is starting from here and going until here and you can see that they are aligned with the uh sign-in logo and the logo of the microsoft right here so this is the width that you're going to use for the content and this is something that they offer that many times people ask me which is the best number that you can use for me it's something below 100 1366 and let me tell you why if we go here and we go for laptop screen resolutions laptop resolutions we'll see that most common laptops will carry a width will have a width of 1366 pixels in width these are the most common laptops an average laptop will have this width there are many laptops that they may have full hd or qhd or 4k or something else but most laptops will have something like that so basically you will have to cover the basic and the most visitors that will come in your website will have something like that of course they may have a bigger screen but you have to cover uh this resolution for me so usually i put something less than that because i want to have something in the left side of the page and something from there for the right side of the page if i put here 1366 that means that the content of the website will go from that end to from the beginning to the end of the box and if someone comes with that screen he will have the content from the one end of the screen until the end he will not see the layout that i want for them to see he will not see the background as i want it he will not see a box he will see everything across the the whole website across the whole screen sorry so usually i will put here 1200 and this is my number that i'm going to start usually i will start with that if my client has a bigger menu and he will need a bigger number here i'll maybe put here 1 300 but usually i put here 1200 and this is my starting point after that we have the tablet and landscape and portrait and this means when the screen will break to a different version so if someone comes from a laptop he will see a different version of the website he will see uh that the headings are smaller he will see that the padding is not so big the margin is not so big so he will see some differences in the layout because we want the layout to fit in a smaller screen and when it's going to break in the 992 pixels width i leave those as they are i never change those because i do uh like the numbers here of course you can change whatever you want here now here it says after you change the breadboard the breakpoints you must regenerate css casts and this means that they it will ask you to regenerate the css and it will do it uh as well as changing something else inside the global styles if you change the color it will ask you to regenerate the css cast if you change something like a heading it will do the same it's not specific for that okay let's go outside and the next one is this section and columns so this is the default width the default padding inside the section so whenever you add a section you will end up let's go to advanced and sizing and spacing and you will see that we have the 75 75 20 and 20 and these are the settings in here and this is the padding that we have for this for every section uh this means that whenever you add a section and decide the section then you add a heading it will not go to the beginning of the section it will leave a little bit of space and it will start in the 75 pixel padding also a once the page will end for for the section it will have a padding of 75. you can change that but for me it's something that i do like and i do like to have the 75 pixels inside here the 20 pixels in the left means that it will not start from the beginning of the width of course it's not the beginning of the page remember that we have some books that we have the content inside here so we have the 1200 content and this means that we'll also have 20 pixels uh marking underneath after that this is something that you need to have when you style for a mobile so if you put here zero it will look okay when you editing in a pc but once you go to the mobile version you will see that it will need some padding inside here so for me leave it as it is or go for a 10 pixels do not go for something less than 10 pixels unless you want to go in every section and edit that in the mobile version for everything then we have the column padding which is basically the padding that whenever you add columns and let's add two columns you will see that this column will have uh basically a padding of 20. you cannot see it here but it's not zero if i add here a heading or a text you will see that it has some padding inside here and here so if i go to advanced sorry let me select the column first so if i go to advanced and sizing and spacing and once i put here zero you will see that now it goes into the zero padding so it will always leave 20 pixels inside here this is something that i always leave as it is because i usually do that from the column itself so next we have the animate on scroll let's click that and you can see that we have some settings for the animation so basically whenever you want to add something that moves when you visit the page uh it doesn't matter if it's when you visit the page or when you see it in your screen or whenever you change the mouse and different uh version or something else it's every motion that we have so we can set some settings for everything i usually put here for the animation duration uh 1 000 milliseconds so this is one second and this is the duration of the motion and this of course is the default settings and then and the animation anchor i usually leave it as this i'm not going to change this and animation isn't i'm usually put here is in out and this means that they will ease the motion of the effect the motion of the element and it will go easier inside and slow down at the last moment it's better in the eyes i usually do not change anything else here and the animation delay and animate only once i put that in yes and disable on i put that less than 992 so whenever someone visits from a tablet i don't want to see the animation the animate only once means that whenever someone scrolls down and if he scrolls up again he will not see the same elements animate again and come from the bottom of the page or the top of the page or anywhere else i don't want the animation to take place every time someone scrolls down and up and usually i put that as it is everything else can be changed independently in the element let's save that and let's go back of course you're not you don't have to save every time you change something you can style everything and then save once but usually i do that every little every 20 min every five minutes or so and then we have lastly these scripts this script we only have one which is the smooth scroll to has links and this basically means that if you click in a button and this button will go and scroll the page automatically somewhere else this will do it smoothly and the visitor will see the scrolling and will not jump directly to the point that you want it's basically something better to have than magically the element appears on your screen it's a smooth scrolling to the element that you want so you can select that and then you can select the scroll time i usually do not change that if you want smooth scrolling just enable that and you're good to go okay that was the video for the global settings and of course we're going to do another video for the classes which will uh have you which will understand how we can set some settings and use them for every element so that was the video guys thanks for watching give me thumbs up if you like the video and subscribe to my channel for more videos like that i will see you all in the next video bye guys

Channel: Stratos Tutorials

Views: 387

Keywords: Oxygen builder, oxygen templates, how to use oxygen builder, oxygen tutorials, oxygen builder for beginners, how to work with templates in oxygen builder, starting using oxygen, new to oxygen builder, learn to use oxygen builder, oxygen layout, oxygen how it works, global styles, oxygen global styles, oxygen regenerate css

Id: jEckoWlIJwY

Length: 27min 16sec (1636 seconds)

Published: Fri Jun 25 2021