‫Welcome back.
‫Many years since.
‫And in this lecture we will be working with the tub bar design.
‫So let's just go ahead and let's get sorry.
‫So now the very first thing that I need you to do is to go ahead and open this website item, zillow.com,
‫so that you can see the actual project that it will be building.
‫And then we can go ahead and we can start working with that.
‫In this lecture, we will learn how to actually design a work with the top bar that we have here that
‫is in the blue color.
‫So let's just go ahead and let's get started.
‫Now, the very first thing that you actually need to do is to go ahead and go into the appearance themes
‫and make sure that you do have got the ocean WP installed.
‫That's it.
‫This is the only thing that you need to do.
‫And once you are in here now we need to take a look at the customize.
‫So inside this customized there is going to be so many of the extra features.
‫All right, like indie colors, we can work with the colors, but we do not need to actually work with
‫the color over here.
‫Like, let's suppose that if I change this into the black over here now you can see that it doesn't
‫make much of a difference.
‫So we will be only taking a look at all those settings that are mostly required for basically developing
‫a basic website and later that in the project for we will also learn how to actually work or build our
‫own custom header so we do not actually rely on a theme.
‫So that is why these settings that we have, we are actually getting in here.
‫They're not that much important, but since we want to actually build our first project based on a basic
‫theme, that is why we have to work with that.
‫So now once you are actually in the theme customizer, now what you have to do is to go ahead and you
‫go into the top bar.
‫Now, once you are in the top bar now, what we have to do is to, first of all, change the color of
‫our top bar to the blue.
‫So we will go into the general tab.
‫Now we will go ahead and we will select our background color to be blue.
‫That's it.
‫Once we are done with that, we will go down and we will change our text color to white so that this
‫actually turns into the white color.
‫Now you can see that we've got our top bar ready.
‫Now we are ready to install or add the content in here.
‫So we will go back, we will open the content and now you can see that we have got this here that says
‫Place your content here.
‫So let's just go ahead and let's place our content.
‫What we will do is that we will get rid of everything that we have in here.
‫And the very first thing that we actually need to do is to, first of all, show a phone icon over here.
‫So how do we show the phone icon?
‫We need to go to a website that is the font awesome dot com.
‫And once you are on this website now what we have to do is to search for our font.
‫So we will click on here and this is going to actually take us to this search page.
‫But now we have to search for the phone and now we have to hit on enter.
‫And you can see that we are actually being given the phone icon.
‫So now what we need to do is to click on here and you can see that we have got this code over here so
‫we can click on here in this code is going to be copied.
‫Now if you go ahead and we go to the website and we paste in this code, you can see that we should
‫be given a phone icon.
‫If this phone icon is not visible to you or if you are given this square over here, then this is probably
‫basically that the font Awesome has recently updated their website and they have changed every of the
‫code.
‫It might take some of the time for the developers of the themes to incorporate the latest version of
‫the font.
‫Awesome to incorporate on the website.
‫So until unless if you are actually getting this square over here and then what I would actually suggest
‫you to do is to right after this lecture you should see this font awesome not working.
‫And here is going to be the link of the previous version of the font.
‫Awesome.
‫So what you can do is that you can copy this link.
‫Now you can go into the font.
‫Awesome.
‫And now you can paste in that link and now you have to hit on enter.
‫So now this is going to be the previous version of the font.
‫Awesome.
‫Now what we can do is we can search for the phone icon and we can hit on enter.
‫And you can see that we've got this phone now you need to click on here and now you have to copy this
‫code.
‫All right.
‫So now what we have to do is to just select all and now we have to paste in that.
‫And now you can see that we are getting the font over here, which is the phone icon.
‫Now what we have to do is to enter our phone numbers.
‫So we will give a space.
‫Now we will add here plus one, two, three, four, five, six, seven, eight, nine, ten.
‫Let's suppose that this is going to be our phone number.
‫Now, what we need to do is to give a space and now we have to add another icon, and that is going
‫to be the email icon.
‫So this is right here.
‫So what we will do is that we will click on Cross in the font.
‫Awesome.
‫Now we will search for the email and we will hit on enter and you should probably be getting the email.
‫So let's go down and you can see that we have got this envelope icon.
‫So we will click on here and now we will click on the code snippet and that is going to be copied.
‫Now what?
‫We can do is that we can just paste in that code and you can see that now we've got this email icon
‫as well.
‫So now in here we can add the email that's going to be info at the rate domain.
‫Dot com.
‫Let's suppose that this is the email address.
‫All right.
‫Now, later on when we'll be transferring the website to the online, then I will also show you how
‫you can create branded emails as well, like info at the rate your domain name dot com as well.
‫So so that is also included in the course as well.
‫All right.
‫So now here, what we want to do is that we want to give much more spacing in between the envelope icon
‫and the phone number.
‫So let's just go ahead and let's give space.
‫So if I just give this space, you can see that when I'm giving the space, the space is not being given.
‫No matter how much space I give, this is not being given.
‫So why is that?
‫The reason is that is because this is being interpreted as the HTML.
‫And inside the HTML, no matter how many spaces you gift, that is going to be converted as in a one
‫single space.
‫So what we have to do is to use the HTML code for this space.
‫So what we can do is that we can write here and percent in between the envelope icon and the phone number.
‫And after that we have to write here n b, s p, and now we have to add a semicolon.
‫So make sure to add a semicolon to.
‫And now you can see that we are actually given much more spacing in here and you can see that this is
‫how it's actually looking.
‫So now we are done with the top bar and you can see that a top bar design is ready.
‫Now what we have to do is to add our social links in here.
‫So how do you add these social links you just click on Go back.
‫Now we've got this social over here.
‫So we will click on here and you can see you can select whether you want to enable that or disable that.
‫Since we want to enable that, we'll click on here.
‫Now we will go down and we will be entering our Twitter username so you can add here at Twitter dot
‫com, slash your username so you can add in like that.
‫But since I do not have a Twitter account yet, so I'll be just adding a hash over here so that this
‫this icon should be visible.
‫But if someone will click on it, he will not be taken to that particular page.
‫All right.
‫So this is this is actually called a dummy link.
‫All right.
‫So now in here, you can add your Facebook page or profile URL, so you can add that.
‫And similarly, you can also add your Instagram.
‫So Instagram can be like Instagram.com, slash your username.
‫All right.
‫So let's suppose that we also have the Instagram as well.
‫I'll be adding a hash over here.
‫Now, the social links colour.
‫I'll be changing this to black.
‫All right.
‫This is going to be converted into the black colour and I'll be changing the cover.
‫Now, what is actually to hover?
‫So you can see that as I bring my mouse to any of the icon?
‫Now let's suppose that I want to change the colour of it then.
‫This is actually called the hover.
‫So hover means that when you bring in bring your mouse to any of the elements, you want that colour
‫to change.
‫Yes, we want to change.
‫So we will set this to white and now see it.
‫All right.
‫If I bring my mouse to the icon, how this colour is actually changing.
‫So this is what is called the hover effects.
‫Now you can see that we are actually fully done with our header or the top bar.
‫We will click on publish and now we will click on cross and let's have a look at our website live so
‫you can see that this is how the website looks like and congratulations on achieving the number one
‫part of this project.
‫In the next lecture we will be working with the header.
‫I will show you how you can design a header like this and then we'll be moving forward.
‫So stay tuned.
‫And by.