How To Create Professional Websites Without Coding | Dawid Tuminski | Skillshare

How To Create Professional Websites Without Coding

Dawid Tuminski, www.dawidtuminski.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
112 Lessons (9h 39m)
    • 1. How To Create Professional Websites Witohut Coding

      1:37
    • 2. Introduction

      4:12
    • 3. 2.1What is Oxygen builder

      3:03
    • 4. 2.2Don't buy it - try it

      2:35
    • 5. 2.3Uploading Oxygen to our site

      1:44
    • 6. 2.4Activating Oxygen

      1:40
    • 7. 3.1Add the pages

      3:11
    • 8. 3.2Add the first template

      3:07
    • 9. 3.3Oxygen's interface

      6:52
    • 10. 3.4Global colors and fonts

      9:38
    • 11. 3.5Start building the header

      9:19
    • 12. 3.6Add padding and marging to the logo

      4:59
    • 13. 3.7Taking care of the responsiveness

      6:08
    • 14. 3.8Add the desktop menu

      11:16
    • 15. 3.9Make the meu bigger

      6:24
    • 16. 3.10Responsive menu

      7:01
    • 17. 3.11Off canvas menu

      4:59
    • 18. 3.12Menu presets

      2:22
    • 19. 3.13Inner content

      5:24
    • 20. 3.14Sticky and overlay header

      8:27
    • 21. 3.15Tidying up the menu

      3:31
    • 22. 4.1Centering the content in a section

      6:27
    • 23. 4.2Centering the background image

      2:37
    • 24. 4.3Adjusting the hero content

      10:01
    • 25. 4.4Add the margin to the content

      4:10
    • 26. 4.5Using the History pane

      1:45
    • 27. 4.6.Customizing buttons

      4:16
    • 28. 4.7Add the slider

      6:17
    • 29. 4.8Make the slider full width and height

      6:44
    • 30. 5.1First add the columns

      4:11
    • 31. 5.2Create the first icon

      4:11
    • 32. 5.3Classes and id's

      4:18
    • 33. 5.4Editing classes and id's

      4:12
    • 34. 5.5The Icon Box module

      8:03
    • 35. 5.6Make the services responsive

      6:40
    • 36. 6.1Create the gallery section

      7:29
    • 37. 6.2Add the captions

      4:41
    • 38. 6.3Responsive gallery

      3:30
    • 39. 7.1Create a full width section

      3:00
    • 40. 7.2Add the video

      2:29
    • 41. 7.3Adding the text and fixing the responsiveness

      6:21
    • 42. 8.1Add the first pricing box

      5:02
    • 43. 8.2Add the class

      5:45
    • 44. 8.3Add the images to pricing boxes

      3:46
    • 45. 8.4Add the testimonials

      7:34
    • 46. 8.5Put the testimonials in a slider

      3:11
    • 47. 9.1Put the footer in the template

      8:34
    • 48. 9.2Add the copyright info

      4:16
    • 49. 10.1Add the blog posts

      3:36
    • 50. 10.2Create the blog template

      2:23
    • 51. 10.3Add the header and a footer to our blog posts page

      5:03
    • 52. 10.4Add the blog posts

      5:38
    • 53. 10.5Style the blog posts

      8:30
    • 54. 10.6Add the single post template

      4:16
    • 55. 10.7Add the post main elements

      5:23
    • 56. 10.8Add the Post content

      7:25
    • 57. 10.9Create the author info

      4:17
    • 58. 10.10Add the social media icons

      10:18
    • 59. 10.11Add the latest posts

      4:33
    • 60. 10.12Change the structure to adjust the latest posts

      6:26
    • 61. 10.13Add the categories module

      3:27
    • 62. 10.14Style the categories

      4:54
    • 63. 10.15Add the hover transitions

      3:10
    • 64. 10.16Add the comments

      4:08
    • 65. 11.1We need some preparations first

      3:12
    • 66. 11.2Create the front page template

      3:58
    • 67. 11.3Add the header elements

      7:15
    • 68. 11.4Change the alignment and layout

      3:50
    • 69. 11.5Fix the responsivenes of the header

      6:21
    • 70. 11.6Put the slider beneath the header

      4:21
    • 71. 11.7Add the Portfolio plugin

      5:16
    • 72. 11.8Add the portfolio

      6:16
    • 73. 11.9Fix the responsiveness

      2:33
    • 74. 11.10Add the single portfolio template

      5:12
    • 75. 11.11Add the dynamic portfolio data

      6:49
    • 76. 12.1Add the contact form plugins

      2:27
    • 77. 12.2Build the contact page

      1:48
    • 78. 12.3Add the first contact form

      3:33
    • 79. 12.4Add the contact form 7

      2:28
    • 80. 12.5Style the contact form

      5:04
    • 81. 13.1Explore the design for a lawyer's office

      3:38
    • 82. 13.2Add the menu items

      1:40
    • 83. 13.3Add the main template13

      3:14
    • 84. 13.4Add the header

      5:12
    • 85. 13.5Add the menu

      3:59
    • 86. 13.6Check the responsiveness

      1:25
    • 87. 13.7Add the menu elements

      9:09
    • 88. 13.8Add the sticky header

      3:24
    • 89. 13.9Add the slider

      4:24
    • 90. 13.10Add the first slide

      5:00
    • 91. 13.11Finish the slider

      2:27
    • 92. 13.12Add the info section

      5:38
    • 93. 13.13Add text in columns

      5:08
    • 94. 13.14Add the parallax section

      6:07
    • 95. 13.15Add the practice areas section

      7:45
    • 96. 13.16Add the icons

      7:02
    • 97. 13.17Add the remaining icons

      7:28
    • 98. 13.18 Check the responsiveness

      4:47
    • 99. 13.19The why choose us section

      5:39
    • 100. 13.20Text in columns

      5:31
    • 101. 13.21Finish the section

      5:40
    • 102. 13.22Start the Team section

      4:15
    • 103. 13.23Add the slides

      9:49
    • 104. 13.24Start the testimonials section

      5:59
    • 105. 13.25Add the before state

      2:57
    • 106. 13.26Finish the testimonials

      5:03
    • 107. 13.27The Blog Posts section

      3:33
    • 108. 13.28Styling the blog posts

      5:21
    • 109. 13.29Styling the categories

      9:11
    • 110. 13.30Start adding the footer

      15:07
    • 111. 13.31Add the footer elements

      10:51
    • 112. 13.32Summary

      1:46

About This Class

Have you been trying to learn how to develop websites? Or maybe you are a designer who would like to offer web dev services to your clients?

You know, designing is one thing, but turning that design into a real website is another. A more complex one I must say.

And for many, this may look like some sort of witchcraft. When they think of developing websites they get intimidated and just quit.

Luckily, this really doesn’t have to be the case. Nowadays creating custom, professional websites is easier than ever before.

So is this course just about that?

Let me tell you fist what this course is not:

  • It is definitely not another Wordpress course. If you are a total Wordpress noob, I advise you to first learn the basics and then get back to this course.

  • Wordpress is going to be an environment in which we’ll be working, but we won’t be focusing on it at all

You will learn how to build any kind of website using Oxygen builder.

It is a site builder, which means it allows you to design, develop and control ANY aspect of a website: headers, footers, menus, blogs, sliders… you name it.

What’s distinct about it is that it gives you total control over the development part: it’s really hard to imagine a design that could not be developed with Oxygen.

And the vast majority of the designs can be turned into websites without even touching the code – you can use the tools provided and not write a single line of code.

Sure, if you need something more complex, you can add extra code – Oxygen gives you total freedom.

At first it may seem intimidating, but after a few minutes, especially if you are familiar with any design tool, everything will start to make sense. And of course, I am here to guide you so… fear not!

Once we’ve installed Oxygen, we will start developing a site and along the way we you will learn various tools and aspects of the plugin:

We will

  • build headers (including sticky headers), footers and menus

  • add sliders, including full width background sliders

  • add galleries, icons, videos and portfolios

  • make everything nicely responsive

To finish the course, we will actually grab a ready-made design and recreate it using Oxygen. We will go from the header, through main sections with images, icons and transitions, all the way to an extended footer.

If you’ve been looking for a course to teach you how to develop professional, custom websites and that would do it straight to the point, you are in the right place.

Enroll now and see you inside!

Transcripts

1. How To Create Professional Websites Witohut Coding: I've been trying to learn how to build websites. Or maybe you're a designer who would like to offer web depth services to your clients. Well, you know, designing is one thing, but then turning that to design it into a real live website. Well, that's a completely different thing. And for many, this may seem like some kind of b witchcraft. And many just give up and quick. But luckily, this doesn't have to be the case. Because in this course you will learn how to build websites from scratch without the necessity to code anything. And for that, we'll use oxygen builder, which allows you to create an control any aspect of your website. And along the way, you'll learn how to build headers, responsive menus, sticky headers, overlay headers. How to Build a hero sections within full-width sliders into background. And how to add animated icons, how to add contact forums, testimonials, blogs and blog posts, etcetera. But basically, you'll learn all there is to know to create a website using oxygen builder. I just find it to be the best solution right now to create professional websites, especially if you're coming from a design background. So if you're really interested in learning how to develop websites, the future proof wait, just enrolling in this course now. And I really do hope to see you inside. 2. Introduction: So tell me, have you been trying to learn how to develop websites? Or maybe you are designer would like to offer web dev services to your clients. You know, designing is one thing, but turning that design into a real website. Well, that's a completely different story and more complex story, I must say. And for many, this may look like some sort of a Witchcraft. When they think of developing websites, they get intimidated and often they just quit. But luckily, there's really doesn't have to be the case because nowadays creating custom professional websites is really easier than before. So is the scores just about that? Well, let me tell you first what this course is not. Well, definitely it's not another word, press corps. If you're a total Wordpress noob, I advise you to first learn the basics and then get back to this course. Now, War Powers is going to be an environment in which we'll be working, but we won't be focusing on it at all. And you'll learn how to build any kind of website using something called oxygen builder. Now, oxygen and Builder is a site builder, which means that it allows you to design, develop, and control basically any aspect of a website, your headers, footers, menus, blogs, settlers, templates for 04 pages, and so much more. And what's distinctive about it is that it gives you total control over their development part. It's, it's really hard to imagine and design that could not be developed with oxygen. And the vast majority of the designs can be turned into websites without even touching the code. I mean, you can use the tools provided and not write a single line of code. But of course, if you need something more complex, you can add extra code because oxygen gives you total freedom. And let me be clear. Discourse by no means is a sales pitch for the plugin. Now, our views and tested a lot of other builders have used Devi element or Visual Composer of Vada theme ultimatum. But they never really delivered what I expected. And really, I know it's a cliche, but to once I've found oxygen, I've never looked back. But of course, it's got its flaws. I mean, at first it may seem intimidating. And my designers, I doesn't like some of its usability solutions. But after a few minutes, especially if you're familiar with basically any design tool, advert and will start to make sense. And of course, I'm here to guide you. So fear not once we've installed oxygen, we will start developing a site. And along the way, you will learn various tools and aspects of the plugin. So we will build headers including sticky headers, footers and menus, will add sliders, including a full width background sliders like the ones you can, you know, like the one you can see here. So we'll add galleries, icons, videos, and portfolios. And of course we will make everything nicely responsible. And to finish the course, we will grab a ready made the design and recreate it using oxygen. And we will go from the header through the main sections with images, icons, transitions all the way down to an extended footer. And by the way, this will be a live website. You will be able to just search for it online and you'll be able to look at how it works, how it functions once it's developed. So really if you've been looking for a course to teach you how to develop professional custom web sites. And that would do it straight to the point. I think research is over. So let's just jump right into our first video. 3. 2.1What is Oxygen builder: So to build our site, we're going to be using the oxygen builder. In the past have tried other builders like Devi or elementary, but they always were Mason some, some features, especially in terms of block creation. Now maybe these days something, something has changed. But really when oxygen 3 or 3.1 came out, I really, you know, I was hooked. I decided to get it. I decided to buy it because I really saw the potential. The potential. And I really will finally found something that would allow me to build the sides. That not the way I really would like to. So if you go to the oxygen builder.com website, of course, you will be able to read some sales information about, about oxygen. You'll be able to check out the product tour or see the tutorials. You, you'll be able to maybe compare oxygen or with that, with the competition like elemental Beaver, Builder or Devi and builder. But what I would like to know, like, turn your attention to is that oxygen is not just a page builder, but it's also a, a site builder. Now, most of these builders, definitely DV or elementary, they use themes, so you always have to have a theme. You can have a free theme, but you always have to have one. Oxygen doesn't use themes, so you don't have to worry about it. And for you as a aspiring web developer and a graphic designer who wants to offer more services to your clients, offer a web developer services to your clients. I think that one of the most important things would be that if you get oxygen, that's actually just like Dv. Dv, you can just buy one license or byte one time and you've got the updates forever, lifetime updates. And you got your license is valid for unlimited number of websites, so you don't have to repurchase the licenses for each and every site that you are going to be created. So it's basically still hopefully forever onetime purchase for life kind of a deal. So this is just a brief video just to get your feet wet, just to show you what tool we are going to be using in this course. And in the next videos, we are going to take a look at how to download oxygen, but also how to try oxygen. If you first want to just check if it's really something for you. And you'll be able to, thanks to the, to this kind of like a demo feature of oxygen, you'll be able to do exactly what I'm doing in terms of building our site. 4. 2.2Don't buy it - try it: So oxygen is basically a plug-in. And if you are familiar with the very basics of Wordpress, which is kind of a prerequisite for this course. As I mentioned before, oxygen works like a plugin. So once you, once you get it and how one should download it, you'll be able to upload it just like a normal plugin. And you'll be able to enter your, you know, your license key and you'll be able to get free, free updates for that particular website. And we're about to do that. We're about to upload the plugin. However, if you're not convinced, if you don't want to buy it, you can just go on hand. You can just scroll down to, to this well footer. And you'll see this option right here that says try oxygen. So let's click on it. And in here, you can actually enter there a demo, a sandbox environment where you'll be able to use oxygen just like you would use it if you decided to bite, if you decided to download it. And in here you can choose the blank install, which I think it would be best because we really want to build our sign from the ground up. And we really want to learn all, well, most of the things that come with oxygen, definitely all of the things that will allow you to start using it independently. But of course, you could also choose the pre-built example Website, which would load some elements from the library that comes with oxygen. But I'm gonna choose blank install. And after a few moments we are writing the WordPress Dashboard. And in here you can see that we already have oxygen installed and we're able to use it just like you would use oxygen if you purchased it, if you download it and upload it to your plugins library on your side, of course, we got on our standard WordPress Dashboard. We can add pages, you know, change the appearance and change the manual, all of those things. So if you're not convinced that you want, that you want to buy oxygen, you can always just try Oxygen from their website. However, I'm already convinced. So I'm going to be using my own installation. I'm going to be using my own version or license of the plugin. And I guess we can start just building our website. Why not? 5. 2.3Uploading Oxygen to our site: So as you can see, I got a fresh as of 20-20 WordPress installation. And if you take a look at my address bar, you are going to see localhost. And that's because I'm running Wordpress locally. I just decided to do it like that because if I was to put it on a live server, I'm we might experience some connection loss, maybe some cash and problems. And I really wanted to avoid it. I really wanted to make things as small as possible, as fast as possible. Because of course it, you won't have to wait for the server to respond. And then we'll just have to wait for my computer to response or everything should be much quicker and easier to edit for me after that. But anyway, if you are, if you have your Wordpress installed only live server, of course you would have your domain name right here. And what we have to do is we have to login. So I'm just going to type in slash and then just WP dash admin. And in here I'm just going to use my login credentials. So right now we can actually upload the plugin. So I'm gonna go to plug-ins, I'm going to add one. I'm going to upload it. I'm just going to have to find it. Oxygen 3.5. And I'm going to hit Install Now. Once it's installed them going to activated. I'm running a multi-site so you could see a network activate the button, button on your servers. It's just going to be activate. And then you can actually start using oxygen. 6. 2.4Activating Oxygen: So once our plugin, once oxygen is uploaded, let's enter our licensor. Keep. Now, if you decided to purchase it, of course you will get it in an email from them, oxygen builder team. And if you're just trying oxygen on their server, of course you don't have to you don't have to enter the license, so you can just skip this video. So what I'm gonna do is I'm gonna go to oxygen and then two settings. In here. I'm going to choose license. And in here we're going to type in our license key. That again comes in an email once you purchase the oxygen builder, and then you can just hit submit and you're going to, hopefully you should see the text valid right here. And now it means that oxygen will get updated for life. You're going to get all the updates. Within your WordPress dashboard. You can basically update your plug-in just like any other plug-in that you can get it from the standard WordPress repository. So once oxygen oxygen is installed, once it's once it's license has been and it's put in right here, we can maybe move on to a bit more of a basically Wordpress related thin, not just oxygen related thin. We're going to add our pages to our site. So, so we, so we have something on our side. So let's move on to that. 7. 3.1Add the pages: So we add oxygen, we got the license. Now let's get some pages. When we go to our Pages menu right here, let's start. Maybe, well, let's first see what pages we already have. Well, we don't have any any paid right here, but if you have a fresh WordPress install and you'll probably have a privacy policy or a sample page. And what I'm gonna do is I'm just going to add the pages that we'll be using in our, in our case. So for the title, I'm gonna go with first home. This will be our homepage, obviously. Then I'm going to add another one. Since we are designers who wish to offer their web development and services, we are going to use it. Well, we're going to be needing a portfolio. So let's publish this site. Let's add, let's say that we got a lot of things to say, a lot of interesting things to say about our work. So we're going to be, we're going to be adding a blog to our site. And let say that we got a lot of things to say about us. So let's type in about, and of course, we need to add a contact page. So let's do that. Let's go to contact and let's publish this side. Now before we move on to actually creating or unchanging our home, the page, let's go to the settings, and then let's go to permalink. And let's make sure that we got Post Name selected right here. And right now when we, when we try to visit our page, we're going to have to just type that pages name and we'll be we'll be good to go. And that's, that's the best practice for SEO purposes as well. So I'm just going to save the changes. And if we go to reading options, we can use this your homepage displays option to actually display a specific site, so well page, so we could use your latest posts if we just had a blog. But we will have a more like a more developed side. So I'm going to choose a static page and my homepage is going to be home and posts are going to be put on my blog page. So I'm going to just save this. Now in here, I've decided to go with discourage search engines from index in this site because it's a local installation and well basically it won't affect the ranking of my pepsin sits is just on my computer. But when you are building your own side, your live site, you might want to check this because search engines might, might index your, you know, your progress once you're building the site. And if you want to discourage the search engines from that, you might want to check this. But of course, when you'll be using an SEO plugin, once the designers is done, this option should be unchecked. 8. 3.2Add the first template: So what are templates in oxygen or, or, or templates in general? Templates will be basically just like pieces of design and content that will basically look at work the same. Generally on the, every, every page that you create. Whether it's, it's a dynamic content-based page, like a blog page or it's a static page. So once you put in that template, that's gonna look the same on each and every page. The most common scenario for a template would be to add your header as a template and your footer as a template. Because a header will usually host your logo, the name of your, of your company or your services, or your name. And the menu at maybe some contact information or social media icons. And in the footer, of course, you would also need to add some more information. Maybe you would add some, some links, may be some other menu. And yen basically, basically you would need to create a template for a header and a footer. So if we go to oxygen and then templates, you can see that I got no templates right here. So I'm going to add a new template, and I'm gonna call it my main templates. I'm just going to type in main. If you take a look at these options right here, you can see that we usually we might be able to just add, inherit the design from other template. But since this is our main, this is our first template. There is nothing to inherit from from any other template. In here. We can tell oxygen to which part of our site at this template should pertain to. So if you were just creating a template for, for some singular, singular type of content, like a post or a page, or for an archive page for a specific category or for a specific author. You could, you would be able to add it right here. But we are creating a template for a header and a footer. And usually we would like to add the same kind of a header and a footer too, and to all of our pages. So let's keep it simple. Let's leave it like that for now. Let's assume that we want to add the same kind of a footer and a header to all our pages. So in this other section, we are just going to select this catch all option. And then I'm just gonna hit publish. From now on, this template is going to be, is going to be telling all the pages which headers and footers that specific page should render. So once this template is ready, we can, we can hit edit with oxygen and actually start editing this template inside oxygen. 9. 3.3Oxygen's interface: Before we start editing our template or adding anything to a website, it's a good idea to know what we are looking at first, especially if you've never seen oxygen before. So let's take a quick look at oxygen's interface. And actually, at first, it might look a bit scary because there's basically nothing here. We got just some blank canvas, some options, some buttons here at the top, some buttons here on the left hand side, and that's basically it. However, in just a few seconds you will see that oxygen's interfaces, I think quite similar to a lot of designer programs like Photoshop, Illustrator, designer, or whatever you're using for your design tool. So here in oxygen, we have tools on the left. If we just click on this add button, you're going to see that we got a lot, a lot of different, different tools that we can add to our website. So we got the basics like some containers, text links, and we could add images, videos, and other thins. We got some helpers, bursts, that's what they are called Helpers. But really they are just some, like most common things or modules that you could be using in web design. And so it's like a gallery post that we are going to be using Easy posts module for our blog. We got the header builder that we'll be using to build our header, social icons, testimonial, sliders, all, all those, all those things. We got some Wordpress, Wordpress, Wordpress related actually modules like a menu pro menu, shortcodes, commons and all of those. And all those things. We got some dynamic data. So these are the things that are going to be pulled out from our database, but that's for a later video. We'll get some widgets. So if we are using widgets for inside where first we can use, we can drag them from here. And we also have like library designer sets that come with, that come with, with oxygen. And we got some reusable parts, but we haven't created anything yet. So I don't have any custom made, made by us and parts that could, could be added to our design. So basically here on the left, you are going to see all your tools. And here, the top search and box we could just type in maybe like some, like an image. There we go, we've got our image module. Or we could type in may be some lighter or SL, And we got our slider and et cetera. So we can just simply type the fewer letters, the first few letters of any module's name. And that a module is going to be filtered out from this panel. Right here. Here on the right, top right, we got some buttons right here, and we got this big blue Save button that we need to, Well, we need to, it's a good idea to click it frequently. And we got some, some other buttons. So let's first click on the structure. Button and as you can see, we got our structure and in just a few seconds is going to, it's going to look like basically, basically like layers in Photoshop, Illustrator or designer. So all of our elements that we are going to be put in here onto our canvas are going to be represented here in this structure. No pain. We've got the history panel, but we haven't done anything yet, so histories empty. And we got the Manage options that allow us to get to a different, different settings or global settings. So for instance, if we, if we try to change some settings, for instance, we could maybe changed some pave settings we could set our page with. We could play around with global settings for animations. And, but also, if we just go ahead and choose a global styles, we will be playing around with these in just a second. We are able, we will be able to add our global colors that will be always present when we want to use the colors. There'll be, whenever we click on like a color picker, our global colors will be there. And of course we also have like fonts. So we could choose our default display font, display front of horses, a font for our, for our headings. And we also have fonts for our text. You could also add funds right here if you, if you would want to. And we could change our headings so we could globally set the size and the colors for each of our heading from one all the way to age six. And we could also change the body text, the font size, weight, the color of our well, this body text. So all of those things that, that you would like to set globally. Now, let's say that you just want to and set your headings to be, I don't know, written in Bree Serif font. And you want them to be read Always. You could just set that right here. And then when you're adding a heading from our, like this guy right here from our tools panel, then you wouldn't have to worry about the colors and the size and the weight and the line height. You can set it all here, right? So we talked briefly about that and the oxygens interface, of course, we are going to dive, dive in much deeper once we start to add in our elements to our website. But actually, let's maybe play around with these global settings. Let's actually some globals, color, global colors. And let's add some fonts to our, to our site. And for that, we're going to have to just take a quick look at some other sites that are usually using my designer scenario. And I just don't want to skip any step when creating this design. Of course, bear in mind that design itself is not the most important thing right here. The most important thing is the EU learning, or again, in all the skills that you will need to create, recreate your own designs. So let's actually move on to a site that I use to pick up some colors and some fans. 10. 3.4Global colors and fonts: So let's start maybe with adding some color sets to our website. So I'm going to choose, I'm going to go to a site called coolers dot co. And you probably well, you've probably seen this website or heard about it, at least. It's just a great site to come up with different color, color schemes. So let's start the generator. And a in here, as you can see, we got some color swatches. By default we got 12345 color swatches. But if you want to, you could just click on this, add colors plus symbol to just add another color swatch. And of course we could remove it if you wanted to. And we could do the same thing with other with other colors. So what I usually do, what I usually start with is I try to come up with them in color for my text and color for the text background. And I don't really usually like to go with Leckie plain black and plane. Why? Because I just think they're too overused the HIPPA, too boring. But of course that's going to be totally up to you if you wanna go with plain black and plain white. Anyway, I just like to use some very, very light gray color. And I know that the hex code for that is F8, F8, F8. We could also go with something even lighter, which would be F9. F9, F9, F9. There we go. And once I am happy with the color, I'm just going to lock it. And then I'm just going to try to come up with some nice background, like, uh, like the darkest color. I'll, I like to go from the lightest and the darkest and then we can try to come up with something else. So for this guy, I'm just going to maybe try to find some nice shade of this, maybe this ultra dark brown color that looks alright, and I'm just going to lock it. And then if we just tried to come well, if we just let the generator to come up with some other colors for us, we could just press the spacebar to just find some colors that we might use end those colors might be for our links. They might be for our buttons or hover states, all those, all those things. But the most important part here is to just first try to come up with your color scheme when you are designing your website. And then to use all these, all these colors, all these color swatches, maybe let's add one more. All these color swatches to oxygen. And that's basically what I would like you to learn from this video. So we've got this F8, FATF, F9, F nine of nine. I'm just going to copy this color. And I'm gonna go to oxygen. And I'm going to add a color set. And I'm going to call it maybe like default colors. There we go. And I'm, I'm just going to Edit. And now within this set, this default colors color set, I'm just going to add a color. And let's call it may be light gray. And I'm just going to paste that hex, hex value like that. So we got our, our light, light gray and then let's go ahead and. Grab this hex code as well. And this is going to be our dark brown. Dark brown. There we go. I'm gonna paste it in. And there we go, we've got our light gray and our dark brown. And of course, in your case, you would be adding different, different colors. Let's maybe just, just as the practice, let's maybe add some, maybe let's grab this lighter brown Y naught. This might be a good color for our buttons. So I'm just going to mingle it's called medium brown. There we go. And another hashtag and add the color. So I'm not going to save it. So this would be our default colors color palette. For now, let's keep it simple and keep it like that. As I said, is, it's not really about the design part. I don't really want to make it uber pretty. I just want to make it practical. I just want you to learn the skills. I just want you to learn how to handle oxygen to create your own designs. Of course will be creating a design along the way. But for now, let's just learn that default. How to set up some default values here inside oxygen. So these are our colors. So what about the fonts? So when it comes to fonts, I'd like to go to font pair. Fond parent. There we go from parent dot co. And in here we got a nice, quite an extensive set of different, of different we'll font pairs. And we could go with like Sans Serif and Sans Serif fonts or san-serif would be our display found our heading phone and serif. In this case, Alexandria, would be our body text font. We could go with sensor of san-serif, display and san-serif like this one, or display and Serif. And we could, you know, just choose whichever category we want right here. So all these phones are Google fonts or they are free and they come with oxygen as well. So let's try to find something nice. I know that I'm going to be using for our logo font called Bree Serif. So let's see if we can find it. There we go. We've got Bree, Serif and Laura right here. Let's see if it comes in another pair. Bree Serif and openness ends. And I think I'm going to go with this pair because it's just a nice contrast between kind of funky heading and a really legible text. So we could go with these font Paris, but we could also go to a site code site called Font font joy. There we go. And in here we could play around with this contrasting the slider, Contrast slider. So we could say that we would like to have more contrast between our headings and our text. Or we would like to have very, very low contrast. And you can see that we got the font name here on the left, and the font name for our subheading here on the left as well. And our texts and well, the name of our body text font is also right here. So if you wanna go with a very high contrasting font pair, we could do just that. So we would have an Enrico Letta and also antics lab for our, for our body text. But that's just another simple and a very interesting tool to find some nicely looking font pairs. So I'm gonna go with Bree Serif and Open Sans. So I'm gonna go to oxygen. My display font is going to be Bree Serif. And I'm going to leave it as open science and I'm just going to save it. So right now whenever I'll be adding some heading or I'll be adding some text. And oxygen is going to be assuming that I wanna use this Bree Serif font for my heading, an open sentence for my body text, but also for menus and ended links. So we got the colors, default colors, we got the fonts. We could also move on to our headings if we wanted to. So let's say that we would like to maybe let's keep this Heading, one as 36 pixels. But let's maybe add, well, let's change a color. So I'm just going to click on this color. And you can see down here we got our default colors displayed. So it could just add this dark brown as our color. And then just hit save. We could do the same for the heading two, dark brown. And now whenever we add this heading one or heading to, heading to heading three, if we, if we just add that color, we know that that's exactly the color that we'll be using for that heading. And of course, we could also change the font size if we wanted to. But let's now keep it simple. Let's just add the colors. We could always change them. The heading value of a specific instance of a heading once it's been put onto our, onto our cannibals. Okay. So we got the colors, we got the funds, we got some headings. We could maybe decrease the font size to maybe 15. And maybe let's change the color to our dark brown. There we go. Let's leave the line height for now, as is. We can change it later and I'm just going to save it. So we got our default values setup. We got to, we learn how to use the oxygens interface basically. So now we can actually start adding our template. And do we are going to start with adding, of course, a section. And we'll learn what sections are, what are columns and devs in subsequent videos. And we will start with adding our logo on the top left corner of our website. Website. So let's start doing that next. 11. 3.5Start building the header: To start adding our logos and menus and social icons and all those things, we first need to think about where we are going to be putting that in. We need some sort of a container here inside an oxygen. And actually in any kind of weapon development project, it's a good idea to first have some sort of a container to keep all your smaller pieces, all your smaller elements. Now, usually in oxygen, we would start with a section and then we could add a div or columns. And we'll talk about those in a few, in a few moments. One of the, one of the upcoming videos. But we are building a header, our template with a header right now. So in oxygen, you get a Hadoop builder. That's a special kind of a section module element. So if we just type in header and then Hatteras builder, you can see that it's actually been added to our website. If we head over to our structure, you can see that we got our header builder. This is our main main section. And then we've got our header row with three elements. So we got our left element, center element, and write elements. So left, center, and right. And usually in a typical web design scenario, we would put our logo in the left part of our header. And for that, we could use the row left part here inside our header row. So let's actually add a logo of created is something like, well, a very, very simple, simple logo for our website. I call the wow design because y naught, I just took this simple icon from flat icon. And as you can see, I got two different versions of this, of this logo. One is, well, our dark, dark brown and one is our light, light, Great. So in this case, we could add our logo in two different ways. The most simple one, the easiest one will be just to turn this guy into a simple image and then upload it as our logo, which we are going to do now. And you would usually do it like that if your type is something a bit more special, something funky, something custom made, something that is not easily retrievable with just simple, simple text. So I'm just going to grab these guys. And I'm going to press Alt plus control plus Shift plus S to export these elements. As you can see, I'm using Affinity Designer, but if you're using Photoshop or Illustrator, you can basically turn your text and this icon into, into an image. So I'm going to choose the PNG because I don't need the background. And I'm just going to use selection without background. And the size is fine. I'm just gonna hit Export. And I'm gonna call it maybe logo one. And I'm gonna hit Save. And now I'm gonna go back to my design. And I want to add an image here in the left part of my header builder. So again, I'm going to choose add and I'm going to find an image. There we go. And I'm just going to have to find my image in my, my media library. So I'm just gonna go to browse. And now I'm just going to have to find that image. So once I found my image, I'm just going to double-click on it and just choose Select Image. And as you can see, that image has been put right inside my arrow left. So this is my logo. And, you know, if you want, and it, I think it would be a good idea. We could maybe play around with this image. I mean, we could, for instance, make it smaller. So let me just maybe change the height to something like 45 pixels, or maybe even last, something like 32 pixels, or maybe even 26 pixels. We could go down and down and down as much as we, as we want. So this is one way of adding on the logo onto our website. Of course, we still have to play around with some space in around all these elements. But for now, we are just learning how to add an element onto our website. And actually, if we just worked and save this, and if we were to grab our, our websites, well, adress, I'm just going to copy it. And since since I'm on a Firefox, I'm just going to use control plus Shift plus P keyboard shortcut to add to enter that the Incognito mode. But if you're on Chrome, you would use, you could use control plus Shift plus n to enter Incognito mode. So I'm just going to that tablet address in. And you can see that actually we already are starting to build our website. Let's check if that, if it works on Chrome as well. There we go. We got our website basically starting, starting to work really. It was, it was that that simple? But as I said, this is just one of the ways of adding a logo like this. What we could do, however, is we could maybe add the just our, at our image like this piece of our design. So I'm just going to grab it. And again, I'll control shift as PNG selection without background. Export. Export is, as you can see, already, exploited, exported it before. So I'm just going to call it login for save this guy. Go back to Firefox and again, add an image. And I'm going to have to find that guy. So once I found it, I'm just going to read it over, select an image. We're going to hit Save. As always, sometimes we just have to refresh the page and we got our logo put right here, again in our left, left row. If you want to, you could simply drag that image into another part of our, well, this header builder if you want to, but, you know, it's just, it's just a thing that you could do, but we are going to put it backwards and belongs. And I'm, I'm just going to remove this logo right now. So to do that, I'm just going to hover over this image right here, this Layer. And I'm just gonna hit this x Remove Component icon. There we go. So we got our image and let's maybe make it smaller, but we don't have the text, so how to add the text for our logo? When again, again, I'm just going to hit add. Well, let's find the text. There we go. And I'm just going to type in, WOW, design their ego. But since this is just a plain text and we set it to open sense, as you can see, our font is not the font that, that supposed to beat, supposed to be Bree Serif. We could change it right here. We could just go ahead and choose display the serif, or we could just let me just remove that. Or we could add a heading. So just type in heading. And as you can see, we already have the font that we need to. But since it's set, this tag is set to one. And in our global, global values, we set it to, I believe, 36 pixels. It's way too big, but still we could make it smaller, like 24. Of course, let's type in the text while design. And there we go. We could maybe changed some things. Maybe let me just make a town maybe just a bit smaller, 36 because this should be fine. And we could still maybe go to the Advanced tab, then topography. And in here, we could maybe increase the line spacing, letter spacing to main mu one to make it look something like this. I think it looks alright. Now, if you would like to maybe increase or decrease the space in between them, these elements, you could grab your text or your image in this case. And again, go to advanced, this time to size and spacing. And in here, you could, you could, of course, n changed their height or minimum height or width. But you could also play around with something called padding and margin. But let's talk about those two in the next video. 12. 3.6Add padding and marging to the logo: So let's now quickly talk about two ideas, two elements in a web development and are extremely important, but luckily extremely easy to understand. And they are extremely important because you'll be using them quite a lot. And those elements are padding and margin. And the difference between them is that they basically ad space around an object, but Padding adds like an inner space within a container and the margin Ed's outer space. But in our case basically right now we could use either one of these values. So if we would like to add, say, some space between our bird and the text, we could use either padding or margin. So if we just type in, say, ten pixels, you can see that we are expanding this container right here. You can see this line, this purple line, that's a mark in our container. And if we had the margin, you can see that the container remains the same. But we got some space between our bird and the text, just like we did with the padding, but the container stays intact. Now, another thing that we could do in terms of margin and padding is that we could add some padding to our main container, our header row right here. And you will almost always find some padding and margin options under the advanced tab. And then size and spacing. We are again within this padding, padding and margin options now. But before we start doing that, and before you really start to understanding the difference between padding and margin, especially when added to containers. Let me just quickly change the background of our header to something really arbitrary, Something like this. We'll change it in just a second. So again, size and spacing. And if we now add some padding to top and bottom, let's say 50 pixels and then 50 pixels, two top and bottom. You can see that our container grows. Now we got a lot of this pale red color right here. But if we added the margin, even though the values are the same, you can see that we are basically keeping the container intact in terms of it's visible or perceivable size. But we are adding margin to the top and the bottom end. Of course you can't see anything right now because it's white against wide. But if you just hover over this space right here, you can see that we are, we are actually adding in some margin. And by the way, if you don't want to add margin nor padding like manually like here, you could always just grab this like an edge of a container. Edges play around it, play around with it. And the same for the padding like this. And then as you can see, those values have been typed in automatically here inside our padding and margin values. Now, I don't want these guys to look like this. I do want to add some padding, but not that much. Let's go with maybe 2525. I guess this should be distributed, right? Maybe, maybe 18. Of course, if we had developed proper design before, we would already have all those values. But as I said, it's more about just the plain around a learning the skills to build a site than just actually sticking directly to our design and make an advert thin luca, the prettiest possible. So we got our logo setup, we got some margin, and we got some space right here. I haven't gone to, however, remove that background color. And we are back with our, our design. And if you want to check what it looks like, if we are not logged in. There we go. We got our well-designed and our logo right here in the top left. Now, this looks all, this looks all fine. But of course, we need to still remember about our design when it's going to be accessed by users from most probably a no mobile device. Nowadays, the majority of traffic and websites comes from mobile devices, not from desktops or laptops or whatever. So we need to pay attention to that. And I think that we should already start to understand how to tackle that issue right from the onset, right from the start, because it's extremely, extremely important. So it's actually start doing that in the next video. 13. 3.7Taking care of the responsiveness: So as I said, our design looks nice. Well so far our logo looks nice on desktop devices, but what about smaller devices? So we need to take care of the responsive side of things in here inside oxygen. And it's actually really easy. If we take a look at this little switcher right here on the left, you can see that we got some icons. And if we just click on any of these options, so let's go with page container, 1120 pixels and below. This is what our design probably, well, I mean, the size of our logo is going to look like a Most of laptops. So far, it looks all right. Let's go to less than 992. That might be like some larger tablet tablets. That's also fine. Let's go to less than 768. Now at this point, since we are going to have some menu right here, maybe we could change some things about it. Maybe we could, for instance, change the text size. So I'm just going to select, this is heading, this guy right here. And for 768, I'd like to maybe make it just a bit smaller, maybe this image as well. So I'm just going to maybe use this slider right now. And I'm going to bring this guy down to maybe like 18 pixels. And for this guy, maybe I'm going to, let's see it in pixels as well. Now that's going to be way too small. 2424 should be fine. There we go. So we got our hmm, you know what, maybe let's also change this. The size of our gap right here. Maybe let's make it just a bit smaller. And as you can see, if you go to size and spacing, we could maybe do like five pixels, not more. So if we now go to our old devices, so this is our logo. Then page container, then less than 992, and then 768. Now it becomes smaller and let's go less than four AD. For 80, it's still looks alright. Of course we are going to be playing with the responsive side of things a lot more in the upcoming videos. If you want, you could maybe, maybe because that's how you want to make your design. Let's maybe go to the, our header row. And let's say that maybe we'd like to change the color of the background for, for our like Cain, maybe like a smartphone view. Why not? Just, just for fun? So if we're on less than 480, Right now, we go to Advance. Of course we got our header row selected. We go to the background, background color. And let's slip maybe change the color of the background to this light gray or maybe even something visible. So just so you can see the change. And we're going to leave it like that. I'm going to save it. So if you now go to our old devices or large does a desktop page container nothin happens less than my 92, not much happens. Less than 768. The logo and the text changes now it's all smaller and less than four AD. And let's go to our, our design. And that by the way, we could, for instance, right now, just start changing the size of our view port of our browser. So as you can see, we are getting smaller now. The jumped too well to less than 768, I believe it was. And landscape evenness, smaller, smaller, smaller. And there we go. We got our smallest smartphone will had in the header row on the smallest devices will look like this. And if you don't want to keep these changes, these changes like this, just always remember to make sure that you are on the right break one. So less than four AD in this case, I'm just going to remove it. And let's go to less than 768. Maybe I'm going to leave it. Leave it like this, and always remember that all these changes work. Well, there is a hierarchy between all these, all these guys. So if you set something for like less than 992, let's say that you're going to change this text color to, let's go with something yellowish maybe or just something visible. There we go. So for less than 992, it's like this. So for the higher values, so for the parent element, we got still, we still got our original. But if we go down, if we go to the child, that value changes and then we go if we go to the another child, that value changes, but only the size changes because we didn't touch the color, so the color stays the same. If you were to change it to something like this. Then we go to 1992. We got green, then 768, we got brown. If we don't apply anything to it, and we don't apply the colour, color. Well, any attribute actually takes the values of the parent element, which in our case is the 992 Breakpoint. But of course we don't need the green color, so I'm just going to get rid of it. I guess we could stay with our with the size for our logo. This looks this looks fine. Let's keep it like that. So we've got our logo, we got well, we took care of a bit of a responsive side of side of things. So I guess it's high time that we added our main menu on the right. So let's start doing that in the next video. 14. 3.8Add the desktop menu: So now let's start adding our menu. This is kind of a, I wanna say, lengthen or complex process, but there's a few steps to building a menu on every, every website, not just here inside an oxygen. So let's start with adding our menu elements. So again, I'm going to just hit and, and then start typing menu. Now as you can see, there are two modules for our menu. This menu is the, well is I don't wanna say deprecated, but it's an old menu module. And since, I believe three-point oxygen, 3.2 or 3.3, we got the pro menu. So I'm gonna do, so I'm going to be using our menu right here. Now as you can see, it gets added to our first row, this row, left part, right here. And I wanted to be on the right side, so I'm just going to drag it to the right. Now by default, you can see that there are some simple dummy menu links added to our, to our menu. So I'm gonna go to the menu option. And as you can see, it's basically AMT we got nothing here. Well, that's because we didn't create a menu yet. So I'm going to just save my, my site. And I'm gonna go back to the admin panel. And from time to time you are going to see these messages right here informing you that some, some caching, that you change some global settings and you need to recast your oxygen settings. So let's just click this. And then you're basically then, as you can see, all done, universal CSS cash generated successfully. That's basically to kinda like refresh the memory of oxygen. So let's move on to actually creating that menu. I'm going to go to the appearance panel and then menus. And let's create our first menu. I'm going to call it Main Menu. There we go. And I'm gonna hit create menu. And let's just add all of our elements. So we got contact about AN portfolio. I'm just going to maybe move these guys around. Of course, we could also add some sub-menu items, but for now let's just keep, keep it simple. And I'm gonna hit create. And then we can go back to our pages Home. And then I'm just gonna hit edit template. And there we go. You can see that our menu is, is right here on the right, the right side. So as you can see, oxygen added our only menu right here where it's supposed to go. But of course, there's a lot of thing that we need to take care of. Right here. On the left you can see different tabs that control the look and feel of our, of our menu. So first let's go ahead and change some things about the desktop appearance of our menu. So if we, if we click on them and desktop menu, you can choose between the vertical and horizontal orientation of your menu if that's something that you wanna do, for instance, if you wanna do like a portfolio page. Or portfolio site, you could maybe just add a vertical menu on the side and like a big portfolio piece on the other side. And right here we got different at different times. And that will actually control the look and feel of various aspects of our menu. So if we go to typography, we don't need to play around with the font-family because no, our d, we already set the default for our topography for elements other than headings. So we could maybe play around with the font size if we want to. Maybe let's go with something like 14. And we could change the color. Let's go with our default color. And maybe, maybe let's Chido. Let's see what it's going to look like if we set it to the uppercase, uppercase, our text transform. We could also use lowercase if we wanted to, but I'm gonna go with uppercase. We don't have too many Menu elements. So I guess we could maybe make it more prominent, make it more visible by a change in the, by transforming the text to be upper, uppercase. Now, if you want to, you could also change the font-weight. Remember that this is the Google font, open science, open science, and that typeface. So we're going to get different font weights for this specific font and angle. Let's leave it, let's leave it as default. I think if you go with 600, that might be a bit too much. Maybe if it wasn't, if it wasn't uppercase, maybe that would look look better. So as I said, you got total flexibility when it comes to the change in the look and feel of these elements. And it will basically depend on your artistic tastes and your design and your clients expectations, what this is going to look like. But you know, you get all the, all the changes right here visually, nicely laid out. Of course, all these elements are touching each other. They are way too close to each other. So let's go to space in a line and border. So what I would like to do is I would like to add some margin between these elements. So let's see, eight pixels. Eight pixels might be alright. Now, if you would add, if you'd like to add some padding to your elements, you could of course do that. And that would, that might come in handy if you want to add some colors to this element, to the background. So let's say that we would want to add some autonomic. We like this, this kind of a, this kind of a color. And then let's go to our desktop manuals, base and align. And let's maybe add like ten pixels. And as you can see right here, you can, there's a, there's a little Apply All button. If we click on it, we are going to apply at the same value to all our, all our elements. But that's not really what I wanna do. I'm just going to delete all these, all these elements. And of course, I don't really want this guy to be this brown. I think that looks, this looks better. However, we could always just play around. With the topography, maybe maybe increase the Size since since we put it to a lowercase, maybe like 15. But as I said, it's going to be totally, totally up to you. And the last tab here in this desktop menu is the hover and active tab. All these elements, all these, all these values are going to allow you to change the appearance of your, of your menu links when they are Hubbard or when they are active. So when the specific page is active. So let's say that we would like to change the text color on a hover. Let say that we would like to make it out on our life. Funky red color. So whenever we hover over our piece of text, it's going to, it's going to change. Also, we could change the Hubbert background color. So as you can see now, we are changing the text and the background. And this is where that no padding would really, you know, play nicely along with these changes, we would have more breathing room here. We would have more space. So it would look definitely better. But you know, we are learning the options. So this is what this hover background color doesn't. You could also have a border. So if we hover over, our element is going to add a border. So maybe let me just remove that. Let's just add a two pixel border bottom. And as you can see right now, we already have this bottom, this bottom border applied to our, one of our menu items because we are previewing this page right now. So let's, if we preview about, that border is appearing under the about link right here. So this is something that she could do. Of course, you could also add the border top border top hover option. That's what you want to do. I think I'm going to leave it as one. I think I like this option. And I'm gonna get rid of the hover text color. I just want a nice, nice border underline. Whenever I hover over in, hovered over the menu, menu link you, we could also change the active text color. So if we're now previewing the about page, so this is our active page. We could change that color to, I don't know, maybe something, something like this. So whenever that page is active, that menu link color is going to change. And I don't want this color same for the active background color. And we could also change the duration of the transition. So if we want to add a color to our hovered texts class, let's go with the red again just so you can see everything better. And if we change the transition duration, so let's say, I don't know 5.5 seconds. If we hover over this element, you can see that it's nicely fading in when we're hovering over the link and fading out when we are hovering out like that. So that's something that we could do. I'm going to leave it and I'm going to just leave this Hover Border bottom. That's also going to be, as you can see, it's also going to be transition like this, but of course that's a weight too big. So one should be, should be fine. So this is our desktop menu. If we start to make in our side smaller. Now at this point, it's still looks all right, but only because we have not too many pieces right here, right here, not too many, not too many Menu elements. But once we start adding some more links right here, that would, you know, it would totally mess our menu up. It, it wouldn't look good. So actually, let's maybe add some more links to our portfolio. Just, you know, just to learn how to add those and what it would look like once they are in right here. And we could also add some sub-menu items just to see all the effects that we can add. When you are, when you have some sub-menu items in your, in your menu and what you can do with them here inside oxygen. 15. 3.9Make the meu bigger: So if you ever have sub-menu items in your menu, like we have in here, you cannot change their appearance right here. If it's of course, a desktop menu right here in this desktop dropdowns tab. So first of all, we can enable drop-down. So when we do that, we actually can see these elements right here. Of course, if we don't enable the drop-down, That's actually well, that's gone. It's still there. It's still in the database. We just, we're just not seeing it. So the first thing that we can do right here is that we can change the animation type right now it's set to fade, fade up. So maybe let's just see what it looks like when we, when we go out of this building mode, let's go into Incognito mode. So this is our, this is the animation that we have, this fade up animation. Let me just make, make it smaller so we can see right here. And if we go to something like, I don't know, let's go flip up. I'm going to save this. And then I'm going to refresh the page. You can see that we got another oil at different animation. Of course, I'm going to leave it up to you. We could increase or decrease the duration of this animation. So let's maybe see what that looks like, what effect it makes. You couldn't see them that no, right now it takes much, much longer to animate these elements. But of course, we wouldn't want the animation to take this long. I would say that something between 0.2 seconds to 0.4 should be enough. We want everything to happen at innocent dangerously, We don't want our users to wait for our magnitude to load. So this should be fine. So now what we can do is we could add a box shadow to our, to our menu. So this whole menu would get a shadow behind it. So I'm going to go ahead and choose a color, a shadow color. And usually says Should we something dark, but also, I'm going to decrease the transparency ever so slightly. Maybe do something like this. And now we could do maybe play with the horizontal offset values, vertical offset just to move our, our box shadow. And we could exchange, increase and the blur and, and increase or decrease the spread. Of course, all these options are for you to play around with. And they basically work the same like they work in any design and that design piece of software. So let's actually see what effect it, it did. So there we go, we got our shadow added. Of course, it looks horrible, but actually you can see it's simply works. And it's just up to your imagination, up to your app, to your design to make it look aesthetically pleasing. And to you and of course to your client, if you really want to do that, that the box shadow now it looks well a bit differently. Now, I don't really need this box shadows Amoco into just deleted. But of course, I wanted to show you what this option looks like because of course we want to learn how to use oxygen to build our websites. So now we can go to drop-down icon. And of course we can show the drop-down icon or we don't need to show that. So that would just know that that will leave from the user thinking if there are some sub menus we want to show, we don't inform the user that there actually is something hiding inside this link. But maybe this icon is not what you would like. I know, I don't really like it. So we could maybe find something else. As default, we can choose from and Font Awesome fonts or linear icons. There you go. Maybe we'll find something here. If you know them. If you know the, you know, the name of the icon, you can just type it in. Let me just see what this guy will look like. I guess it looks better than that icon, but maybe I'm just going to change the size, something like eight pixels and maybe increase the margin, maybe not to ten, but to like five, this should be fine. And if you want to, you could also rotate the icon. Maybe two, something like this. Let's see, 120 or 90. Know, whenever someone hovers over this icon, they would, they would see our, our sub-menu. So there's quite a lot of, quite a lot of options for you to choose from right here. And I think that these explanations are pretty clear. You can change the open rotation, you can change even that transition of that, of that rotation. But again, I'm going to leave it up to you, up to your design taste, an app to your experimentation, because this is really the only way you're going to get good at this. So that after the drop-down Ico, we got dropdown colors. So if we change the background color to maybe something like this. If we hover over, you can see that our background is, is changing. And if we change this hovered background color to something like this dark red, when we hover, maybe let me just save that would be easier to see the changes here. When we hover over, you can see that it's actually, it's actually changing. Our background is changing. So let me get rid of these guys. Of course, we could change the link color, the hover text color, but let's, I'm going to leave it up to you if you want to change that. And we could also change the child links or if we had like a sub-menu. Within a sub-menu, we would want to change all these guys in here. Ok, so I guess we got our desktop menu sorted. And we now I think we can now move on to actually making our menu responsive. So let's start doing that. In the next video. 16. 3.10Responsive menu: As we already know, once we started going, say luck, like less than 768, our menu looks horrible. It's breaking our site. So in here, when we go to our primary pro menu, pro menu elements, you can see this option right here that says Mobile Menu toggled below ones with twirling open, you can see that we can, that we got our break points the same as here. And also always and never. All these options control when your menu is going to appear as a, as a responsive menu. So if we do always, our menu is always going to look as it is a responsive menu. If we do, never, our menu is never going to look as a responsive menu. But if we choose, let's say less than 992. If we start previewing our, our side right now, when it's set to 11120 pixels and below, it still looks okay. But when we go to less than 992, you can see that our menu is changing into a, into a mobile menu, into the smartphone menu. I'm going to save my site because I think that I'm going to leave it as less than 992. It looks alright. So what can we do about our menu? First of all, when we click on it, you can see what our menu is going to look like when, when we open it. So when you go to the mobile menu option right here, and you can see that we got ton and ton of options to control our mobile, mobile manual. So first of all, we can check, we can see which well, which I can, We could use as our menu. So usually we would use something like a simple three bar. So let's see if we can find it. Maybe not like that. Let's see lines. While all well, maybe I guess we could use this one. But I know that there's a different, let me just start typing menu that maybe, that will maybe be better. So I'm going to choose and these bars right here, and you can see we are changing our, our menu, menu icon will basically instantaneously. And down here, you can choose to leave this as manual lever, this text as menu. We could type in something else like open maybe or like me. If you wanted to, that would be just the text for our menu, but usually I just leave it blank. So we've got just the simple menu looking length is, of course, if we click on it, you can see that we got our menu right here. We could of course change its size, make it bigger, make it smaller. I'm going to live. It won't be as 42. Why not? We could change the margin, we can change the color. So maybe I'm going to give it my default color. I know that there's not too much change, but I'm keeping and the colors consistent. We could change the icon hover color if we wanted to. So whenever someone would, well basically tap on it, then that color would change. We could change the padding. So if you wanted to have maybe like say, let me just maybe turn this guy black and then the I can color. Let's make it, let's make it white or off-white color. You can see how we can change the look of our button. Button completely. That's just going to be, well, it can be your design choice if you want to do it like that, and you could maybe just make them that Penn is smaller. So that's what she could do if you wanted to. Just going to maybe get rid of these guys and go back to our original. And I don't need the padding color. And I guess, you know, all these values are pretty self-explanatory, but you just need to click and check and slide. And it's just all these options just so you can see what effect they have on your menu icon. So this is the menu icon, but it's of course only the Open icon layout. If you wanted to change, if you wanted to have some text right here like that menu text, you can change, you can control that text from this Open icon topography. Now if we move to close, I can layout. That's going to be the UN, that menu right here. This, I mean, this icon right here. If you wanted to make it look different, let's maybe try to find some thing that would match our Open icon, like an ax or something like that, that would match our icon like baby, this acts that would look a bit better. And again, you could choose to leave that the, this icon texts as close. If you wanted to do that. Maybe we could change the position of our icon. Maybe move it from the left-hand side all the way to the right. And actually, I think this is I think that this is something that oxygen team could maybe change. I don't know why they, this icon is always set by default to the left when usually people are right handed. And I guess it's just a better UX usability when this close icon is closer to the right hand side and we don't, we wouldn't have to change. And all these elements, all these values just to move the icon to the right. And of course we have all the same options right here as we had with our Open icon layout. Okay, so maybe not, maybe let's increase this icon to 42. I think that open Eigen layout was set to open eigenstates was set to fully to, I believe, I guess we could always check it as 42, so we are keeping things consistent. Let's go to our menu styles. And I guess the most important thing here would be to change the item text align to center. Of course, if you wanted to have it aligned to the left or to the right, you could do that. But I usually, when I got an many looking like this, I usually keep it centered. So I'm just going to save this. And if we now just go to our design, you can see that and b, let me just do it bigger. If we now just make it smaller. There we go. If we start making our viewport smaller ones and hits the 992 break point is going to change into a simple Lebanon, that simple, but definitely a Mobile Menu. 17. 3.11Off canvas menu: Another interesting thing about the Mobile Menu Here is here and oxygen is the fact that you can make it off canvas. If you just click on this option right here, you're going to be able to kinda like animate the cam on the canvas at the menu. Kinda like it's coming from out of the viewport. So let me show you what I mean. So if we just remove this guy, so we got all the, all the default, default options right here. I'm going to save it. And then we go to our menu. I'm going to refresh the page. You can see that it's kinda like fading in from the right side. Right now. What we could do is we could do maybe increase the size of our canvas. We could maybe even make it, let's for now, make it smaller. Let's make it like sixty-six percent just so we can see what's happening. And I'm going to save it and I'm gonna change the background color just so you can see this menu a bit better. And so if we now refresh the page, again, you can see that this is our, this is our manual that is kinda like failing in from the right. We can of course change some things about it. Let's see if we align it to the left. And let's see what this will look like. And you can see that it's now being aligned to the left. But I guess from the right would be better. And we could of course, change the off Canvas animation. And there's quite a lot of options to choose from. Let's see, zoom out down and let's see what it, what it's going to do. I'm going to refresh the page. And it's going to look something like that. It's pretty heavy. But I guess maybe, you know, maybe this is something that you'd want to do. I would maybe decrease the duration to make it make it quicker. So let's see what it does right now. So you can see, I guess it's not the smallest of the animations, but to note something to something you could do. So I'm just going to maybe do something simple like like slide, slide left. Why not? Let's see, slide left. And like that. And it looks much, much better, much, much smoother. So of course, when we decrease the size of our viewport, since we, since this width is set to boil, set to percentages, you know, it's always going to take up the, a specific amount of space right here, shown in percentages. If we were to set it to just pixels. There we go. And let's refresh the page. Now it's always going to take up that value. But in pixels which doesn't look, doesn't look too good. If however we wanted to maybe like cover this whole page, we could use the viewport width value. And if we set it to 100, that means that all the view, all of the viewport will be hidden. So if you just save this guy and then refresh the page and we are going to increase it. And you can see that right now, our menus covering all of our viewpoint from the left to the right because this is what this unit VW viewport width doesn't. So I'm going to leave it like that slide left 2.2 seconds. That looks, that looks fine. So now that we got to our off Canvas menu sorted, we still could play around with mobile dropdowns. So let's open up our menu. And as you can see, we got our menus hidden right here, but they, they don't look all that good. We could maybe change the background color to what we would really want. We could maybe change the width of our border to like 1.1 pixels so it matches our desktop menu borders. And of course, if you wanted to but play around with the color you would the style. But I guess that looks, that looks all right. We got our Mm-hm. Mobile Menu. Menu. Pretty much, pretty much sorted. So if we just save this guy and refresh this page, and I'm going to just make it bigger. If we now start to go down, go down, go down. You get our mobile menu. If we click on it, you get our animation and we got our dropdowns. So everything is working, working smoothly, working nicely. So when working with menus here inside oxygen, if you don't want to play around with all these options, you could use one of their presets that come with the, with the program. So I guess we could just briefly take a look at those next. 18. 3.12Menu presets: Before a start to using D's menu presets, I'm going to save my own menu as my own preset. So I'm going to name it my menu. I know it's not to creative, but I'm going to save it just as my menu. And now it sits right here in my, in my list with other menu presets. So let's say that I would like to use the slider to write venue. And as you can see, not only the sliding effect is going to be applied, but also all the other elements. So for instance, the menu is set to mobile and as always, if we click on it, you can see that it's moved to the left and we got all, all of these elements. And if we go to, let's say desktop and mobile, you can see that again, the menu changes. It now looks like this. And of course we could, let's see minimal as my like minimalism. Well, that's not too to minimal divide days. Let's see what it looks like. When we, when we preview it right here. If we click on it, this is, this is our, this is our menu. It doesn't look all that bad, but of course we could still change the links. We could change the font, all those things. But again, if you want to use one of the, one of the presets that come with me, come with oxygen. You could definitely, definitely do that. But I think I'm going to stick with my, with my menu and I'm going to save it. And I just think that it, it looks a bit better. And this is kind of a look that I'm going for for this design because we are creating a design for our services as designers. So I think that if we just to keep it simple, that is going to show us as designers who, who got, who got taste. So let's leave it like that. But of course we are not done yet. We are not even done with our header. In the, in the subsequent videos, we are going to take a look at sticky headers and also add overlay headers. Here inside the designer, we are done with the menu. Now we are going to finish that header with the, with the sticky header and the overlay header. 19. 3.13Inner content: So now we are going to take care of the sticky header and also an overlay header. But in order for that effects to be visible at all, we need to have some more content on our website. And actually, it's a very important step here in insider oxygen because without that inner content module, we wouldn't be able to add anything onto our website once our templates are reading. So what I'm gonna do is I'm gonna go ahead to the oxygen templates and I'm gonna add it my main template with, with oxygen. Okay, so I'm inside my template and I'm gonna go ahead and click this Add button. And I'm going to start typing in content. And once I got this inner content module right here, I'm just going to click on it. And as you can see, it gets added to my structure and not much actually happens. I mean, we could style it if you wanted to, but that's really not the point of this module. Basically, this module is going to allow us to show everything on our website without it. I, I guess it would be possible, but we will be just building our templates. And now if you wanted to add images or text right here that day would be a part of the template. And they would be displayed onto, on each and every page that a user would see. So every time you just want to, you know, like finish designing of your, of your template, your main template. Just remember to have the inner content module ready and waiting for, for your next design steps. Because without it, they would be basically impossible. So once that's done, we just have to save it. Then I'm gonna go back to my admin panel. Because right now if we want to see that sticky header and if we want to see the, the, the overlay header effect, we need to have some content on our website, on our page. So I'm gonna go to pages and I'm going to add it with oxygen. I'm going to edit the home page with oxygen. As you can see right now we got to this click Add to, add elements to this area. And this button should basically correspond with this button. But since, since I can remember this, this piece of text is a bit different than this piece of text. I know is just the positioning of this plus symbol, but annul it always, you know, I always see it. I always notice it. But anyway, once we got this guy right here, well, we got this text. We know that we have to now add some elements to our website. So if we just go to add as, as usual, I'm just going to start with a section. And this section is going to be hosting our hero image. And I'm going to go to the Advanced and then background and inhere in the background image. I'm just going to add this image to my background. And as you can see, it's been added to my whole section and it says panning across the entire page by default, but that's not the case in terms of the size, well, the height of our of our section. So if you want, I can just go back to size and spacing. So if you want, you can set the height right here. And of course, if you set it to like pixels, 500 pixels, you are going to basically see this. And if we were to change the unit value from pixels to this time VH, which is viewport height. Now we are going to tell the browser to, you know, to spread our background image across the entire height of our, of our container and regardless of the basically of the container. So if we were to set it to 100, this design will, this image is going to take, take up 100 viewport height units. I know that we still can see like this, this piece right here at the bottom. But that's just because we got this header at the top and we are going to, once we initialize the overlay handled, we are going to fix that. But for now, I'm just going to leave it like that. And when you go to our main page, you can see that we got this image, image right here. So maybe let's add some more content. I'm good to go and I'm gonna go to the structure panel and maybe I'm just going to add section. And as you can see, it gets added right beneath our previous section. And I'm also just going to, I'm going to add some dummy text that I'm going to borrow from the lorem ipsum side. I'm just going to I'm just going to copy it. And then I'm just going to paste it. And maybe let me just duplicate this piece of text. And I think this should be fine. This is four. Now this is enough, enough text that we have just to learn how to use the sticky header and the overlay header. So let's start doing that next. 20. 3.14Sticky and overlay header: To add a sticky header and to change our header into an overlay hetero, we gotta do it from the, from our template level. So I'm just going to make sure that I got this saved. And we're just going to click on my header and click open and edit template. Yes, yes, open anyway. And right now we can change our, our header, as you can see our preview in homes. So we can see all these elements that would just set for our home page. And once our header builder is active, we can go to sticky and you can click on Enable sticky header. So this is going to do is it's going to allow us to create a sticky header, which would be visible every time a user scrolls on our website. So when someone scrolls down, we still can show that menu to our, to our users. So I'm just going to leave the scroll distance in a 2-300 because when users scrolls down in a 300 pixels, you can see that we got our menu and showing up, but we are going to fix this layout in just a second. So I'm going to leave it like that. I'm going to change the sticky background to this color. So now when a user's scrolls down, scrolls down, the user is going to see this, this manual like that. And I'm gonna choose fading, sticking that is going to just nicely animated. We could maybe increase this fade in speed. There we go. This would look, look much nicer. And I'm going to save this guy. However, we could maybe changed some things about our menu that is going to be sticky. I mean, I'm, I don't think they would want it to look like this. For instance, I would want this menu to be smaller. And maybe I would want it to be responsive always all the time. So for that, I'm just gonna go to my header row and I'm going to duplicate it. So right now we got two identical header rows. But what I'm gonna do is I'm gonna grab my image on the left and I'm going to make it smaller. I'm gonna make like 24, maybe even less than that, like 18. And I'm going to do the same with the heading. I'm going to make it smaller, like may be 16. This should be fine. And let me just grab the image may be and maybe decrease this margin ever-so-slightly to something like five pixels. And then I'm going to grab my pro manual. And I'm going to I'm going to tell it to be well, to be mobile. Always like that. And maybe I'm gonna go to the Mobile Menu and Open icon layout. And I'm going to make it smaller, like 24. Maybe this will be fine. So now we got two menus. Maybe I'm just going to also change this padding to something like 1010, or maybe even less than that, like 55, right? So I'm gonna save this. And if we now go all the way back to the primary, we can now choose to display this row, this header row only as a sticky header. So I'm gonna click only show in sticky. And I'm going to click on this row and I'm going to say hide in sticky. And now when we save this guy, and I'm going to refresh my page. If I now start scrolling down, you can see that that header is only been shown once the sticky is hidden. And when you go down, we got our menu right here. Of course, we would have to fix some issues right here, but of course that's, that's easily fixable. We can easily fix that. But the main point right here is that you can change the way this header stick hetero behaves. And once you scroll down your page, when we go up, that older header comes back. And when we go down, we got our new sticky header shown right here. So that's that sticky header. What about the overlay header? I'm going to remove this sticky header. I don't need it. Let me just save this and I'm gonna refresh my page. So I got my, my header right here. And what I'm gonna do is I'm gonna go to structure header builder. And I'm going to go ahead and choose Overlay. And I'm going to say that I always want to overlay the header, which is going to make my, my image go up and make my, my header go like over our main sections. So if I save it and if I refresh the page, you can now see that our, that our header is all been overlaid over this, over this section. And this image is actually right now because we set it to 100 vh, as you can remember, it right now, taken up the whole, this whole space. But of course some, well, this, well, we could maybe play around with all these colors who we might not want to make this look like this. So what I would do is we've got again, go to the header row and we could duplicate it, duplicate this header row. And no, I don't want to make it higher and sticky. That's not what we want. What we want is, for instance, we will want to hide this guy when it's in overlay. So this top header, so I would say Haydn overlay. But this bottom guy, we could maybe like change some colors. So let's go to, let me just grab my heading. And I would change the text color. Of course we would have to change this color while this image as well. But if you don't want to change it, if you don't want to just upload a white version of this logo, we could maybe do a quick little trick. We're going to go to the advanced than effect. Then you can go to Filter. And from here we could change, choose, invert, and then just go 100%. And we would simply invert the color of our, of our local. Now it works in this case, well because we are inverting black. So from black we are going to white. And if it was read, I guess good could invert to green or blue. I'm not really sure, but in this case, this effect works in, usually we would we would be better off if we just changed this image to a proper lighter version of our, of our logo. But anyway, we can do it like that for the time being. We can also go to our pro menu. And we could maybe change, change the color of our, of our menu. So we could change the color right here. We could grab the slider color. And I'm just going to leave it as is for now. Just, just to show you what this overlay header actually does in our case. And as you can see, it looks pretty nice. Basically, we got a proper contrast between our background and our header. So I guess we could, we could leave it like that. Of course we, I guess we would have to work on our on our logo, on our menu right here, because right now it doesn't look all that great. And you know what, I guess I'm going to go with this kind of a design. I'm gonna go with this overlay kind of a header. So I guess we could maybe fix this menu to make it look proper. So we could maybe play around with the background. We could play around with the links, the icon, solid, start doing that next. 21. 3.15Tidying up the menu: So let's fix our menu. Let's make it look nice. So I'm gonna go to my less than 992. And I am going to change this icon right here. So I'm gonna go to my mobile menu. I'm open, I can layout. And I'm gonna change the color to my lighter color like that. And if we click on it, let me see what it looks like. We got the background that we would have to change and the links that we will have to change. But to maybe let's start with the back ground. So I'm gonna go to menu styles, and I'm gonna go to background color. And let's remove it. And you know what, maybe let's try something different. I'm going to go with this darker brown color, but are going to decrease that transparency to some Psalm ten lie. So this should look fine. And now we don't have to play around with our, with our links because we've got enough contrast. But we have to go to our close menu icon, so close icon layout. And let me just find the color for it. So I'm just going to click on this option and change this to white. And maybe I'm going to try to move it to the side. So it kinda like covers this and this option right here, this part right here. So I'm just going to go ahead and do I can position left and I'm going to go with the percentages. And let's see 75, let's see 85. Let's see 19. Maybe 90 will be fine. Let's save this. And let's just see what it's going to actually look like. Once it's done. I guess it looks fine. I guess we could leave it like that. Or our well, almost all our menus are working fine. We still need to take care of the mobile dropdowns. So let's go to our mobile drop-downs. And I'm going to remove this drop-down color. So let's see what it looks like now. It looks much better. Let's save this guy, refresh. And again, and this is our menu. Looking, looking pretty nice, I think it looks all right. So we've got our, we've got our Header Menu completed. We also have our main image for our hero completed as well. However, we are going to play around with our hero quiet extensively in the upcoming videos. And don't forget that we still had our sticky header right here. So you might see someone glitches. Of course, if you want to keep the sticky header, you could do that. You already know how to do that. And I definitely, definitely encourage you to play around with all those options, but I'm just going to maybe get rid of that. I'm just going to go to the sticky options. And I'm going to disable the sticky header. And let's see if that worked. So I'm just going to refresh the page and as you can see, the sticky header is gone. So as I said, right now, we can move on to making our hero section right here a bit more interesting. We can add some heading, some texts, maybe some buttons, and maybe some slider, but we'll see about that in the next videos. 22. 4.1Centering the content in a section: Okay, so let's move over to our home page. So I'm gonna go to pages, all pages, and I'm gonna choose homepage and I'm gonna edit with oxygen. So this is our layout. So we have our own, we have our overlay header. We have our section two, which we added a background image, this one right here. But also as you may remember, we also set it to 100 vh. So this image spans across the whole height of our hero section. And of course we got some dummy content right here that I guess we could actually remove it, but let's keep it for now. So the next step here would be to make our hero image a bit more interesting. Right now we only have an image. And we basically, well, we're not communicating too many things to our, to our users. So what, what I would like to do here is I would like to add maybe like a heading, I would like to add some text. A may be a call to action in a form, in the form of a button. But before we're gonna do all that, and there's a few things we need to keep in mind. If we were to now just add, Let's say that heading. And then we would like to add some text. There we go. And then we would like to add a button. There we go. You can see that all of these things are being added in the top left corner. Of course, there is a bit of a padding right here because the section by default is set to have size and spacing is set to have 75 pixels of top and bottom padding and 20 pixels left and right padding. So there's a few things that I would like to do to make this text appear in the center spot, not only horizontally but also vertically. But I would also like to change this image a bit. And I mean, I like to make sure that this image in the background, that it is also centered. And right now it looks like it's centered, like it's alright. But when we start to make this whole design responsive, you will see that we are going to be losing our composition, so to speak. So let's take it slowly, step-by-step. So first let's take a look at how to make all this content, how to center this content in relation to our section. And you might be thinking that we have to maybe like grab the heading or the tax or the bottom. And then maybe like in Photoshop and Illustrator or any other program, just hits some alignment option right here at the top. But in in website building, I am, it would be especially here in oxygen. It would be a better idea to tell the section, this section right here how to render all the content. And that is actually being put into our section and in our, in our hero and hero section. So may be, by the way, let's just click on these, on this menu, on these arrows. And let's rename our section. Let's call it. Now let's call it a hero section. There we go. I'm going to save my design. So what I wanna do is I wanna make sure that this heading, that this text, and that this button is set exactly in the center spot vertically and horizontally. So when I, when I got my hero section selected right here, I'm going to move on to this horizontal item alignment options. And I'm going to click on center. As you can see, all of my elements are being now centered horizontally, but they are not been centered vertically. I want all these guys to be exactly in the middle of our section. So to do that, I'm gonna go to the Advanced tab and I'm going to go to Layout. By the way, all these elements stay look. Well like it's like, it looks like some pretty scary stuff here. But let me tell you that basically what we are doing right here is we are telling oxygen to write some CSS rules for us. And CSS of course stands for Cascading Style Sheets. Basically, those styles are responsible for making our headings look the way they are supposed to look. They are responsible for the alignment. All those things. I mean, we don't have to write any code. We can just tell oxygen to write that code, of course, in the backend for us simply by clicking on certain, certain options. So as you can see, we've got our align items center. That's basically what we did. Let me go to primary. That's basically what we did here. And now what we wanna do, again, layout is you want to put all these elements in the center. So to do that, all we have to do is to just click on this justify content Center option. And basically we're done. We set our content exactly in the middle. And if we now we'll save this guy and we start to take a look. And we'll take a look at our responsive options. You can see that all, all the time, all these elements will always stay exactly in the middle. Of course, as you can see right now, this tax is being put. It's been aligned to the center and we would like it to be aligned while it's being aligned to the left. But we wanted to be aligned to the center and we of course are going to take care of it in just a second. But also you can see that our background image, It's kinda like been cropped. Like we don't see that focal point exactly in the center. And that's something that we need to take care of as well. But let's start doing that in the next video for now, I just want you to understand that if you want to make sure that that you're aligning all of the content exactly in the center spot. All you need to do is to go to the Advanced tab and then to lay out and you get all of the alignment options ready and waiting for you right here. So now let's move on to aligning them or centering our image as well. 23. 4.2Centering the background image: If we start to preview our design f, as if it was rendered on some smaller devices. You'll be able to see that our background image is xm. It's kinda like getting cropped. We're not, we're not able to see our focal point, in this case our center spot. Well, we're instantly in the center spot. If we go to less than 480, you can see that, well, this kind of looks kinda weird and you think like this laptop is been cropped on the side and we basically are not sure what we are looking at. So in order to prevent this situation from happening, there's a quick little solution, a quick little trick that will allow you to keep your focal point exactly where you want it to be in terms of viewing your background images. Now in our case, we want the focal point we exactly in the middle. So what we can do is we can go to when our section is selected. You can go to the background. And down here you'll see these left and top options. So these guys allow you to move your background image in relation to the left point and the top point. Now, if we were to say, I don't know, do something like 50%. Now, at this point, not much is happening because we are previewing the large desktop. But if we started going down, you can see that actually right now our image is moving. If you can remember, when we were, when this was set to the 0, this is how, this was our, our background image. And right now we moved it to decide. And if you want to keep it like that, well, of course you could, but that wouldn't be a good production technique equal to mean good production practice. What's better to do it is to keep your left and top values always to 50% and to the left and 50% to the top because this will always make sure that your focal point is exactly in the middle. Of course, if you want, would want to put your focal point like in the top right corner, you could play around with these options as well. But if we now start to look at our design on smaller devices, you can see that our poco point, a focal point called B1, is always, always in the middle. So this is just a nice little production technique for you to, for you to use whenever you want to play around with the responsiveness of your background images and with centering your focal, focal point. 24. 4.3Adjusting the hero content: So once we got the background sorted, well, like in 99%, we're going to do a little thin once we got our content right here sorted. So of course, what I wanna do is I want to change the color of my heading. So I'm just going to grab this guy and just choose this light color. And I'm going to do the same for this guy. And I'm going to leave the button as is for now. What I wanna do is I want to maybe add some more text right here. So let's just go to lorem, ipsum. That's going to some Lorem. Let's grab some Lorem Ipsum text. This should be, I guess we can grab just this. And I'm just going to double-click here and just press control V to paste this guy right here. When we take a look at it, well, we got, well we got a few problems actually, not just one problem. So first of all, our text is been, well, it's way, way too large, it's way too, way too wide. Also, we could maybe play around with the spacing between all these elements, like between the headings in the text and the bottom. But also we, I don't think that we have enough contrast between our text and our background. So maybe let's address that last issue right now. So I'm still here on my section. I got my sectional selected. I'm gonna go to Advanced and then background. And down here we got this option that says image overlay color. If we choose our color, let's say I'm going to grab this guy right here. You can see that right now we are overlaying a color over our background image. And of course, that's not entirely what we want. Let me just grab the color again. What I wanna do is I want to decrease the transparency ever so slightly to summer here just to add some contrasts between myText heading and of course the bottom end, that background. So I'm going to leave it as a so that's one issue sorted. Now, the other issue is that if we start to make in our text, well, our viewport smaller, you can see that our tax system well is spanning across almost the entire and the entire page. And that's not exactly what we would want. So I'm gonna go back to my old devices. I'm going go, I'm gonna go back to this, well, this view right here. And what I would like to do is I would like to make all these guys smaller. I would like to, you know, we could maybe just grab this text and go to Advanced. And then to size and spacing and maybe play around with the width. Let's say that you would type in 50 pixels or 50% and make this guy smaller. And we could do the same for the container of our heading. But let's, let's. A bit differently, and let's actually learn one more, I think, very important technique here inside oxygen. Let's put all these elements into a specific container. And that container will be our div. So a div basically is just a kinda like a generic container that allows you to put other pieces of content inside it. And well, you know, it doesn't have any like specific attributes to it, but it allows you to control the layout and the size of very, very easily. And it's a, it's a very powerful, a powerful piece of, well, a CSS or HTML actually here inside the oxygen. So the way we could do this is we could simply go ahead to our heading. And again, use this little menu right here and just choose wrap with DIV. What it's going to do is it's going to put that specific piece of content, in this case the heading. And it's going to put it inside this div. And what I wanna do is I wanna just move these guys also into our container. As you can see, well, some things have changed, but still the tax is not working properly. So right now when we have our div, we could go to the horizontal item alignment center, put the content in the center. But I think that we should also go to our text than to advanced topography and align the text to the center as well. So now when we go to our page container, you can see that all these elements are nicely aligned to the center and you can go to less than 992. The same situation happens. Now at this break point, you can see that our heading starts to look, well, not the best we could maybe changed some things about it, but I think that we could maybe change the size of it, the line height, but also the alignment. So as you can see a when you, when you check your responsiveness along the way, if you don't wait till your whole design is, is finished, if you just adjust the responsiveness as you go, that's just going to save you a lot of time, trust me on that one. So I'm gonna go to all devices. Again, grab this heading, go to advanced topography and align it to the centre. So now if we go to less than 992 or 68, you can see that our heading is being nicely aligned. So what I'm also going to do is I'm going to maybe increase the font size. Let's see 48. This should be alright. And maybe let's type in something here. Let's say, welcome to wow, design. The place of your next project. Put it like that. I'm going to leave that dummy, dummy text as is right here. And now when we start to change our responsiveness, you can see that we've got a, well, the line height right here is, I think it's a bit too big. So I'm going to grab the heading again. And from the Advanced tab topography, let's check in and line height as one or may be 1.1. And I'm gonna go to page container 1120. I think that this should look alright. I think I think it's fine. But at the beginning as you remember, we put all of these guys into a specific div and we kind of forgot about it. But that's only because we started playing around with these elements. I, I didn't actin and forget about it. So how this, this whole div, situation can help us when we take a look at other smaller and smaller break points, you can see that this div is No to my base hits a bit too, it's a bit too wide if we go to our old devices. And then when the div is selected, when we go to this, let's go to our primary tab. And we got this with option right here. I'm going to change the units from pixels. Maybe let's go to percentages. And let's type in like 75%. You can see that all of the, all of our pieces of content or being and unlike re-adjusted to fit inside this div. So we don't have to just grab heading and then tags and then Barton to, to make them smaller nor bigger, we can just manipulate the look of our div, just this one piece of content to make it, make it smaller, smaller, or bigger. And at the same time, all of these pieces of content are getting smaller or bigger. But when we go to like page container 1120, I guess it still looks. All right. But why don't you go to less than 992? I guess we could maybe changed the width a little bit. So instead of, I think it was 75, let's do like 80% or maybe even 90, 90% percent should look better. And then let's go to less than 768. It's still 90%. And for 80, 90% should be fine. So when we just save this guy, and I'm gonna go to my Incognito mode again is I'm going to just press control C, control shift plus P on Firefox, control plus Shift plus n on Chrome. And I'm just going to enter that address. And when we start, just increase this guy. So what I'm going to go smaller, smaller, smaller, smaller. You can see how this tax is being nicely readjusted to our break points until we go all the way down here. Now of course, if you want to change the size of your headings depending on on your break points, but I'm going to leave it up to you. You already know how you can how you can adjust to that. So there's a couple of more issues that we have with these pieces of content. And that's the will, the padding or margin between all of our elements. And of course, we need to take care of our bottom. So let's start doing that next. 25. 4.4Add the margin to the content: So now that we've got our div center, we got our accountants center, it would be a good idea to add some spacing between all of these elements. So what I'm gonna do is I'm going to grab this text and I'm gonna go to Advanced size and spacing. And we could just add some margin and some top margin and some bottom margin. But we could also just grab our top border of our text and just add some spacing down here. And as you can see, we got these values. Will in, we'll put right here. And let's maybe do these equal like 20 pixels, 20 pixels. But of course we cannot forget to check what it's going to look like on our smaller page containers. So this is going to be our 1120. And let's see, 768. I guess it still looks fine, but maybe let's do 480. I guess maybe we could add some more padding down here for our button so it's easily l, will easily accessible on the smallest devices. So in just a few clicks here inside oxygen, you can really, really control the responsiveness of your, of your, of your design. So this is what it looks like when it's unlike the largest desktop. But when we started going down, you can see that our button is going to move all the way down, down here. And there is also another way of controlling the layout of content within, within a div. And that would, might work well in your designs. So I think it's worth to look at. So for now, I'm just going to grab this text and I'm gonna get rid of Margin values. And I'm going to get rid of this 50 pixel margin down here. So what I'm gonna do is I'm going to grab the div. And right here you can see this option that says space between what it does is it makes this all these pieces of content to be equally spaced out vertically. Of course, we cannot see much happening right now because our div hasn't changed its size. But when you go to the advanced than a size and spacing, and let me just change the height from pixels to percentages. I'm gonna type in like 75%. You can now see that our group, but all of these elements are being like, kinda likes glued to the top part of our div and the bottom part of a div and this text stays, stays in the center. If we were to make it like 50% or even 40%, you can see that we got nicely even doubt. Pieces of content and the spaces between these elements are, are the same. And of course we would have to make sure that this, this design is consistent through all of our, all of our breakpoints. Like in