Create a website with Oxygen | Step by Step Tutorial

in this video we're going to create a full website using oxygen builder hi my name is stratus and i'm constantly producing video tutorials about wordpress please subscribe to my channel for more videos like this this is a basic tutorial it's for beginners if you are already know how to use oxygen then maybe this is not for you but if you have just bought oxygen and you do want to know how to use it so maybe this will help you put some things together and understand how it works so we're going to create a website we're not going to go deep into utility classes custom cpt acf fields dynamic fields and everything like that there are other videos that i have in the channel and also of course in other channels that you can learn but i wanted to create a beginner's guide to oxygen because the oxygen group is growing and i would like to help more people understand how it basically works you can follow along everything in the video and i'm going to tell you how so basically this is a starter template from astra and you can create a website like that by using a local program like the local by flywe or any other program even if you don't have a domain name or a website or a web hosting company you can create this in your own computer so you can just go ahead and install the astra theme and then it will ask you to install and activate the starter template and then you can just go into elementor and hit the first website i think that that was the second with mountains and this is the one that you're going to get so once you install this you will have all those photos in your wordpress website and this is why i installed this because i want to recreate this i'm not going to duplicate the exact same website i'm not going to bother with how much is this pixels uh how much is the gap between those two i'm not going to see which exact font is using i'm just going to show you how you can uh choose your fonts how you can choose everything else your colors but i'm not going to uh duplicate the exact same website i'm going to use that to have something to build and as you can see this buttons does don't work so as you can see it has a pound symbol here in once i hover so they're not working so this is the website that we're going to build and this is the home page this is the contact page and this is the home page sorry and i think because i have disabled the astra theme it has some problems with the menu let's go and see the menus and let's go and just hit that primary save that and now once i refresh i have the correct menu yeah so this is the about page this is the page that we're going to recreate also services this is the services and we have also a contact page so the four basic pages that we're going to recreate let's go and start by taking some numbers just to have something to compare again this is not to compare astra or elementor against oxygen if you haven't seen any videos that are out there or see any anything you should know that oxygen is way faster than elementor don't bother to recreate the same website just to see how much faster it is believe me oxygen is way faster so let's open all those pages because i'm going to deactivate the astra theme so this is the home page then we have the about page then we have the services page and then we have the contact page okay so let's go to the back end and let's go first to the appearances themes and i'm going to start by activating this theme the 2021 and once i activate it i'm going into the astra and i'm going to delete that okay and now let's go into plugins install plugins and i'm going to select those two i'm going to deactivate that and then delete those two i'm going to keep the wp4 because i'm going to keep that form that i have already created if it was my website i would not use the wp forms but since it's already activated installed and the form created inside that i'm going to use the same one so after that let's go to the settings and permalinks and be sure to check the permalinks that you have selected the post name hit save changes and we're ready to begin let's go into the plugins let's go into add new and here we're going to install the oxygen 3.6.1 which is the current version so i'm going to hit upload and here is greek sorry for that but let's go and upload by dragging and dropping inside here i'm going to install now let's wait okay it's installing and i'm going to hit activate so we're going to start by going into pages all pages and here if it was a clean website i shouldn't have any pages inside here so i'm going to select all of those and i'm going to move those to truss and i'm going to hit apply then i'm going to post all post and if i have anything i'm going to trust it remember to delete always delete hello world and then let's go to comments just to see that we don't have anything inside here so now that we are okay let's go to opinions themes and just delete uh sorry not themes appearances and menus and just delete the menu that you may have here so here i have some pages inside the menu so i'm going to delete those remove remove save menu and if you don't have a menu here you can go ahead and create one menu give it a name like navigation or main menu or something and hit save so i'm going to to name it main because i like to name the main menu as main and hit save menu so now i have only one menu let's go into pages all pages and i'm going to open that four times and i'm going to create the four pages that i want so let's go here and i have the home page i'm going to hit publish and hit again publish now keep in mind that if you hadn't said delete this the pages the urls would be home hyphen 2 so this is why we delete the pages and let's go and make the next one which is the contact ok publish and publish next one is about about publish and again publish and the last one is services okay now that i'm finished i can go back to my pages and i have all my pages here if i go to media i should see all the images here okay so we're okay with images and now let's go into appearances and menus i like to create first the pages and then the menu because once i go and create the main template i want to have a menu already created so i can play with the settings of the menu and this is how i used to work so i'm going to select all of those i'm going to add those to the menu and now let's go to home let's put that on top then we have what was it let's open one home about services and contact so this is home this is the about services and contact i'm going to save that and now we're going to oxygen and templates and here i'm going to create one add new template so i'm going to name it as main this is the template that it will be used at in all the websites so even if you are going to create other templates like the post template that the archive post all other templates that you are going to create you have to have a main template also you can name it as you want it doesn't matter so i'm going to hit publish here and then i'm going to other and i'm going to select the cuts also where does this template apply cuts all which means all the website across all the website once i hit save again i can edit that with oxygen and now i will have here a black canvas where i'm going to work so the first thing is i'm going here that says add and i'm going to click that and here are all the elements that i have here they'll have the helpers wordpress library and reusable so if you have used another builder basically you should know how they work you choose something and you drag it to the next window here in oxygen you cannot drag the element one to add it you just have to click it so i'm going to start always uh start with the section but because of the header section they have created uh a template and sorry an element that is basically for a header so we're going to search for header and this is the header breeder so once you're going to create the header builder use this instead of the section so let's add this and now i have the header builder here i have the structure and once i click it i have the structure of the page so i know that this is the body if you are using the html you may know what body is but if you don't this is the page so what you see inside the page everything that is under here is exactly what you expect to see in the website we have the header builder which is this whole line the whole section this whole box not uh until here until the end of the page from the beginning until the end and then we have the header row once i click that i have header the row left row center and row right those three columns are what i'm going to use basically in most cases you will use something like a logo in your left and then something as a menu and the right and a button or something and if you want to add others other rows so you can create also another row at the top with like uh icons for social or something you can just click the header builder and add another row so i don't want to create that i want to create something like that so what do i have here let's go into the header row i cannot click the row left row sender and row right keep that in mind i just click header row and then i'm going add and i'm going to add here an image now before adding an image because i want this image to have a link i should also add link wrapper and i won't do that before so i'm going to add the link wrapper and this is like a div and this div has also the url capability so if you click that you will go into the specified url that you have selected so now inside this link wrapper i can add anything that i want the url should be this one so basically this means go to the home page go to the home the default domain and i add this because i don't want to add the domain also in case i want to change the domain or create a website in my local environment and want to upload that in another web hosting company i can go and just upload everything without concerning about changing the domain names so i'm just going to put here slash the target is self it's not blank because i want that to open in the same window and then i can just go ahead and click add here and click the image so i'm going to search for image and i'm going to add the image once i add here i can see now that i have a plus icon here and inside the plus i have the link wrapper this is what i used and here inside the plus i have the image this is the structure of the page so basically this is like a an html that you can view and know what you're building inside your page so now that i'm in image as you can see it says here image it has the image selected like blue with a blue color and this is selected also i can go and hit browse here and i can select from the media library the logo that i have so i'm going to select this one i think this is the logo logo one dark no logo one here is the logo logo one okay and i'm going to select the image i'm not going to add let's add the alternating text so let's add the attainment text logo one okay logo always add the alternative text because this is seo importance and select the image so now i have the image but because it's a white image in a white background i cannot see it after that i'm going to also add the menu but because i also want to make changes in the menu in white i'm going to add just for temporarily some just for temporarily i'm going to add a background color here so let's go back to the header row and i'm going for the background color that says here and i'm going to select the black so now i can see the image that i have here i'm going to save because i want to save occasionally and now i'm going to select again the header row and i'm going to add and then i'm going to select menu we have two elements we have the menu and the pro menu i'm going to select the pro menu and now as you can see it went here inside the row left because i cannot select the row right but i just going and grab it and then drop it in the raw right you could also do that by grabbing it from here next to the name but i usually do that in here in the dom structure so now that we have the pro menu i'm going to select if you haven't done that and now everything that you can see here is specifically for this element every time you select an element here this changing according to the element usually the advanced is the same in every element if you hit advanced we have the same but this primary is something that is more specific to the element that you have selected so the pro element has some features that are used to edit in the menu so we're going to select the menu of course we have only one which is the main here it says mobile menu toggle below which means if you want to do a toggle and change that to a mobile menu and you want to select to be in less than i don't know 992 pixels for this menu it will toggle to a hamburger icon and it will change to that so i'm going to select less than 992. this is something that you should choose depending on how wide is your menu this is a small menu with just four uh links home about service and contact it's not a big menu so i could go also in less than seven six eight but i'm going to leave it as it is here after that we have the desktop menu and here i'm going to select and start playing with that now i'm going to speed up a little bit about the process because i want you to see how the workflow goes but i want that i don't want to create a video that will take three hours so let's go to the typography and let's go and select here a font size here the font size will grab what i have select in the global settings but for this occasion i just want to change a little bit the size menu let's go for 16 and i think something like 16 or 17 is here i'm not going to grab everything so the color should be white the color of the text and then i'm not going to change any of this the font families should be something that will be changed after that in the settings we'll see it in a moment and then let's go back let's go to spacing and align and i'm going for item padding on top 20 bottom 20 and 15 and 15 here so we have some spread some distance between the items and here i'm not going to select any other thing after that we have the hovering active and for that to change i have to go and grab some colors so let's save that and then let's go into the manage and let's go into the settings here i have the global styles which is very important for oxygen and this is something that you should done before starting create your website of course i haven't created anything else i'm just inside the main template and i haven't completed and i can go and start playing let's go into the global settings and here i have the colors and i'm going to select the global colors let's select that and add the color and the color name is basic blue or something you can name it as you want basic blue so for basic blue i will have something like this something like this and i'm going to copy that after i insert that i'm going to add that color and then i'm going to add another one and i'm going to paste the same color and then click here just to give it a little bit of more white okay to have something a little bit more white and this is like a hover and then i'm going also to add a color and i'm going to add another color that will be my off-white of white is basically the one that you have uh between two sections that are both white so let's go into services and maybe we should see here so this is basically a white not uh so white but it's a white and this is enough white it has a little bit of differences as you can see so i do need a color that will be not just like white but it will make a difference between a white and that color so i'm going to use this f4 and i'm going to name it off white okay and then add color and we're good to go we have three colors here so let's save that and then let's go back to the global styles and here we have the phone so i'm going to fonts and here i have the display phone which is the 4d headings so i'm going to use the robota and i'm going to use the remote the bottom mono something like that and then i'm going to weights and i'm going to select 500 and 700. by clicking those two it means that everything else will not be installed i will only use this 500 and 700 i don't want to use any other weight so let's click outside now let's click here in the weight and it will go away and then for the text which is for all the text all the paragraphs i'm going to use roboto no ubuntu sorry ubuntu ubuntu and as you saw it changed also the menu because the menu uses the text font and for weights i'm going to use the regular and the 700 okay and save that let's go back to the headings now inside the headings you can change the font weight and the font size for all the headings that you want i'm not going to change at this moment but here you can change everything let's go back and let's go for the body text here i'm going to put 17 here 17 pixels line height 1.7 and for the color it should go into black okay and here from weight i'm going for 500. let's go back for the links you can change the color i'm not going to and then we have the width and the breakpoints this is the page width and this means how it's the width from the beginning of the logo until the end of the menu right here and this is 1 120 i'm going for 100 1200 pixels and i'm going to hit save changes if you are wondering what you should put here put a number that is smaller than 1366 because this is the common width that most uh most laptops have most average laptops have a width of the screen that it's 1366 so go ahead and put something smaller like 1300 if you want so i'm choosing that because i want to have some space in the left and in the right of the screen even if someone comes with an average laptop that has only the width of a small screen like 1366 pixels here we'll see a small gap between here and here let's go back and here let's go into the sections and columns and here i have the default section container with 75 and 75 this is where you can change anything and then we have the animator scroll usually i put here 1000 milliseconds for the animation and the animation easing is is in and out and here i only animate that once so yes disable on a tablet and less screens delayed i don't put anything animation trigger offset nothing and anything else i don't change that let's save that and we're good to start so let's go now and create another section that is here and this section will be for the content of the page so if i hit here add i will need also another specific section for that and this is called intersection so basically this is where all the content of the page will go and this is why we use the intersection after that let's go into the structure just to see that i have the instruction in a contact remember that inner content should not go inside the section the inner content should go without the section so it will not have any padding inside here so i don't have any padding on any margin i just have the inner content let's go and add another section and this time we're going to use the section and now as you can see the section goes underneath but as you can see it's just below the uh header because i don't have anything to show inside the intersection and that's why this goes underneath the header so don't worry about that at this moment let's go and see what is the header sorry what is the folder as you can see the footer is a white section so i'm going to also use the white color here background color use a white color and now i'm going back into the inner contact i'm going to select that and i'm going to select sizing and spacing and i'm going to select minimum height to be 7 5 and here instead of pixels i'm going to select viewport height so this will push down my section in the bottom of the page so even though i don't have anything inside here the folder should always be at the bottom of the page and as you can see the image is not exactly at the bottom so you can push it a little bit more if you want like 78 or 80 something like that but if you are adding all the pages with content you don't have a problem this is something that i do like to put here so let's stick with the 75 and let's save that and now let's let's go and select the menu again so we are in the desktop menu we're on hover and active and i'm going to select the hover text color to be this one this is the hover one and the hover background is not the active text color is this one so it's not the same color as you can see this is the basic blue and this is the hover and i don't want to change anything else now i'm going to save again and as you can see the one that is colored here is the service because i'm previewing these services page i can select here to preview the home page of course nothing will happen in here because i don't have anything and as you can see now i have the home here now don't worry that that changed uh this is like a bug or something if i refresh here i will see the correct image let's wait okay and we're going to save that and we're going to create something for the home page and then come back again in here so i'm going to close the page and i'm going into all pages i'm going to refresh because i have some pages here okay and as you can see now that i have changed the global colors it says click here to regenerate the css cache now this is not something that it's important for me because i haven't create any pages with css cache but if you see that just click it it will only take a few moments it will regenerate the css class and it will go away so as you can see it's all done and let's go back to pages all pages and we're going to start building so let's go into homepage and edit with oxygen i'm going to open that in a new page and the only thing that i'm going to create here is just the first section because i want to go back and change a little bit the uh header and i'm going to make that to be transparent so let's go back to the this one and what is this this is the page how it looked before so i'm going to close that i just want those four pages okay let's go here and let's go and now since we are inside the page the home page here i'm going to select add and this is how you always start and create your first section okay now that i am here i can just hit structure also because i want to see all the structure of my pages and here inside the section i'm going to click advanced i'm going to click background and i'm going to click browse and i'm going to select this one and this is something that i didn't want to see i don't like that the text is inside the image i didn't want i didn't know that it would be like that so as you can see if i grab and put that here they have created an image with uh the text and as you can see here the buttons which is not good if you create an image and put the text inside that then the search engines cannot see the text they can only see an image so this will not be identified by any search engine also in the mobile it will not look too good so it will not good it will not take a good quality the you cannot change the text and you cannot change the the font size so i'm guessing uh the astral team did that because they wanted to save some time but it's not ideal to do that so i'm going to move that up and put that where it was and i'm going to use the same image because i i don't want i don't have any other image for that and let's see as i can see here the the buttons are working so let's see if they do have another image here let's see in the browse if they have another image okay i don't see any other image that they have so let's see something else i'm going to open that and let's start astra starter temp themes okay import starter and i'm going to select the same website this is the one i'm going to click here and save no i cannot save let's go and inspect sorry again for the greek so i can see i can inspect the image the h1 classes so they're not it's not exactly what i was saying about they do have an image here so let's go and see where it is the image okay this is not the image the same image so i don't know what exactly they have created like here so i'm not going to search for that image exactly i'm just going to delete that delete that and using other images hopefully they have enough width for us to use something else so this is 86 kilobytes with 1200 pixels width and i'm going to use something like that okay it's not identical but it's close enough and here you should also have something for the atelier text and now i have an image here after that i'm going to select to be covered so it will cover the whole section and then no repeat and i'm going to select here if you want to change the position that it's for the focal point i'm not going to do that at this moment so let's go and add here also a text so inside the section once it's blue as you can see here i'm going to add here a heading and here i'm going to go into the page and i'm going to select this one let's go back to the page and let's triple click it and paste that here so multi-purpose template and the text color is white and now i can select the tag and put that into tag 8 2. after that i'm going to select back this section and i'm going to select the child element layout to be vertical and then center so now i have that in center let's go and add the h1 which is create your website and i'm going to select this one and then add and select heading so the this way the heading will go beneath the item that was selected because it cannot go inside so click here and create your website i'm going also to put the text color into white now a very good trick that you can do is since you want all the text to be in white you can go and go into the section and select for the whole section to be to take the text color and be in white so as you can see i selected white and this changed into white now once i also add the text beneath that it will go and add also a text into white color so i'm going to grab that and i'm going to put that here triple click that and paste that and where does it break under the neck okay neck where is the neck neck here's the neck so here are the break okay and now i can go also into advanced and typography and select to text a line in the middle something like that now i can just click here and then add some margin so i want to put something like that and then something like that again you should put the same margin and as you can see something like that and if i go to advanced sizing spacing i can see that margin is 25 let's go for 40 and let's select that also advanced margin and let's go again for 40 and then here advanced margin and i'm going for 40 because i also do want to add some buttons here now as you can see here the buttons are one next to the other so i want to have them stuck vertically but sorry horizontally but since i have selected this section to be stuck vertically if i add two buttons under the text let's go and add two buttons button and duplicate that you can see now that at this moment the buttons were are going one under the other so i want something to change the alignment i want basically a div the div as we have said is a box and what i can do to add a div here is go ahead select that and add the div and then drag and drop those inside here or i can select into the button and select here and wrap it in the div it will do the same let's go and add the div and do it with the hard way add div so the div is here so i can grab this and put it here or i can go and select that and drag this inside the div like that and then as you can see now the button is inside the div i can do also the same thing with dragging this button from here or from here you can do whatever you like so now that i have the one both buttons inside the div i can select the div and select these to be stuck elements horizontally so now it will go one next to the other so i will have something like that and the one is services triple click it no control a okay services and the other is contact i think about us okay about us okay now i need some space between those two so i'm going to click this one the left one and i'm going advanced and sizing and spacing and i'm going to put here like 40 something like that as you can see i have a little bit of space and little bit of space here i'm okay i don't going to replicate as i've said the exact same thing so now i need something like this hover effect so i'm going to click the first button services and here i can create something like a class css class basically the css class is something that you can create and then whatever element has the same class it will take the same layout and i'm going to add that because i know that these images may be used in another section so this is something that you may use somewhere else and maybe here you can see that this is the exact same thing the same layout and this may be also used somewhere else so what i'm going to do now is going to select here to click here in the id and now i'm going to type something for the class so usually i put here the page first so this is a home then i put the section this is the head the hero section and then i put the element that i'm talking about and this is the services button services button services button there are many ways that you can add classes and but keep it something that you can remember how you can structure your layout okay so this is how i used to work so i'm going to click here the enter or the add class doesn't matter and once i hit that you can now see that the class is now selected and everything i do changes for the class every other element that has the same class will take those changes uh simultaneously so here i want to go into the uh advanced background and i'm going for background color and let's see if it changes and as you can see it changes and if i go to white i can see that it's white and here i'm going for zero so it will be transparent something like that after that i have the services that it's quite here and i need to put also something for the borders so let's go back and let's go into the borders and let's go to width one pixel solid and color is white so now i have also the borders then i'm going to put a little bit of padding inside here so let's go into sizing and go let's go into padding and let's go for 20 in the left and 20. now let's go for 40 and 40 40 and 40 and i have something like this and once i hover i want to change it to another color as you can see here once i hover it changes to another color so what i'm going to do now is going to select here the state i'm going to select hover and now i'm going to change what i want to be changed once i hover the button so i'm going to background and for the background color i'm going to select this one so now i have this effect and also i need something for the borders so now that i have the white border i'm going back i'm going into borders and i'm going to select the color to be this one the width is again the same one and solid so now i have this background and this border once i change the hover to the original i can see that it changes but as you can see it changes immediately and i do want to do it smoothly so i'm going back to the advanced and remember that this should be done into the original state and not the hover and i'm going into effects i'm going into transition and here i'm going to select the transition in seconds to be 0.4 something like that so once i hover i will see it smoothly changes into the color that i want okay save that because i do want to change to save it every time and then let's go into the about us and i'm going to add a class here it is home hero about us button okay and here i have a advanced background and i have the background color of this one okay no sorry it's a white so i have a white color with the text to be let's go back let's go into primary and i have the text color here to be this color the primary color the basic color and let's go again into the advanced let's go inside again spacing and here i'm going to put 40 and 40 for the padding so it's nice and now if i hover i have to do the same trick with that except for the borders so let's go into the state let's go into the hover settings and here i'm going to go back background and select for the background color to be this one and then the color the text color should be white so let's go back to the primary text color and white the text color can be also changed from here and this is the same have i changed the text color yeah for the cover of course so once i hover it should be changed and now i don't see that changing let's see save that and if it doesn't i will do that from the yeah not changing so let's go into the state let's go into hover and here i'm going to delete that and i'm going into the advanced let's go into typography and change the color into white from here okay let's go and change that to original and here we are okay we also need the transition here so let's go again into the effect transition and here i'm going to put 0.4 okay last thing is to put some margin inside the section to have it go nearly in the whole page i can see that it takes the whole the whole page so i can go and put into the background and as you can see here i have the background sorry another background sizing and spacing and i can go and put some other container padding let's go for 250 and 250 and it pushes down and here it pushes also down but i can also go and select a height to be something like a full screen height uh so you can do whatever you want without you can put 100 of the viewport height and it will take the whole space or you can just go ahead and put some pixels here that depends on how you want to create it so i have something like this and now i'm going to save that and i'm going to go back into the main template just to create the transparency for the header uh one thing that i also want to change i think that it has a filter of a little bit of color so i'm going to change that also and to do that i'm going to the section i'm going into advanced background and here i have the image overlay color and i'm going to put that into this color that i have and give it a transparency of about 30 something like that maybe a little bit less 25 okay save that of course it's not the same image so it will not have the same effect but let's go and see also i have the another the font is a little bit bigger but i'm not going to change everything as i've said i will not go and duplicate the exact same thing and create a two hours video so i'm going to close the page because i don't want to have two oxygen builders opened in the same time and i'm going back to the oxygen templates and i'm going to open that edit and here i'm going to click open anyway and open and now i'm going to select the header let's open the structure and now into the header as you can see i have here the header row and here i have the header builder so the header row has a color at this moment i'm going to delete that and i'm going into the header builder and i'm going to select the overlay and the overlay should be uh at above 992. this means that it will take the overlay for the width that is more than 992 so basically in if you view it in a mobile phone it will not take the overlay color but if you do that then it means that once you go from a mobile phone you will see a white box here with the white logo so i don't want do that i'm going to put that always of course i'm not going to change the lead for the mobile phones as you can see the home is not viewable because it it's not good for this image so i'm going to change that and let's go here let's go into sorry the colors hover and active and let's delete that so the hover text color is not going to change and of course the active color should not change either of course keep in mind that once you create start creating a website you will always create you you will always make changes you will see something you will see that it would be better to do something else so you will do something else here you will change another thing you will change another thing you will see the front end uh see that you have something to a big better build so you will change something else next time that you will see it maybe a day after you will see that you should also change something else this is something that it's often done by everyone so now that i have created the header uh now i can just go into the footer and here for the tag i'm going to select here and select footer and i want three columns i think one two three but uh it's not why they have created like that why didn't they put the about us in the middle i don't know so let's go and create something here so i'm going to add for the footer section i'm going to click add and i'm going to add columns three columns three columns so as you can see we have three columns the columns is basically three divs as you can see here in the section i have the columns and it's basically three divs but the pro in here using the columns is that you can change the settings easier for the mobile version so you can reverse the column under column order you can stack those vertically if you want in the mobile phone you can select the width and change things here easier so it's not anything different than basically a div we have the uh here the logo we have the address and we have some icons so we have the logo let's go and add here the image and the logo i don't think that they have any link so i'm not going to put either so let's go and add an image here image i have the image i'm going to select browse and i'm going to select this which is the logo one dark okay this one logo footer and i'll turn text logo footer okay select the image now that i have the image i'm going let's put that in the left like it is let's go and add a heading i think it's a little bit bigger than just the text okay let's triple click it and paste that okay and then select here something like nh4 and put lit a bit a bit of margin marking like 20 and the color should be this color the main color okay and underneath that i have the icons the contact icons so basically i don't want to add just icons here i want also to add a div so i can stack them horizontally and here i'm going to add a div and once i have the div i can select to add the icons icons so now that i have one icon i can start changing the layout and then duplicate it three times this is how you do it in elementor and other builders but here in oxygen we can use classes in order to create the icons style them and if we want to change them we are going to change that once and it will be changed to the three icons at the same moment you don't have them to go and right click and copy and paste to the second and the third icon and then go inside all the pages so now i'm going to select here as i've said for the classes and i'm going to go for footer because this is just for the footer and this is the left column left icon okay once i have a class i can now go and triple click and duplicate that and duplicate it again and as you can see it went vertical so i'm going into the div this div and i can select now to stack those horizontal now we can go into the first icon again as you can see now selected advanced and sizing and spacing and go and put a margin of 10 or something and as you can see and you can see that uh space went into both of those icons in the the three icons also so let's go also and change the icons let's go into primary i'm going to go for solid and i'm going to go for a background color of this one no what was it it's something like that but it's a little bit transparent something like that i think and then for the basic color we have this one so something like that let's go for this something like that okay icon size 25 maybe and space around it to 15 something like that no a little bit smaller 10 maybe something like that and let's go again advanced sizing and spacing and put here 30 pixels 25 okay so the first was the facebook then i don't know what is this and i don't know what is this i don't know what are those okay so this is like a facebook icon let's go into primary and let's go for here and let's select facebook okay something like that here i'm going for instagram and this should be twitter twitter now if you wanted to put also the uh links and you should put the links inside here you should add those inside the link wrapper or just add the icon and then click here that says link settings and this will automatically add that in the link wrapper as you saw and then you can go ahead and put the link that you want and click open in the new tab let's go and click cancel and as you will see here i have the link wrapper for the icon and now i can go and select the icon and for the target blank of course to be opened in a new window so the visitor will not leave the uh this uh website so now that we are okay with the first column i'm going to save that and i'm going into the next column which is the about us okay and as you can see the about us and the connect is identical for the layout so i also can create some classes here and have them assigned to both of those but just to speed the purposes of the video just for speed i'm not going to i'm going to add a heading here and i'm going to triple click it and select about us was it about us about us okay and select here and put an h4 something like that and underneath that i have four pages company profile cr intel read articles and media kit all those pages don't have any link inside they are linkable but they don't correspond to any link they don't follow anything so here i can go and add and instead of just a text and not to a link wrapper i can go and select the text link so it will add for me a wrapper and then a link text a link wrapper sorry and a text so it will do both of those at the same time so now that i have added that i'm going to add here a class just for the text so we are in footer and here are the link linkable text okay and i'm going to copy it four times and i added the class just because i wanted to maybe add some margin beneath that so i can do that more easier now that i have created that i can go and duplicate that and drag that to the next one and here also i can go into here and duplicate that and go here and put that underneath and then we will add that also so we have something like that and let's go advanced let's go sizing and spacing and put here a margin of 10 and here the same thing advanced sizing and spacing and 10. okay something like that now i want to change the this to connect okay connect connect okay and now i'm going to remove some padding from this section okay maybe it's not so big like a 15 so let's go and put that not uh 15 here let's go for less 10 okay let's go for five no let's go for two something like that okay save changes and we're okay so text color we are black not quite black but i'm going to put that black and now i have a line here and i have that copyright with uh oxygen powered by oxygen because oxygen is the name of the website okay so now i want to put another line inside here sorry inside here i want to put a line another line and i don't want i i'm not going to add another section i think and i'm going no i'm going to add another section just to have the line across the whole website i'm not going to change anything else so let's go and add another section at the bottom of the page and as you can see this is the section this section has a margin so uh not a margin sorry a border so let's go for a border top let's go for width one the color solid here is the style and the color is something like that and it's not so it's a little bit of transparent something like that i think yeah something like that and then we have this one copyright by oxygen okay so here i'm going to add a text which text will say copyright by oxygen remove the space remove the space and we're good to go okay the color of the text is not black so select that and select this color and now we can save and we're now okay with that after you have created the template of the the main template then you should go always into the section as you can see here and select the page to be for the next breakpoint so here we have the below 1200 pixels so here you can see that this is okay maybe it needs some margin on top yeah it needs a margin so i'm going all devices and i'm going to select here and i can see that this has a margin but once i am here okay it has a marking so don't worry about that and this is okay at this moment i think this is a little bit too big so let's go font size and let's put 22 20 okay 18 something like that and maybe put a little bit of sizing and spacing and margin here now remember that once you change that you change only to this layout and those beneath so i'm not going to change by adding anything here the old devices so because i need a space also into the old device i'm going to add it here so let's go for five to have a little bit of breathing room and let's go here and we'll see where okay so everything is okay here let's go to less than 992 and here i have the icon here and now i have the menu right here you should go and put that in white and change that i'm not going to do that in this video everything is looking okay here and let's go to less than 992 okay this is looking good okay and then let's go and see uh here so here this should not uh remember that we're just changing the header and the footer now now not the section inside because this is from the home page so this is okay but this should be changed a little bit i think this should go to be like 17 or something like that this is okay this is okay and this should go a little bit less like 17 so let's go for font size 17 something like that and this should go i don't know 13. something like that okay save changings and now i can close the main template and go into the page again all pages and now i'm going to continue building my homepage let's go and edit that and let's go and open it with the oxygen let's see what are going to do next so after that we have the services as you can see here and once you hover you have a little bit of effect so underneath that let's open the structure we have only one section as you can see the header in the footer is not something that you can see here and as you can see this is something that i should put here as it index feature and this is why i lose uh the header because this doesn't have a set here but i think in the front page it will look okay let's visit just to see it refresh okay and this is because i haven't select which page should be displayed in the home page so let's go into settings let's go into the discussion sorry into the reading and here i'm going to select here static page and select the home page save changes and now if i go and refresh the page i should see also the home page and the header in the footer but just to be okay let's close first the oxygen builder let's close that and let's go into the templates again oxygen templates main template edit open it okay all those things that they're saying the popping up is just because it wants to close every other page that has the builder open and it wants that so if you make a change it will be across the whole website because one thing can overlaps the other so this is why you should always open one page at them every time so i'm going to select these uh section the header let's go into structure and as you can see i'm going to select the header builder and i'm going into the advanced i'm going into the layout and here i have the z index and i'm going to put here one one is higher number than what i have inside the section because i have a the hero section zero so this will be always be displayed and let's save that let's close that close close that and let's go into pages all pages and open the home page again okay now i'm going to open that again in the oxygen and let's continue building the page structure don't worry about that okay and i can go and put the z index of here in zero but i don't think that this is a problem and let's go into the next section so i'm going to add a section this goes underneath that and i have here the services which don't have any text okay no problem so we're going to add here three columns three columns okay and those three columns uh let's go into section let's go and select the div and this div can have a background and this is what i'm going to choose after that so first thing first let's go and add here a class so for the divs i'm going to select the class and this is the home page this is the services services because it's in the services section a column div column divs okay going to add that so now if i go and make a changes and copy the class to the other divs it will take the same style as i've said okay i didn't copy that okay copy that and let's go here and put here this style and click here and also this style here now that i have the same style i can go into the divs and i can select now the width and the height so let's go into sizing and spacing and let's go for a height of 250 pixels something like that now i can also go and change a little bit let's see what else we can do as you can see we have a little bit of padding inside here marking inside sorry so i'm going into the margin and i'm going to select here to have a 20 margin now because i select 20 margin uh the one div went down here because the width of the margin is 33 percent so adding the uh 20 pixels here and the 20 pixels here it goes beneath the 100 of the width that i have here so it goes here so all i need to do is go into the width and put that like 30 or something of the width maybe a little less let's go and see okay now this may confuse some of you because it's not changing but this is because the id of the same of the element is has some numbers so i have to go and select the id now and the id has the width so i have to delete that and i have to go into the div also and also delete that and go inside here sorry not here here and select the id again and delete that and here i'm going to select again the id and delete here the width of the id so now they don't have any width and they have only the width that i have set from the class but i delete that so let's go in 30 and let's put 31 32 no 31 31 pixels okay so remember that if you change something into the class and not changing this is because it has some styling in the id or another class that you may have said okay now that we are good we can change a little bit of the height to put a little bit bigger of height let's see yeah it's not quite square it's i think it's a little bit bigger so let's go into sizing spacing and height let's go for 300 and we're okay now now we do need a background here but once i put a background in the class it will take it to all three columns and let's see that let's go and add the background here i have the forest so let's go and browse and here i have this forest which is way big for a column background but that is what using and as you saw it took the same background for everything so i'm going to delete that and here i'm going to select again the id but first let's check this div okay and select here the div and now i can select the background so the background is into the id not the class so it will only take effect for this particular element this is something that you should understand because this is crucial for working with oxygen the difference between id and css and classes okay not css different in css the id and the class so the ids for a unique element the class can be across elements selecting the div clicking background image selecting this one and select the image it will take this into the image but as you can see it's not quite the same so i have to change here to cover and then no repeat and here you can put 50 and 50 change that to percent so it will go and always show the center of the image once you do that you can now change that to class and everything else that you change it will affect the other divs as well so now i'm going to set the uh let's go to primary and set the background color it has an overlay color i think not the background color yeah and overlay colors you can see it has a little bit difference once you hover so what i'm going to do here i'm going to to advanced and i'm going for background and image overlay color but i only want that once you hover so i'm going to select here the state to be hover and the image overlay color should be this one but like that okay let's go back to the original and once i hover it's not quite changing but it's changing but you cannot see it exactly uh here it doesn't look too good in that image so let's go and see if we can put that a little bit better let's go into advanced and let's go into sizing and sorry select that state hover and advanced size again spacing no cover sorry background and here let's put a little bit of darker okay and let's go and see again original and it's not changing because apparently it has to be added in the id because the id overlaps the overlay color here so let's go into the state let's go and delete that hover okay i'm going to delete that so it will clear the hover style that i did and let's go into the id and i'm going to advanced sizing and spacing no background image overlay color once i have our first hover and image overlay color is something like that but with a transparency of 30. okay let's go into the original and see once i hover okay the overlay color isn't working it's changing the background again and the thing that i have to do now is select the id advanced sizing and space background sorry and state hover so i have to select also the background image for the hover again so select that select image and now i'm going to select here to be original and now once i hover it's working okay so it doesn't matter that you may make some mistakes just try to understand why this is doing it's a little bit difficult in the beginning but you will always make mistakes but as you make yourself better with oxygen it will be easier to understand what is fault and how you can fix it so now that we have this set let's go into the class again and select the uh particular div and add here a heading so once this is added i'm going to select and see what it is service one okay service one so i have a service one text color is white white and the hiding color is let's go for tag h3 okay and change that to service one service one okay now you cannot see that i'm also changing the others classes but because i have the classes i can now put that to be uh vertical in center and middle so in all the three divs it will go the same this should be a little bit bigger let's go font size now let's change that to h2 and we're okay with that let's go to the next one which is the service too and it has the called my mountains let's go into the id okay we are in the id advanced background and browse and select these mountains okay remember always to put the alternate text of course you should put something relative not what i'm doing here cover no repeat okay fifty percent fifty percent this should be duplicate and one more time and here i'm going to put that here and this should set service to okay and once i hover it should change so i have to go into the div again and advanced sizing sorry not sizing and spacing background and now that i have here i'm going to select hover state and select also the same image select cover okay and overlay color to be this one and what i have selected here i don't remember let's go and see the cover it's 0.3 okay so here for the hover advanced background so the background color is this one but it's 0.3 okay original and as you can see it changes to that of course you have to go again and change also the effect to be transition of 0.4 something like that again this also be a 0.4 effect transition 0.4 okay and now the last one let's grab that and put that here and here for the div let's go here advanced and we have here this okay this image let's go background browse for the image i have this image okay and once i change the hover state i have the same image of course not that that one and i have also the image overlay color of that one with the transparency of 0.3 we are here okay and change that to zero okay original and let's change that to attributes sorry to effects transition and 0.4 save that okay now i'm going to select this div and i'm going to select the class because i want that to be selected once i hit the mobile view and all the changes that i'm going to make for the margin and the padding and the width will be affected to all three divs okay and now we are ready from here but i also have to add as i can see here for the services i have a link of a link so i can click here and put here the link and i'm going to click x because i'm not going to add anything but if you want it you can add the services so click here cancel and click here here and cancel so now i have link for all those three elements and this is service three note that it's important but let's change that to service three okay after that i have here two columns as i can see okay and let's go and add two columns underneath that so i'm going to select now the columns and i won't select the columns because once i do that uh the new element will go underneath the other it will not go inside here it will go underneath so once i select these columns as you can see it went here and underneath that i won't select here these two columns now we have two columns and i want to put a little bit of space underneath that so advanced sizing and spacing and put a little bit of margin or do that by dragging here okay we are 38 let's go to 40 something like that and now let's go and add here a heading and triple click it and put here this text okay and delete the space and put that as h3 amazing things for you okay and then i have something like this text whenever you have text with spaces or grabbing text for word you can go and put here uh let's click first the div of course the reason that i'm clicking the div is for the element to go inside i can go and select the reach reach text and double click it and now i have this what you see is what you get editor and i can paste the text and it will grab the same uh space as you can see here so it will add all the divs and everything else but since i have like that uh because i'm using and copying something like that it will add nonsense to that so i'm going to select the text and paste here the text so now i have all the styling cleared okay let's go to visual again and you can see now how it looks and let's save and close and this is how it looks now okay save and underneath that i have a button or history okay so i have here under this i'm going to add a button button that says our history our history okay and now once i click here for the button i can select the class to be the same otherwise it was for the hero services button i think it was the services the about us yeah the about us so hero about us button select that and once i do that you can see that i have the same uh exact style in the button the only thing now that i need something for the border so i'm going to change a little bit this button this doesn't have a border around it so i need also border here so let's give it a space first okay and let's see save it and let's see how it looks from the front end okay and it has a border here at this moment so i don't need to change anything else okay let's see what we have next we have this call to action with this background okay call to action so let's go and do that also we have another section then section add another section as for the section you don't need to click into the sections because the sections can only go and one under the other you cannot have one section inside another section so it you you should not it's it's not something that you should choose this section and then click another section it will always go outside so inside this section we have to add a heading okay this heading should go and have this text but i think it should be white yeah white so i'm going to select this section and for the text color i'm going to select white so everything is going to be white inside here let's go into advanced and let's go into background and here i'm going to select the same background which is some mountains of course background and we have those muttons yeah select that and now you can see the text a little bit and i have to put also a little bit of overlay color like that but let's go to 50 percent something like that okay and as you can see now i have the effect that the image has been the image that i have the background image stays fixed so i'm going here and i'm going to select cover and here for the scroll i'm going to select fix this is a parallax effect so it will stay fixed for the background as you can see now this should also go in the middle so select the sections primary vertical center and it will go into the middle after that we have this text and we have a button like that the services button okay so i'm going to select here the text and i'm going to select add and select the text and triple click it and paste it okay it does somewhere break uh they tell us okay tell us tell us here enter and backspace and then advanced typography and put that in the middle okay i need some space like 40 sizing and spacing and 40 here i need some space here for the margin sizing spacing and 40 here and i have also underneath that a button button that says contact okay contact and the button has the same style as the home and which was it about us home about us button something like that okay no sorry it has like the services not the about us so i'm going to select here i'm going to delete that and i'm going to click again and select here and we have the home services services button like that okay underneath that we have a gallery and i also should put here some space and here i have some space for the section let's go into section advanced sizing spacing and here i'm going to put 150 and 150 okay and now i'm going to add another section and this section should have a gallery okay gallery so the gallery has six images all mountains of course and let's go and select the browse for the images and select one two three four five six now because i haven't select the same six i'm going to because i want to take the same size of the image so i have the mountains the house mountains so i have this one okay let's see do i have this one with the yeah i have the lake i have this with the river i have it okay i have this with this guy and this is one okay i have this and no i don't have this one okay the next one was that with the persons here i have it i have this and i have this also one two three four five six okay let's create the uh gallery and insert that and let's change that to the layout so have we a link for the images yeah we have the link for the images as you can see okay we have a link so here we have a link images yes we have lightbox yes thumbnail resolution we have i think it's medium or medium large we were going to see later let's go for the layout we have three images per row three images per row and the space i think it's okay yeah it's okay but i need to change the medium to medium large okay so how well the resolution is for the thumbnails i'm not going to put a large or something like that because i don't want that to be affected to my image settings so let's go and save and of course these are not in the same row i should change the row but i'm not going to change anything at this moment if you want to do that you just have to go and to browse these and change that or change from the id as you can see the 20 is the first one and change how you want so let's save that again and let's see what we have next okay we only have to change now the uh background color so let's go into the settings here i have this section and the background color is enough white color something like that let's save that so we have that effect against the footer as you can see here and now let's refresh the page and see what we have done so we have the hero section as you can see with everything else we have those services we have that with the button we have the call to action with the button we have the images and then the footer so now we can test the exact same page against the gd metrics that i did with the elementor dd metrics okay test just to see what we're going to get and let's see if the image is this is working the link yeah it's working okay we have the link and everything else is fine next we're going to create the about us page and again you can see now that i don't see the header but it's there i don't have anything against the contrast to see the header so let's go here and see what we have for the settings for the times so we have 1.7 against the 1.1 with oxygen 137 megabytes for the total page for oxygen and here we have 134 which is close enough because we're using the same images it should be identical but as you can see this is a little bit bigger because i have a bit different image i think for the hero section after the image everything else is okay and here i have 43 requests for astra and elementor and i have 29 requests for the elementor and of course i don't have any casting enabled to any of those themes and builders okay i'm going to close that because i don't need it anymore and i'm going to go into this was the homepage okay i'm going to close that i don't need that anymore and i'm going to the about page and this is the about page okay so let's close that let's go into pages let's go into about page open that edit and let's open that with the oxygen so we're going to start by using the image add section of course the section should go up here because i have overlay for the whole website and not only the home page so let's go into the structure to have it open let's go into the section now that we are advanced background and browse image and we're going to select now this image because i think it have this enough space for that no it grabs also the uh some hero section okay some header so not this image uh let what was the image that we used uh was it this one i don't even remember what the match we used for the homepage so let's go here and let's see okay this one that was it so this was the image and i think this is the image that is using for the home page but it's using filters yeah i think it's using the filter okay so let's select that image and let's compare it to that it has the same mountains or not yeah i think this is the one but it has a filter so i can select that and let's go now into the cover and let's go for the left 50 and 50 and let's put that percentage and percentage so it will go up as you can see here okay and i'm going now to go and select to have an overlay color of this one and put that up around 50. save that and i think it's quite okay so maybe put here 80 to push it a little up and i think we're close enough we don't have the same color of course but i think i'm close enough so i can also go that and change that to the home page as well so uh now that i have those settings for the section i can do the same section and create for the other pages of course not the home page because i need more space but i can do that also for the other pages we're going to see how it done how it's done let's go into advanced let's go sizing and spacing sorry background and here i'm going to browse and select the last image this one okay select that and i don't have an alternative text set i need to do that and i need to put a little bit more contrast here let's go for fifty percent like that okay save that and i think we're almost okay maybe more contrast 60. save changes okay close that and now that we are in the about page uh here about page so we have the about title i can go and select here and add heading about i don't need the space okay and now select the section again and select the vertical center and this as you can see it cannot go now into the middle because i don't have anything up but if i go and select to be horizontal middle and center it will go into the center but i can select here to have sorry i have to remove that space here so uh you you can see that if i had a little bit more space let's uh give it the section a little bit more height let's go for height uh 500 pixels so as you can see the about is in the middle now but this is something a little bit strange for the uh oxygen you can try it in another section if you add here a heading and try to style that elemental vertically you will see that it will not go into the middle it will go on top but if then you try to stack that horizontal and then go into the middle it you will see that it will always go into the middle so let's see how it's done once you add it it will go like that and you can go in center but you cannot put that in the middle but if i go and select the tiles horizontal and then select middle then i can go here sorry i should also put here in center and then i can go back to the vertical and now it will stay in the center i don't know why you cannot have those uh vertical alignment in the uh element of vertical layout of the section oxygen hasn't add that but this is something that you can do here so now that i have styled it a little bit i will see that it's not the same okay the about should be a little bit bigger and also i don't think that this is a 500 pixels this is more than 300 pixels so let's go with sizing and spacing and let's go for 300 pixels something like that maybe 400 okay we're going to put like that the about should go white but i'm not going to put that in here so let's go to the section let's go to text color and put that in white and now that i have styled that i can go and add a class so this is the pages title section now i have add the class but i have styled the id and not the class and this is something that now i can do with oxygen and i can copy the id the style of the id and put that in the class so just click here and then click into the style that you want to the id that you to class that you want sorry and now all the settings went into the class so i can go ahead and delete all the settings from the id yeah and everything will stay the same because i have all those settings in the class now in every other page i will add the same class and it will take all the same space the about us will be white of course it's not the same text but it will be wide and everything else will stay the same and let's go and see what else we're going to do underneath that we're going to add two columns and here is one the text so let's go here setting section add section okay add to columns here is a text let's go for heading not for text because it's a little bit bigger let's go for h2 okay established in 1995 and we have this text okay copy let's go here and add a rich text triple click it select the text ctrl a then okay delete the space here put a little bit of space here let's see a visual okay and i think this is like a bold and this is like a bolt also and it has some space underneath here so this is bold this is bold save and close and we have something like that okay underneath that we have another section that has three columns and enough white color as you can see and we have some text here okay let's go into this section and let's go and add another section we have three columns so add columns and we have three columns and here we have a heading which will say this and the mission is an h2 okay delete the space before okay mission it's not in the middle it's in the left okay so copy this and add some text and let's put a little bit of space here okay now that i have this i will copy that into the next one and also i have the values here so let's triple click it let's not typically get let's duplicate that and duplicate that and let's put that heading here and that heading here and here it says vision okay triple click that and here it says values okay i'm going to type that values okay now i have a text i'm going to copy that and i'm going to put that here so i have a text here but here i have something different it's an icon and then text so what i'm going to do now i'm going here i'm going to click the values and i'm going to add a div and remember that i'm adding div because i want to change the stack inside the div so inside the div i'm going to add icon and a text before that because i'm going to duplicate the div and i'm going to make three divs in total i'm going to add a class this is for your own good add classes whenever you can and especially if you have something that you will duplicate that so this is the about us page what was it the about us page okay so the class is about then we have i don't know what section is this mission let's go for values because we are in the values column values row div okay now that i have added that i'm going to add an icon and the icon should have a class also so we are in the about values icon and then i have a text with the class of about values text okay now i can select the div and i can stack that horizontal and i'm going to select middle because i want the icon to be in the middle of course it's way too big to see it but it went a little bit down and i'm not going to change any of that and then i'm going to select the icon and what we have as an icon we have a little bit of arrow so let's delete that and see what it is it's this one okay and of course the size is about 10 pixels maybe 15 maybe 15 and i need some margin sizing and spacing and i need to put 20 margin on next to that 10 margins let's go for 10. okay and then we have lorem ipsum something okay this one if you want to put in a little bit of more uh space it's easy to do that from here okay and i'm going to triple click it sorry not the uh icon and want to put that in the div and select the div and click it again to duplicate it and do that one more after that i'm going to select the div the first div it doesn't matter if you select the first div or not but this is how it used to work because i have the class i don't need to do that in the first div k class and select its size and let's put a margin of 10 something like that let's see how it looks yeah something like that okay now i need to click the section and i'm going into the background color of the section and i'm going to select the off-white and i'm going to save it and i think we are okay of course it's not the same color but it's pretty close so once i refresh the about that page as you can see we have the about page here and we have almost the same page uh of course i don't like now that these are way too small for me i think it should be a little bit bigger and i think this is bigger yeah but i'm not going to change any of these because this is more for a course tutorial to see how you can create pages and how you can style those and everything else this is something to get you started so enough with the about page i'm going to close this page and next one is the services and at the end i need to also add here and a button okay so the one thing that i forgot to do also in the home page is check for the mobile view so i'm going to do that for the home page now and i'm going to do that next for the about page because it's crucial to do that in every page once you finish the page you should check it for how it looks for the mobile in the tablet view okay so now we are here i'm going to click here i'm going to open the structure and i'm going to select here the page container like this i think this is okay we don't have to change anything now we're going to change that to less than 992 and here maybe you should change the text but it's not it's okay it's okay we don't have to change that now as you can see this are now stacked uh vertically and now i need to put some space here so i'm going to select here the div and as you can see i have the class enabled so i'm going to do advanced sizing and spacing and i'm going to put the bottom margin of 20 and now i have this space here okay everything else is looking okay now maybe i need to put a little bit of to change the width maybe to i don't know 50 percent and it's not changing probably because we have some id width and let's go and put here 50 and see if it changes no it doesn't it take the full width so we're going to see why it do it does that i'm going to delete that and i'm going to select the class again and let's check first we have the divs enabled let's go into advanced let's go inside sizing spacing and let's see if i can change that to pixels and change that okay let's see what we have in the old device and in case you're wondering you should always do that you should see what you have here and then check that so here i have a width of 31 pixel 31 for the page and if i go and change that to 32 it will change but if i go here and change that here i have 50 percent uh sorry 50 pixels but if i go to columns we'll see that i have the stack columns vertically and the page contains its 1200 pixels below so i'm going to change that to 9.92 no i'm not i am at 992 so i'm going to change that to uh 768 and now as you can see it changed to 50 so i think it's a little bit better now i don't want that to be in full width and now if i go to the div i can change that to let's go to 50 percent but it was before okay 50 okay so now let's go to amazing things for you okay we're good to go here and we're good to go and i think the gallery is it's a little bit off but it's not too off let's go to less than 700 and let's see that these are looking okay this should be a little bit less smaller not less okay let's go for 20 maybe 20 here should be 18 and maybe this should be smaller but i'm not going to do that services are okay this is okay this should also go for 20 or something this should go a little bit less but this color is not looking too good now so i can go into the layout and i can change that image per row to two i think okay and let's go and see how it looks for the less than 700 and this should be changed okay so now uh as you can see the buttons are not so good so i'm going to check the div and i'm going to have them stuck vertically and i'm going to give a little bit of space so sizing and spacing and put the margin on the top of the button to be uh 10 now if i change that it will change like a class but i don't want to do that so i'm going to select the id now and change that for only this particular button so let's go for 20 not the max width sorry uh the margin 20 pixels okay it's better uh this is looking good this is good this is good okay and this is good enough okay so save that and we're good to go with the home page let's close that and go to the about us page and edit that with oxygen too open okay about us page let's click somewhere let's open the structure and click here page containing less than one thousand two hundred they are looking good okay everything's looking okay now we have going to 992. everything is looking okay and i think we are okay with that okay and this is okay too maybe i could go for a title a little bit less but i i don't think that it's too crucial okay save the engine close that i have to wait for that to be saved first and this is the service page i'm going to edit the page i'm going to bring it here is it saved okay i'm going to close that because i didn't make any changes doesn't matter okay the services open with oxygen and for the services let's close the about page the services is like that so we're going to add first this section and of course the section should have a class like the previous section so i'm going to add here add a section and this section i'm going to select the class and here i have the pages title section like that and here i'm going to add a heading and as you can see the heading is also white and in the middle and let's change that to services services okay after that we have two columns and two columns and two columns and an faq okay so let's start by adding section okay the section now has two columns so let's go and add two columns okay the first column has a text service one add heading which is heading two okay and since we are going to duplicate that we should add a class okay so we are at services okay the the page services this section is service service heading okay this is the class and typically it select service one okay after that we have the text so add text triple click it add the text here i'm going to put some margin 20 something like that here i'm going also to add the margin sizing and spacing marking 20 and then i'm going to add a button button and the button is contact i think the button everywhere is contact yeah contact ctrl a contact contact and the styling of the button is home like the services yeah i like the services but with a different color for that so i'm going to add here also another class you can do that you can add more than one class everywhere that you want and you can style that class differently so i'm going to uh just keep in mind that one class may overlap the other in some settings but i think i need to change that class but no i'm not going to change that class i'm going to delete that overall because i don't want to mess the other class again so i'm going to add services services because this is the service page services services service button basically we add the second class and third class if you want to add the same margin with other settings and if we have some universal styling but we're not going into it so deep so we have a contact which has a white background so we have a button color of white we have the text color to be this one okay and the sizing of the button of padding is 40 and 40 and we have also some border the border is one width is solid and the color is this one okay and once we hover it changes in changes to well the background changes okay let's go for the background and the background color of the button change to this one okay and the text typography change to white okay so change that to original and once i do that i can see that it changes it needs just a little bit of effect transition effect 0.4 to do it smoothly and now we are okay so let's save that now that i have the here the service i can now add the image here so now in the as for the image you can do it uh in two different ways you can add the uh image as a background of the div all or you can add the image here if you add it as a background of the diff you have to remember that the div doesn't have any space it doesn't have any dimension it takes the dimension of the elements that is inside the markings and the paddings that you're going to put and if it's uh like that if it's columns it takes the same height as this column so once you stack those horizontally in a mobile phone you will see that this will lose the height and you will not see the image in the mobile unless you set a height for the div or of course a padding so just keeping that in mind or else you can do an image right here so the difference is of course is also that the image can not take the whole space if it's not the ratio correct so you have to remember that in some cases you cannot put the imagine look too good you have to do it as a background of the div so let's go that and browse that and see what it is it's the mountain with the clouds browse okay the mountain with the clouds this one it has an altered text select the image it's like this as you can see and i'm going to save that and then i'm going to select the div and i'm going to remove the sizing spacing i'm going to select here for the padding to be 0 0 0 and 0. so it will take the whole column save that and i think we are okay with the first one so in order to do the second one we're going to duplicate that and before duplicate that of course i'm going to select the columns and i'm going to add a class here so this is the services services services service columns okay now i can duplicate that and duplicate again and for this i have to go inside and select the uh divs as you can see the image will go into the left for this one and the others going to the right so i'm going to grab the div here and i'm going to put that on top so now i have that effect and if i go to the columns i can go into advanced sizing spacing and put a little bit of parking like 40 something like that okay let's save that and let's go and put here the service too because it's really important here is service three and the image of course are different we have here the cold mountains this one and here we have the mountains with the people and the sunset okay this one has an altered text select that and we're okay let's save that and see how it looks in the front end okay services it's pretty good i think it needs a little bit of more space but i'm not going to change that as you can see everything else is okay and now i have another section to create this one so let's see what we can do i'm going to add another section for this section i need the background color of white this one and we're going to start by the title faq add faq sorry out heading heading shipy click it faq select the section vertical center okay then we have this text add text typically it text save so now we have also some other faq and the faq needs a little bit more style but i'm not going to do exactly the same so let's see what we can do for that we're going to the helpers and i'm going to see what we have to play with so i have the toggle uh here so this is the toggle the toggle as you can see it says here toggle and here is the text whatever is underneath the toggle underneath the toggle but exactly underneath that not the second underneath that or another thing that you may have here and whatever is inside and exactly underneath the toggle is the one that will be uh sold once you click here so if i click here it will go and disappear and if i click here it will appear inside the toggle we have the heading which is this one okay so this is how we have it at this moment now as you will see the colors into here are white so we have a white color here so i need to put that in div and put the div with the background so i'm going to click here and wrap it in a div and now that i have this toggle inside the div i have also to put the text inside the div and now i can select the div and i can select the background color to be white okay now that it's white i can go and select these services and here i have something like that so i'm going to triple click it and select that and for the text color is something like that of course this should also be everything the div and the toggle and the heading and the text should be all with classes so let's go and do that let's go for the div and let's put here services services okay faq div okay and now that i have the class i have to copy the styling that i did from the id which was the color to the class okay and delete that okay let's go to the toggle i haven't changed anything i think and this has also a class already because it has a class so you can change any other tag that you have so i'm going to leave that as it is and then i can go to the heading and i can select the heading also so here we have services and then we have faq and question okay and then select here select the copy and paste and then clear from the id okay and here for the text we have the services faq answer okay so now that we are okay with that i'm going to triple click it i don't know why i say typically all the time i just want to copy that so i'm going to duplicate that and not the text sorry let's close that and i want the div to duplicate that duplicate duplicate and duplicate what was it four or five times one five times okay okay we have five times so i'm going to close that to see how it looks when it's closed and now i need to put a little bit of margin under the div a little bit of margin sizing and spacing and let's go for five no less something like that because it has a little bit of line underneath i think something like that okay let's save that and i need also to do a little bit of padding inside the div so it will not go and close and beat so close to the div so let's go for 10 maybe to apply all so it will be everywhere okay something like that and then let's go for the uh tag and let's change that to an h3 or something it's h2 maybe h2 no h3 now this tag cannot be affected for the class so i have to go and select it everywhere h3 h3 and h3 because it's not the css it's html and that's why it's not changing and now that i have this i can maybe add here a little bit of text i have padding sorry marking sizing and marking let's go for 20. okay let's see and now as you can see once i open that it changes uh the width because it doesn't have a standard width it takes the width of the element that is displaying and i have to put a standard width so it will not change every time let's go to the div and now that i have selected this div i can add a specific width but i don't want to put pixels because i want that to be automatically changed once i re reduce the screen if i put it here 50 pixels uh 50 sorry let's go for 80 and i think it will be a little bit better but it's way too big i think for that let's go for 75.75 of course i have to select to change it in the mobile view but it will not look horrible if you forget it so if you select a percentage here and if you forget it it will look smaller in the screen but it will not go and add the bar underneath here with which oxygen does that if you set a specific number for pixels and you don't change that for the mobile view okay so i have now here something like that which is not too grew too good but it's not awful and let's see how it looks here and once i click here okay i think i need a little more space so uh let's open that first uh the the close one is okay it doesn't have too much space but i think it's okay let's add a little bit more space let's go for 20 instead of 10 for padding let's add 20 okay something like that and once i open that i need some more padding for the text so let's open that and here i'm going to click the text and the text will have let's go into sizing and spacing and we'll have a 20 margin for the top and 20 margin for the bottom save that and let's refresh that okay and now it's a little bit better also i think this should be a little bit on the left so this should have a little bit of margin like uh 20 or something 30 something like that save that and now i need to go and style it a bit more i don't have a quite good faq for the oxygen of course in the 3.7 they will give us a little bit more elements to play with but i have to change some things also i have to change the icons i have to change the color of the icon let's go and change the color of the icon to something like that okay and the initial state is closed and toggle next is the next element okay this is okay save that and refresh that okay and close close close and close again this is not copied because it's an html tag it's not in a css and let's refresh that and everything will be closed once it starts and once you click somewhere it will open and it will show the answer of course it's not ideal because i have to go and change some things also i have to change the icon and i have to put it right here but it's way too much style to do in this tutorial so let's save that and i think it's okay for this page and this is the service page and this is the one that we're going to copy okay and let's see how it looks in the mobile of course in the other views so let's go for here we're okay here we're okay and here we're okay let's go to the next one which is 992 and the services is like that and as you can see this is the service one which is title and button and here we have uh the image next we have the image and the title and next we have the title and the image so i need to go and change this order so i need to go into these columns and i need to change that to not be stuck for not sorry reverse the column order into 992. so something like that and the same into here so for the column column reverse column order for 992. so now i have the image and next the text and the button which is something that it's most close to what i want so now i'm going for also the div which i had a width of 77 75 something like that and i'm going to put a little bit more so let's go for 90 and this is okay now and let's go for less than 678 this is okay but this should go to be a little bit less let's go like 20 and it's better and then we have something like that and this div should go 100 now 100 and this should maybe be a little bit less but i'm not going to change it okay so everything else is looking fine let's close that let's close the service page and we have one page to go and of course add next the button so let's go to contact let's edit the page and let's see what we have for the contact page so it's it's a quite easy page to create okay contact and let's edit that with oxygen let's wait okay add a section this section should go and grab the pages title section and it says contact okay add heading contact next we have another section and let's see what we have we have a section with two columns and i don't think there are 50 50 i think it's more of 40 60. so let's go and add the section with two columns two columns and let's go for 40 60. something like that here i'm going to put the uh contact form so let's go into the wp forms all forms and i'm going to grab the shortcode this is the shortcode okay close that and let's go here and add here the shortcode shortcode and add here the shortcode of the contact form okay now that this is uh appearing let's save that and see how it looks in the front end as you can see this is the contact page and this is how it looks here so they have some styling hub they have made some styling with custom css and we're not going to do all of those things we're going to go into advanced here for the short code and going to sizing spacing and we're going to put width 100 so we have those uh width and let's refresh the page here and see how it looks now okay and this is how it uh was before not before with the astra and this how it looks now it's not looking good and here i should probably uh go and style it we have a and uh a feature to style that and i don't know if it's something that you should see in this tutorial but we'll send in the end maybe okay let's click here and let's see what we have so we have the get in touch title okay add for this div heading and triple click it get in touch this is nh2 okay then we have the numbers okay so this can go into the div and inside this i can also have divs so i'm going to create a div for this so this is a particular box a different box from this so i can have a different margin and once i go and see how it looks in the mobile view i can slightly differently this is why we create divs so i'm going to add div div and inside here i will have a heading the heading should say numbers and as you can see this can take the same style as the other headings so i can go and stay that i want this to be contact oh contact then we have a info heading something like that and i can go and put h3 for here okay i can put here a little bit of margin okay here underneath that i can go and put the text let's open the structure okay the text and let's see what we have no i don't want text i need another div so let's delete that and now that i have here the div inside the heading i'm going to add another div and here the div will be contact info div okay inside that div i'm going to add nikon and the css is contact info icon and then i have the text i'm going to add a text which is a contact info text now the css that i am adding the the class that i'm adding may seem that it's a little bit more uh time consuming but it will help you later on so uh please do that do not wait until the last moment you do that so let's go into contact and as you can see it also has a link here so let's add the link also here inside the div i'm going to add the link wrapper and for the link wrapper let's go and put that in on top and let's put the icon inside and the text inside so whenever you click even if it's in the icon or the text it will have the link so now i can select the div and i can select that to be stuck horizontally but as you can see it doesn't change because now i have also another link with the another div with a link wrapper so i also need to go and put the same class into the link wrapper okay and let's see what it doesn't change is let's go and put that here here no it doesn't change okay let's see why okay the allow multi-line was the problem so let's add again the class from the div contact info contact defaultive okay now let's go to the icon and let's see what we have as an icon we have a black icon with a phone number okay so color is a black and here's your phone number this one something like that and the icon size is 15 pixels maybe yeah and then we have something like that the general acquiries and the text here which i cannot copy of course here okay i can i can copy so i'm going to simply click that trip click it triple click it okay it doesn't work ctrl a and ctrl v and let's go and put here and put a space so it will delete the the extra space and let's go and select the icon advanced sizing and spacing and marking let's go for 20 15 something like that yeah 15 then let's check the text let's change that to black okay and for the link wrapper i should put here a tell so this is a tell and semicolon and then the phone number so by putting in the url detail uh the mobile phone will now pick up the telephone number that you put here automatically so once you're in a mobile phone and someone clicks here it will automatically go grab the phone that you will put and get ready to dial it and this is why you put here the tail because this is a telephone and here you should put the number that is should go inside here so let's grab that div and duplicate that i think it has two numbers yeah two numbers so for the div i have also some sizing and spacing and a margin of uh 20 no not 20 25 something like that okay let's save that and now for the div this div no this div which is the whole div i'm going to duplicate that so i have the exact same layout and i'm going back to here and i'm going to grab the email and here select that and put email also for this div i should put here a little bit of space and here for the email let's delete that so it will not have too much space okay now i need to put a little bit of marking underneath the members so let's put here a 5 pixels something like that and then i have a different icon for here i have the info example which is an info so i have a different icon here which is an info that here i have other text okay let's delete the extra line and now if i select the link i should now change that to mail to and semicolon this means that it's a mail and if someone clicks this form a computer it will open the mail program that they have the outlook or thunderbird or whatever they're using and if you click it from a mobile phone it will also open the default email app so the next thing is the same i think i what it has a support okay support and here it's like a support or something i don't think that they have this icon headphones yeah something like that they don't have the example same icon okay i'm not going to add a custom icon and now let's go and grab the div again and duplicate that once more and for the last one we have the business hours business hours and here i don't need the uh icon so i'm going to delete that and i don't need also this icon so i have that and here i have this one this one okay this one here and sunday closed uh i should duplicate the div and not the link okay okay so next one is i have a link wrapper for the text and i don't need inside those three divs i don't need the link here so i'm going to put to grab the text and put it outside the link wrapper and i'm going to delete the link wrapper so now let's grab that and let's delete that link wrapper delete that and link wrapper and delete that okay let's save that and we're okay with that underneath that we have a map and this is what we're going to add we are going to add another section and inside here i'm going to add a map google maps and here i have to put an address of something new york new york was the one new york new york so we have the new york and as you can see here it doesn't look good from the front page it looks like that so i'm going to fix that first i'm going to select the uh element the map element and i'm going to select the height to be 400 pixels so it'd be a little bit bigger as you can see here it's about 400 pixels i think something like that next we have the uh size which should be 100 so let's go for 100 and change that to percentage so it will go 100 then we're going to remove the uh let's see here i'm going to remove the space up and down so i'm going to remove that and i'm going to remove that next the the other thing that i have to do is remove from the section as you will see inside the section i also have a padding inside here and i should put it here zero so it will go here and here the padding will be removed but as you can see it doesn't go full width let's refresh and see how it looks it's better but it's not full width at this moment as you can see and in order to do that full width i have to uh have the section selected and here that says section container width and i have select the full width so the container the inside will be full width of the page so now let's save that and see how it looks in the front end and now as you can see i have something that it's quite good okay also as you can see it's not colored it's a black and white and once i hover it turns it has a color but i'm not going to style that anymore so that was it and let's see how it looks in the mobile version let's see how it looks here okay this is quite good it's not terrible let's see how it looks in less than 992 okay so we have that and i think i have to invert because i think i need the contact information to go on top and next the information about how you can contact the uh business so reverse column under 992. okay let's say that and next let's see how it looks here here it's looking okay and here i have to go and put a little bit less in text space like 15 or something something like that okay so i'm okay with that i don't need anything else to change maybe i should change a little bit uh padding here but i'm not i don't think that i'm going to do that in all the pages so we're okay with that uh we have two more things to do we have first to style the uh a little bit uh style deform and add the icon here so let's uh first add the icon and not the icon the button let's go to templates and let's go to add a new template no let's go to main template edit the oxygen edit with oxygen and let's see what we have we have a contact button as you can see that says take action not the contact button take action so i'm going to add that once you hover doesn't do anything okay so i have here a problem i need to refresh maybe but i'm not going to do that let's open the structure and here we have the section and here we have sorry the header and in header i'm going to click the pro menu so what i'm going to add is going next to the pro menu so let's go another button okay that says take action take action okay and this should have a color of this color and maybe a little bit of padding 40 and 40. remember to be persistent about the styling in buttons and everywhere else because it doesn't it will not look good if you don't do that and maybe give it a little bit of a margin left 10 pixels something like that save that and see how it looks here okay here and here i'm going to remove some padding i'm going for 10 and 10 maybe yeah take action and maybe i could also go and put the text size to be 15 or a little bit less maybe let's go for 15 doesn't matter okay and the button size can go into 10 or something maybe a little less five okay something like that let's save that and see how it looks in the uh less than 482 okay it's quite good i don't need to change that okay so that was uh all with that and let's close that and let's go into the pages let's go into the settings in order to change the style of the third party element i have to go and enable the selector detector which is in the settings into general once i go this and save that i can go now to the contact page i can edit the content page let's refresh first to take the all the changes okay i can edit with oxygen and it's not for beginners and this is why i'm just leaving it for the end and what i'm going to do now i'm going to select this short code this element and now i have a new button here that says style output once i click it it says click elements to be to see the selectors so i'm going to click here and i'm going to see all the styling and it says here that i have an input and now i can select and change the input now keep in mind that if you select the input you select the input for every input that you have for wp forms so you also have to select the wp form short code which is the wpford.com5 and this means that you will with that you will just click it once and you will select uh only this step this particular form it will not change for every other form that you may have in your website so it's not very easy thing to have in mind and if you're a beginner but this is how it works and then we have sizing spacing and we have a padding of maybe 10 and apply all something like that i think yeah something like that and then i have a little bit of a background then it's a little bit of gray i think something like that not so great maybe a little bit of transparency something like that i'm not going to go exactly that i have as i can see boxado i'm not going to do that you can see how you change that and now i can save that and then select another item like that and style output and here i have the input this one the text area and select again the wp form five and now for here i have to go and select is it selected wp form five yeah now it's selected okay i have to go advanced again and background and put the same background color and of course i haven't copied the color so let's put something like that and something like that and then let's go and put a little bit of margin uh sorry padding of 10. so it will go like this and then we need to change a little bit of the color of the button not the color so the color i'm going to click here that i'm going to style output the text area selected i'm going to click here the button okay and then select the wp forms again it's selected now it's gray as you can see and then go to advanced and what we have here we have some sizing space some padding let's go for 40 and 40 and 20 and 20 i think 20 is too big okay 10 maybe 10 okay and then what is the color the color is without any color it's white okay let's go into uh background let's go to background color and put that in white and then we have a border border and we have a border with that particular color one solid and the color is this one okay and once i hover it turns into that and the text is going white so i have that i have the text color to be typography and font color is this one and once i change that to a hover effect i'm going to change the typography color to white okay and the background is background color of this okay and then i need a transition effect effect transition and here 0.4 something like that i think let's change that to original and the transition should go into the non hover state 0.4 this is where you should put the transition effect okay and save and i think it's better also you can style whatever you want and then you can also save whatever you change for the styling and save it like a custom css property and have it then be easier selected but that's another tutorial we are already 2 hours and 30 minutes okay so let's save that and let's close that again and see how it looks in the front end so we have basically created a whole website so of course it's not an ideal uh tutorial to create a website just for beginners and you can follow along and do everything that i do and start playing with oxygen to create what you want to do by creating websites you will become better of course and you can build anything that you want later on and i think i should create a tutorial element by element i'm thinking of creating a tutorial for each and every element and going to deep for everything and for the styling for the hover effects for everything that it's on i don't know maybe i will create that so uh hopefully you liked my tutorial please give me a thumbs up if you did subscribe to my channel for more videos i don't know if it's more videos like this but hopefully i will create some more videos like that and thanks for watching guys and i will see you all in the next video bye

Channel: Stratos Tutorials

Views: 9,562

Keywords: Create a website with Oxygen | Step by Step Tutorial, Oxygen builder tutorial, oxygen tutorial, oxygen builder how to, create a full website with oxygen, wordpress tutorial, how to build a website with oxygen, oxygen builder, oxygen builder for beginners, oxygen builder how to, how to create a website with oxygen, how to use oxygen builder

Id: Spv1M4fLcvQ

Length: 153min 56sec (9236 seconds)

Published: Sat Feb 06 2021