Create a Full One Page Website with Oxygen Builder

in this video we're going to create a full one-page website using the oxygen website builder hi my name is Stratus and if you are interested in videos in oxygen website builder or in WordPress in general please subscribe my channel so as I have said we're going to create a full website you're going to see all the steps that I'm taking to create this website and we're going to start with the blank a new installation okay this is a local installation if you don't know how to create a installation of WordPress if you don't know how to buy domain if you don't know how to buy a web hosting package and install WordPress inside that and then link your domain name to that hosting company then you should watch any other video you will find in internet about that or I have a few of mine so let's start by going first and doing some steps that I always do like going into posts all posts and I'm going to delete the hello world post trust and then I'm going to the trust and I'm going to delete it after that I'm going to pay this all pages I'm going to delete the sample page trust okay I'm going to add new and I'm going in the beginning to create a new page that is called home home page okay publish after that I'm going to the appearance themes and I'm going to delete the 2019-20 17th and the other theme that you have beside the 2020 which is the last and you cannot delete every single theme so I'm going on Lee to live this one after that let's go to plugins install plugins and let's deactivate both of those and I'm going to delete those also okay and after that I'm going to settings and let's go for general first okay this is the site title here I have to go for the title of the website it will be called chocolate okay this is the tagline the model I don't have think of any but let's create something right now hot or cold we are what you want okay this is the URL as you can see I don't have the s inside here because I'm a log installation and I don't have SSL in my local installation but we will install the SSL for the local installation and you will see how it's done okay let's go then here that says time zone and I will put mine here let's go for Athens okay after that let's go for the date format here in Europe we have the date first and we'll let's go for 24 hours Monday it's the first day of the week and I don't want anything else here let's save changes and let's go for reading here I will choose the static page as the home page as a study comm page okay let's save changes this is why I created first the home page the page named home okay then I'm going to discussions and I'm going to remove the allow people to submit comments let's go and save that and after that very important go to permalinks and check if the post name is selected Save Changes and let's go now to plugins add new and we're going to upload the oxygen let's go here oxygen 3.1 which is the latest version installed now ok I will not activate at this moment let's go to 10 to the plugins I want to just install all the plugins that I want let's go for the SSL really simple SSL ok install now ok after that for manator for our forms after that I'm going to install the shift cuss plug-in swift cuss plug-in not shift okay it's taking some time I think I'm going to pause the video it's the internet speed at this moment because it's a local installation I've said before okay let's go for the Swift and we want also the object plus just to have a backup of our WordPress website and we need two more plugins to go and start creating our website I will pause again the video okay let's go for the SEO plug-in the rank map and for last security plug-in the wordfence security so the website that I'm going to build is for a coffee shop as I have already said it's one page website the coffee shop is not taking all the orders online so they need just a website to show what they can build it's not a coffee shop it's a taco shop okay hot chocolate and cold solely they have some flavors that I'm something like that but they only want a page site just to show that they are there they don't want anything else so it's a really simple website and we're going to build it from scratch and let's go to the installed plugins and let's go ahead and activate for manator the natural rank math because it needs some settings to be done the Swift performance the updraft and the word fence okay let's go for those at the moment and then we're going to activate the oxygen so I'm going to build four sections the first will be the hero section which will have something about your coffee and a button that leads to the contact form out of a fig the second one will be their services or the drinks or something like that and it will be a list of four or five choices that they will have the third section will be about us which will talk about the company it's something that most people want to read how many years they are there what they're trying to accomplish what are the ingredients that they're using and something to persuade the client to go there and buy their product and the fourth section will be the contact form the contact section the menu will have those four options it will be a scroll to ID to section I have already created a video about that and we're going also to create the header in the food or so let's start by going to the plugins going to add install plugins and we're going to activate the oxygen in the freedom not going to set up wordfence I'm going I'm not going to set up the rank math but I just installed it so you know how to do it and you can see another video just for rank math because it needs about 20 to 30 minutes just to the settings and add it to the Google to analytics and to search console and for all those settings you have to spend 20 or 30 SEC minutes to do that so I'm not going to so let's go again to plugins because it didn't refresh okay and let's go and activate the oxygen plug-in then I will hit the blank installation because I don't want a ready template okay let's go for blank and I want to see if I do have here and as a cell I think I have but I have to trust it okay why did I copy and not paste it okay let's go for the s here and then remove this and yeah I have to trust it but I think it's there okay except and I have the S here okay so let's go in activate now the SSL if you don't have an SSL you if you don't know if you have an SSL just go into the SSL hopper SSL hopper not hopper sorry SSL shopper I think okay and then you can go that says here check for the SSL put your website let's go for google.com and you will hit the check SSL and then you will have the three or two green ticks here okay if everything is a green tick here you are ready to go if you don't have an SSL you will get here an error or it says something and then you are going to you must communicate with your web hosting company and ask how you can create an SSL for your domain name and if they asked you to pay money be sure to check some videos that can create free SSL for you website I'm going to create a video I'm always forgetting but I want to create a video about free SSL so okay so let's go to the plugins and let's go and activate the really simple SSL I'm going to activate that and then I'm going to hit V go ahead and activate a sell that it says reload over HTTPS okay it will reload my website hopefully okay please do not use admin as the username and password and not a very easy one okay go ahead and do something complicated but this is a local installation I have said too many times already and that's why I'm using the admin username okay once again okay and then I'm going to the SSL that says here and then the enable and I'm going to activate the 301 redirect okay and save so I do not worry about the warning here it's a local installation as I've said about 15 times now so okay this means okay and I'm going to delete all of those so let's go to the oxygen and I'm going to start by creating a template for my website template is the header in the footer of the website and when you are dealing with the oxygen you're dealing with templates at first and here I'm going to create a template which I will call main it doesn't matter how you call it it just keep something to remember how you call it every time if you are creating many websites you have to put the same name every time you don't want to search which is the template with the header footer in every website so you can call it header and footer you can call it header you can call it I don't know what you want your name or what you want okay this means again hope it doesn't say every time okay and let's go and edit this with oxygen okay basically I hit the other end cuts all which means it will be displayed in every website a web page I do want it in every web page of our website of course in this situation I only am going to build one page but of course you are not going in many cases created in one page website let's go and update that again and after that you can go ahead and click the edit with oxygen and start building your template let's go to edit with oxygen and we're waiting maybe I should have pulled the video okay I will pause the video so we're back and it has loaded let's go to the structure first let's go show it to man ads let's go to settings and then global styles this is the global styles of my website and I want to go for a global color and I'm going to add the color that I have in my logo so let's go for blue and let's go for this one I don't know exactly the code of the of my blue in the logo because I haven't searched before but let's say that it's this if you don't know how to do it you can use Photoshop or many tools just copy the HTML code and you're good go let's go for blue okay add color and then you can go ahead and copy and add all the colors that you want for your page after that it's basically you add global colors because not only you want to quickly add the color blue in every button or everywhere you want another great feature is that you can't go there after that change the color from here and everywhere that it said it will be changed so let's go to the next one let's go for fonts and I'm going to use Roboto for the headings and Ubuntu for the text and I'm not going to add another okay body text let's go for 1.7 and let's go for black ok I'm not changing the headings here then we're going to change the settings at this moment we will see if we want it a little bit later this is the main color of your links you can go ahead and change it if you want I'm not going to do that in the moment but I can go in the button and since change something the not do that in the moment okay after that page-width I'm going for 1200 okay as you can see now it's zoomed out a first it's zoomed in not zoomed out it's not the 100% of the width now you see that it says 76 so the things you see here will be a little bigger than what you see in the front end of your website keep that in mind but I'm choosing here 1200 because in most laptops the standard with resolution is 1366 so I need some space in the left and right of that it will take the Bates 100 1200 pixels and after that we will have 166 pixels divided in both sides so let's call them into the after the section I want to animate on scroll and I'm going to add 1000 MS milliseconds so one second for the duration of the animation I'm going to put is in and of course animate only once yes and disabled in less than nine ninety-two pixels okay after that let's go for the scripts and I'm going to enable this move scroll and I'm going to adhere 80 milliseconds and I think I'm good to go for the moment of course I can change it every time I want let's go now and add here the first the header section header builder and of course in the header below we have three rows row left row center sorry one row which is with three columns it's left center and right okay let's go in add first the link wrapper the link wrapper is only for the logo to be clickable and go to the home page it doesn't matter here because it's a one page website but you do want it in every website that you are building so go ahead and add the link wrapper and inside the link wrapper I'm going to add an image where's my mats my image is here okay now I'm going to hit browse and I'm going to select the image that I want drop files to upload or select the files let's go and drop those this is the images that I'm going to use as you can see they are already named and this section that I'm going to use this is for SEO purposes I don't like to have and names like this see one two three or something else I want to name it how the section will be named or the service or the product or something like that it's better for SEO and then you can see that both five four pages and logo is less than one megabyte okay be sure to shrink the images do not leave it very big okay these are way too big for me but okay I think this could be a little smaller but it's okay it's 363 kilobytes it nuts not too big okay if you don't know how to shrink images you can watch another video of mine and let's go for all the logo and untalented text will be taco logo since the name of the business choco choco logo okay select image and this is the image that I'm having right now I'm not going to change the width of this moment because I don't know the exact size at this moment I will see the friend for first in the front end or of course you can go ahead and close the structure so you have the full length of the image right here in this screen of course because this is a full HD screen so let's go again for the structure and let's go for something a little bit smaller let's go for 200 no 180 160 150 okay something like that you don't want to go too big you don't want to go too small just check other websites to see how they're doing after that I'm going to add the menu and of course I don't have created one but let's go in at the menu and let's go again to the structure I'm going to grab the menu and go it down to the row right so I want the menu to be in the right column okay after that I'm going to select the text to be black okay from weight to be 60 this size should be 16 let's go for 500 okay not too bold okay after that the spacing I think it's a little bit close to another okay let's go for 15 it's a little bit better okay after that I'm going for the hover and active when I hover the text color I will leave it as it is no we'll go for a little bit of blue and let's go for this blue and when the hover background I will leave it I will leave it blank the hoverboard top will be three the active color will be like this blue but a little bit darker okay and the active background color will be empty after that I want to have an active boarder top let's go for one okay and then let's go for the drop down so don't have anybody if you had you should enable this and check the settings and more by responsive after 99 to because it is small for sections menu okay so it will be it will go for the mobile menu when I go less than 992 let's go and check that out here it's quite alright and here I'm going for this let's go for one this okay you can go for six 67 68 and then after that here I will have this one okay so I'm good as it looks right now I'm going to save it again I'm a big fan of saving too often so let's go here and then after that I'm going to insert here the inner content in a content is basically in double n okay it's basically the pages and the content that the pages have it will be displayed right here so in the new content I I will just go for the size and spacing and I'm going for the minimum height of 700 view height okay so it will be till there it will be stretched until here now this is because if a page will have less content than any other page the footer will not come up okay it will stay down here you can change this accordingly to your website and to your word to your own settings so this is only to show you how you can create something like that because in this case it does matter since I'm building in one page website and let's go now for the footer so I'm going to add a section and I know that the photo will be black the text color will be white I think it will black okay and let's go for the tag and let's select footer okay save that and let's start by going to the back and again let's go to appearances let's go for menus and I'm going to create a menu now when you create the menu and you have already created them template oxygen will automatically grab the first menu that it will see and put it right here you don't have to go to the template once again and reassigned it so let's go for a name let's go for main again because this is the main menu okay I'm going to add here the home and after that I'm going to custom links and here I'm will bow will go for a pound and then I'm going to go and add the services about us and then contact when you add here the pound sign it means that the link is not working okay if you want to create for some reason apparent contact a parent menu item that will have some items below that you will create a custom link with the pound sim symbol and after that you are going to add the pages that you want so none can click in the services but they can click at the items that are beneath the services the child items so save that and let's see how it looks right now okay this is the home page it automatically grabbed the main template for the home page even if I had already created the home page before creating the template the main template and as you can see here is the menu ok if you want to create child menu items you have to go and drag something like that just drag and drag it a little to the right of the item you want to be parent and let's go and save that and you will see that it's now the service is now a parent child item of home so when I hover to harm home I will have the services item of course this is way too big I have to put a little little bit less space but it it's not for this video so let's go and put that as it was let's save that again and I'm going to start creating my page I will leave the footer for the last thing and before that let's go to dashboard no sorry appearances customize and I'm going to add a favicon favicon is the logo that we have here in the tab so when the visitor will open two or three tabs he will know that this is mine so let's go for site identity and select site icons be sure to have a square 512 by 512 pixels favicon I do not have right now but I will select annum anyway and let's go and crop this image to this but if you do not select the size that you want you will see that you don't have a very good favicon or it's too small or it's not good it's not readable okay just go and create 15 512 by 512 ok this is what I wanted to go let's go and publish star ok it's published and now I can close that and I'm going to pay this all pages gate always say is that the password you are using exists the list of password leaked of course it's admin ok and let's go and go to the home page I'm going to add to hit edit with oxygen this is the template then he default main template and let's go end it with oxygen I will pause the video until it starts up so now that I'm in the home page I can see the header I can see the footer and I can start creating my page let's go for the section this is the hero section and here you have the tags that you can create something if you have article main food or div or section this is of course a section so leave it as it is and this is the hero section so let's go and add here my sorry not here let's go into the structure I will always need this open and let's go into this section I will go click outside and then click again inside and then I'm going to advanced background and I'm going to for background image okay and I'm going to select this one select the image okay and let's go back to the size and spacing if you want the image to take the full height you will go for a height of 100 percent of the view height okay but I just want to have it in some pixels you can add it here or you can add some padding here but I will go ahead and put something here let's go for 600 pixels okay then I'm going back I'm going to select the background again I'm going to hit cover and I'm going for 50% here and 50% here this is the focal point where the image will be where it is the point that I always want to be sewn this is the center so the center will always be sewn in this screen if the resolution is smaller the size of the image we'll be shrinked accordingly but the center of the image will always be sown okay it will shrink from here from here from top to bottom but you will always see this Center so after that I'm going to go back and then I'm going to add a heading okay I want the h1 for the first heading of the page and let's go and add something like Chaco which is the name of the shop Chaco great name okay I'm going to select the stock tiles vertically and Center in the same in the section and then after that I'm going to add another heading and this will be 8 2 and this is the model which was hot and cold hot or cold hold-hold not hot or cold we are what you want ok we are what you want ok and after that I'm going for a button and the button will say contact contact us contact us okay now I want some space here so I want the chocolate to be a little bit too down and of course since I have set 600 pixels for the height as you can see it will not change the sizes here ok after that I want some space underneath the chocolate to the heading to the next heading so let's add that you can click the element that you want to add the padding or marking and then go ahead and add that and after that I'm going to add some space here so you can go for an even space from here to here or you can go for twice the size this is what the standard used okay so you can go for something like that what it looks better for you okay I think we're okay and of course you cannot see the letters very good because we have some white in the background so I'm going to hit the section again I'm going for advanced background and I'm going for an image overlay color of black with the opacity of 50 60 something like that chuckle okay let's go for 60 60k if you go it's the same 60 and 6 is the same here it's not 0 6 it's 0.6 ok so it's better you can also add if you want some shadow but I'm not going to not in the headings in these two headings I think or I can go for the chocolate nuts um let's see how it looks let's go for advanced let's go effects then text shadow let's go for black with offset of zero zero and five spread okay five spread I think it's a little bit better if you can see the change in let's go for three yeah let's go for three and leave it like it is okay since we have the dark background I can go for a white side here but now it's out of focus and I have to go for a smaller capacity and then you can see how it looks when I remove it and add again okay but as you can see it looks like it's out of blur so let's go for the dark let's go for four okay and I will leave it as this doesn't matter at this point if you have it or not it doesn't look anything a you cannot see it even if you look okay it's real it's not there so after that let's go to add another section and in I'm going to change the ID here just click here and set something up like services or products or something let's go for products so what can anyone find in our shop ok let's go and add the background so I'm going to add the image which is the services or products okay it doesn't matter let's go for products and I will put that in the alarm text you can set also the alternate text inside in the image where it says of them text but in the background you will not find it how I put it here I don't remember let's go and see background and let's go for browse and let's see in for this one no it doesn't have any of the rest text so we'll choose it again and let's go and save that and after that I'm going here and I'm going to put 600 pixels again I want the layout to be the same so let's go for sizing spacing and let's go for 600 pixels again okay after that I'm going to background color again I'm going to add white overlay color and I'm going to add the opacity of something like 80 I think 80 and we'll see if to change it later okay and maybe it it seems to you that the image is not weld displayed and this is the case because I don't care about the image I just want to have something beside the white section here I just want the visitor to focus in the letters and not see the image but I just want too many just but I want it to be a little bit better than just a blank and it's just again so sorry after that I'm going for a scroll fixed sorry so it will be a fixed background and let's go again for fifty and fifty percent okay great and after that I'm going to add here a heading so the heading should be in all the sections in the same height inside this section so if you are putting some space here you should have in the next section the same space from the top of the section you don't want the first section to be right here this section the second to be right here and then right here and keep it consistent okay it's better keep it constant that lets go for black color okay it would be called products okay let's go for the center and I think I'm going for 100 pixels here and I'm going to leave it right here and let's see how it will be it will look okay the section is not always something you want the sorry not the section the hero section the first one is the hero section it's not something that you always want to follow for the styling because this is what the visitor will see when he first visit the website but then every other section and needs to be consented ok so I left here 100 pixels be sure to leave 100 pixels in every single section but now since I have only here a title and some image since it's not in the middle or it's not it's not in the middle ok here it's not the middle so let's go and put that in the middle so it's fine in the hero section and after that because we want the heading and some content inside here I will use the same style in a the other section you will see what I mean ok after that I'm going to select here and I'm going to add here columns and of course for products I want to select the AIDS to know h3 now let's go for it - ok products after that I'm going for products should have I don't know margin of 20 and the columns should be 3 or 4 how many products you want to add let's go for 3 ok so we have 3 columns and let's go for the first one and here I'm going to select the first div and I'm going to add inside here the heading so let's go in add a heading and this is the heading for the product let's go for black and since we're putting here let's go for black in the text color so everything will be in black ok so click again here I will delete this it's black from the default and here I'm going to select and add glass with his product heading heading okay since the product it says here product heading and it could be also the product heading here but since this is only one heading and I will not repeat this two or three times it's no point on creating a glass inside the oxygen but for this two three items the heading will be three times and if I change one of those I want both not both the three of those two change in the same time so I will add a heading class for those so that's why I'm naming this product heading and not predict products heading divs or something like that so let's go at that and let's go for an h3 h4 okay and this is the hot choco or cocoa or something okay let's go for the middle in the middle okay in all of those and now I'm going to add a text which will say something about the hot chocolate okay first I want to add the class name which is products and text I'm using the name of the section first and then the name of the ID of the item if you have multiple pages you can first put the name they paid the name of the page then the name of the section and then the name of the item product text okay and let's go for our no hot chocolate hot and screaming in every taste don't forget to for the cookie I don't know gift gift okay and since I have already put this in the center as you can see and this is not changing I have to click here and I have to go to advanced typography and select the text align to be middle okay this is what did the trick here so I'm going to duplicate that and you will get again and I'm going to grab this and I'm going to put it in the next column and after that this and the next column and the same for the text okay so I know that every heading has the same class and now if I go and change the size of this one and go for 30 it will change to every single one of those so let's go for 3 H 3 and delete that okay and now this is the called Chacko okay to keep you I don't know what to write here I don't have any ideas ice and I don't know what something tasty you brain freeze okay definitely okay and I want something here but I wanted to put here something more than just towards because I want you to see how I can create here three identical buttons or squares even if the title is bigger or the text is a little bit smaller so let's go here and put something like okay we have the hot we have the cold and I don't know delivery service for big corporations and it's not to be okay I think with the padding it will be too let's go and hit this here and enter okay for big corporation so imagine that we have a title here that's way bigger and as you can see the text is not the same here it's not the same here here I don't know why it's not the same because it should be but no as it seems for some reason here it's not I don't think I have add any padding here in the deep but let me check it okay and sizing spacing and then here advanced sizing a spacing it's everywhere it's zero okay for some reason here I these two lines is not I know why okay this is H four okay let's go for it's three and this is should be H three okay so sorry for that okay and now I'm going to add here make this like a button or something okay make it a little bit of square just to be a little bit better in the eye let's go for this div and I'm going here in the heading and I'm going to wrap it in a div okay wrap it a start in a div and I'm going to put the text inside so now I have the div here that it will wrap this those two and this div I will put some padding I will put some margin and I will give it a little bit of shadow I'm not doing it in here in this div because this is the column okay I cannot put margin outside the column because I will not have one row if I put column if I put padding between here so I'm not going to mess with the width of the columns which is 33 pixels I'm not going to change any of those so I'm creating a div that it will play the role of my column okay and I will rename it just to know what it's what so let's go here and rename this is the column one okay I lost SC column one this is the column - and this is the column three did I change it I think I didn't just hit the rename but for some reason I delete that okay unfortunately don't have an undo and if you say save a lot you will get the result that you want and you can go ahead and click the revision to go back I think I didn't hit delete but I'm not sure and I cannot see in delete here and undelete so I'm going to add another column beneath that and I'm going to select three and now I can sorry not in here okay we have the two columns here let's go heading and add another column three okay and I'm going to take this div and put it here in not here here okay then I'm going to take this which has not div yet but it will have a little bit later and I will put it here okay and now I want to duplicate that and duplicate that hit Center okay and add something here delivery services for big corporations okay and are going for the topography and center this also okay so now I have here I'm going to delete this thirteen column thirteen okay let's go here in the divs and let's go for rename it column one okay this rename it call them - and after that rename this column three okay now when I enter this tip this div is not in the full width so this is why it it's not stretched and the content looks like this so I'm going to add here look at this code for sizing spacing and here it has 25% I'm going to delete that so it will display like this I think when you first put it I just bring it outside the columns and this is why it took the width of the line so for columns it's 25% after that you can just delete that and it will be again as it was so now that I have here the div I can go ahead and select it and add a class this is the product products diva and after I can go here and add some first let's go for a little bit of background so we're know what we're doing let's go for background and it's go for background of white so it separates from the others just to have what we're doing to know what we're doing so let's go now to sizing a spacing and I will put let's go for 20 pixels same all so it's something like that I need it bit 2035 okay something like that I think 35 pixels so this is how it looks right now okay I have 35 pixels so it gives me this size but you will see that when I put it here I will not get the same size so I will have to change the padding and play with other things you will see when it comes to that moment so I'm going to copy the product give class the products div class and I'm going to select the heading here and I'm going to wrap it in a div add the text beneath that and then add the same class to the div okay and of course I have to Center it and after that I'm going to do the same for the heading this one wrap it native add the text beneath that and let's go to the deep center it and at the same class okay so as you can see this is a little bit bigger so what I need to do I want to change the the size of the height okay if you change the size of the height then the white here will be the same from in the white here let's go and do that and then we are going to fix the titles a little bit so let's go and select this one this is what I want here now this is what I want here I want to stretch this to be in the same height as that one so let's go to add and let's go to sizing and spacing and let's go for height of 100 100 pixels so it's way too small okay 200 pixels okay so now you can see that they have the same height now after that I'm going to select here that we have here the heading and also I'm going to wrap these in a div so because I don't want to be confused with all the divs I have I'm going to rename also here so I'm going to rename it and I'm going for a product deal product deal and it's bit D naught T product deep okay and this is the product D one after that let's go for this one rename product div 2 and then this one rename and product D 3 ok and now I'm going to the heading and let's go and wrap it in a div and this div should be renamed as product heading diva product heading div okay and here we'll put one okay wrap this in a div this is also the other how would you deal and this should be wrapped in a div and I will rename that and three okay now I'm going for the first one I'm going to add the class the product and since it's a class I cannot have spaces product let's go for here product heading div okay the same class should be here and the same should be here I hope it's not confusing very much and this is only for you to understand how we're going to change all the settings when we're going for the mobile version so after that I'm going here that says product heading div which is here and I'm going to put some size in that so let's go for a height of 50 pixels and you will see that immediately it changed the text space so as you can see we're not good at this moment so let's go for okay I'm was thinking about 8590 something like that now it's not it doesn't change anymore because I have a static height for the productive so I'm going here and I'm going to change sorry not to lay out these sides here for 200 and something let's go for to 230 okay I think we're okay so as you can see now the text here starts in the same point and these are in the same the same size those are the same size let's so let's go and save that and we're going to start building the next section the next section is the contact us section okay and okay before we need some more things remember that when you're building a website every time that you go and visit it you will see something that you want to change so this is what all the developers are doing after you design something you will close it and the next day you will see it and say oh this should be changed to something like that and this would be saying to something like this so let's go here that it's the product diff and let's go in the background which I have put the white and I will go for I think a little bit of sixty so it's not white it's something that it blends with the background a little bit not something that it will keep you from reading okay sixty-five okay and when I hover I want it to change a little bit so let's go for the state that says here remember that I have selected the product div so let's go for the hover state and here I will select the color to be a little bit of gray something like that let's remove the opacity I think a little bit of that so let's see how it looks when I hover it changing its it's a little bit of gray I could also go for a little bit of blue since my main color is blue so let's see something like that no no sorry not in the state in this state in the hover state okay so in the original we need white with 65 I think okay 64 and when I hover going for white blue something like this okay and after that I will need some transition effect because this is not so great let's go for effect trance not transform sorry transition and let's go for 0.4 0.3 not 30.3 okay I think it's a little bit better okay maybe I could go for it too okay and I will leave it as it is now and let's go next one which will be the about Us section let's go for the next section okay and this is the about us about not the class sorry the ID about us I'm renaming the IDs because I want them to create the scrolling effect from the menu let's go for about not about us it's about okay so this is product and this is the About section okay and this section will also have a background which will be this one okay and of course I need it to have the same height so let's go for sizing and spacing let's go for 600 pixels okay this is grade and after that we need to have the background and the focal point be in the center so 50% and cover okay now I'm going to add here the heading which if I remember correctly too has 100 pixels here yeah 100 pixels so here I'm going to go for 100 pixels okay 100 pixels and then I'm going to add heading okay put this in the middle and the heading is in nades - is yeah it is h2 which says about us okay now since I have this background I would like to have the text on right on the right I do like this kind of backgrounds that has something in one side of one side or via the other end I'm going to put the text on the other side so I'm going to adhere the columns I'm going for two columns and I'm going to add the heading inside here okay so now we have the 200 pixels from the top of the let's go for the columns here so we have the padding the 100 pixels padding here but we also have some padding inside here so I'm going to go to the columns and I'm going to remove if we have some padding here or marking okay and inside the div I'm going to remove also here div and I'm going to put zero okay so now we're on top that I'm going to put those in the middle so let's go back to primary center and stack elements and now we need some text to go underneath the about us which is for some reason blue okay after that let's go for lorem ipsum for those that don't know what lorem ipsum is it's some Latin or you can change the language I think this is the language for the text but I'm not sure let's go and check yeah so you can change the language that it's inside the I think the text maybe maybe you cannot change the this that is the Lorimer okay I have confused you enough or not yet let's see I haven't I haven't tried it okay it was it is always Aladdin okay you cannot change that but you can change the words that are outside you can translate the other so something that I didn't know before I haven't tried it okay triple click that so I just copy I didn't copy but I will copy this and paste that and we have a text here of course it's way too big and I want to change it a little bit and I want to put that to be aligned left so okay here it will be another paragraph okay and here we're going to stop here now if you can see this this does not have the same space from here to here so I think it's not too great so if you do have a lot of text here and you need to put all of those you should change the height here and do a little bit of bigger like 700 and of course you will do the same to here and maybe the same here so because I don't want to change the height I just want to delete this because it's dummy content so I will leave it as this right now I think it's okay this size here it's I think close to here and after that we're going for the last section let's go at the last section which sees the contact section okay contact we're going to add here two columns no first let's go from the fourth background we're going to start from the background and browse and take this girl select this image and I'm going for 600 pixels okay and here also I'm going for cover and fixed K and 50 and 50 percent okay now because the head of the lady will not be shown because I will not have I think way too big of a footer here I will change this to 40 30 deleted okay it doesn't change because I have put it in fixed so it took the cover space I will leave it as this okay and let's go and here we'll add two columns of course add columns two columns and here are the columns okay I will need to add here heading this is 8 3 it's black and it says contact us okay this in the middle and put here 100 pixels and inside this div let's go and put 0 padding:0 okay after that we need to have the contact form which don't have created right now so let's go and save that and let's go back to our website okay we don't have anything open let's go for the dashboard here okay and let's go for for manator and forms I like for manator because it can do many things it's free its supports even styling in the back and of course you can style it in the oxygen as well but it's very easy to style in the backend and let's go and create something create contact form continue and this is the contact create okay this is the new first name let's go and edit that edit field and let's go for name and not first name okay apply you can also put multiple then go for first name middle name last name and prefix if you want but I don't want to apply and then the email address which will be emailing applying and then I'm going to grab that and put it next to the name so we'll have two columns then I'm going for four number and you can go for something next to that or you can go for this kind of style okay name email name and sorry not the email here the name first email phone number or you can go for a number here and put something next to the phone number which I don't know what it is address or something and the message is here and then instead of send message it will say send ok apply and after that I'm going to style it a bit after I publish it so I'm going to hit publish so I'm going to copy the shortcode that it will show me okay this is the shortcode copy that and then go back to oxgen I'm going to add inside div in the heading after the heading I'm going to add this shortcode and I'm going to copy this so oxygen will bring me the contact even if I have created the content after I opened this page and this is how it looks as you can see it's a little bit tight as you can see here so maybe the phone should go underneath or everything could go underneath that so let's grow the structure see now it's ok it's it's not too tight but I think it's it's not great okay let's go for the email to go underneath I don't know let's go for everything into one column let's go for the email here but as you can see it's pretty easy to change everything update it and save it okay I will remove it and paste it again sorry okay and let's see if it takes the new okay this is the new version save and I think it doesn't look like that let's go and see how it looks in the front and because we didn't have done this up to this moment okay Chacko products about us and this is the contact page okay and as I can see the scent is not too great here it's way up here so let's go for I can remove the space here I can change the width that I want here let's change the width first because it's way too narrow so let's go for a size and spacing let's go for a width of 500 pixels something like that no 400 pixels something like that I think it's little bit better and I think I'm going to change a little bit of here okay let's change how it looks okay updated refresh okay and I will leave it as it is right now of course if you want to have it in one line you should go for bigger sized sections here but I don't want to change those at this moment so I'm going to save that if i refresh it will take the new version so I will pause the video and do a refresh and now as you can see you can it has the newest version okay so the button is blue and when I hover is a little bit of dark blue which is great because I want blue but I think this is the default color so I will show you how you can change that and also I need some space between here so let's go and add some space here okay and I think I will change the height of the sections so now that I have put some here let's go into this and I'm going for a background of a little bit of white because I want the every single bit here it's says something I think here it says name or something but it can't be you cannot see it because it's a white color with a white background so let's go it change that first let's go to appearance and we're going to change the colors to custom we're going to change the submit button this is when it's not hovered and this is when it Harvard's this is where you can change the background and the Ducks I'm not going to change that but for input area I'm going for a little bit of darker border a placeholder I wanted a little bit of to be more vivid and let's go for the cone update that and then we want the submission indicator now it's not that filled basics let's see how it looks right now okay the this color is okay and these are okay so we can start we can continue building it we're going for background color of white as you can see here behind the phone number I can see the background these the woman's desert and in the lines also and I want something to give me a little bit of background to be a little bit of separate so are going for white background but I don't want full white let's go for something like 60% something like that and also I want some padding of 2030 okay something like that and as you can see I have to go and to change the height and then I need to have some border radius let's go for 40 and I have some border radius here okay let's go to the section and let's change the height size and let's go for 700 okay this would be 700 also and I'm going for do not change this I'm not going to change this oh you don't have to have everything if you don't have content that will cover the whole section you don't have to be specific in every pixel okay not go for 700 if you don't have enough content here here I have enough content I think to go for a little bit I think I need a little bit of space here okay so now let's go and add the contact icons and of course the content information you can add it beneath here or you can add it here I'm thinking of adding it here but next to the to the form here but I think I will ruin this girl so I will add them at the bottom of course I will need a little bit of padding inside here so it will not go for 700 either it will go for 700 and once you're going to change everything you can go ahead and to remove that and add the padding and margin that you want inside here into will automatically go for the height that you want okay I started by going in the same height for every section but it looks like it's not the case for this website it doesn't matter you can adjust that so let's go and add let's go for the structure okay columns and we have here so inside this div I want it inside this I want to create another div so let's go for this deal after the short code I want to create another div which day will be the line for Z for the contact icons so rename it and say contact divs okay and inside that div sorry for that rename this is the column to not the what I have put here let's go and add here rename and this is the contact divs okay and inside here I'm going to add another div and this div will have the icon and the text so first let's go and put 100 pixels width here because the div doesn't have any size let's go for let's go for this div and let's go advanced sizing and spacing and let's go for 100 pixels one hard percent sorry so it will take the full length of the column and then inside here I'm going to add another div the div if you don't know what it is by now it's a box okay basically it's a box so let's go for contact info okay and this tip will have inside the icon which is the contact icon and after that we have the text which is the contact text okay of course I cannot see now the aim here the elements that I have put so I'm going to this section and I'm going to remove the fixed height okay and now I'm going to select this and put here a color but first I'm going to click solid let's go for a color first just to see what it is so here it's the icon so I'm going for a solid so I will have here a circle with the icon inside here the background will be my default color and here I will have the white for the color of course the icon size would be little bit smaller 30 and 15 something like that and I won't int inside the div to be in the middle okay and this should be black so now I am going to put here the phone icon this one and here I'm going to put a number for the phone this is the phone number now I'm going in this div and I'm going to duplicate it and then once more and inside this div I'm going to stack the element horizontally and have them spaced around after that I'm going here I'm going to change the phone to email envelope envelope for the mail this is one and here is mail dot not dot at mail.com and this should be a pin or a home whatever you like you can go ahead and put a pin or a map I think it's a better icon the map or you can go for a home something like that and this is the address now since you cannot really see those I need to have an overlay color here so let's go to background and let's go to sorry to the section let's go advanced and let's add the background overlay off-white and let's go for fifty something like that okay so don't be afraid to change everything that it doesn't suit you you have to change everything so now I need some a little bit opacity here more opacity in the contact form so let's go for background and let's go for 80 okay so you can see it a little bit better after that I want to give it a little bit of space so let's go and click that again and add here some space okay let's save that and let's see it in the front end how it looks right now okay Chacko products about us and contact this shouldn't be right like this but I think I have to change the to delete the cache to clear the cache let's see no it looks like that I don't know why let's save that once again let's see how it looks here yeah I have put it here like this but maybe I haven't updated once more let's go and update it and let's refresh this and it didn't change let's clear the cast once again I don't like that it's way too narrow maybe I have to remove it and re-enter it yeah it's too narrow update and let's go and remove it from here ex put again no it looks like that right now I'm going to delete that and I'm going to put this underneath that update and see okay and let's go for a little bit of space so select that and let's go for the width and let's go for 500 not hide sorry the with 500 pixels okay something like that save that and now let's go and we have to go and add the buttons in the menu and of course the contact us so we want to add the names of the section so we have here the products which for some reason I have put here a capital letter I don't know why I don't like to put capitals inside here so let's go and change that I didn't hit enter but it took it another less okay so let's go back to our menu appearances menu now you will get this message when you leave the form NATO forms even if you have just save it doesn't matter just click leave okay and let's go for services and we're going for products and now since we have products let's Saints this from services to products so in order to put the URL here we want to have the pound and then the name of the ID which I have changed okay the name of the ID was here something like that in the hero section like something like section to point a to harsh something but it ain't it so here we have the about us here kay doesn't want to cop it okay I tried it and succeeded so about us pound and about us and then contact we want of course contact and let's see if it's contact yeah it's contact and the same contact will go into the link of the button here will have pound and contact let's save that and let's go in the front and refresh and now I can go to the services and it will scroll down not services products and it will scroll not products if I go to about us it will scroll down no it will not because I'm done something wrong but if you go to contact it will neither do that also I don't know why didn't I save no I didn't save the menu last time ok and if I go to contact us it will go to contact so after the menu say let's refresh again and now I'm hearing about us and I will go to about us and contact contact so this how it looks so we were going to change it how it looks for in the mobile version and let's go and start doing that and then we're going to add the footer and I think we're done so let's go and go to the width that it's less 100 1,200 now I like to fix section by section and not the whole page but it doesn't it what it search for you you don't have to do it the way I do it okay you can go ahead and do it want one page at the time for every with the whole page for every with I mean so this is quite alright the products are not good because as you can see now the title has go over the text so you can fix it by doing some things like changing the title the size of the title or giving it a little bit of space here if you want to give it a little bit of space you have to go into the section that it is now here is this section and as you can see this is the the product 3 and this is why I have renamed it rename everything so I have to go to the product adding div and I have to go and give some spacing here so I will have to go for height let's go and see how what is the height this is 90 so I will have to go for 120 or something and you can go for something like that or you can go ahead and just change the size of the font let's go for 25 and let's go for something like that whatever suits you okay whatever is better in your eyes I think this is quite good but I can also go for something like now I need two lines here not three so let's go for 21 I will not change anything else inside here as since I see that this size here is the same is correct and everything looks fine about us looks alright and contact looks who okay and I know that I said section by section but I'm not doing that so let's go to less than nine nine two and let's see maybe this button size should be a little bit less should be a ten neat bit of eight or something this is still quite all right the products now as you can see have gone there one column in every time so now I have to remove the width here so let's go to advanced and let's go for sizing a spacing and height I'm going for Auto now you can see that I have the three here boxes I will need a little bit of less space here since we're in tablet okay and now I don't want this width so let's go into the product div and let's see what with these for all devices the width is now sorry not here the layout the size here is 234 the height and the width is 100% I think in the column so I'm going to change here first let's see if I stuck it horizontally no it's not good so let's change this the width to I don't know 300 something like that I think it's okay but let's go for 350 350 okay Italy better I think okay it looks good then I can go here and remove these and also I can remove sorry remove this section the padding here so let's go for sizing and spacing and let's go for height Auto okay and now I want this deal to be hidden because it doesn't have any content so let's go and put the layout to be display:none now when I did that you can see now that the space is now okay but I have here a background that it's not okay for the text so I'm going to select the section again it's selected so I'm going to background and I'm going to select the image once again because I cannot just select the image overlay color and put it like that I have to select also the image so let's go 3 mods and let's go for brows and let's go for this one which didn't had any alternate text which surprised me okay and I think I need something a little bit bigger here so 0.7 something like that I think it's okay and then we have the contact us page and the icons are still looking good okay let's go for a bit of less space here let's go for layout and nom and here let's go again for a little bit of less space okay I think it's okay now and let's go to the next one okay now I have to put a little bit of less size here 25 products there looking good about us is looking good and contact us and I thought that the icons weren't going to look good but they are still looking good okay and after that we're going for less than 480 now I need to change here for 1820 the contact can't go for 5 of course every time I hit it I'm going straight to the top bottom okay and the products are way too big now so I'm going for here the productive gain advanced sizing and spacing and let's go for a width of 30 pixels yeah 30 pixels are okay the about us looks okay maybe I could go 4-0 padding in the section let's go and see how it looks okay I think it's only better because it's quite big the the content and the contact us this should be the width smaller was it good in this yeah I think it's okay here even if I cannot see the bounce the the outside the box ID doesn't matter but I can change it okay let's go and change that lets go for sizing spacing and here that says width I let's go for 300 pixels 350 350 school for okay Desai's and then after that let's go for less and let's go for 350 no a little bit less just to see the corners now I can see the corners so I will leave it as this okay and the icons are not looking good so now I have to go to the div of the icons they contact div and now I'm going to stack tiles elements vertically Center and I will leave a little bit of space underneath so it will looks look like this and of course I have to go and put a little bit of less number okay and do it the icons a little smaller so I think we're okay yeah I think we're okay with that I can now save the page again and I can go ahead and design a footer so let's go again to the templates I think this is the template but it's better to refresh once again because we have opened another page who have changed many things so it's better to go and refresh and with that you will see the content of the page as well it's almost two times in the video I hope I haven't bored you with anything if you're sleeping then I think you will need this video to put yourself in sleep okay it's loading I will no I will not pause the video okay so here we'll bring the menu okay and here we'll have the footer so in the footer I'm going to add first columns and we're going for three columns or two columns let's go for three columns okay I will remove the padding at once okay and I'm going here to add an image again the image will be the logo okay and since I remember I haven't put here I think the alternate text so sorry for that but you have to put the alternate text every time so you have to go again if I didn't do it here and put the contact us again select and then here background browse and select what was it this one about us okay this is okay and everything else has it only the conduct didn't add okay save that and let's go again here and here I will go for 100 pixels width okay I didn't I don't want it to be too much space now you maybe want to align it in the middle or you may want it to align in the left in the same line as the icon we have in the header after that we're won't we want to add some information like this and the only reason because the only reason I add those in the footer is because some visitors will look of look those information in the footer will go straight down the footer would not see anything else and just land there just to see which is the what is the phone number I have it in a section up but I have to add it in the footer as well because if the visitor is going to go straight down to the footer to search for it he wants to see it he doesn't want to search in the page even it's one section up so let's go at those I'm going to add a div again always add divs when we're going to add multiple elements it's better the div should be named footer footer okay let's go for footer right footer right and div or footer contact you I don't think I create any contact contact do okay add class there I'm going to add another not another I give an icon which is the footer contact icon and I put in contact because maybe I will add icons here I don't know at this moment and I will name it footer something icon this way I put the contact inside and then I have to add a text underneath that will have the text the class footer contact text ok so let's go and style elements horizontally I'm going to change the icon size to 20 change the color to white and change these thumbs up to a phone number I want a square let's go for 25 25 and let's change this to 2 10 to 10 to 10 to 10 which is the number do not call it please okay okay after that I'm going to select the div and I'm going to duplicate that and then duplicate once again and I'm going to add some space in the first div something like that okay and remove the extra space okay this should be an envelope this one and this is the mail at mail.com and this is the address which is the home or PIN or something or map home and this is the address okay this is the first one I will leave it lined as they are but if you want to go in the center you will see that these are not lined so you have to add a div for all those and send to those on the left so let's go and do that for those that you haven't understand what we're doing at this point hopefully you have all understand what we're doing you can replicate that so we're going to wrap this in a div and we're going to add all those in the div and as you can see now they are aligned in the center but they are all aligned in the left inside that div but since we said we're going for the left align I'm going for the left align doesn't matter that I have added annex extra-deep okay after that we're going for another heading which is the contact not contact sorry social icons ser or something like that getting dots I don't know social so so get social case enter that and I want to add here the icons and you can do it by adding the social icons or you can adding one by one and something after that or the icons but independently inside a div of course so let's go for social icons and I will go for the brand colors I think it's better I will not go for white no I go I'll go for white I don't like the brand colors I'll go for white here let's do not have this and let's go for icon color of white and of course let's go for 30 something like that little bit bigger than this but not too big and of course I want this to be line here so let's go and put some space here a little bit of more space I think now it's aligned and now I can go ahead and let's see the sizing it's 38 ok so let's go here and add here it should be it's 3 so see how I can change it more ok so so let's see the sizing a spacing in here it's 48 so let's go here and add another heading which would be a 3 and it will a something would say something about I know subscribe to our channel or what can we add another menu copyright were can add something like useful links and have the GDP our settings the personal settings the cookies or something else that you want to put always you want to always put here the privacy contact what the lawyer will say that you want to add in the website so useful links maybe something like that let's go for center and after that I have to go for sizing a spacing and I think it was a 48 so it's 48 and then I have to add here a menu which you select you should select the menu the other menu and of course I haven't created one and you should create another menu with the pages that you want add them to the menu I'm not going to do that it's almost two hours in the video and nothing I need to do that but I have to go to the spacing and I'm gonna have to go here for ten or something no let's go for one zero let's go for five and five and see how it looks now let's go for two and two something like that and you have of course to change all of those into white text should be white okay and when I hover I don't want any background color I don't want any border and let's see now let's go for zero and zero K drop lines mobile-responsive I will not change any of those so you know how to add those and then if you want to add another line here that it will say copyright 2020 made by you or something and maybe you can do it with another div but inside outside the column so outside the columns I will add another div and it went straight inside the columns okay inside the columns and this div should be should only have a text okay and let's go for a width not of the text of the div let's go for width of 100% okay this should be in the middle Center and this would say copyright the arsine which I don't have it in shortcut now but you can copy somewhere I don't remember the short code or the the code of the keyboard you must press one or two keys I don't remember right now 2020 then something like that and designed by space and then you can adhere its text text link which text link should be going to the dev and here and then again middle okay and this text should say your firm so Stratos or something with text color of something I don't know red or what's your colors and then you're going to the URL and you're going to put your website and then go and hit set and put here open link in a new tab so the visitor will not leave this page even if he hits that by accident so I think we're okay we're ready let's see the website one more time yeah I think we are ready if you have any questions you can add it in the comments below I hope you enjoyed the video and you didn't fall asleep in the first 20 minutes ten minutes and I will see you all in the next video bye guys

Channel: Stratos Tutorials

Views: 6,436

Keywords: Create a Full One Page Website with Oxygen Builder, oxygen builder, oxygen builder tutorial, how to create a one page web site, build a full website with oxygen, how to create a website using Oxygen, create a website with oxygen step by step, create a website with oxygen builder, oxygen builder create a website, step by step oxygen builder

Id: rz0JoEwO-2Q

Length: 123min 4sec (7384 seconds)

Published: Thu Feb 13 2020