‫Welcome back, my dear students.
‫And now in this lecture of the course, we will be working with the transparent header feature for our
‫blog website.
‫So let's just go ahead and let's get started.
‫Now you can see that this is how our header looks like for our website, which is in a solid color.
‫Now let's suppose that instead of this solid color, I need that to be transparent so that whatever
‫the image and the overlay is being shown, it should be shown up here as well.
‫And the header should be really transparent.
‫This is the effect that you may have seen on some of the website.
‫And this is something that we're going to be implementing on our particular website.
‫Now this particular solid header is good on the category pages.
‫Like if you go to any of the category pages this looks really professional.
‫It looks amazing.
‫If you go into any of the destination pages then this is how it looks.
‫It looks perfectly fine.
‫However, for our home page, this doesn't look good because we have got a hero section right here and
‫now.
‫Let's suppose that if we want to want it to be a transparent header so that it just goes up to the top,
‫and then the background image should be to the header as well, only for the home page.
‫So how we can incorporate something like that.
‫This is something that we're going to be working in this particular lecture.
‫So let's just go ahead and let's go into the theme customizer.
‫Now once you are in the theme customizer then you have to go into the header headers.
‫Click on the global header.
‫And this header has now the sticky functionality.
‫This is something that we added so that if we go down then the header should be sliding down.
‫Now let's suppose that instead of this sticky functionality, we also want to add the transparent functionality
‫only on the home page.
‫Then how we can do that?
‫For that you have to go into the global header go down.
‫And here it says the transparent functionality, which is the functionality that the Blocksy theme offers.
‫So you can click on that.
‫And now this header is going to be transparent.
‫And for that you need to go down.
‫And here it says display conditions like this transparent header is going to be displayed on whatever
‫the conditions that you will be setting over here.
‫So first of all we will click on Edit Conditions.
‫Now here it says transparent header display conditions like where you want to show the transparent header.
‫So here it says I want to include this on the entire website.
‫However I want to exclude them on the 404 pages, the search pages and the archive pages.
‫You can do it like that, which means that all of your static pages are going to have this transparent
‫header.
‫So if you do something like this and then like the default settings, and then you go ahead and you
‫hit on publish.
‫And now if you visit the website then you can see that this is how the header is.
‫If we go to the about page then this is how the about pages.
‫Now you can see that the contents that we have over here for the about page is now upwards.
‫If we go to the category pages then this is how the category page looks like.
‫And it has a solid color.
‫And the reason why this category page has a solid color is because in our conditions, we have said
‫that we want to exclude all the archive pages or the dynamic pages that we have designed.
‫So if we go into our this page, then this page also has a solid color.
‫However, our static pages now contains a transparent header.
‫So let's suppose that I want to design it this way so that only my home page should have a transparent
‫header.
‫How can I design that for that instead of the entire website for the include, I will click on that.
‫I will now go down and in the pages.
‫In the pages I will say that I want this to be only on the front page.
‫I'll select that.
‫I'll now hit save conditions and now I'll hit on publish.
‫Now I'll go back to the website.
‫I'll refresh this.
‫I'll go to the about page.
‫And the about page is like this.
‫So about page now does not contain a transparent header.
‫These are the customizations that you can already do.
‫So let's suppose that I want to show the transparent header only on the front page.
‫This is done.
‫Now once I am done with that then I can go ahead and I can work with the main row, the top row, the
‫stylings for everything.
‫So the styling that I want to do is that let's suppose that I do not like the solid background that
‫is being shown.
‫All right.
‫So I will go into the menu settings.
‫Once I am in here I'll go into the design.
‫And in here I've got the.
‫Default state, which is this the transparent state, which is going to be inherited from whatever the
‫setting that you will be adding in here until and unless you define the color.
‫Similarly, there is also a sticky state.
‫So sticky state is this.
‫If I want to change anything on the sticky, then I can also change that.
‫But I want to keep everything to be default.
‫I just want to change it on the transparent state.
‫So on this transparent state, I don't think this, uh, black color is looking really good.
‫So what I will do is that I will say that on hover and active, I need a black color, but I do not
‫need it much.
‫Uh, darker.
‫I need it to be a little lighter kind, a bit like that.
‫And then I also want to work with the transparency.
‫A bit like this is something that is now much more visible, and it looks good.
‫So this is something that you can already do, and it's going to be applied to your active pages as
‫well.
‫Until and unless you click on the active page and you change that for that.
‫But I want to keep that to be same.
‫And this is how now you can see it looks and my header elevates.
‫It looks good.
‫Similarly let's suppose that uh I want to differentiate.
‫All right.
‫Like I want to give my users an effect that this is still a header but this is a transparent header.
‫So how I'm going to do that.
‫For that you can click on the main row main row settings.
‫And this is now these are the now settings for the whole main row.
‫And now what I'll do I will say that for this whole main row I need to work with the design.
‫And for the transparent state which is transparent I do not need it fully transparent.
‫I need it black, but I need it very light.
‫Kind a bit like that.
‫All right.
‫And now you can see that this is how it looks.
‫Now I'm going to be copying whatever the value that I've got over here.
‫And now I'll just go into the top row as well.
‫And I will now go to the design transparent state.
‫And now I will paste in that value.
‫And this is how now it is now.
‫Similarly the top bar I can make this top bar to be a little more darker and see it over here.
‫All right.
‫See over here.
‫So once I decrease this this is how it's lighter.
‫You can keep it to be lighter as well if you want.
‫You can also keep it to be darker as well, or much more darker if you want.
‫So I want that to be much more darker.
‫And this is how now it looks.
‫And now I can hit on publish and my transparent header is now completely done for the home page.
‫Now I can click on go back and this is how it looks now once everything is done.
‫This.
‫The travel blog over here has gone up because our transparent header is now effective and it's on top
‫of it, and our background is now over here.
‫So what we need to do is that we need to select the section or the group that is holding this particular
‫background image, and we need to apply some of the top padding.
‫So what we will do we will go into the edit page.
‫And once we are in here we will click on this navigator.
‫We will select our hero section.
‫And inside here we have our group that is actually holding the overlay.
‫So we will select our group.
‫Once we have selected our group now we will go into the styles tab.
‫We will go down and we have got the top and the bottom padding.
‫So what we will do now we will click on here.
‫And we want to add the top and the bottom padding.
‫So what we can do we can click on this padding options.
‫We will say that we need custom for the top.
‫So we will click on that.
‫And now we have got custom padding for the top.
‫And now we will increase that more.
‫So once I increase that more then I've got more padding from the top, so I'll increase that a bit more.
‫And now I will hit on update after that.
‫Now if I just come up here and I refresh, then you can see that now I've got much more spacing.
‫The header looks transparent, it's transparent, but it has a slight overlay so that it also differentiates
‫it.
‫Okay.
‫This is something really very uh different.
‫All right.
‫So that is how you can go ahead and you can implement transparent header on your particular website.
‫Do make sure if you want to add the transparent header, the header whatever the hero section that you
‫have will go up.
‫And that is why there is not going to be spacing.
‫So you can add the top padding so that it just shifts downwards and the heading looks good.
‫That was all about the transparent header.