‫In this lecture of the course, we will be designing the header and footer for our blog website.
‫So as in the previous lecture, we chose the Blocksy theme that I recommend and I would like you to
‫follow this theme if you want to design your blog website according to your needs.
‫Similarly, if you need a much better design and if you are using custom taxonomies like I did for the
‫destination, then I would suggest you go with this theme.
‫So let's just go ahead and let's get started and let's design the header and the footer.
‫Now if you want to use any other theme, you can go with the theme customizer and you can compare the
‫settings that I will be doing for this theme.
‫And you can do it on your particular theme, and you can either read the documentation of that theme
‫and explore the customizer, and it's going to be quite really similar in this course.
‫In this section we're going to be using this theme.
‫So let's just go ahead and let's get started.
‫First of all, what you need to do is to click on the customize.
‫So you will be taken to the customize.
‫Or we're going to be using this theme customizer to design our website.
‫Now as you can see that there are a lot of options that you can go ahead and you can take a look at
‫that.
‫But, uh, since we will be building the blog website, that is why my main thing is going to be focusing
‫on those things that are required for our blog website.
‫So we're going to be focusing on that.
‫So let's just go ahead and let's get started with our header design.
‫Now in the general options I would recommend you go ahead and explore this yourself.
‫These are pretty much basic in this decides like how much your width is going to be like.
‫Let's suppose that if you want to increase it and you see that mostly people are viewing your website
‫on a very big screen monitor, so you can go ahead and you can use that.
‫However, I would recommend you to keep everything to be default, because these are actually the universal
‫settings that you should be doing on the website.
‫However, if you need any custom settings then you can work for that.
‫So I'll be setting this to be 128, zero as that was the default and I'll be going back now.
‫Similarly, you can work with pretty much these things.
‫Like you can see that we've got a scroll to top, which is like if I switch this to on and then I go
‫down, there is going to be a scroll to top.
‫So let's just go ahead and let's publish the page.
‫And now let's view the website.
‫And now let's go down.
‫And you can see that now it's being shown.
‫So if something you do something it's not being appearing.
‫Publish the page and view that in a new tab or in an incognito window and you will be able to see it.
‫Similarly, if you want to design it, you can click on that and you can choose any of the stylings
‫you want.
‫You can pretty much work with it.
‫In the uh, there will be mostly two tabs general and the design.
‫The general is going to be like, uh, a basic styling, and the design is going to be somewhat like
‫if you want to change the icon color, the background color, and something like that, you can work
‫with that.
‫Now we are going to be actually starting from the header section.
‫And by completing the header footer and this blog post and single post and everything, you will be
‫able to understand how this blocksy theme is going to work.
‫And based on those settings, you will then be able to actually work with the other settings that we
‫have over here.
‫So let's just go ahead and let's click on the header and let's start working with the header.
‫Now this Blocksy theme basically offers three headers the top bar the main header and the bottom row.
‫Now we're going to be actually using the main row.
‫We're going to be designing this.
‫And because we need this only a one single row for our blog website.
‫So let's just keep it that way.
‫Let's click on this settings.
‫And this is going to take us to the main row customization where we have got the minimum height.
‫So you can decide how much of the height you need.
‫I'm going to be keeping it to be a bit smaller just like that.
‫All right.
‫So once we have got our header size ready now what we can do we can design this.
‫But before designing this we first have to upload our logo.
‫So what I'll be doing is that I'll be using the same logo that we have used on our corporate website.
‫So what you can do if you want to use the same logo, you can right click on it and you can save this.
‫Once I've got the logo then I'll be clicking on select logo.
‫And now I'll be going ahead and I'll be uploading the logo.
‫Now you can see that the logo has been uploaded.
‫I'll be clicking on select and this logo is now selected.
‫Now what I'll be doing is that once I have actually added the logo, then I do not want to show the
‫title that is right after there.
‫So what I'll need to do for that?
‫Here is the site title.
‫I'll be unchecking this and this is going to be gone.
‫And now you can see that I have got a logo.
‫Now this logo is not pretty much visible.
‫And the reason for that is because we do not have a background color yet.
‫So once we apply the background color, then this logo will be pretty much visible to apply the background
‫color.
‫Since we want to apply it on the main row, we have to go into the settings of the main row, and for
‫that we have to exit out of this logo settings.
‫So what we will do we will click on go back.
‫And now we are in the customization of the header.
‫Now we will select our main row and we will click on the settings of that.
‫And now we are in the main row.
‫And this is actually the main row.
‫Right now we will go into the design.
‫And once we are in the design we will apply a background color.
‫So let's click on the color and let's apply any of the color.
‫Now let's suppose that I want to use uh a grayish color.
‫This is the one that I like the most.
‫Now for this particular blog website, uh, you have to decide like which of the color combination you
‫want to go with.
‫Now, since I like the black and white so much and I want to implement it, I'll be using the black
‫and white color combination now by black and white, I actually mean that we will be going throughout
‫this row like we will.
‫We can use, uh, light gray, dark gray or the full black.
‫So it's totally up to us how how we will be using, but we will not be using any other color besides
‫that on our website.
‫And you will see how great the website is going to look.
‫So let's just go ahead and let's choose any of the color.
‫This is a color.
‫And now you can see that the logo looks pretty good.
‫Now what we want to do is that we have to work with this menu.
‫So for that we have to click on the menu over here.
‫This is going to take us to the customizing header menu one tab.
‫Right now it says select the menu so you can select which menu you want to show.
‫If you select the default then whatever the menu that you will set, whatever the menu that you will
‫set over here in the menu and you select the menu one, it is going to be shown over here.
‫But if you choose any other menu and you create it over here by clicking on create a new menu and you
‫choose that, then that is going to overwrite that.
‫So I would recommend keep it to be the default and always select the menu right from here in the display
‫location.
‫All right.
‫Once you have got the menu now you can see that we have got some of the top level options like how you
‫need the hover styling and everything to be.
‫So this is pretty much basic.
‫This is actually the underline which is going to show an underline right over here.
‫Now you can actually not see it clearly.
‫So what I'll be doing is that for the time being I'm going to be going ahead.
‫I'm going to be going into the header design, and I'm going to switch a lighter color so that you can
‫see it pretty much all right.
‫After that.
‫Later that we're going to be changing the color.
‫So let's go back to the menu and let's change the different style.
‫If I select this tile you can see that this is the style.
‫If I select this tile then there is going to be top line and the underline right here.
‫Now it's totally up to you which of these styling you want to go with.
‫However I think I want to go with the type three, so I'll be going ahead and I'll be using this one.
‫All right.
‫So after that we have got some of the extra stylings.
‫Now I would recommend you to play with it.
‫And you will be able to understand how each and every thing is working.
‫Then we've got the stretch menu and everything.
‫I'd recommend you play with it.
‫If you click on that, it's going to be stretched.
‫All right.
‫So I do not want that I'll turn this off.
‫And for this we have got this uh collapse non fitting items.
‫What is this this this means that if you have a very much bigger menu, then that is going to be actually
‫collapsed into a drop down menu.
‫So if you have a bigger menu then you have to select this.
‫This is selected by the default.
‫So you can leave that.
‫Now we have got the drop down options.
‫And what is actually the drop down.
‫Drop down is this this is actually the drop down menu right.
‫So here it says the interaction type which is actually on hover.
‫Which means that when I bring my mouse the drop down appears.
‫You can also turn that to click so that if I bring my mouse, this is not going to work until.
‫And unless I click on that, then it's going to be appearing up here.
‫So it's totally up to you.
‫I kind of liked the hover way, so I'll be going ahead and I'll be using that.
‫Then we have got the items hover effect.
‫This is actually simple solid boxed color.
‫Now I'd recommend you to choose it then see how it's working.
‫Now these settings are going to be for the hover effects.
‫That is going to be inside this dropdown menu over here.
‫Right.
‫So now we're going to be working with the width.
‫Like how much of the width you need this to be.
‫Like this is actually the width if you want to increase it.
‫You can work from here.
‫The top offset, which means that if there is going to be any of this spacing over here between the
‫drop down and this, and then we have got the horizontal offset.
‫Now this is going to be applied on the third level menu which means that this is the first level.
‫This is the second.
‫And then this is actually the third.
‫So on the third level there is going to be some of the spacing over here.
‫Like if we go into the Middle East there is a spacing.
‫All right.
‫You can see over here.
‫Similarly if we just go dive deeper into it then there is a spacing over here.
‫So if you need this much spacing then you can work with that.
‫Otherwise if you do not need it you can just keep it to be the zero pixels.
‫Now let's just go ahead and let's design this.
‫Now.
‫Since we want to design this, we we want to use the black and white color combination.
‫So I'll be going ahead I'll be going into the main row.
‫And now I'll be going into the design.
‫And I'll select the background color again to be the dark gray which is this.
‫Now let's just go ahead and let's click on menu.
‫Let's go into the design and let's work with it.
‫First of all we have got the font and everything.
‫So if you want to change the font you want to change the size.
‫You want to change the boldness and everything.
‫You can change it from here.
‫I want to work with the colors, so I'll be selecting the color.
‫The first color is going to be white, which is going to be for every of the text that you see over
‫here.
‫I'm going to be keeping it to be a little bit of lighter white, which is this.
‫Then we have got the background color.
‫Now the background color is going to be the full black.
‫All right.
‫This is a lightish black.
‫And this is going to be full black.
‫So this seems perfectly fine.
‫And the about and everything, whatever you will choose, it's going to be for also the active.
‫So if you need a different one for the active, like whatever the page you are currently on, if you
‫need a different one for that, you can choose that.
‫And for that we have got the items border radius if you want that.
‫Like if I just select that then you can see there is a border radius.
‫However I kind of not like it, so I'll be keeping it to be zero after that.
‫You've got the margin and everything now.
‫You have already worked with the margin padding with the Elementor, so I didn't think so.
‫If I have to explain you that, let's go down now.
‫We are in the general tab again in the drop down.
‫So we need to switch to the design of the drop down.
‫And we have to work with the designing for this.
‫Now for the background color I'll be going ahead and I'll be choosing.
‫This light gray again and everything seems fine.
‫Just the font color.
‫So this is the initial font color.
‫This is going to be the hover.
‫And then this is going to be the active one.
‫So the hover is going to be a light gray.
‫All right.
‫Now if I bring my mouse you can see how this color is changing.
‫Now if you want a much uh darker color you can keep it that way.
‫And now you can see when I bring my mouse how this color is changing.
‫Now, this is a pretty much basic, uh, simple design and the reason why we are using this simple design.
‫Because these simple designs are now much more popular.
‫And people tend to like this design because now we have got the apple.
‫And if we go ahead and if we take a look at the Apple website.
‫You can see that Apple website is pretty much basic and simple, and they are using the gray, white
‫and black.
‫And that is why the apple is so much, I think, popular because they have this really simple design.
‫And this really simple design now attracts most of the people.
‫All right.
‫So now once we have got actually the menu and everything, our menu is completely ready.
‫If you want to work with the logo sizing you can just click on the logo again.
‫And then we have got the logo height.
‫So if I want to decrease this I'll decrease it a bit.
‫I'll select 44 pixels and it's perfectly fine.
‫Now there are also stylings for the logo as well.
‫Like if you need custom margin you can go into the design and work with that.
‫Now since we are completely done with our menu over here, we've got our search bar.
‫So let's click on that.
‫And this is the icon size.
‫We will go into the design and we will change the search color icon to white.
‫And you can see that now we've got this for the hover.
‫We're going to be keeping that to be a grayish one.
‫And now if I just click on here you can see that I've got this search.
‫Now what we need to do.
‫We need to go into the general tab.
‫And now in here, here it says, where do you want to show the search label and everything?
‫So you want to show it on the desktop and tablet and everywhere where there is going to be a label as
‫well that shows the search, which you can see over here.
‫However, I do not want to show the label, so I'll be just unchecking this.
‫After that we have got the search results, which is this.
‫So if you will click on here, this is right here.
‫And if I want to search for anything it's going to automatically search for that and give me the live
‫results which is going to be here.
‫It shows live results live results with images and search through the criteria, which means that,
‫uh, do you want to search only the post or you want to search the pages as well?
‫Now, I do not want to search the pages.
‫I want to only search the post.
‫So this live results is going to actually give you the live results whenever the person is going to
‫be searching for anything.
‫So let's just publish and let's revisit the website, let's refresh.
‫And now let's click on here and let's search for gypsum.
‫And okay this right here.
‫And you can see that we've got uh some of the post over here being shown.
‫And person can actually uh, click on any of the posts and it will be taken to that particular post.
‫So this is how the live search is actually working.
‫All right.
‫Now we've got live search results, images.
‫If you want, you can show it if you do not want it.
‫I kind of want to show the images as well.
‫So I'll be clicking on here and this is going to be shown.
‫All right.
‫After that we have got the design tab.
‫So now let's go into the design tab.
‫We have already worked with the search for the main search.
‫We've already worked with the designing tab for that.
‫However we now want to work with this design tab which is the search results.
‫So we will click on the design.
‫And then we have got the font color.
‫This is the initial and this is the hover.
‫For the hover we're going to be choosing a grayish.
‫Which is right here.
‫A bit darker grey, which is fine.
‫All right.
‫After that, we have got the input border color.
‫Which is this.
‫You can see that this is the color being, uh, applied over here.
‫So I'm going to be choosing this to be I think white is going to look good.
‫All right.
‫Yeah.
‫It looks good after that we have got the search icon color.
‫So we are going to be choosing this to be.
‫Um, a bit darker grey.
‫And on the harbour.
‫We're going to choose black.
‫So this is the effect.
‫So, so far so good.
‫Our black and white theme is now fully ready for the header.
‫And then we have got the close button type which is this.
‫You can work with pretty much other things that we have.
‫You can work with the icon size.
‫If you want to increase it, you can increase it.
‫Then you have the icon color.
‫If you want to choose any other color, you can choose that as well.
‫That brings our main row section to the end.
‫And now we are fully done with our main row.
‫Now we already have got the mobile optimization.
‫This is something that we will be doing later on.
‫Now we have got the top row.
‫So on the top row, if you want you can add it like let's suppose that I want to show the social icons.
‫So I'll be just bringing this dragging this social and I'll drop it over here in the main header.
‫And this as you can see already here.
‫Now after that I can just click on the settings of the top row, go into the design, apply a background
‫color which is going to be.
‫Much more darker.
‫All right.
‫And then I can click on the social links.
‫I can go into the design and I can change that as well.
‫So this is how it is now.
‫You can go into the general tab and you can work with the uh social links like if you want to add it.
‫So it says uh, configure the social links in the general social network accounts.
‫If you hover over it and you click on that, it's going to take you here where you can add all your
‫links.
‫And these are going to be appearing up here.
‫Similarly, let's suppose that you also want to add another thing on your header builder.
‫So let's click on the top row.
‫And let's suppose it's.
‫Now I want to add anything else over here like a button.
‫So I can just click on here uh into the header.
‫And then I can drag this button and I can drop it over here.
‫The button is going to be here.
‫And now let's suppose that I want to style this so the button can be anything like advertise on the
‫website.
‫All right.
‫And this is going to be the ghost one.
‫This is the one I like the most.
‫You can create a page, add a contact form.
‫You should already know how it's going to work.
‫All right.
‫Open the link in a new tab and everything.
‫You can work with that.
‫After that we have got the design.
‫So I'm going to be designing this the text color.
‫Let's change that to white.
‫And the button color.
‫Let's change that to white.
‫Then we have got the hover.
‫So change that to gray.
‫And let's see.
‫You can see how amazing and beautiful this is.
‫So if you want to show uh this top bar then you can show it like that.
‫And you can create one if you also want to add a bottom row.
‫You can go back and you can add particularly anything if you want to design it.
‫The sky is the limit.
‫All right.
‫So now once we are actually done with that then we have to now work with the footer.
‫So let's go back and let's click on the footer.
‫And now this is our footer.
‫Now I'm going to be keeping the footer to be pretty much simple just to copyright text.
‫So I'll be just clicking on the settings.
‫Go into the design.
‫Now change this uh main bottom row background color which is going to be a dark one.
‫So I'll be selecting that and then I'll be going ahead and I'll be clicking on the copyright text.
‫And I'll change the font color to be white.
‫Similarly, if there are any of the links in it, then that color is also going to be white.
‫And if you bring your mouse to any of the link, then that color is going to be turned blue.
‫But I want to turn that to actually, uh, grayish right here.
‫Now you can go into the general tab and you can add anything else over here copyright.
‫And you can add any of the year.
‫Like let's suppose that this website is live from the 2019.
‫And then you can add a dash over here and you can right here.
‫Website design by.
‫Your team name.
‫All right.
‫So this is how you can go ahead and you can pretty much work with the footer.
‫Now there are further things that you can do.
‫Like let's suppose that you want to add your social links.
‫You can drag that and you can drop it over here.
‫The social links will be appearing over here.
‫All right.
‫Similarly you want to add a menu.
‫You can drag that and you can drop it over here.
‫Then you can go into the menu create that and work with it.
‫But I want to keep it to be the simple.
‫You will be adding the sidebar and we will be using the widgets based on that.
‫And then um, I will also show you that if you want to add multiple widgets and you want to create a
‫much more bigger footer, then how you can do that using these widgets that you see over here.
‫But we will be doing that when we will be working with our sidebar things.
‫All right.
‫So now since we are fully done with our website now, we'll be going ahead and we will be clicking on
‫publish.
‫And now let's just go ahead and let's take a look at the website.
‫So this is now our website are about categories and everything.
‫Our drop down menu, everything is seems to be perfectly working.
‫All right.
‫And if we go down we have got our footer as well.
‫So that was all our website header and footer is now fully ready.
‫From the next lecture of the course.
‫You will be now moving forward with our website design.