[Newbie Guide] Building a Website in Oxygen from Scratch

hey this is Lewis from Soulfly in this video I'll show you how to use oxygen to design a page you'll learn how to create a header hero section page content sections footer how to make it all responsive how to use oxygens builder elements how to use classes to apply the same style as the multiple elements all about layout spacing how to set your fonts etc so by following along with this tutorial you'll get a very good overview of how to design pages with oxygen so let's start by making a header so to add elements to my page I'll go to add and then I'll go to helpers header builder and then I will go ahead and add a logo to my header so I will go add basics image and this will be my logo image so now I'll upload my logo over on the Left I have the image URL field I'll click browse and then I'll click select files to upload a logo here is the sofly logo click select image and now this is the logo image now I can adjust the width and height here so let's shrink the height of this image it's too tall okay that's a more reasonable size for the logo and now I will go ahead and add a menu to the header so to do that I will click Add WordPress menu now I've added a menu in just show some example links right now I can go in the WordPress admin panel and actually create this menu let's drag this over to the right side of the header builder whoops I accidentally let go in the center there's the right and there we go so to move elements around the page you simply drag and drop them where you want header builder by default stacks horizontally so you can drag items from left and right most other elements stacked vertically unless he changed the senate so let's go ahead now and create a hero section so go ad basics section most content you design an oxygen is going to go inside of sections so inside this section I'm gonna put in a heading so I'll go add heading I'm also gonna have a video so go add video and then below the video I'm going to have a link so I'll add a link or this will be my call to action button below the video now let's adjust the styles of this so the first thing I want to do is align everything in the section center so to do that I'll click on the section and then under the layout controls here I'll choose child element layout stack elements vertically and horizontally dome alignment center that will Center everything in the section now I'm gonna create styles for my headline so I'm going to click the headline to style it now rather than style this headline individually I'm gonna create a plot a class that applies to all of my headings and that way I can style them all at the same time so to do that go over to choose selector to edit click and specify a class name I'll call this primary heading now I will set the text color to black font weight to 300 font size - let's try 48 and then to edit the text of the heading I'll just double click to edit the text click more to highlight and type in my head in it designing pages with oxygen and when you're done in ating the text you can just click outside the text editor or click Donna now I want to add some space below the heading so I'm going to go ahead and drag downwards on the edge of the heading to add space actually though I may not want space below all of my headings using this class so rather than add space on the heading I'm an ad space on the video so to do that click the video mouse over the edge and then drag downwards now let's adjust the size of the video because this is far too wide so to do that I will go to advanced size and spacing and I'll set the width to 700 pixels that's more reasonable let's go back to the primary tab for the video and change the aspect ratio of 4 to 3 16 to 9 and 21 I'm gonna go with 21 to 9 here and then let's create our button so to do that I'm gonna click this link I'll edit the text by just double clicking the edit the text I'll type in it click here now and then let's create styles that apply to this link so we're new to say if they were to create a class I'm gonna call this primary button and then we will go to advanced and set up some padding that's space inside the element so the size and spacing padding and we'll go with 20 pixels everywhere to start actually let's go with 40 pixels on the left and right let's add some space between the link in the video so I'll click the video and drag downwards let's edit the link again so I'll click that let's set the background color of the link so I'll go to advanced background and let's choose a color let's go with let's go with the nice blue okay that's the background color for our bottom let's go ahead now and set the text color so go to advanced typography color is gonna be white let's change the font size let's make it bigger let's try 21 let's go with 24 and let's adjust the font weight let's make it bold let's change the font smoothing you anti-aliased I like to use anti-aliased font smoothing when I'm using light text on a colored or dark background okay now we have our button let's go ahead now and add another section to our page so to do that you just click add add another section scroll down to the section and this will be our testimonial section so we're gonna have a few testimonials in this section let's create sort of an alternating background color effects we'll have a white section than a light grey section so to do that I'll just set the section background color to light gray and then inside this section I'm gonna add a testimonial so to add Helpers testimonial and i'm gonna have multiple testimonials in this section I want them to all look the same so to do that I'm gonna use a class so i'm gonna click choose selector to edit i'm gonna call this my testimonial and now i'm gonna duplicate the testimonial a few times one two three four now we have four testimonials in this section now let's go ahead and style the testimonial so click the testimonial let's go to advanced background we'll give it a white background let's go to size and spacing add some padding around the testimonial dirty pixels let's drag down on the bottom of the testimonial to space it out from the others it's a margin and this is too wide so let's set a maximum width for the testimonial 700 straight 800 and let's Center all these so we'll go back to the section by clicking the section and in child element layout choose horizontal item alignment of its Center okay now we have four testimonials let's add a shadow effect on the testimonial so we go advanced effects box shadow and do a semi-transparent black shadow no horizontal offset no vertical offset and fifty pixels of blur it's a little too much let's go with 40 pixels blur and 25 percent transparent oops don't want to click inset we want the shot on the outside of the testimonial and then let's go ahead and add a border radius to the testimonial so let's go back to advanced borders for border radius will set a three pixel radius you can barely see it but it just barely rounds the edge of the testimonial makes it look a little cleaner and I'm gonna add a little more spacing and I'm gonna tone down this shadow a little bit it's too extreme let's go effects box shadow well lighten it a little bit and give it less blur okay that's better now we have four testimonials and specify testimonial image we just go to image specify our image URL you can upload an image I'm not going to do that right now to edit the text you could just double click any of the text and edit the text okay now we have designed two sections we've designed a hero section and a testimonial section let's go ahead and put a heading in this testimonial section so to do that we're going to duplicate this heading with the duplicate button here in the top top left and then let's drag it down to the testimonial section now the headings in the testimonial section now we want to add some space below this heading but we don't want to add space below this heading so rather than add that space on the class let's click here and choose the ID now we're only editing styles that apply to this specific heading so let's drag downwards and as you can see that doesn't affect spacing on the other heading whereas if we choose the class and then edit the Styles it effects all headings that have that class applied ok now we have a testimonial section let's create another section so ad basics section and in this section let's put some alternating columns with images so first I'll put a heading in here so add heading and I'll add the class to my heading that'll make it look like this heading so I'll just go to selector to edit enter class name primary heading when you add a class that already exists it simply assigns it to the element and we'll call this product features now let's click on the section and center everything in it and now let's create our columns so go add columns we want a two column layout so I'll click 50-54 two columns and maybe we'll have the width of the image be 60% so I'll click on this column here and I'll give it a width of 60% and let's add some space below this heading so I'll choose the ID and then drag downwards okay let's go back to the columns in this column I will add in an image let's go add image and let me upload a few good images we're going to use here so upload files select files and let's upload these four images okay I want to use this one select image okay here is our image now let's go ahead and add a heading and some text so I'll click the other column go add heading an ad test now I'm gonna have multiple combs I want everything to look consistent across the column so I'm gonna had a class to this column and I'm gonna call it my columns text content column now we're gonna choose stack elements vertically align items left vertical item alignment of middle and now let's create classes that apply to the heading and the text in the columns so I'm going to call this feature heading and I'm gonna call this feature text now let's set the styles or actually let's duplicate the columns a few times so let's go up to the column up to the columns duplicate one two now let's reverse the order of these so let's just drag this column woops actually dragged into the other columns okay that's better and then let's reverse the order of this one so we'll drag that over here I didn't mean to do that okay you know what let's reorder these columns let's put um now I'll just put this one back okay now we have alternating columns with images let's change out the images so click an image browse browse let's add some space to these columns here so click it drag down same thing here okay now we've spaced out our columns add a little more on this one now let's go ahead and style the text so I'll click the heading here and let's go with a text color of black a font size of 36 a font weight of 300 and we'll go advanced typography line height of 1.2 and we'll put some space below it so notice how that Styles all of the headings and then let's do the same for the text so go text color black font size 21 font weight 300 let's go typography line height of 1.4 and here we go now let's just fill in our text [Applause] okay now we have an alternating column layout let's add a little more space below product features just for consistency here looks good now we got testimonials and columns now let's add another section to our page so they'll add section and in this section I'm gonna put some icon boxes so let's use a different background color here I will go background color of light gray again and let's add in order to put three icon boxes so let's add in another columns choose 33 3333 and let's go to add helpers icon box now I'm gonna put a clasp on this icon box so again I can style them all at one time so let's enter a class name I'll call this to my icon boss and I'll put a class on the icon in the box so just click the icon and my icon now let's duplicate the icon box and drag it into the other columns so drag that one whoops drag that one over there and drag this one over here okay now I've created three icon boxes let's style the icon boxes so click the icon box control the layout so go to layout in spacing let's align it center let's make the space below the heading a little bit less like that let's adjust the typography of the heading so we'll go back to the icon box typography heading let's go at the font size of 24 a font weight of 300 now I'll stick with let's go 500 for the font way and then for the text in the icon box let's use a font size of 19 a line height of 1.4 font weight of 300 let's actually make this a little smaller 18 18 looks good and let's adjust the icon so click the icon solid let's use the same icon colors we're using for the button up here so let's go to the button advanced background copy this color go down to the icon box is our icon color and let's make the background color not black but semi-transparent black like that and let's add some space around the icon and let's adjust the icon and you'll notice we're editing a class here but the icon it doesn't make sense to have that in a class so when we change that it actually won't update the icon everywhere we can still edit the icon itself and that changes just for the icon we're editing whereas the styles for the icon apply everywhere that is the beauty of oxygen classes you can apply the same styles to multiple places so easily okay so now we've got a hero section testimonials product features icon boxes set some buttons of these features so let's just duplicate this button and let's drag it down to the feature section that's a long way to drag it though so it might be easier to use the structure panel to drag it so to use a structure panel click structure on the top right this will give you an overview everything on your page to open the structure panel to a specific element just click it so here's the gift it's inside our columns that contains B heading in the text so we want to drag the button below this so let's click that button here it is and drag it into here and that's a much easier way to drag items long distances on your page it's to use a structure panel okay that's a little cramped right up against that text so let's click text and drag down a little bit and I'll change the text here to just be learn more and maybe we also want to use this button not in every section but in the bottom section here so there we go and now if we wanted to update the button color on our site we could just go advanced background for the primary button class and change the button color and that changes it everywhere we've used this class okay let's put it back I like blue okay now that we've added the icon boxes let's add another section to the page let's add any frequently asked questions section so to do that we'll go ahead and add in a section so add basics and then I will add a heading I'll use that same class primary heading now let's click the section Center everything double click the heading to edit text call us frequently asked questions and now let's go ahead and display these in two columns so they'll add columns 5050 and now let's add in our questions so I'm gonna place each question in a div that'll make it very easy to space it out from the other questions so additive I'll call this FAQ question I know that's redundant and I will set the width to 100% and then inside of this I will have the title of the question the question itself and the text will add a heading changing heading tag here to h3 for SEO purposes and I'll call this FAQ title and then text pull out a class called back text okay now let's duplicate this phat question div a few times and let's direct some of these into the other column okay now let's add some space so we'll just click on the fat question and mouse over the bottom to space it out when you're dragging on the outside of an element it creates margin so you can see that if you go to advanced size spacing margin what really doing is simply adding bottom margin here let's close the structure panel so we can see everything in full size okay let's fill these off with questions okay you get the idea I'm not gonna fill all of these out but I'll fill out some of them let's add some spacing above the columns and there we go now we have a frequently asked questions section so page is looking pretty good we're almost we're almost done designing a page okay let's add a call to action section at the bottom let's go section let's add in a heading and let's add in a text link and let's use the same class for the tax like primary button and same class for the heading primary heading and there are a couple ways we could lay this out we could lay it out vertically start chotto elements vertically align center but let's organize this one horizontally so we choose stock shot elements horizontally and we use space between the elements now let's just adjust the text so everything fits here so and let's change the background color of this section to a light gray and here we go now we have designed a call to action section now let's add in a footer let's go add section and in the footer I'm going to put a little copyright notice so I add some text let's Center everything copyright to get a copyright symbol on a Mac you hit option G when you're typing and that will give you a copyright symbol drawn windows I'm very sorry copyright Soulfly 2018 let's make this a little bit smaller and let's put the logo above the copyright symbol so let's go up here duplicate the logo it's open the structure panel and drag one of these logos down to the bottom section whoops let's get it inside the section and there we go and let's add some space below with the logo okay cool now we have design a page now let's put some finishing touches on it let's make it responsive let's add some effects so let's add a hover style for the bottom so to do that we'll click the button and we're gonna use state to add a hover State so right now we're using a background color of blue let's highlight that and copy it then let's go to state hover and let's paste in this background color but then adjust it let's make it a little bit darker on hover so now when we hover over the bottom the bottom gets darker let's make this effect smooth let's give it a transition so to do that we'll simply go to advanced effects transition and we'll give it a transition duration of point five seconds that's the amount of time it will take for the background color to change when switching between me original and hover States so now we get a nice smooth animation of the bottom okay now let's go ahead and make all of this responsive actually before we do that let's adjust our global fonts so go manage settings global styles fonts so the default fonts with oxygen are usually source sans Pro and open sans or open sans and open sans let's change the display font display font is for headings let's change this to Alegria sans small caps and then let's change the text font to Alegria sans so you can use any font on google fonts in this list you can also integrate oxygen with Typekit or custom fonts but that's a topic for another video so to find the font you just start typing the name of it since there are so many fonts on Google we couldn't list them all in this drop-down so just type the font you want and it'll show up in the drop-down okay now we've changed our fonts or page looks quite a bit nicer with the custom fonts it's not used small caps let's just use a library of Stan's if we want a caps effect on our headings what we could do is just go to the heading and for font family set Alegria sans small caps on the headings only okay looks pretty good now let's go ahead and close a Settings panel and make this responsive so to see how the design looks at smaller screens you click the device icon to get the media query drop down and then choose your width from the drop down so here it is at 1120 here it is less than 992 here it is it less than 768 and here it is at less than 480 so I'm already seeing a problem with the video here that's it it's too wide so that means I made a mistake what mistake did I make I set the video's width to 700 pixels that's a bad idea because at 480 pixels the video still 700 pixels wide which is too wide wider than the device let's go back to all devices instead of setting the width to 700 set the max width to 700 now the video will never be wider than 700 pixels but it will be allowed to be narrower than 700 pixels okay the hero section is now responsive let's go ahead and make these testimonials responsive so go to the testimonial go to layout and we're just gonna go with a vertical layout below a certain amount so testimonial looks good here looks good at 11:20 looks good at 992 stops looking good it looks okay at 768 but we could go vertical so we're just gonna choose vertical layout below 768 and mobile content alignment of Center and now our testimonials are responsive okay our product features are responsive but there is a tweet we can make columns and oxygen are automatically responsive when the screen gets small they start to stack vertically if I click a columns you'll see if stacked columns vertically at less than 992 is the default so at less than I named 92 these go vertical but because the columns are alternating right we have an image first here but we have the image last year the columns don't lay in the same order when displayed vertically we end up with image text but that text image so we want to reverse the order of the second set of columns so to do that we'll just go to the second set of columns and which is reverse column order at less than 992 which is when they go vertical now we have image text image text and image text which is what we want yet they alternate on desktop so that's pretty good okay now let's make the icon boxes responsive so less than 1120 all good less than 990 to scroll down to the icon boxes that might be too soon to start stacking them vertically or maybe we could constrain the width of the icon boxes let's click an icon box and go to advanced size and spacing max width and set the max width to 480 and then let's use auto margin on the left and right to center it let's turn it down even more let's go max width 400 and this max width setting will only apply at less than 992 so at 1120 when these columns don't stack vertically the icon box doesn't have a max width at less than 992 it does and it looks like this okay that's pretty good now to make our frequently asked questions responsive we probably want to align the text left in all of them so let's just click one of the frequently asked questions FAQ question class stack vertically align left' and actually I should set that on the desktop I didn't need to set it here so less than 480 pixel Styles let's just delete those go up to all devices and set the text to align left okay now our frequently asked questions are responsive and now let's make the call to action section responsive so looks good here stacked horizontally but it'll start to get cramped as the screen gets narrower we get to less than 992 it's cramped so what are we gonna do about that we're gonna choose stack child elements vertically and then let's add some space below this heading only this one so we'll go to the ID dragging some space and we also want to align the text in the center let's go text align Center and there we go we now have a responsive website designed with oxygen okay this is Lois from so fly I hope after watching this video you have a good idea of how to use oxygen to design your pages thank you very much for watching

Channel: Oxygen

Views: 42,309

Keywords: oxygen, tutorial, wordpress, website, designing a website, build a website, elementor, beaver builder, divi, pagelines, visual composer, themeforest, avada

Id: Lx3PVlVNWE0

Length: 34min 11sec (2051 seconds)

Published: Thu Jun 07 2018