Install Oxygen and create the header (Part 4) - Make a full website with Oxygen

hi my name is Tatas this is the fourth video of the series and we're going to start building our website with the oxygen page builder for you guys that this is the first video of the series that you are watching I want to say up in front please forgive me for any mistakes that I do English is not my first language and let's see in the website of oxygen page builder as you can see here if you go straight down you can find customer login by click clicking there you will get inside the portal and by going download oxygen you will see your products that you have bought and then click view downloads view details and downloads and you will see your products up in here will be the licenses that I have blurred out for obviously reasons and we have oxygen three point zero point one at this time oxygen will comment aggression and oxygen could work integration we will see all of those products in this series so back in our website now first in the oxygen if you haven't bought the oxygen and you want to try you will find the footer button that says try oxygen and if you click it you will find yourself in a staging environment with a black install as you can see here and the oxygen page builder will be inside for you to try so if you haven't bought it you can follow along all those steps that I'm going to do and see for yourself what this tool can do so let's wait for this to up to open black in style I choose here and this is the the staging environment and as you can see it says that by default it will be deleted seven days after your last login so you can keep this say URL and use this to reenter if you want to try something else or continue with your project but after seven days it will be deleted so let's close this and let's go back to our website now we have building the Stratus tutorial comm here I'm on the themes and I'm going to delete two of those of course we know that once the oxygen page builder is uploaded it will take over and the themes will be disabled but I do like to delete all of those I cannot delete all of those I cannot I can just leave one for security reasons I don't want any themes here okay if they find a bug in 2019 I don't know if they can use it and hug my side so for security reason I will delete everything and leave 2019 in the next version of WordPress when 5.4 comes up they will have 28 20 20 so I would leave 20 20 if I had the opportunity so let's go to plugins installed leggings you will see we have nothing here we will click add new and then we're going upload and we're going to search for oxygen so let's go genes then and this is the oxygen page builder so I'm going to install it and let's go and review some settings that we have already changed or not I will go for black install so in posts in a previous video I had lit all the posts but I did reset the website so let's go and delete that again okay four pages we have only the privacy policy in the sample page sample page I will leave it for now in plugins we have only oxygen based builder as you saw and in Settings General I have already told you that here we have an HTTP and here in the URL we have an HTTP this will produce an error in the oxygen but I leave it as it is so use so you can see the error and if you came up with that you know what you can do okay so in permalinks always put here post name this is the most important one I don't know why oxygen keeps leaving all those things I don't know if anyone use any of that only post name is the the the one that you must choose for SEO okay and let's go to pages and we will create some pages just to create a menu okay and let's start by home page okay I will hit publish twice then we need a contact publish publish twice okay then we need and about Us page and let's an ad services these are the most common pages that you can find in any website okay and let's go now to appearances and menu menus okay we will create a menu now this is exactly what you want to put in here I always start with a main menu this is what I always choose but this is personal okay you can add anything you like you can add the first name you can add a main menu of the website you can add the phrase anything that you want but keep in mind that if you are that we're going to add for sure two or three menus so you have to choose something that you can remember okay the menu that goes in the footer usually is named footer okay but all of those it's something that you must choose choose something that you can separate all the menus one to another and be consistently about that if you build websites for your clients always choose the same names to know what you are doing and not searching every time for what what is what okay so let's go and create the main menu and we're going to add services about us contact and home we're going to rearrange the order bar dragging and dropping the services is the third and contact is the fourth and we're going to create a sub page by dragging the services a little bit to the right okay once it will go here it will be a sub page of the about us okay and let's go and save the menu so back to oxygen templates adding you to plate and this is where we're going to create our first and play now again as we said with the menu this is something that you must choose and I think it's better to stick with it again I do create a main template and I know that the main template it's my header and the footer you can also name it all page this or header and footer or something else but please be consistent about that keep the names in every website that you create with the same way so you know what you are dealing with so I will hit publish twice but first our going to choose a word this template will be executed so let's go to other and cuts all this means that every web page everything that will load post or anything else will grab this template I will hit publish and now I have the opportunity to edit with the option builder okay so once inside the oxygen builder I would like to take a moment to talk about the structure as you will see here inside is the page that you are going to build here at the left we have a bar and we can add features and sections and all of those things all the to that tool will get us and also we will have the opportunity to change everything that we add to the page once we click it and here we can add also a bar that will have the structure or we can views you can view the settings and we're going to see in the next videos what we can do with that so we will started and played with the header builder if you are familiar with the octane page builder there are different ways that you can build the header row okay you can try adding a section or a div you cannot and add all of those things inside but the the reason that we add the header builder and the reason that oxygen has created a header builder it's because it gives us the opportunity to be to get advance of this element and do some stuff more easily so we have the start vertically below height row below background color display only on so on sticky we have things that we can use for the specific header row and it's easier to be found this is also the reason that we use columns and columns are are just divs okay you can build the structure of a column width by adding two or three divs this is the exactly same reason which you can add columns and then go ahead and inside the columns we'll find some things some tools that you can find easier inside the columns by instead of going to CSS in the divs I hope I haven't confused you okay and okay so by hitting here that it says structure we will get the structure and you we can see that body is the whole website web page okay whatever we can see in the page is body and let's go for the header builder we have some settings here and then row left row Center and row right so imagine that we have three columns left center right here and right and then we can add here our elements let's go first by adding a liquor upper link wrapper is essentially something that we can click and go to another location it's a link we can add it anywhere in the page inside the link wrapper we can add anything we want we can add image text icons buttons divs there's no limitation okay link wrapper is a box if I can say and we can add anything that we want inside so let's go for a link wrapper and then inside that we will add an image so as you can see here we have the link wrapper and inside that we have an image inside the image we're going to upload a logo okay let's go for documents and here I will find my logo okay logo so at this point the logo is named logo M but I don't like that I want to rename it for SEO and I will name it logo or you can name it Stratus tutorials logo let's click open and as you can here and error occurred please try again later and this is because I have the wrong URL in the settings let's go to add the menu we will try to add the menu and we'll see if we get also there an error message let's go for menu ok now we'll add it to my right to the right and let's go for the main menu and as I can see it says security check so we will leave this place I will not save it I will go to the settings and I will add here an S and and as here as you can see now this is the same as the URL of the website and I will click Save so if you get an error here you can first SEC these settings and then you can disable if it doesn't fix that you can disable the plugins or go to the settings and do a regeneration of the CSS class or sign all the short codes we will see we will see all of that in a video later on but if you have any problem go to the settings go to the security and sign all sort codes ok click here that says sign also codes I have complete backup my side and start short code signing process ok let's go back to our templates we haven't said it so it will be blank let's go and edit it and let's go again for the page builder sorry had a better builder had their builder okay and then inside here we will add a link wrapper and an image and I will hit browse and select this one okay now for title I want the logo to be named Stratus tutorials logo okay everything that you put in here should be also copied here always use the alternative text this is for SEO purposes and we will select the demons okay so I want to say something about the Aria and why I named the logo Stratus tutorials logo not just logo Aria is double our I think Aria htmls is one our it's one okay this is Aria accessibility its instructions and what you can do with your website to help people that they have vision is a disadvantage and they cannot see well or they cannot see at all and help them interact with your website this is something that it's not very popular but I think it is my personal opinion that Google will favorite sites that will promote this will do things about that and in one or two years we will have directions from Google to use all of those things so I wanted to try to be in front of my aids okay and I want to give you some directions about that if a person that has vision disability comes to your website he will use a screen reader and it will basically read everything from here of course the image cannot be ridden so it will say whatever we have in alternative text and it will not be just logo it will be status tutorials logo okay so for me it's something better than just logo if you want you can put just logo here but do not leave the name that it games along with your picture it's not good for your SEO let's go to our menu and we're going to add the menu here and let's go for helpers and menu or you can just type menu here no it's in WordPress menu and let's go to structure and we will see that the menu is inside the lingo wrapper which inside the role left and we will grab it and we'll drag it and drop it to our row right so this is a standard format that we can see in the most page builders in the mo in most of the of the websites ok logo to the left and our menu to our right and we're going to style a little bit the menu here I will just click Save I often lis use the Save button so let's go first to the picture and let's reduce the width to 200 I think it's a little bit big 180 it'll look it's a little better ok let's go and click Save and we're going to click Oh since we're here I want to go to the link wrapper and I want to add in a URL most people will add this Strutters tutorials calm which exactly find it will work very well ok if I save this page and add it and go in the front and to view it okay now I'm at services if I go here I will be in the homepage okay this is perfectly fine but for me it's better practice to just type this last by adding justice last year this is a URL that it's called dynamically URL and not static girl so not dynamically sorry a relative URL sorry it's a relative URL so basically if you decide one day to change your domain name and from Stratus tutorials com I may choose to go for WordPress tutorials com so I can move my entire website and all the URLs will work because they are not strictly to the domain okay they are just the following ones so if I leave it right here I will can click Save go to the front and refresh the page go to the contact and go and click here and I will get to the home page so it it's working just as the same but for me it's something to do we can use tools to change the URLs but it's better practice for me I do it all the time I use relative URLs when I have the chance so let's go to the menu I will click once here and as I can see I have the the letters in blue I have here a hover color background color I have this line in blue when I hover and we're going to change all of those so let's first choose main of course it's the same menu because it will grab everything that we have if we have only one and let's go for text here and the color will be black font size I think at this time is 17 yeah and we will change that by using the settings in the magnets and global styles now this global styles are for the entire website it's very good that the oxygen builder has that and this time only the breezy page builder has it and I think it's awesome that they do have it okay so we can go to colors and choose our global colors let's go in add two colors here we will go for a blue that it's like this so let's go for a blue something about here and I can add the name dark blue or yeah let's go for dark blue dark blue and now for light blue I will copy this and then just made it a little bit lighter okay and for fonts let's go in the body text and we will use 17 here not 107 17 so I will save that and I will use my rest of the settings in a later video okay I don't want here to put more content it will be a long video this one so let's go back to our menu and we are now on text as you can see how to change it to black and let let's go now to our spacing this is the spacing that we have between the letters between not the letters between the every page okay between the home and the about us so if I go here and not 30 I will get here a bigger separator bigger area between those two pages let's go for hover and if I hover here I will get a black color so hover text color I want to be this blue and for hover background color I don't want anything so I will just remove this okay however borden top this is the hover that you get here the line here I will remove it if you want you can put something else or put a bottom line so you have this effect but I want to remove it active text color it will be this blue again an active background color it will be empty so this is how the menu will be displayed okay let's go and save it again let's go back and go to drop downs now here we have the drop downs as you can see the services and I do want to enable the downs and I do want to show the drop down drop downs arrow okay if I don't use this you can see how it looks but I want to the visitor to know that beneath the about us has something else background color I want to change it to a little bit of a little different from just the white so it separates from everything else but not here not just that lets go for a lighter color okay this is better let's go for 36 yeah I will go for that and here link color i if you can see when I hover to about us the services is blue it's not black so I will go to link color and I would go for black so now I have the black color but if I hover to the services I want it also in blue so I'll go here to like link hover color and I will go for the global colors and blue okay I will save it and let's go again to my settings and color cause I hadn't add the second one okay are the color light blue add color okay save and now as you can see the services when I hover will become blue this is something more like it and this is the mobile responsive so basically in your left side here you will have an icon of a computer and if I click here I will find all the page sizes and I can see how the page is displayed in all of those we will use it in every single page in every single our template and everything that we're going to create okay this is a very important feature all the page builder have something in similar with that cause statistically speaking more visitors will come to your website from mobile phone by rather than an actual desktop laptop or something else so you have always wanted you want always to check your website how it looks from a mobile phone now let's go for the page container 100-120 in pixels and below and as you can see here the menu we will go into a hamburger menu now since I have only three or four items in the menu I want to check that the mobile menu will not go at this point so I will put less than nine nine two and I have the menu for this size of the screen let's go for the less than nine ninety nine ninety two and I can see that here we have the menu icon and in all of those settings I will get the same so let's go for less than 992 and let's go and style this icon here's the icon size from 3040 that it's now and we'll go in for 30 it's a little bit less no 3035 ok marking above it below it's the margins and here and here so basically what the difference between marking and padding of course there are people that know that because but because I want to create a series for for people that are starting using the osteopath and I want to include everything so basically if I have an icon here the margin is the space outside the box ok as you can see here the lines this is are the lines of the link wrapper the margin is the space outside the links and the padding is the space inside those lines ok think it has a box and whatever is outside the box is marking whatever is inside the box is padding we will do an example later and you will see what the difference is but thing it as outside and inside space ok I can color this is black and I like it as it is I can hover color I can go for that but I don't think it matters anyway cause no one can hover in a tablet or a mobile phone the screen 992 there are some they may be some computers that have this dimensions in the screen I don't think about it but there may be case that someone has something like that so I don't really get about the hover color here and we're here okay so icon Styles padding color and padding hover color it's the color inside here let's go and see it okay as you can see this is the padding color I will move it and when you hover what your color will be for the background let's go for the next one menu styles and this is when you click it you have the background color here I will leave it to white link text color these are the links and when you hover we have this blue I will not change anything of that you can you know how to change it now by now but I don't want to change anything at this point and then we have the drop out drop downs sorry and here we can include the services page underneath the about us okay when when I click this I will get the services underneath the about us now here we have a problem okay let's go for not including let's go for save and we're going to our our BLISK browser this is a browser that you can download for free and it's very good to see how it looks in the in a mobile phone because basically when you do sorry let's go for this one when you do view the page in a little window you can see how it looks but it's not exactly how it looks in the mobile phone okay it kinds of adapts the environment but it's not how it looks so if I go here and include the drop-down click in include the drop-down list in the response mobile view I will click Save and let's go and see how it looks here here you can see the services and let's go for the BLISK and refresh Stratus tutorials ok this is cause I had opened a long time let's go and open it again BLISK ok so premium trial has ended I will have to create an account so I can use it for free and let's go and do that I will pause the video and come back to in a second ok I will leave BLISK at this point as I have I have left it open two days or three I I think and I'm now at the mobile test me website and let's go for Apple iPhone 5 this is it was a good site once but they have left behind the updates and they have not any new webs new devices here let's go and grab our URL and we're going to paste it here and as you can see here the website looks like this so I don't want the services to be displayed every time but if I go here and disclose this from the menu then I have no way to go to the services from a mile phone ok so let's go and refresh the page and as you can see I do not having services page now a solution to that if you go to your google if you go to your browser and type oxygen mob I may know subdomains subpage sorry sub ISA or submenu submenu you will find this is the second result oxygen mobile submenu and temporary fix so this is a fix that one person the let's go and see who it is okay this is David Brown I hope I'm pronouncing that correctly and thanks for David he created a tool that we can do exactly that okay and for sure he's a knowledge in that the oxygen doesn't have it and this is as he says here a personal solution and we can disable this plug-in once oxygen will add this in the official plugin so you can go here and click clone or download and note the zip file I have already download of course I have always this tool in my library so let go for the plugins and let's go to plugins add new and I will upload the plug-in that I have already downloaded okay WordPress plugins oxygen and this is the 1 mobile submenu master install it now you will have just install it and activate it now if I go back to my oxygen and refresh it let's go save and refresh it's not necessary to refresh I think it will grab the settings automatically but let's go and refresh the page and go to the menu again mobile responsive dropdowns and I will include the dropdowns links I will click Save and let's go for this and let's go and hit again the refresh ok and as you can see here I have here an arrow that I can click and I will get the services this is what I want so thanks again to David for creating this plugin and helping us with this problem of the option page builder ok so I think I'm done for some foreign some reason I don't get the about us drop down so drop down are here and I'm good to go and this is the menu for the moment I will of course create another menu style it a little bit different create some effects and a mother fix and we will see something different here now next one we will add the section a what a section is basically a section is an entire area in the page that is speaking for the same thing let's go to the Apple website and I'm not I'm not promoting Apple but I just do like the website so as we are in here we can see the iPhone 11 Pro and from here to here we have the section this section is about iPhone 11 Pro this section from here to here is about iPhone 11 this section is about the watch the I words and these sections have gallery this section has gallery okay so a section is basically something that you had content for the same reason here we have the header the text CTA or click to action and all of those are in the same section so this is why we use sections now here we can use a section and inside that go for the inner contact inner sorry double and inner content and in content inside the sanction now a something that I want to say up in front in most cases let's go and delete that in most videos I think also in oxygen you will use that they they do not use a section for the ending content they use just the inner content and they put everything inside here and then we have the food around out here this is a good practice to do but if you want to get the area that we told before we have to use the main HTML tag in the page so I do use the section and then inside the section I use the inner content but that is just for the pages if I want to create a website that has only some pages and a block and nothing more the problem is if you use the main tag then you don't want to inside the tag to put what can I say sidebars okay you don't have you don't want to put anything that will be repeated in another page so if you are going to build you commerce or you going to build a blog that has a sidebar then you should not do the inner content inside the section or you can do it with another way I don't know if I want to show you that if you all if you do want said I don't want to confuse you any more if you don't want it please add it in the comment and I'm sure we'll create a video how you can do that so basically I would just go for the inner contact if I wasn't going to create something simple as a blog and I would was creating something more advanced so in a contact is in most cases what you would need and this is where the all the page will be displayed and then you are going for section let's go for a section and this is our footer now the reason why I left the pages sample page is here I can put sample page and I can see here the content or I can put privacy policy and I can see how the content will be displayed okay inside here I can go ahead and create my footer so this section I will put here a tag footer okay this is the main tag that I was talking about before this is the tag that I am going to use for that footer and let's go and go ahead and put the background color of the footer to be something with similar to black okay like that and inside here I will add some columns as I said before you can add the same layout by adding two divs but then you do not have this capability so easy to find just by clicking inside your columns and inside columns I will add some text for now I will style the footer later on because at this point already the video is 42 minutes and it will go up to an hour I think okay so let's go for some text let's go for white and now here I want to say some problems let's go and remove the the content here and as you can see now since I don't have the content the footer will come up straight to the top okay I will fix it later on but I want to show you something as you can see here the pages right about here this is the width that we have in the page we will see in a later video how we can change that this is the width that we have at this moment and the footer will start from here that it's not correct the this text should be all way up to here okay try to be consistent with the margins okay wherever the logo starts the same area should be the text the same area should be everything that you have in the page of course you can style it and give it something different in some sections but in most case an area you should have everything start in the same spot and the the text should be always end at the very end of here okay so here we have a margin or padding we will see what we have here let's go for the section first okay not the section the column first sorry and let's call advanced and sizing and let's go for a zero padding okay now that we have zero the padding here let's go for the div advanced sizing and spacing and let's go for a zero padding and now the content is right here this is the correct one and now we can go back to our privacy policy and get some text right here so basically I want the inner content to have a minimum height okay minimum height this is the new content I am now at the sizing and spacing and I go for minimum height to 70 and this is the view hide V aids means that the page view okay and this is something that will vary depending on the page that the visitor will come okay it has a resolution in his screen that it's 2k it's a little bit different than someone has a 4k resolution let's go for a services page here and as you can see here the footer will stay right there I will remove little bit I will go for 68 no I will go for 65 yeah it's a little bit better but let's go and resize this a little bit okay I don't want to be the footer too long so let's go again doing a Content and let's go here for 70 okay 70 to save it so basically now the footer will always stay there regardless if we have here contact or not we can have here only one or two pages on one or two lines sorry but the food will stay at the bottom of the page okay let's go again to our footer we will add later on here some social icons and we will style style them and all of those things I don't want to make the video longer than what it always what it's already is and I hope I'm not I haven't confused do by going to one thing and another there are too many things that I won't want to discuss and I do want to say some things inside this video but because I don't want to change anything in later on so the last thing that I want to show you here is the inside the settings and global styles it's this the page width okay this is 1120 and this is the width that we have from the beginning of logo until the end of our menu this line here so this is the width that we have the box with this is how the layout is called let's go back to Apple this is the width from here to here okay if I go somewhere that has text from here to here and as you can see the lines are correct here and they are also correct here and of course here okay so be consistently about that you use the same margins and padding's and try to follow the lines let's go to another one TV iPad let's go for iPad we will see that this is the box with okay but the image of course is expanding from here to here so this is no no this is a better example you can use the width to see how it looks like right here okay of course this is an effect it's not exactly how they have set it up but you can see this is the width that we are going to get now you can use any number that you want I usually go for one twelve hundred and basically you want something less than 136 if you go for the laptop screen resolution resolution okay you will see that the most cases most laptops that the visitors will use will have a dimension of scheduled Ellucian 1366 wide width so this is the pixels that we get in certain in every in every row okay we can use we can see up to 1366 pixels so you should use a number less than that so every visitor will see the website as it is the same and of course if you want here and here some space you should use a number that's below and I think 1200 is a very good number to use okay it's up to you you can use anything you want if you see when I change this it will change the area here and the area here let's go for 1000 and as you can see here we have a better bigger blank space and let's go for 1200 again I will click Save and let's go and refresh and see what we are right now so this is the template that we have built at this moment this is basically to see how we you can build something it's not the template that we're going to use but we have too many options to see in one video and since I want now I want to go deep in every tutorial in every video I have to choose what I what I have to display to show you okay now I am confused sorry for that I was thinking that I had something else to show you yeah the last one is a setting that we should change once we have the home page let's go for settings and reading and now we want the home page to be a static page that is called home so whenever someone goes to our website he will see the home page okay so that's all for in the first video first video while building the website okay it's not the first video of the series but it's the first video that we actually using the oxygen page builder I hope it wasn't too confusing please if you have any comments any questions or you want to see something else add the comments below and I'm sure I will add it in the video in the videos thanks for the guys I will see you on the next video

Channel: Stratos Tutorials

Views: 2,305

Keywords: How to make a full website with Oxygen, oxygen website tutorial, create a wordpress website with oxygen, create a website using oxygen, oxygen tutorial series, hot to use oxygen, hot to build a website with oxygen, oxygen tutorials, oxygen how to video, Make a full website with Oxygen - Part4: Install Oxygen and create the header, oxygen tutorial, oxygen builder, wordpress oxygen builder

Id: 4qyDZeP7z6g

Length: 51min 44sec (3104 seconds)

Published: Mon Oct 07 2019