‫hey whatsup guys and welcome back.
‫So in this video, we're going to be designing the top bar and we're going to be designing the header
‫and also the footer right here.
‫So you can see these are the stuff that are coming right here.
‫We're going to be designing each and everything here.
‫So let's just go ahead and let's get started.
‫First of all, you have to go and you have to click customised to go to the customizer.
‫You guys, you know about each and everything part.
‫So what I'm to be doing, I'm just gonna be explaining you what I'm doing right now very fast so that
‫you guys don't get bored.
‫And you guys do know that what I'm doing.
‫So you can copy exactly the same on your own website.
‫So first of all, I'm going to be going to the header right here and inside here.
‫I'm going to go to the general and I'm going to be applying the background color because that's the
‫main thing right here.
‫And now we're going to be going back and we're going to be applying uploading the logo over here.
‫So what you have to do is to just select the logo and then you have to upload it.
‫Since my website name is going to be one stop shop.
‫That is why I have created a logo right here.
‫I didn't have much time, so I created just this in minutes.
‫And this is right here.
‫Now, what I want to do, I'm just going to hit select.
‫And the logo is gonna be right here.
‫Now you can go at and you can hit skip cropping so that it's actually in the full size right here.
‫It's gonna be right here.
‫So now it's actually really very big.
‫And this is how it's looking.
‫So we're going to be working up with the max width over here.
‫Now we're gonna be just deciding how much which we want.
‫And I'm going to be keeping it to be 100 pixels.
‫This is gonna be right here.
‫And this is how it's working.
‫Now, we're going to go back and I'm going to go to the general and I'm going to be applying some of
‫the height over here.
‫So the height I'm gonna be applying is going to be hundred pixels to so that there is some gapping from
‫the top and the bottom right here.
‫And the menu is basically aligned right here.
‫Now we're going to be going ahead and we're going to be designing the menu over here.
‫So you can see that this shopping cart is already here.
‫Then you install woo commerce.
‫You already get this shopping cart, which was not here when there was no woo commerce install.
‫So we're gonna be going to the menu right here.
‫Now, there is one thing I want to tell you is that in general, you guys do know about these type of
‫menus.
‫So you can use any type of menus right here.
‫And this is how the menu will be changed, even though you can change it to top menu, which is the
‫menu that is mostly used of some of the Web sites.
‫And then what you can do is that you can just write the menu beneath this, and this is how your website
‫will be looking like.
‫And then you can.
‫And so this is actually a menu that mostly e-commerce Web sites use.
‫Then what you can do is a you can go ahead and you can break the color of this.
‫But I'm gonna be using the actual menu that we have been using.
‫And I like to keep the website simple.
‫This is also the symbols.
‫So if you like that way, you can do it that as well.
‫Now, what I'm to be doing, I'm gonna be going back and we will be working up with the menus right
‫here.
‫So the link color is going to be white.
‫And now we will be working up with the link background on the Hoover.
‫So we're going to be using this color.
‫This really just goes up with the great color that we have been using.
‫And now you can see this is how it's looking.
‫Same like this.
‫You can go ahead and you can change the link color on hover to be white as well so that it doesn't
‫get changed.
‫And this is how you can see it's working.
‫Now, what you can do is that you can go ahead.
‫You can go back.
‫And now you can work with the topbar.
‫So you can see this is right here.
‫This thing is something that we will be talking in detail later on.
‫So now what you have to do is to go back and now you have to go ahead and work with the toolbar.
‫So for the toolbar, first of all, I'm going to be adding the number here.
‫That's gonna be the phone number.
‫And this is right here.
‫So you can see that I've got the full number here and I've got this info.
‫@ itanzeel dot com to e-mail as well.
‫Now, I would like to comment something on the phone number.
‫And the reason for that is because if you have a support team right with yourself, then you can add
‫the phone number.
‫Otherwise, if you are basically building an e-commerce Web site and you're adding your own phone number
‫and you are really a busy guy, then you should not be adding this.
‫And you should only be keeping the e-mail to yourself.
‫Well, it totally depends upon you if you want to manage it yourself.
‫If you manage if you want to manage the store yourself, then you can definitely use it.
‫Now, we are done with this and now we will be working up with this right here.
‫So for the background color, what you can do is that you can choose the exact same color that we have
‫been using over here.
‫Okay.
‫And then what you can do is that you can just go to the bottom color and you can get rid of the border
‫right here.
‫And this is how it's gonna be, OK?
‫So this is how it's going to be looking like.
‫And then you can go ahead and you can work with the text color and you can make it to be right that
‫this is how it's going to be visible.
‫And you can use this type of color.
‫Okay.
‫So if you are committed, otherwise, if you want to choose the other color, then you can use this
‫particular color.
‫And then this is not going to be really harsh to the eyes.
‫And this is actually going to be the simple.
‫But there is a little difference if you feel it.
‫So now this is how you can see that our Web site with the header and things are done.
‫Now, we will be making a video for her over here.
‫So all you have to do is to go back and you have to go to the menus over here.
‫And you can see we have got the menu.
‫And this is actually set to footer, which is coming right here.
‫And so what you will do is that you will uncheck this so that this is gone.
‫If you are getting any of the many footer, many of footer, then what you can do is you can go back.
‫You can go back.
‫And now you can go to the footer.
‫So inside this footer, you can go ahead and you can choose the exact same background color that we have
‫been choosing over here.
‫And we're going to be using this right here.
‫And then you can work with the copyright over here.
‫You can just decide that what is something that you want to right over here.
‫So this is what I have written.
‫And now you can see that everything is done over here.
‫Now, what you can do is that you can go ahead and you can work with the footer widget over here and
‫you can decide whether you want to add something over here.
‫So you can either add three or you can add two, and then you can move to the widgets and then you can
‫write add here the widget .
‫So this is what I have added.
‫I can see that I created this about us.
‫Watch it over here.
‫And I added some lorem ipsum.
‫Then I added this help menu.
‫OK.
‫This is actually just right here.
‫I added the navigation menu and I selected the menu to be menu two.
‫And then what I did, I added the menu to to have these pages.
‫OK, then what I did, I add .
‫This particular footer three widget .
‫And inside this I added a text and I said the header heading to be contact information.
‫And I added this stuff over here.
‫Just like that.
‫OK.
‫And this is how you can see that everything is working right here.
‫So once everything is done, all you can do is that you can hit go back and you are right here.
‫Now, what we're gonna be doing is that we're gonna be coming up here and we're gonna be designing that
‫how everything should be working.
‫So you can see we've got this parallax for their effect.
‫What you can do is that you can switch this to on and now you can see how this is going to work.
‫Is it?
‫This is gonna be fixed and now the page will move, but the footer will be just like that.
‫OK.
‫So this is what we call is a parallax footer.
‫Some like this.
‫You can go ahead.
‫You can work for this.
‫You guys, you know about that.
‫And we've got the padding and now we've got the back from color, the text color and the borders color.
‫So you can see that this is the bottom color and we're gonna be getting rid of this border and we're
‫going to be keeping it to be transparent that the border should be gone.
‫Same like this line color on hover should be remained white.
‫Okay.
‫Just like that.
‫And now you can see that our footer and our header is our totally ready.
‫So in the next video, we will be going ahead and we will be working up with designing some of our e-commerce
‫pages.
‫Okay.
‫And what it this is, is that we're going to be designing this particular page.
‫So we will be just working of it, just like how many columns we want and inside how many products we
‫want to show.
‫And do we want to show the pagination
‫.
‫And do we want to just like when we go down, the product should be load automatically.
‫Do we want that feature?
‫And there's a lot of things that you will work.
‫So in the next video, we will be working up at that and after that, when we're done with each and
‫everything.
‫Then I will show you how you can go ahead and how you can work up this particular page and how you can
‫design a really great, awesome website with this.
‫So in the next video, we will be doing that.
‫Stay tuned, guys.
‫And babye.