Make a Website with Oxygen in WordPress | Single One Page Photography Site | No.1 in 2020

good morning everyone JP here sing a warm good morning from a very chilly South Africa on this early morning it may be evening it's still in the afternoon wherever you are welcome to tutorial on oxygen page builder for WordPress this is a beginners tutorial so if you're a beginner welcome I'm going to show you a little bit about oxygen we're going to build a website and if you're just an enthusiast you're more than welcome to go along on this journey for an hour plus I never know how long these tutorials will be but when we go a little bit slower a little bit more in depth it takes a little bit longer we'll be making a photographer's site or a photography site for a photographer a one-pager so this is how the page looks we've got a section and it's a very basic site giving you the basic stuff that you will need to create your site with a portfolio with a lightbox a little bit more about you a contact form and then just a bottom footer section we also have a header at the top with these section links so I click on services it takes me to this area with a very nice smooth scroll portfolio does the same and you can imagine for these two it will do the same what is very important with any builder and any website is responsiveness when we talk about responsiveness we refer to how will this display on a tablet and on a mobile and I start off with by showing you how it will look let's go to iPad let's make it full size go to the top and you can see the site behaves just as well as it did on the desktop view like box and the rest of it looks really nice we will be building out of form using a plug-in called happy forms and I'll also show you how you can bring in your own custom while your own icons within oxygen very easily let's display it on the phone and I use the samsung galaxy let's go to the top again nice hamburger menu if you click on it it opens the menu and same smooth scrolling to the section where ever you want to go and for the rest of it it looks really good so we'll be building out this in oxygen show you how to install oxygen how to create your pages how to set up the sections how to bring in great styling good typography and good color palettes and build out this photographers website for Valerie styles let's get crackin [Music] if you want to practice along I highly recommend you use local by flywheel sometimes just refer to as local look at the link in the description below very easy to set up a site and then you can practice along for free of course oxygen is not for free but you can still practice along for free if you just want to see how this works and you don't want to spend money on extra hosting let me go into WordPress and here is my WordPress site I've set up everything is cleaned out let's first install oxygen I'll go to plugins and I'll click on add new and then upload plug-in to get the oxygen plug-in you have to subscribe and sign up for oxygen and if you head over to the website again just follow the link in the description below you'll see that there are three versions that you can choose from the basic at $99 which gives you the builder and that's all you're going to need for this tutorial for future tutorials where we will look at what commerce you will have to go for the higher package currently it's discounted with 30 US dollars and then there's the agency which includes Guttenberg block builder and this one is going to run you a hundred and seventy currently and full price two hundred and fifty when it comes to oxygen if you're in doubt all I can tell you is rather go and get it when oxygen two came out they released it at ninety nine for early bird special that means if you had signed up back then these guys come now included for free so any future upgrades any future additions you don't have to pay anything more so it's really a matter of the longer you wait the more you will lose in the future both the WooCommerce and the agency bundle will have their own separate tutorials here at websites for beginners in the future and I will show you them why this Guttenberg block builder can be such a great feature if you are working with clients for now sign up download the plug-in let's go back to WordPress choose file rabbit currently at 3.3 and install now great click on activate plugin and then we're all set you will see here in the navigation sidebar on the Left oxygen will appear but before that happens it's going to give you this splash screen it's going to ask you do you want the pre-made website an oxygen comes with a really cool set of pre-made websites that you can begin with or you can choose the blank installation which will just install oxygen and you start everything from scratch let's go to blank install and nothing happens because it just leaves the installation as is that thing that I mentioned you will see oxygen appears here in the sidebar on the left if I hover over it there's a few things that you can look at we are going to be creating a one-page website or a single page website and this is one of my go-to tools because I sometimes think you don't need more than a one pager there are a few reasons why I would recommend one pagers one if you're a small business - if you're not selling anything three if you don't have a blog and four if you want to make sure that people can just find you online the reason I'm going with a one pager it's much easier to show you how it works instead of five or six pages it will take us six eight nine ten hours to go through all of that to do that we have to create a page our home page our one-page our landing page go to pages and if you click on all pages currently we have nothing I'm going to click on add new and we'll just call this page our home page the last update to WordPress 5.4 brought us this splash screen for the block editor that appears every time no idea why but anyway you can go through that click out and then with add title we're just going to call it home and let's say home photographer so we have an idea what this site is about we publish it and it's going to ask you to publish again and I'll say yes publish it again and now what we have to do is we have to go and edit with oxygen but before we do that I'll go back to WordPress click on the W I'll do two things first it's normal housekeeping the first thing is I will assign this page to my front page my home page so that when people come to my site this is the page home photographer that they will encounter to assign this we go to settings reading and then over here your home page displays a static page and then for the home page the page that people will come to when they enter your website address select and we only have one page that we have created this home photographer let's save the changes and if we view it on the front and now it looks like this why does it look like this and and now you've in a mess because there's nothing of WordPress here the only way you can go back to WordPress is to click here on this back arrow there are a few things that have happened here the first thing is that if you go to appearance and you look at your themes you will see they're all grayed out the reason for this is that oxygen overrides your themes so that question I always see on the oxygen forum which themes should I use with oxygen please go and read the manual you don't need a theme it doesn't matter which theme is installed it overrides the theme so this is one headache you don't have to think about no theme for oxygen oxygen disables the theme so you have kind of a problem the second problem you have and that is when you go to pages click on home photographer is that currently this page isn't activated to be edited with oxygen so when you go to the home page it doesn't know it has to use the oxygen interface for that so to make sure that it looks at least better click you're on edit with oxygen it's going to open the oxygen builder now and we will get back to it what I want you to do is actually just go here to back to WP at the top click on the drop down link and you will see you can go back to admin or front-end the front-end is going to display the site how it will look for a visitor we're going to leave the front and open most of the time so we can have a you never compare before and after how these things look open an instance of this in an additional tab and what you do is hold ctrl on your keyboard on windows command on a Mac hold it in and click here it's going to open a second tab and it will load it for you here let's go back into oxygen and let's start working with oxygen to bring in anything with an oxygen you need a section all builders have this function it's either a block or it's a section or it's what do you want to call builders work like that you need this row this section this block to come in in which you're going to bring in your content go here to the top where it says add click on add and then you will see if I collapse this panel that these are the panel so cannot collapse you have to work like this but you have basics here helpers WordPress library and reusable ah there they collapse and under these categories you have different elements that you will bring unto your page basics you can say the more popular ones the ones that you will be using most of the time and will be spaming our time here within basics click on basics and then you will see this a few widgets here if you've worked with other builders you may be a little bit underwhelmed what's going on here these are only like a few why aren't they more you will find that the ones that you're going to work with most of the time they will appear here and the others are all categorized under these we need a section and this is containers and there are three containers with an oxygen and the names may scare you a little bit and a lot in oxygen will scare you as a newcomer as a beginner many people will tell you oxygen is for developers people who love CSS don't let that throw you off I don't do those things and I love oxygen you can do a lot with oxygen without doing any coding ever I'm going to show you you know you're not going to use it on this channel ever you start we click on section and when you click on section it's going to bring in this area with a purple bounding box and it will say section here at the bottom and as you hover over it you will also see that those areas at the top and the them appear in purple that is your padding areas that you can also increase whenever you see purple you are working with a section you are working with a container and things have to go into that and one of those things that we do is we bring in a background image so before we do that let's have a look what happens with section selected and you know it is selected two ways one you will see the box and you will see it display like this and as you hover over it you will see the colors and the second is a little breadcrumbs feature up here and I see a lot of people miss this I want you to get used to it because I use it all the time if you go up here you will see it says section number three okay yours may say section number one and then under it it says section this is a breadcrumbs feature and as we add content inside here you will see this breadcrumb extent the one that's at the end that is the one selected anything selected will have two options primary and advanced it's strange naming because you're going to use the advanced as much as you're going to use the primary I think they came up with this terminology way back when and they thought okay this will be advanced I will just have called it more settings but let's let's make our cells feel important and say it's advanced because we'll go in there a lot and why I say that is I want to bring in a background image to my section and to do that you have to go into advanced so remember we have primary the idea is that these are the ones that you will use most of the time when you are working with this feature and then we have advanced four additional features I will go to advanced click on advanced here you will see all the different groupings for what you can do under advanced background that's why we want to go and again I'll say this maybe a few more times and then you just have to get used to it oxygen tends to scare you when you open these settings like look at all those things a lot of it you're never going to pay attention to but the more you get used to the interface the more you will get relaxed in how things work we want background image so take it slow and you will see background image up here click on browse it takes us into a media library you go to media library nothing there so let's bring in our images and all my images as well as a PDF that I will be using for this tutorial included in this folder I'm going to drag them all in at one time so I don't have to drag them in individually in the future I'll select them all I'll simply click and drag and they will all dote and then I just need to select the one that I will be using as an image for this background before we do that these images I got at free pick calm so if I go to free pick calm and this is not an affiliated site I just used them because I think in terms of volume and costing they are the best option that I have found online so if I go here and I search for photography and I'll just put it here on photos and I'll say search it's going to give you all of these options and the great thing is you can see that this image that I have used is actually a free image you just need to give attribution if you use it for non-commercial purposes and then these with the little crown they are premium and again the premium is not a bad option you can go through this and they have tons and tons of stuff at free pick com all of these images that I have used come from free big calm let's close on this one let's go back into oxygen and select our image that we will be using in our hero section at the top and click on select image or the best fit I will go here to background size and click on cover just to make sure that it covers the section to the best possible fit so we put it there on cover currently it doesn't look good yet because we don't have any content in it yet let's bring in our heading for this year a section and with this selected and you know it's selected because I told you there's a purple box as well as the breadcrumb shows you here at the top it says section to bring in any new widget and element click your on add and we're going to bring in a heading there are three heading elements you can choose from heading text and rich text whenever you need a paragraph the best option is text if you have one lines or just headings you for the hitting of course so we click on that let's click on it and you will see what it will do it'll bring in the heading and now the heading is selected as purple so purple is the one that is selected and you will see that the section has a pink bounding box now and it says section and if you look up here at our breadcrumbs you will see it says section and hitting if I want to go back and edit the section I click on section and if I go and want to edit the heading you simply hover over it and you see that yellow bounding box click on it and it will activate it for you the moment you do that the settings here also update to that specific element so again primary and advanced but this time it is for the heading let's change the text first and to change the ticks you will see it says here double click this headline to edit the tick so we double click and then select everything and I will type in photography think no let's call it her name let's make it Valerie Styles photography and now we've got our text everything is fine there we need to style it we can change the color over here and we're going to put this one on the white before I select white we are going to set global colors in this page and a global color is a preset color that you can use all the time it's a little selection that you can make every time without having to go and select that color again and again and again and we'll be using I'll say maybe four or five colors you set the global colors go up here to manage click on that and select settings we will go to global styles and up here you will see colors this is the category called global colors and we will add the colors here let's click on this and let's add white first so click on that and I'll call this color white then over here I'll click on the color selector and I'll put it there on white make sure it is white and click on add color the next one I will do is add a black I like a black in case I need it and I will call it black color selector select black add color now I will bring in my theme colors and I've already set them up over here so these are the codes that I have ready for the colors theme that I will be using for this one let's start with this one I'll copy it ctrl C command C I have color and I'm not sure what color this is I'll click in the box type a hash and then ctrl command V and you will see it change what is this like off navy blue I'm just going to call this dirty teal and add color we do the same for the other two select control C command C add color go to the color picker selected type hash control command V and this is a round ten or something Brown yeah let's call it a brown 10 100 percent I don't know what to call these things and then the last color go to this one control C command C and we add the color select it by just clicking in there then put in the hash control command V and then this one is I'm going to call it gold and then add color now we have these five colors so if I click back here global colors select and I have five colors now I've set up the colors I can close out this sidebar and we go back here my heading is still selected so I can just go to text color when I click here now you will see global colors appear over here dads groovy and also like the white and it switches it to white the next thing is I want to change the font and just like we did with global colors I'm going to change the global font that makes it very easy whenever I bring in a new element anything with text and it will draw the font from the global settings again go to global settings manage settings and let's click back here at clickbank and then we go to body tix headings and fonts click on fonts and you will see display font and text font the display font is headings instead of saying heading font they just said display font this is a heading ticks so what you have to understand what you expect here is that when I change this display font here this one should update as well so let's do that and the one I'm going to be using is us Walt I click on the drop down and in search I'm going to type in Oswald then I select Oswald and before I select it observe what happens over here and you will see it immediately updates then the text font we don't have a text element yet there we only have the heading element but we're going to set the text font already click here and then we type in Oswald again select Oswald late save at this moment appear on the blue button close this out and now we've also set up our global font if you go over here you will see font size font weight if you go to advanced you will see typography over here and that is all about your fonts and you will see font family is said to display Oswald every time you're going to bring it in it's going to use Oswald while I am here I want to make this all uppercase letters so I'll go down here to ticks transform and I have the option between non capitalized uppercase and lowercase and I'll click on uppercase and it gives me all of these in uppercase I want to make it a thinner weight not so thick so I go to font weight here and I select it and I'll choose 300 that looks much better then I'm going to increase the size so font size here but you will see the font size is also under primary so you have two places remember the primary is just features that they consider you will use a lot that font 300 we have changed now also displays here on the front and that's why it draws it from the Advanced Settings you can set the font size here or you can sit it in the back I'm going to set it over here and I'll start with a number unlike 64 I'll type it in I think that's a little too large let's go down to 48 and I think 48 is perfect now I want to give a little bit space and extended and I want to add later spacing it's still connected to the font so that means we go to advanced typography and then we look for later spacing over here and I'll type in one first one pixel make it larger or type in five I think I'm going to go for five next to later spacing is the option of line height this confuses a lot of people who are new to graphic design or working with things like InDesign even Photoshop and then of course in website design line height is the space that is added at the top and the bottom of a line with text if you look at this purple container you will see where the text is there's a little bit of space there and a little bit of space here by default the line height is usually set to one point something one is a factor of 1 so 1 point 6 1 point 2 will give you that little bit spacing when I work with headings I don't want any space so I'm going to type in there 1 and once I do that look at what happens to this container as it shrinks 4 by removing that space let's go back here type in 1 and now you will see the container is flushed straight and nicely tightly around the tick's I do that with headings when it comes to paragraphs I don't but in hitting some like to do that I like more control over my text now we are done with this but what we face here are a few things two things in fact first I want this text to be Center to this section I want it to be here in this Center and secondly can we see that text the answer to that you and I both know is no we cannot really see it so we have to do something about it how do we get this takes to be in the center it's not about getting the text in the center this is where you have to understand a small thing about oxygen you will see that this bounding box here is all around the text so it's not about getting the text in the center it's not going to make a difference within this container but it's about getting this container in the center of the section container all right so look here we click on the text and then we click just here to select our section and you will see it's purple so we know this section is selected then you go here to primary and you will see the horizontal item alignment and we click on center now everything inside this container will be Center aligned horizontally that's how you're going to get things Center now the next part is that we need to bring in a little bit of overlay so that there is more contrast between the back and the front and that you do with a color overlay with this section selected go to advanced and we do that on the background and you will see here it says image overlay color if I click on that and I select maybe this one here it will bring this color as overlay but because it's a hundred percent opacity we don't see the background what you need to do is grab this opacity slider here and decrease it like so and now you can see it looks better but I'm not going to do this because oxygen has a feature that I'm totally in love with and that is the gradient what we'll do is let's remove this I'll go here how can I remove this I'll just select everything in there lete okay image overlay is gone and to apply the gradient overlay you just scroll all the way to the bottom here and you will see gradient appears here click on that and now we're going to add the gradient and what makes Oxygen's gradient so awesome is that it allows for as many colors in the gradient you want other builders only allow for two oxygen allows you all the options you want the first thing you have to do is add a color click on add color go here and we select these colors that we've been working with I'll start with this one and I'll first bring in the color so bring in the second color for the gradient this one and then the third one this one ah do you see where we are now let's keep it at linear and I'm going to add an angle and this you also have to play around with I'll put it on a hundred and thirty five degrees the reason I put it on a hundred and thirty five degrees because it's a popular angle when we create drop shadows in Photoshop and that's why I usually just start with a hundred and thirty five degrees and then I know my angle is going to run diagonally from top to bottom so now we have this color here this one running like this and then this he'll dirty teal here in the bottom right but we still don't see the background color again here is a feature that is very nice and that is that you click now on each of these colors and you can reduce their opacity individually so if you want more opacity for this one you can bring it here or if you want less you just take it further down I'm going to take it here to around 18 then we do the same for this one okay I'll also 18 I think and then for this one I'll bring it just down to alrighty so you can see things are starting to shine through there in the back but there's one more feature here that looks a little bit complicated but it shouldn't scare you and that's this part over here and I'm going to put it in percentage and then I'll tell you what this is of it in percentage now so this gradient runs from left to right that's how you have to envision it the first part of this gradient is this one how much of this gradient do you want to apply to this entire section let's say I want a big part then I want to say 50% now from here to here which is 50% will be dominated by this one now the next one you have to determine from 52 where do you want this one to apply so let's say I want it to come here which is up to 90% and the last one is going to be a hundred percent not ten men II people think you have to make them come together at a hundred percent what you need to do is it's like a slider this one goes up to 50 this one is from 50 to 90 and this one is from 90 to 100 and then you have this effect let's switch them around again so if I change this one now to ten look what happens you're going to have ten here and then this color is going to blend with this one from ten all the way to 90 and that's how you set it up so let's say we say this one at 25 and then this one we put at 75 and then we leave this one at 100 and now we have applied that gradient overlay we can come back and make any changes to this if we want to do next let's bring in a subheading in oxygen to bring in an new element you simply click on the last element so I'll click here on this heading and then I go to add and the new hitting that I want to bring in is a subheading again we're going to use the heading element for that click on it and by clicking on it oxygen will add this under the one that you have selected so this one is selected click on heading and it adds this one I'm going to change the tag for this one to something like h3 it will make it smaller and again you have control over these if you go to manage settings and they need to go back to headings you will see they appear over here and you can set the colors and all the default font weights everything up here we can do that in another tutorial this one we will try and do a little bit more manual so you get to see how the settings in oxygen works the first thing I will do is change the color so we can see it now and then I'm going to select it and I will type in their award award winning winning photographer let's make a few changes to it go back here to primary and font weight I'm also going to put that on 300 and I will reduce the font size let's see 24 I'm going to take it to 20 yeah I think 20 is good and that's all I'm going to do here I think these two elements are too close to each other so let's add some space between these two how I will do that is you can select either of these two I will select this one that we just brought in award-winning photography click on it to select it and then hover at the top until you see it changes to that moving cursor and you will see there's also a small little purple area that appears if you click and hold and drag now drag like this you're going to see it and adds more of that purple you see then that is margin that is space between this one and the other element which is the top hitting I'm just going to drag it a little bit here to give it that space see that's how we did that looks really cool next I want to bring in a button I want to bring in the button below this one so to do that I select this one go to add and you will find the button under basics here click and it will drop it in for you the first thing I'll do here is to add space between this heading and the button same way we did it previously hover at the top until you see that moving slider click and hold and drag it until you feel it's at a good distance and then you just let go if you need more control over this margin sitting between these two let's click on the button again then you go to advanced and you look under size and spacing select that and then you can add the margin here you see it's currently at 54 that's where we had dragged it to if I go back here and I click and drag again and I drop it you will see changes now it's at 177 and I can reduce it again to here 77 and if you wanted let's say exactly at 50 you just selected over here and type in 50 and now we have it at 50 blick back here on all styles and under advance you will see all these functions we have but why is there this little icon next to size and spacing this is a indicator that you've made changes to this particular area so if you need to go and find out what did I do here this will indicate to you that hey over here over here you've made changes so you know that when you click here you're going to find some setting that you have changed it's a little cute to tell you you've made changes let's go and change our button to edit the text again double click to select it and I will type here download my portfolio and the first thing I want to do here is change the text make sure it is selected and we know it is selected if you look up here it says section and button and even here on the primary you will see these are mostly button features the first thing we will change is the typography the text you can start here I'm going to jump directly into advanced select typography and the first thing I'll do is put it on uppercase to have it all in uppercase then I will change the font weight currently it's at 400 I'll drop it down to 300 I'll go to later spacing I'll add two pixels of letter spacing nope that's too much let's add one good and I think at this moment as I look at my typography I'm happy with that now we need to make changes to the background this blue is not part of our theme click on primary and you will see button color over here click on the blue and we select the color we want to use which is this gold tan color I will reduce the opacity I'll grab the slider reduce it a little bit and you will see the back starts to shine through and I like that let's go and see how this looks on the front end so I'll click here on save and then remember we had the front and open earlier on this very ghastly looking page just click on refresh now and you will see things look much better than it did previously as a hover over it nothing happens I think we need to add a little bit of a hover effect over there let's click back and then select our button and here you see button hover color so I'll click on this one I'll select this color again but this time I'm going to make sure that it is at a hundred percent and now as I hover over it you will see it goes into that full opacity let's save it again go to the front refresh and then as a hover over it ah you see so now at least people know it's an interactive button let's click back what I want here is that when people click on it it's going to download her portfolio which is a PDF remember I had uploaded that PDF at the very beginning so that's what I want to do here what I will do is I'll go to this one in the front and I'll just go back find my media library over here and then here is the PDF click on it and over here with this link I will select it copy it ctrl C command C let's close this let's go back to the builder and then here in URL I'll select all of it and ctrl V I'll click on set and I will select open link in a new tab just to make sure it doesn't get rid of this page let's save our page clicking on back to WP and then ctrl click on front-end come on click opens a new tab this is the front end and when I now click on download my portfolio it's going to download this portfolio which I just threw in the image in a PDF nothing special nothing la-dee-da it's closed out these guys and go back now we've set up this hero section of ours but we need to bring in a few more things to make it look like a hero section one of that is we have to add more space at the top and the bottom to do that click on this section and you will see it is selected and then go to the top where you see the purple bar click and drag bring in more space and I'm going to do the same at the bottom again if you want more control over this then you will go to the section click advanced go to size and spacing and you add that padding here by yourself at the top and the bottom for example I've dragged it to 214 and 198 and you may feel that you want to have 200 so you just select 200 and 200 then you can have peace in your world again that everything is balanced if you don't care about those few pixels you just drag it the way that I did as I look at this image that there are a few things that bother me I think this color is too dominant and I want this links to feature more inside of this image so what I'm going to do is let's go and change the gradient again I've got my section selected I'll click your back I'll go to background scroll to the bottom click on gradient and what I want here is for this darker color to be more dominant in this image so currently I just give it 25% in total so I'll do this I'll go to this one I'll put this one on 10 and then I'll put this one let's put it on 65 oh let me try 1535 and a hundred and then 90 so it just pushes this one a little bit more here okay so I think I have less of this one at the moment which is better how can I move the focus point of the image that more of the lens is in focus that again is still background so click back here on all styles and we will go to our background and we are going to this area called left and top and I'll put it on percentage for both so hang tight with me here as I explain to you what we have we have an image and this image is displaying all the way from left to right at a hundred percent and then from the top to the bottom now what we have here is that it fits in nicely all the way from left to right but we want to position it from top to bottom if I go to top and I'll start with top and I type in there is zero zero percent nothing is going to happen if I type in there hundred percent this is what will happen now a hundred percent from the top the focus point is the bottom that's how you have to think a hundred percent from the top so I've added a hundred percent to the image and that shifted the focus to the bottom this means that whenever anyone loads this page on mobile a tablet or a desktop this bottom part will always be in focus so if you want your image to be Center Center that you are used to many other builders you will have to go for the center from the top and the center from the top is always 50% so I'll type in layer 50% and now we have the links nice in the middle if you think now I need a little bit more of those lanes you can even say 65% and I like it there at 65% because we don't need to play around with the left at this moment I'm going to leave it empty don't make changes if you don't need it we've set up our hero section it looks good let's save it before we go to the next section we're going to work on tablet and mobile responsiveness and this is my second feature then I love about oxygen is the control when it comes to responsive design I'll click on the section to select the section and then up here you'll see under section you have this little computer screen from the drop down you will see there's one two three four five options this one is all devices if you click on page container 1120 pixels what is the page container go back here to the section area you see this purple box even though it runs all the way from left to right the box is only in this area why is the box not all the way from the left to the right that is what we call the page container the reason for that is that if you have a bigger resolution screen - a smaller one this part will always appear but this part here on the left and the right may stretch depending on your monitor most laptops run at 1120 or 1140 you know so you have your smaller laptops and this is like a safe area so as long as everything looks good with in this purple container it will look good on a laptop you should not worry too much about this outside area that's for people with 4k monitors in my huge HD screen that I have over here but you have to make sure that the content you work with will look good within this container and that's why when you select this one the following is going to happen so go to section click page container 1120 pixels and below and the following happens it shrinks this area for you and it cuts out that left and right and now you only have the container so you can see the container is running all the way around the border this gives you the display of how it will look on a laptop or a screen of that size now why do you want that first of all you can changes here that will not reflect over here so if we click all devices it's going to give you the big one again and if you click on page container it will give you this so if it looks not good here you can make changes and it will not affect the one at the top but as we look here we think hey this looks good if I saw this on a laptop I'll be very happy with it then you go one level lower and the next level is tablet level and they've put it at nine hundred and ninety nine hundred and ninety two pixels so when I select this it's going to shrink a little bit more now you are in a tablet view again the question is does this look okay for tablet I think it looks fine so you don't have to make any changes you have one more level we go to less than 768 which is still actually tablet now you see things have changed though this pardon this part still looks good this one has cut into two lines and you don't see the lengths in the back in fact let me just go up one more the lanes we still see here on this one we don't see the links now we can make changes again here under primary and advanced the great thing is it will only apply to this view let's first change the ticks so with the tick selected click on it go to font size and I'll type in 36 and then I'll just grab the slider drag it drag it drag it to here okay and I think maybe the later spacing too much I go to advanced typography later spacing and I'll give it one that looks better and now I can increase the font size let's put it on 36 now it looks much better how about this image that's part of your section so select your section by clicking on it Advanced background and then we go here to top and left now in this case we don't have a problem with the top now we have a problem with left to right because this one is on the right you want it to move to the left so I'll put it on percentage again because that's when I prefer I'll start with 50% and then I'll play around let's put in 75% I like that let's put it on 60% I like it not straight in the middle a little bit uneven gives it that feeling great did it make any changes to my desktop view let's go there old devices no it still looks the same it didn't change it absolutely amazing and then the last one 480 which is still actually big because if you go to iPhone exits 375 and I think if it's a samsung galaxy it's 350 or 360 not sure at this moment but again you're going to make some changes here I like the background image and this background image takes it setting from the one above from this one so it applies to the one below but I think this is a probably too big but here is my question imagine you are on a mobile device don't you think you should have a little bit bigger heading but these guys are too close to each other in this case I have to add line height so I'll go dad Vance typography and then line height I will type in 1.2 let's see ah that looks better and there we have it that is how you work with responsiveness and I always make this recommendation do this before you move to the next section and the reason why you have to do that is at some point you're going to use an element or a feature from this design and you're going to copy and duplicate it and use it somewhere else on your site if you do the mobile responsiveness now you don't have to do it again in the future for that element so get use to this responsive work don't leave it until the end and say oh man I forgot about mobile or who cares about mobile 60% plus people who access websites online care about mobile and you're probably one of them so make sure that mobile first is in your mind don't over design your desktop because you're going to run into problems on mobile devices a lot of the stuff that I currently see being released as add-ons for many builders and themes are great for desktops they do not work well on mobile so try and don't get fooled into that trap of bringing all that bling to your site and it just doesn't work well on mobile enough of that we've done our hero section we'll come back to it because we're going to add a menu in the future here at the top but for now we're done with it let's save i've told you there are two things that i love love love about oxygen versus the global styles second is the responsiveness design but there's one thing that blows my mind and it's still not there oxygen does not have an undo button and i need to stress that you cannot go total cowboy on things that you've already designed if i were to click here on this section and then click up here on delete there's no controls it or command Z to undo it at this moment I'm not sure I guess it must be some very special feature that we're going to get in the future but this is one of those things that blow my mind why it's not there yet it's the number one requested feature for oxygen it's still not there in fact there aren't shortcut keys in oxygen not sure what is the reason for that I'm no developer I don't know what could be the reason next section we are going to work with custom icons let's build out our services section and to bring in a new section make sure that this section is selected go to add and then under basics click section and you're going to see your second section appears down here with the section selected I will bring in a heading first I'll go to add heading then I will select it I will type in here what do I do and then to make changes to it I'll go to advanced typography the first thing I will do is put it on uppercase like this I'll change the font way to 300 now let's put it on 400 and then I will crease the size let's go for 36 and then 48 and where do I come up with these numbers over time I've developed a 12/12/12 system so I sometimes go from 24 36 48 60 somewhere it's just a number that you get from graphic design but I think 48 is too big so I'll go to 36 and currently it's set to a darker color I will switch it to this color over here so we've selected this one now and then I want to Center align it to do that you don't seem to align the ticks you click here on your section and then over here on their horizontal item alignment we put it again in the middle that will make sure that everything appears here in the middle select your heading and we bring in again this time a subheading again it's a heading go to add heading award winning services good advanced typography I'll also put this on uppercase the font weight for this one I'll drop down to 300 but I'm going to put this at 20 pixels make it no 20s even too big so I'll put it down on 16 16 looks small but I'm going to leave it at 16 let's see font weight at 400 a little bit better but I'll drop it back to 300 I don't need this so prominently I just wanted there for a styling and design element if somebody wants to go and read it they can do it these two headings are too close to each other so I select this hitting go to the top and then click and drag to add a little bit more of space there we go now I'm going to bring in my services three services this is usually done within website design by bringing in three columns and each column has an icon with a title and a little description of the service to bring in columns make sure you select the last one here and then you go to add and you will see columns is a container columns is actually a preset of what oxygen refers to as divs and will work with divs and it's something that will scare you but don't let the DIF scare you the div is a container that's what it is columns gives you those settings so I'll click here on columns and then you have to select before you can continue which ones you want to use do you want three columns equal width or two columns or and you can make changes to this after you have selected it I'm happy with these so I'm going to select this after selecting it you will see one two three that appears over here now the first thing I'm going to do is that I'm going to add space between the subheading and my columns I can either select the columns or the subheading and in this case I'm going to select the subheading I'll move down to the bottom where I see the purple click and hold and drag and add space up to here let's see what we've got here and click inside the first column to understand what you have selected and what you have go and look at the breadcrumbs so we have a section which is this entire area then we have the column which is this pink area and then we have a div which makes the column so this column pink area that you see is actually just a wrapper it's just a container for three divs one two div three div and the wrapper is a column if you are going to place things inside this column which is a div and you want them to be like grouped you have to actually put another div inside it so another container inside it maybe you don't maybe you do but follow along what I'm doing even though it says DIF remember it's a column and where it's this column you can think of it as a row this is a row with three columns inside it as you work more with oxygen you'll get used to the terminology and what it does at this moment I try to explain it to you maybe if you come from another page builder to give you a better understanding of what you can do here but I'm going to add another div in here the reason I'm doing that is because I'm going to style everything in here then I'm going to duplicate that and then I'm going to drag it over to the second column I cannot use this div because if I drag this div over to the second column I lose that column okay so maybe you get to understand what I'm busy with here so with this diff selected I'll add another div inside it click on ADD and click on diff and this diff is going to look like this I'll build out my services info box with three elements I'll bring in firstly an icon a heading and then I will bring in some text to describe my service with this div selected go to add look for icon over here under basics click on it and it will appear with the icon selected go back and click on add click on heading and with the heading selected go back and click on add and text over here and this is how it currently looks I want all three of these elements center-aligned to do that I have to select the div in which they are you can select here at the bottom by clicking on the pink div now you see the purple has selected this div and it's inside this div so remember two divs the one that is selected is purple and the one that is the wrapper the container is pink I want to work with this one go to the settings on the left and then click here on Center and now you see all three of them nicely Center aligned on top of each other let's make changes to them and we start with the icon clicking on the icon will open the icon settings on the left and you have two icon sets you can choose from font awesome and linear icons to search for them you will have to remove this search field here so a thumbs up just click backspace to delete it and now you will see all the icons from font awesome select linear icons and you will see all the outline glyphs let's go back to font awesome and let's say in this case I do wedding photography so I look for something with a wedding I can type in their wedding and I find nothing and now you have to go on a hunting chase for example you can use this champagne glass here champagne for everyone to sort of insinuate that it's a wedding now I am all about doing things my way and my way brings in my own icons that I want to use and I use a few ways of doing that and I'm going to show you how to do that because oxygen has a magnificent way of bringing in the custom icons you want to work with what I've got here then is these three areas so what I'll do is stall them all out let's do all of this leave the icon set up the three boxes and then we come back and do the icon at the end I'll leave it then on this glass and then I'll make changes to it over here I'll change the color first I'll choose this color and then we go and change the icon size I'm going to put it on 24 little small let's try 36 that's better I I want it small I don't want it too invasive yep and that's it then we go to the heading I'll select all by clicking in it and I'll type in weddings then I'll go to advanced typography I'll put it again on upper case go to font weight let's see 400 I think I want this one a little bit more 500 and I'll reduce it to let's see 36 nope 36 24 and then over here I'll add some random text and the random takes I'm going to find with lorem ipsum open a new tab I look for lorem ipsum dot IO give me the text generator of five paragraphs our generate some extra ticks and I'll just grab over here it's going to describe my services copy that go back and then paste it control V command V that looks good let's add some space between these elements I'll click on any of them like this one I'll just drag in or space there right and then what about this one I think this one is too wide but I can add a little bit space there under weddings but I think this runs too far from the left to the right I wanted a little bit more squash so what I'll do is I will select this text element you see the selected purple text go to advanced and under advanced click on size and spacing size and spacing talks all about that box not about the text it talks about that purple box that is selected and I'm going to go here and I'm going to select with the width of this box I'm going to put it in percentage and if I type in there 10 percent just 10 it's going to shrink it down to 10 percent of the container with I'll take it up to 85 percent that looks better let's put it on 80 percent okay and now you see what it does it shrinks the box we have the space here on the left and the right it looks a little bit more balanced to me that's my services and I think it looks good before we go and copy this for these two you need to go and look at responsive settings that's very important and many people make a mistake here so I'll go first year two-page container look at it I think it looks fine it still looks good to me then I'll go to less than 992 and over here what it does it starts stacking the columns no I think for this one which is tablet I don't want it stacked yet click on this one and then you go to div and select columns you can also just select columns up here then it says stacked columns vertically less than 990 to know I wanted at least from here so I'll say less than 768 which means that because we are currently in less than nine hundred and ninety two pixels it's now again adjacent to each other it still looks okay I like it like that let's go and select this one now I can stack it that's okay and we go down to this one also looks fine right now we've done that come back here what I'll do now is I'll select this diff so you see the orange bounding box for the diff select that click on it and you see it's purple I'm going to duplicate it now to duplicate it go up here where it says div section columns div div and over here you will see that duplicate duplicate component click on that one and it gives me two I move this from here to here and to do that go here to the move click and hold and drag and do it slowly don't don't go too rash until you get here and you see it looks like this and drop it that advice I just gave you all don't be too rash when you do this I'm a very impatient and you know I I respond very quickly sometimes I just drag around that that's why the controls it commands it undo feature is so important to me but I don't have it so I cannot do it so this is what I have to do in this instance so take it slow otherwise you're going to screw it up and we do the same because we want one for this column as well duplicate it again drag it until you see it looks nicely and drop it now all you need to do is make changes to the tick so this one I'm going to call portraits and I'll leave the lorem ipsum and this one I'll call newborns in fact let's not leave the lorem opps all the lorem ipsum let's change that too so we have different ticks and different spacing and one more make this one even longer be into four flame what we have then is three columns with our services inside this one is for weddings this one is for portraits and this one is for newborns let's save and go and view it on the front-end to see how it will look update who our site is starting to look good as I look here I want to add space at the top and I can already add space at the bottom and then we're going to go and change those icons so let's go to the top make sure your section is selected and drag a little bit more space at the top and drag a little bit more space at the bottom more space at the top take a sip of coffee let's tackle the icons go to the non-project comm and the link is in the description below I use this for my standard icons lovely and they've got what over two million curated icons what I do now is I search for first weddings and I'm going to look for weddings and it's going to give me a selection of weddings and then I can make my selection from here mm-hmm I'll choose this one and now what I'll do in advance I can change the color over here and I'm going to use that that bronze color that we had let me just go and grab that color where is it let me grab I think it's this one go back and then you click here on the color and there is your hex area control V Cup that's the right one I'll download it as SVG very important I'm going to download it as SVG then I search the next one which will be portraits and interrupts inter and we look for something that looks like a portrait photo let's choose this one and it will remember that color than I brought in download as SVG same and the last one is going to be newborn so I'm going to look for a baby kick the baby I'm the baby right and let's choose here this one and SVG now that I've downloaded these three icons I have to bring them into a format that oxygen will recognize and that format you're going to do with an app online you go to this one called icon moon dot IO and it brings you here all of this is for free but you need to do this if you want to bring in your custom icons into oxygen on this page go to ICO moon app click on that and then over here you will see icons appear and these are ones that I've already used so you can see my test demo already includes a wedding a portrait and a baby I'll deselect them because we're not going to use them we're going to use the new ones that I've just brought in to bring them and click on import icons this opens your Explorer or your finder and then you select the SVG's over here that you've just downloaded and then click on open and these three come in color a slightly different from the one that I use before now to export them you select them these three go to the bottom where it says generate SVG and more click on this it's going to give you this area and I'll change this text first by double clicking I'll call it new bones and this one I'll call portraits and this one no surprises weddings very important before you click here on download go to preferences and make sure that this add title to definitions in symbol devs dot SVG is selected because this is the format that we will be using an oxygen if you don't do this it's not going to generate this file correctly and oxygen won't recognize it so make sure that this one is selected then you also can give it a project name just go back to preferences and I'll call it photography where where are my preferences and we say photography then click on download and you see it downloads here photography don't zip open this file you will see a lot of files appear in here we only focus on one and that file is this one called symbol - diffs this is the one that you're going to use for oxygen currently it's in a zip file so you have to take it out of this zip file so what I'll do is I'll click and hold and drag it up here to my downloads and just drop it in there click on downloads and I will see my symbol diffs dot over here let's close this and now we are done with setting up the icons it looks like a huge process but once you understand that you have to control over your own icons you just love doing it and the more you do it the more you'll get used to it let's close this browser we are back in oxygen save our work and we go to WordPress to do that go here back to WP click on admin click you're on the W go to oxygen and select settings appear in the tabs look for our SVG sets select that and then add new set name off the set and choose we're going to give this icon set and name so that we can identify it when we look for it and I'm going to call it my photography set just photography and then choose file select symbol diffs open submit and it says uploaded say it's font awesome linear icons and photography and you see you also have the option to come back and delete it let's see if all this was worth it we go to pages again go to home photographer and simply click here on edit with oxygen we don't need to go through the whole WordPress setup just click on edit with oxygen scroll down select our icon go here to the icon set select and you see photography appears here select that and then under icon in the search area delete the word glass and there are the three icons so I'll click on this one it changes click on the next one let's do the same and the third one put it on photography lead that and I'm the baby there we go let's check the responsiveness one more time go to section under section page container that looks good less even less and this is where it stacks so here we have to just have a look I think it looks okay maybe we could add more space here but I'm thinking now yeah I like it and the last one which will be your typical cell phone in future tutorials I will show you how to work with classes and that will allow you to make a setting to just one of these and it will update all of them that's a nice little feature in oxygen with that on your calendar for the future all devices save we are back to our builder let's hop on to the next section we'll build a portfolio next so we have to bring in a new section to do that select this section go up to edit section and we have a new section I'll change the background first I'm just going to change the color and you will see background color is under primary so I don't need to go into advanced click on background color and I select this dirty teal and now we've got dirty teal what I'll do is I'm going to use this same heading that we've got up here applied here just make it white instead of reinventing the wheel we just duplicate this click on this one duplicate then click and hold and drag it in here select it and just change the color to white we have to Center it and to do that click on the section and select your own Center same for this one select it duplicated click and drag it under what do I do select it and put it on white and now we just change the tick so for this one I'm going to select it and call the portfolio and this one selected works we bring in a portfolio element next and for that go to add helpers and then select gallery nothing will appear here because you have to bring in the images and to do that you go up here to browse click on that and then we select the images that we want to bring in here and I've selected these 6 1 2 3 4 5 6 create a new gallery yes this is my gallery I can rearrange them here and then I'm just going to click on insert gallery the gallery is basic but super useful and super powerful let's see what you can do with it the first thing I will say is to go here to layout click on layout and you can change the image aspect ratio currently it's set to 16 to 9 which is a very standard HD but if you want to give it a more of an old-school photography feel you can go for 4 to 3 and it will change the aspect ratio that's what I'm going to do here I'll keep it on four to three you can change the images per row I can put it on three and you will see that if you have uneven per row it's going to stretch those images so if I say images per row 5 it's going to make the last image bigger make sure them that this one is at a good resolution otherwise it's going to look blurry like this it's not working for me I'm going to go back to 4 you can change the gutter and that's the space here around the images it's a 10 pixels I like it at 10 pixels and I think we are good to go with what we've got here click back on gallery what else do we have here at lightbox lightbox yes and what lightbox will do is when I click on an image now on the front end it is going to open a lightbox for me to view it better in captions show captions if your image comes in with captions like this one and these captions I get from free Pig of course I don't want them to appear but you may want them to appear if you've changed them you can say yes I'm going to select no I don't want those captions to appear click back on gallery and hover anything that you want to change as people hover over it you can say image opacity image hover image opacity so let's do that as a hover over it you can see the image capacity changes that's a good indication let's do that as well let's go back to the front and then over here you see the image ID 17 16 15 14 13 and 12 if you want to rearrange the order you can just type it in here in a different order let's do that so you can see how it works I'm going to start with 12 and then 13 oh ma 15 come on 16 no let's go back to 14 let's just changed that around come on 16 and then , 17 now we have them in this order and you can see the images that we have here waiting that's the one service new bones and portraits this is the idea with this portfolio let's see how the portfolio looks at the front click on save and then we go here click on front-end open it right it looks ok and here's our portfolio lightbox click on this image and it opens the lightbox captions still appears here and then you can cycle through these images lightbox done well I like it when things work well not too flashy because you know time time is time time is money well time is precious rather its add more space here at the top and the bottom let's go back I'll click on the section and I drag in more space and if you know you have a specific sitting you can just go and add it every time let's go to size and spacing and I'll add a hundred and fifty at the top and I'll add a hundred whew that's way too big let's say a hundred hundred yup 100 is good and well 75 at the bottom is not bad ok and let's add a hundred at the bottom as well ok it's a little bit bigger than the viewport height but I think we're going to leave it at that let's save it why do we need to do we need to go and check for it on the responsive view looks good I'm happy with it and here is just one very important thing that I found with this one you cannot go and make changes to how many images will display on various different devices once you make those changes for example if I click here and if I go to layout and I make changes here those changes will translate to everything so just be aware of it if it doesn't look good on your mobile devices you're kind of in for a gem like this one here yeah it's a little bit a little bit weird so you have to decide it is something I hope the guys at oxygen I'm not sure if it's a bug or it's a future not included but being able to make changes here and that will translate on responsive devices would be good if you don't believe me let's go here and we change images / o2 - and you will see it looks better on a mobile device if I go to all devices it's - so this is the part that I mentioned this is not responsive and it's something that you will have to decide how it looks from desktop to mobile device that's our portfolio and that's really simple right we did it so quickly what's going to take you much longer when you are working on this is actually to get your images right and primed for this section let's then go to the next section we select this section and we'll bring in a call-to-action call to action is an area where you ask people to do something to click usually a call to action is a click I'll click your on ad and I'll bring in a new section under basics section and I'll change the color first I'll go here to background color and I'll change it to this gold tan this I'm going to leave as bar like this all I want to do here is to bring in ticks on the left and a button on the right tell him hey do you want to work with me get in touch to do that and now we're going to come into another interesting area of oxygen we want a hitting first so let's go add hating let's change this and type in here do you want to work with me and I don't care about the Capitals because I'm going to make changes to that go to advanced typography uppercase and we reduce this to 24 and I will put the font weight on 400 let's make it a little bit more on 500 and I'll add a little bit of later spacing one pixel let's make sure the color choose this one yep that is donker so make sure you make the color right then I want to bring in a button I want the button here on the right click on add and select button let's change the button I'll select the text and I'll type in get in touch oops get in touch to the button the first thing I'll do is change the background color to this one and the hover color I will make the same one but I'll just reduce the opacity a little bit like this I think the tech size is fine and the text color is fine but I want to add a little bit more space on the top and the left and the right and the bottom so I'll go to advanced size and spacing and padding let's say 15 at the top 15 at the bottom and 25 and 25 five right so there we go let's add a little bit more I'll go back to advanced typography also later spacing one that looks better how do I get these two in column so I could have used columns but I didn't and the reason I didn't is because of one of the features with an oxygen go to section now previously if we selected this one here Center it will put everything in the center this is because over here when we talk about child element layout now who are these children that we are talking about the section is the mother and anything inside this section they are the children so these are the children these are child elements go back to section they are stacked child elements vertically that is what's happened here but guess what you can also stack them horizontally that means next to each other click on this one and this is what's going to happen amazing great now they next to each other you can make changes here then horizontal item alignment and go to space between and look what happens it's going to stretch this element to the right and this one to the left how simple is that most page builder is you'll have to work with columns with them in columns put them in different alignment in each column but this is a really groovy feature with an oxygen now this call to action is way too big so I'll go here actually to the top and I'll just reduce the padding at the top and the bottom a little bit just so that we have this bar that's a call to action right so you get what we did here add a little bit more space if we go to our responsiveness this looks good on our smaller devices I still like it and from here it's going to run into this issue you have a decision do you want to stack it or do you want to make it smaller if you want to make it smaller we do it like this click on this one and change the letter spacing first go to typography and later spacing we put at zero then we change the font size and we're going to change the font size I think to 20 for 20 and now we have it you can decide if you want to make the buttons smaller as well but the button looks good and then finally when we go to our smaller devices you're going to run into problem to get these two to play nicely next to each other so you stack them and the way you stack them is make sure the section is selected and you put the child element layout again to stack look at that click on this one drag a little bit space in there and you're done that's it your call to action is done and now if we go back to the desktop it still looks like you did we run down to tablet at the moment we go to mobile it stacks wow I love that control I can get really excited about that let's save our work and we're done with that call to action let's work on the about Valerie styles section make sure your section is selected go to add click on section change the background change the background color over here under primary and we select our dirty teal again here I'll be working with two columns with this section selected go to add columns and then select 50/50 in our first column we're going to bring in an image it's actually the first time we'll be bringing in an image element we worked with the gallery up here make sure the column is selected click on it until it says dif don't think when it says columns that you're within the column the column is just the rapper you still have to click the specific column and once it says diff in purple you know you have selected actually the column to make sure you can also check up here section column diff go to add and image down here click on image and then we just change the image go to image URL browse and select Valerie Styles select and Valerie will come in with the width applied and it's it like this I'm not going to make changes to this as this image is I'm very happy with it even with the margins and padding applied around it let's go to the next column click on it to make sure it's selected in purple and we are going to bring in Valerie's name so let's do that Dennis I hitting hitting click on that make sure it's in white and I'm going to change it to Valerie styles Valerie styles and then make changes advanced typography uppercase again and I willing Croesus 248 and then on the font weight let's put it on 400 and that's Valerie Styles very happy with Valerie starts under her a little bio about Valerie styles so go to add and we bring in tick so click on the ticks drops there change the color let's put it on white and then we grab some lorem ipsum 2x for Valerie over here copy select everything by clicking on it and control V that's a little too thick so what I'll do is go to font weight let's see 400 no that is 400 300 and I'll make sure that the font size is on 18 this specific font oswalt is very condensed so if you use the standard 16 which people usually recommend for body text it's still a little too small that's why I'm going for 18 even 20 if you want people actually to be able to read it I don't want the text to run all the way to this side so what I'm going to do is I'm going to make this container of this text element a little bit narrower go to advanced size and spacing and then the width put it on percentage and I'll put it on 80% and you will see now it adds this space not really it shrunk it and this is now open space I'll bring in the download my portfolio button here but why make a new download my portfolio button if we already have one up here let's just copy it and take it down there let's go select it and then click on duplicate component now you have to drag it all the way down and you see it doesn't really work so let's leave it there how can I take it down all the way to the bottom and I make it sound like I don't actually know what I'm doing but actually I know what I'm doing select the button that you want to move click here and then you go up here where it says structure and select that why do you see in this structure sidebar is the entire top-down view in a grid view basically of everything on this page if I collapse this you're gonna see sectional 2 3 4 & 5 and that means we've got 5 sections on our page if I twill this one open the first one I have aiding now the hitting a button and a button yep that's what I've got and actually as I click on this heading it's going to select this heading this is great if there is any element on your page that you cannot find clearly you cannot select it you just go here I've got these buttons and this is the button that I have duplicated what I want to do is drag that button down here under this text what I'll do first is I will open this section and then you will see this column container so I'll open the columns and there are two dips column 1 and column 2 and I'll open the second one and there's the heading Valerie Styles there's the text leave it open now we go back to this button at the top click and hold and drag drag it all the way to the bottom under text and drop it let's see and there it is that's how simple it is to move things around in oxygen so if you ever need to do move things around or find things in a little easier way or you don't know in which container they are all wrapped in you just go there to the structure the problem you may run into and the thing you may forget is to close this out and then you actually forget how things can look bigger so make sure you close this up let's add a little bit more space here and let's next what can we do as well here two more things I want all of this content to be weighted here in the middle to do that you'll select a container over here which is the div go here to vertical item alignment currently it's at the top I want it in the middle and that's how easy it is I really really love this feature of oxygen coming from graphic design programs like QuarkXPress and InDesign this kind of feature is something that you will love if you come from that background the other thing though is that usually when we have content like this next to the image we don't want it that close to the image we want a little bit more space between these two so what we can do is add padding here in this container on the left as I hover here you will see the purple bar appears click and drag it to the right and just add a little bit more padding there we go and that looks much better we used a hundred and seventy five pixels respectively here so let's do the same for this section I'll go to advance size and spacing that's put a hundred at the top we have 75 at the bottom and now let's go check it on responsiveness this one looks fine except now you know we need this looks a little bit weird so what I'll do is I'll click on the text go to advance size and spacing and for width put it on percentage and I'll put it on a hundred percent you see what we did there now it looks a little bit more balanced maybe 100 percent is too much let's put it on 90 or 95 it's trying 90 first no 95 over 95 great next one okay so they are stacked here I don't want it stack so soon I think I can still squeeze them in next to each other make sure you select the column over here so I'll go to section columns if you cannot find it select columns here or I've also shown you you can go to structure and select columns over here and then stack I'll choose from less than 480 let's choose less than 418 so it won't stack it it will look like this at this moment and now you can make changes here to look at make it look a little bit better so for example the text here is now too big I'll bring it down to 16 Valerie Styles is also a little too much so I'll bring it down to 36 and add a little bit space there and then fold this button I will click on it and reduce the space it actually took it away let me just make sure I got it there and I'll also remove this padding here click on this and then just okay now I need a little bit padding there Bobby I don't there we go much better and then the last one is going to stack oh well we still have this one nope I think from here we have to start stacking it right I think so so let's go back to our columns I'll just click here and then select columns and then I'll say stack from 7 6 8 there that's what stacking will do what you can decide here is to put all of this now in the center so I'll select this part select to stack them vertically and then I'll Center them and then if we go to 480 should be the same absolutely great that feature look how they respond from one display to the next gives you total control hmm I can talk about this all day and we don't have all day we're done let's save it we have two more sections and the next section is the contact her section not contact us it's only Valerie click here on this section and then add section and we are going to work with two columns so click here on add go to columns and select 50 by 50 here on the Left we'll bring in all the information and on the right we will bring in our happy forms now oxygen does not come with a form builder it does not have its own form element and I'm pretty sure if I have to predict that is something that these guys will be working on that will come out maybe by version 4 or a version 5 but in their mind there are so many great already WordPress plugins for phones they're not gonna invest their time in that at this moment they can do that later so when you bring in a form you have to decide which form builder you like in WordPress and there's a number that I use the one we'll be using here is happy forms let's build out some content here on the Left first click in here to select the column and it will say div in purple I will do the cheating thing again I'll go up here to Valerie styles select that duplicate it and strangely as I click it doesn't want to drag here and if that happens go to structure make sure it's open and then you click and drag it under this div and drop it and now it's in there so selected we just changed the color it's changed text to send me a message and we do the same here we grab this one let's duplicate that let's see if we can drag that this one works but it doesn't want to go down there so we do the same grab the ticks here drag it down under heading and there we go and the only thing you need to do change the color that looks pretty good select it go to add and I'll bring in a heading I'll put this on something like h4 make it smaller select it and contact details Oh to the top of k-selected again go to the top add some space here and I think I'll just change the color to this one make sure it's constant now I'm going to burn your brain a little bit there is an icon box feature within oxygen so if you go to add you go to helpers you're going to find it where is it icon icon icon box the click on it is going to allow you to bring an icon with some text unfortunately what I want to do I couldn't get the icon box to do what I wanted it to do so I'll delete it the first thing is we bring in a div under this remember div is just a container go to add and go to basics click on diff if the div selected bring in an icon and then with the icon selected bring in let's say a heading click on the icon let's reduce the size to around 16 that's too small let's make it 20 and then go to the heading select your text and say plus one two three six two three dee dee dee dee dee telephone number you get it font size 20 and then we go to font white put it on 400 and now select the div so if you had selected this area that is the heading to select the div you can just come up here and select div and now you go to this one stack horizontally and you have them next to each other you can see that thumbs up is a little bit to the top so you go here to vertical item alignment in middle and now they nicely vertical align click again on the icon let's change the icon so I'm going to delete that and type in their phone choose this one and then I'll go to advanced size and spacing and I'll add a margin on the right of 10 pixels let's make it 15 and that will add space between the icon and our text look at that did you hold on to the boat wasn't that rocky right I just scared you click again on it to select the div now duplicate the diff go to the icon and this time we search for an envelope which will be our address choose this one here then over here select the text and we can say 13 for 13 Crystal Avenue home received waste something like that there's your contact details let's put a little bit space here click on contact details at the bottom and drag and there we have it they have designed all your contact details save your work and now we have to bring in a form to do that we have to go install the happy forms plugin back to WordPress click to admin and then we click here on the W to take us into WordPress and it's going to ask you every now and again in oxygen you need to update regenerate the CSS cache or all co global colors when you see this just go and click on it and it click your on regenerate and it says all down if you have no idea what that did like me don't let it scare you just follow the instructions ok I'm clicking here on buttons let's go to plugins and add new and we're going to find happy forms from the WordPress repository they have a free version and then they have a premium version if you want to know more about happy forms we've got many tutorials here on websites for beginners how to set it up and more coming especially on the premium features to see how that works and in fact if you get it right at this very moment on appSumo they have a deal for a lifetime deal so you can go and check that out on appSumo com I'll put a link for that in the description below click you're on install now that brings in happy forms for us and what we want to achieve with this form that's your question when you work with the phone why do you want people to reach you and why do you want them to tell you so you want people who want to use your services so you want to get their email you want to get their name and you want to know which of the services they are going to use and probably even the date that they would require you click on activate and then happy forms will appear here in the sidebar and we're just going to say skip all of this go to all forms because this is where we're going to create our forms currently you'll see a sample form down here now there's one glitcher from the bat i have to tell you you're not going to see the display happening in real time because of oxygen oxygen disables these things so whereas in other page builders and with other themes you will see real feedback on happy forms you're not going to see it here but I'll show you a workaround for that click a new form add new and we given the name up there we're going to call this what's your name I keep forgetting Valerie Valerie Stiles and then I'm going to say safe I'm going to stop here and click on safe the reason I say I'm going to stop here is because usually you can see what's happening over here if I click here on a depart to bring in an email like this email it's supposed to show up here but it doesn't show up here so if I say label and I say email I'm supposed to see it here if I click update I still don't see it if I click refresh I still don't see it that's oxygen so how can I get visual feedback of what's going on here close out of here and we we're not finished with this form but I'm going to show you how you can set it up you go yet - Valerie Stiles and you will observe your short code over here this is what is going to be important to you click copy to clipboard now this short code we're going to add to our page what we do let's close everything here so that we don't get confused this is where we are copied to clipboard I'll control click on pages so it opens a new one for me I want to keep this one open and I'll go here then go to home photographer edit with oxygen scroll down the way the contact area is click in the second column where you see div and now we go look for the shortcode helper click on add and up here in type to search components I'm going to type in shortcode there we go shortcode or a shortcode wrapper I'll click on shortcode and then it's going to add it there and here full shortcode I'll paste ctrl command V that one that I've just brought in and you see the form appears here and the reason I do it like this is I'll save it now click here click on front-end and now what I will do as I work here I will update it and see how it looks on the front let's go back Valerie Stiles click on it to enter it and we have our email are we happy with the email yes we are happy with the email that's how we want it to look so we want the email there and then under this we want their names names short ticks so short X I'm going to call this your name and I will put this on 50% so go to more and with I'll put it on half and then I will duplicate this and this one I'll call your last name if I update here go to the front update you will see that's how it looks now and then under here I will say which services do you require which will be a selection and a part and single choice under label which which services do you require the first one will be wedding a choice next one will be what did we say portraits and the third one will be new poems update to the front and you will see that's how it looks and we can also put that next to each other so within this selection we go to more and we say choices display horizontal they then go to the front refresh you will see now they are next to each other so somebody comes to your site they can choose here which one they want and then finally maybe a message which is what we call long ticks so let's collapse this ad apart long text and then here your message update we are done update great so there it is the one thing though is I want to make a little change here to the styling so I'll just go back to our WordPress within this one I'll go back to pages and then select edit with oxygen scroll down scroll down and then select here o to diff select the div make sure the diff is selected purple I'll change the background so go to advanced background background color and I'll put in on this one now we run into a problem right because we cannot see any of the text we cannot see Valerie Styles nothing there for that let's save it open on the front-end I'll go control front-end command front end opens here and I'll show you what we'll do go back to our happy forms and this is all connected to style of course there are a thousand other things that you can do here like on the setup email and style check the videos here on websites for beginners on how to do them and one thing that I would add here is a date picker because you would like to know when do people require this service unfortunately Dave Baker is not in the free version so if I click here on edit a part and I look for date and time down here that is upgrade but remember if you still see this video during this time which is in May end of May probably beginning June still there is a lifetime deal happening on appSumo at this moment don't miss out on that so check the link in the description below click on style this is where we're going to make changes and the first one is the title which is currently this one Valerie Styles I don't need that so I say hide it click back and then we go to general let's see general primary we can change primary and we select white and then we go to part labels and text scroll down title we can put it on white even though we just removed the title value we can put it everything that you see in black just put it on white and let's update go to the front refresh and see there we go in the scene button in black hmm let's change the scene button and put it in that color this one that we've got here so let's copy this code and then we go back and then we click back and look for submit button and then your background color here paste their control V yay background and focus we do the same yeah an update refresh Wow we got our form we got our form that's it so that's our form looks and this is how I will work with oxygen if it doesn't display in the backend and I don't have that real-time feedback other plugins may work a little bit better but I'm not unhappy with this I get the job done and everything that we've done here is free with the happy forms plugin I'll close this I'm back in the Builder I haven't made any changes or updates here let's refresh this page to lock in those changes from the happy forms we'll do the bottom and what I'll do is also link this diff this column div and then we go again select this one ending we select here middle vertical item alignment middle to the top so we go to section advanced size and spacing at the top we do the hundred pixels again and we only have one more section left save this let's bring in our last section that's going to act like your social media platform and then we go to edit section I'll bring in the same image that are used for the header so with section selected advanced background background image browse select this one and I will apply an overlay just one not gradient this time also like this one and I'll bring it down to around 80 purse let's bring in an icon so with this section selected go add and then icon select the icon delete that text so we can get back and I'll look for camera oh we got the camera so we can select it and if I couldn't find a camera I would do the same procedure I'll go to the non project I'll download it as an SVG I'll add it to ICO moon and I'll bring it in as my own custom set I'll change the color let's put it on white and that's it nothing more I need to do here in fact it's at 55 pixels I think that looks fine Center alignment so you have to select section and then go to Center and now it's in the middle next I'm going to create a box with some content inside it so I'll need a container for that and if you think of a container the word for that is diff make sure the icon is selected add go to basics click on diff in this I'm going to bring in two text elements so click and heading and click Add heading if you know what you're going to do you just bring them all in at the same time let's change these headings first I'll select this one and I'll type follow me and I'll put it on white Oh too advanced typography uppercase let's put this one at 500 and I want to Center align it and to do that you have to select the dif remembered if selected div and put it on center now everything inside this div is also Center aligned we select the heading again let's make it bigger 48 your 48 is alright and then fold this heading I'll put it on h4 actually I'm neglecting my HS not going to worry about HS and then over here join the online discussions let's put it in white so we can see it white well change this to 24 and the font weight we're going to put on 324 is too big 20 20 is too big I want it smaller so let's put it on 16 okay and let add a little bit more space there and where is that box that I want to do so click on div make sure diff is selected you'll see the purple go to advanced size and spacing and I'll add padding I'll add padding of 50 pixels all around so I'll type in 50 at the top then I will click your apply all once I do that I've got 50 pixels Aurel around I think I need more on the left and the right song double that on the left I'll type in 100 and on the right I'll type in 100 and now I'll go to break back orders and under borders the first thing you'll do is select solid because if you don't select solid and you deselect it you're not going to see the border even you make all the changes in the world over here so start with clicking on solid change the color we'll put it on white and then the width here I'll put it on one we got that's how it looks click on the icon and drag some space in there mm-hmm and the last thing we want is we won't put some social icons here at the bottom for them to click on there is actually an element for that so make sure you select the div not the contents the div and then you go to add helpers and up here under composite you will see social icons select that and even though I selected the div it still brought it in so what I'll do is I'll go to structure and I'll drag it here it's going to take a little bit of wrangling remember my advice keep calm right at space here while it is selected and let's change the color of these guys so where are we background color icon color we select put it on white let's reduce the icon size 24 I like it smaller and space between put it in 20 the rest what you will do here is you'll go to them as it is selected and you will see under primary facebook Instagram Twitter LinkedIn RSS YouTube that's all you've got if you don't have anything with Twitter you simply highlight and delete it and Twitter will disappear if you have something for example with LinkedIn I'll just put in a hash there you just bring that Lincoln so you have to change the links for your sites over here and there we go let's add a little bit more space here and now we have to do something and we have to do a retro something which we forgot to do save our work for us close out we need to check for responsiveness and we have to start with this one we forgot to check for responsiveness so let's start here we can do both start with container both of them look good next one it's stacked do you want it stacked already at this level for these two and I'm gonna go with yes but I will decrease this size here at the top then we go for next one well this is stacked yep that looks good bottom looks good and then the last one stacked stacked and over you follow me and you see our box is going let me see I didn't check that a box is here fine but over here let's change the follow me with that on 36 it's all too big okay and what we need to do is maybe change the padding so I'll select the div make sure you select the div go to advanced size and spacing and then let's see if we put 50 pixels for this one now all around looks better and there we go it's a strange feeling when you reach this very end and everything is done and your page looks good and you have that warm warm feeling that job well done but there's a last part very important and that is then you have the big desire to have a menu here at the top and when people click on this menu it will take them to services or portfolio or to about me or contact us and that is done with section IDs not how many sections do we have here if you want to know go to structure you will see you with God let me grab one two three four five six seven sections this is our first section this is our second section and this section has a name it's given a name by default and if you look up here in this little box you will see there's the blue ID and this section - 11 - 9 that is the name of this section you can use this name or you can give it your own name to give it your own name click on it and once it is open selected here and I'll call it services then we go to this one which is portfolio select this section do the same click in it select it and call it portfolio you have to remember how you type it so if you make spelling mistakes you're in trouble next is Valerie styles selected click here in the ID select it and type about - me you cannot use spaces you can use - I think full stops but you cannot use spaces about me and then the last one you go here click on this section click in the ID select the ID and contact now you have these four sections and you've given them names now we bring in the menu so we go up here to our first section click on the top heading and click on add and look for menu now since version 3 we've got a menu and a pro menu and the pro menu is just a supercharged menu we are going to just use the menu the pro menu is really super super boost but we're going just use the menu here no need to make anything special so we click on the menu and it will drop in here and I hover over it and you will see the menu here so the first thing I'll do is move it to the top click and drag it above Valerie Styles photography and drop in I'll also put it here so to do that with this section selected go to the padding at the top and remove the padding and I will remove it all the way then I will click here on Valerie Styles photography go to the top and I'll bring in my padding again and now it looks like a hero section at the top of a page right we need to make changes here select the menu and these links that you see here are just random links these are not the links that we've created to do that we first need to go and set up a menu within WordPress so we'll just style it out first with the menu selected let's go over here to the options sidebar click on text change the color and I'll put it on white now we can see that font-weight I'll put that on 400 and later spacing I'll add one and I'm going to leave it like that I think it looks pretty okay there click on back go to hover and active as you see currently as I hover over it it does this so I'll go to hover background color select it and take the opacity and reduce it almost here to 20% now it looks like this with the line at the top I like that you don't need an active link why don't you need an active link because once you click here which is your portfolio it's going to scroll down to portfolio so you're not going to have that link anymore it's not like a page that is active you don't need an active link the only thing that we need to do and that is we have to go and create our menu before we do that let's check responsiveness it's container and it makes a hamburger menu I don't want the hamburger menu that soon click on the hamburger menu and you will see it becomes white don't be scared by that I'll explain very soon why that happens what we need to do them is we want to go to mobile responsiveness and then here mobile menu toggle below we select it and we put it on seven six eight it will look like this notice I had clicked up here in the top because there's actually an X a close button up there that looks good if I go to the next one 99 2 it should still show it but the moment I dropped is 7 6 8 it's going to show me the hamburger fine good we're happy with this but if I click on it I have the white screen again and the reason it looks white because my background is white plus the text I put it on white too so I am seeing nothing so what you need to do here is you go to let's make sure you're at the right place mobile responsiveness menu Styles background color and then we select this one and now things look better let's reduce the opacity a little bit and that's why it looked like this so if you couldn't close that white thing just remember it's the X actually up here and that's how we set up that we go to the last one 480 it looks good blows out go to all devices save and then click back to wp-admin let's close this one WordPress appearance menus and how we set up our menu we give our menu a name I'm going to call it main menu [Music] then say create we have to create those links and we call them custom links so the first one click here and you type in a hash which is an anchor and we call this one services use the same word but under link text you can type anything like my services add to menu then we bring in you see it's over here we bring in a second one anchor it with hash and this one was portfolio portfolio and link text let's call it my works at the menu and then the next one was about me about - me and this one we will call Valerie Valerie styles - menu and then the last one was contact remember the hash contact and then we call this contact me add to menu save menu now up here you can go to the front-end click on that you see it says my services my works Valerie Styles and contact me if I click on my services it's going to go to this section observe what happens because hold on you may just get brain damage it jumps I wanted to say neck damage my works it jumps it's not that smooth scrolling that I had shown you at the very beginning but you can bring in the smooth scrolling and to do that you can go up here where it says oxygen and ended with oxygen click on that over to manage settings and you go to page settings and where it says J is scripts click on that smooth scroll to hash links select that save back to WP click on front-end we are back here and now when I click on contact me smooth scrolling Valerie style smooth scrolling Wow looking good let's test it quickly for mobile device and to do that on the browser you can simply press f12 f12 it takes you into the inspector toggle your responsive view up here and then we select our iPad you will see iPad it still gives me the menu nice smooth scrolling and if I go to iPhone X it gives me the hamburger menu when I select it background click on Valerie styles everybody smooth scrolling f12 to exit that the last one that we still need to do here is that we've gone to link this button get in touch with this section contact us if you don't see the oxygen feature up here to edit it you'll have to go back into the WordPress dashboard not sure why that sometimes appears lately and other times it doesn't then go to pages all pages home photographer edit with oxygen and that will be the last thing we need to do and then we can go have lots and lots and cups of coffee to recuperate click your on the button get in touch and we want it to scroll to this area and you do the same go to URL - to anchor it and type in 'contact save back to WP control click front end and now when I go here and I click on get in touch it takes me to my contact form this has been a long session of two hours Plus this is our full-length tutorial serum if you want to know more please visit us at websites for beginners we're giving you loads of tutorials on different builders different add-ons and different plugins with the focus on the beginner so we really take you from a zero to a hero no coding needed and you don't even have to come with experience the best way to learn is to copy do what I do try it out and you'll get better in no time and like oxygen if you don't want to spend the money on it remember they've got a sixty days money-back guarantee that means that you have two months to play with it so when you are going to make use of that guarantee don't get a product and then sit and do nothing with it use it every day come back to this tutorial try try try and try again and make sure you get it under the belt and in no time you'll be making superb websites with oxygen more tutorials on oxygen on the way including work Murs dynamic content and even an LMS how you can bring in a learning management system into oxygen thank you for the support to this channel we highly appreciate it stay safe go well see you in the next video have a nice day

Channel: Websites 4 Beginners

Views: 11,108

Keywords: wordpress, builder, page builder, site builder, website builder, oxygen, oxygen 3, oxygen 4, new features, learn oxygen, wordpress tutorials, oxygen for beginners, oxygen tutorials, gradient, webpage, mobile, menu, transparent header

Id: p2Vfk_Ezquk

Length: 128min 49sec (7729 seconds)

Published: Sun May 24 2020