|
After Watching Video , Get the Best Wordpress
Themes in the World
( Download
Now )
|
in this video we're going to talk about , Astray and the headers of your Astray , website it'seagoing to be an in-depth , tutorial hi my name is Adam from WP , craftier where I release a ton of , content to help you get better results , withdraws faster if you're new here , consider clicking on the subscribe , button and if you want video , notifications click off to the little , Bell off to the right of the subscribe , button and YouTube will let you know , when I have a new video up and , everything that Talked about will be , linked in the video description box so , this is going to be an in-depth tutorial , about the Astray theme and all the , various options with the header mean , there are so many different ways that , nowadays to have a header on your , website you can have the one that your , theme generates you can make one with , the page boldest Pro has some , options for transparent headers sticky , headers different dynamic page headers , there's so many different options every , single one is going to be covered in , this video remember this is a tutorial , series on theatre theme in the video , description box i have a link to the , playlist so you can watch all of the , Astronomer tutorial videos so that's it , for this intro let's get into the , tutorial now I'm gonna be going overall , of the option sand there area ton of , options for headers with the Astor theme , and I am gonna go through the mall in , this video , so there's always a couple things when , it comes to headers that you need to , keep in min din the first one is the , most obvious one and that's the mobile , responsiveness so it's one thing to have , a header for the desktop version of your , website but also what's most important , is how's it gonna look when it is now on , a mobile device and scrunched in , together and the other thing we want to , keep in mind is something called schema , so you're gonna hear me say this schema , phrase and essentially what schema is is , different bits of code on your website , that let Google know or a search engine , crawler know what each portion of your , website is so there's scheme , to tell Google this is the header this , is the main body content this is the , footer etc etc so you might hear me say , that word few times in this video now , typically your header is going to , contain a few standard things number one , it'seagoing to definitely most likely , have your logo and nowadays you actually , have to have two versions of your logo , you have to have the normal version and , you also have to have one in double the , resolution which is known as retina , logo and thank goodness , Astor supports very simply a way of , having in a very efficient way of having , this retina logo automatically display , on displays that are higher resolution , which you find on all mobile devices and , a lot of the newer Mac devices and newer , monitors you have this fork a higher , resolution going on so you definitely , don't want your logo blurry , the second item you typically have Ina , header is going to be Amen and now , many users other ways of doing it if , you're using for an example element or , they just added menu creation widget , it's pretty neat I'going to show you , that in this video and also ultimate , add-INS for beaver builder has a menu so , we're gonna talk about that as Welland , you may also want to add a call to , action in your header this might be a , button or maybe some kind of format of , your business hours or your business , phone number or something like that to , call people's attention to and leave , that in the header so these are pretty , much the main items you're gonna find in , a header and we have lots of different , types of headers now so we're gonna talk , about in this video your standard header , and this is what'gonna come in the , free version of Astray it's just your , standard header and you're gonna have , several different options available with , that then with that we also have , something called the sticky header and , that is when someone Scrolls down the , page it will stick to the top your , header so those menu options in that , call-to-action information is always , there on the page , we also have transparent headers and , these are what you see actually right , now on theatre website it's , transparent so what's created in the , page builder there in the background is , kind of pulled up and your logo and your , menu and your call-to-action in this , case it's the button just appears on top , of that bit of content so we're gonna , talk about transparent headers and how , to turn that on you can also put a menu , in a header via a shortcuts you may , want to do this if you have the , Element or Pro and you want to make your , menu in that you can you can do that , we're going to talk about that and , lastly is creating the entire header , itself element or beaver builder , so essentially using your page builder , to build out the entire header and we're , gonna talk about that as well actually , we're gonna start on that because I , think that's a good place to start so , I'll make sure differentiate what is , done with the free version of Astray and , what is the requires the paid or pro , version of Astray so actually let me just , look at that right now , I'gonna click here on Satrap so the , transparent header this is with the pro , add-INS for Astray do know that the , developers of Astaire considering , adding this to the free theme and that , is a big possibility sticky header , that's gonna be in the Pro page headers , this is one way of implementing the , transparent header and this is a pro , feature and when I scroll down right , here there is more header designs and , this is coming soon right now you're , gonna see in this video there's only , three header designs however they are , gonna expand that and a with a later , add-on for the Pro and I will guarantee , be putting out a video right right when , they release that demonstrating the new , headers and actually with that just , want to preface I should have said this , in the very beginning of the video this , is gonna be one of those videos where , you're going , want to look at the video description , box not only DI have the link to Astray , there but that'sphere I'm gonna keep , you updated because lot of these , things I'm talking about our subject to , change and they're not going to change , for the worse they would only change for , the better so I was actually gonna , release this video yesterday and the , reason I did't is because was waiting , on a little bit of information and I do , know somethings are gonna change , I'll make sure as I'm demonstrating them , in this video that I let you know that , this may change and it might be more , simple to do in the future with an , upcoming update to the plugin and i will , make new videos on how to do just those , particular parts and will link that in , the video description box and I'll also , put it in the pinned comment that's the , first comment in the comment section so , like Is aid I'm gonna start with using , your page builder to build out your , header so here I am back on that website , that I'm using to demonstrate everything , now to add ahead er that is built with , your page builder it's super easy you're , gonna need the this plug-in right here , header derailment or beaver , builder header footer depending on the , page builder you're using so if you're , going to use Element or it'll be this if , you're gonna use beaver builder it will , be this one if we look back here on my , website I have both of them installed so , I am going to activate one of them at a , time and demonstrate it for you now this , is one of those items that is subject to , change this will work with the free , version of Astray perfectly fine do , know that they are gonna build enhanced , functionality for the pro version of , Asturias right now the way it work sis , when you create a header or a footer , using this it will be global across your , entire website what they're adding is , the same ability to create these headers , or footers but you will have page , targeting meaning you can just have it , appear on certain portions of your , website so it'll be more Dinah , so let's let's get in here'm gonna , start here I'm gonna activate , header/footer Element or now here is the , trick with element so if go , let'just go there first I'm gonna go , to appearance and there's this new , option header/footer builder now when I , look at here can go ahead click on add , new and I'll just go ahead and name this , header and then'll go ahead and click , on publish this is actually very Nice , did a video on this plug-in recently and , this options't here by default and , it looks like it is there now so , essentially you want to make sure this , button won't be here this edit with , Element or or edit with pay with beaver , builder will see exactly how that looks , when we do it with beaver builder in a , moment so what we do next is we would , just choose what you're creating , header or a footer say it's a header you , would choose that go ahead click on , update and then right now all you have , to do is click right here where it says , edit element it's gonna pop this , open inside element and you can , literally start building your header so , what you'd probably want to do is you , would want to click on add a new section , and you might want it to be like this , and you could resize this drag your , image here and drag your navigation , option right there now the navigation , widget here revilement is only in the , pro version so anyways I'll scroll down , here so essentially you would just want , to go ahead and create an image right , there and pop that in and then you would , want to go back and let's find that Navy , menu right there'vie already created a , menu let's just it's right here it's , main and then you just want to style , that out so for this example'll just , push it off to the side now both beaver , builder endearment have some , centering options let me go ahead and , add a logo here so I'm going to delete , that default LOGO have theatre logo , here on my website so let's see the new , go ahead and click on this plus I'm , going to drag my astral logo in I'll , click on insert media and there Otis , there'st he logo here is everything so I , can shrink it down like that now there's , alignment issues and this is just the , way that page builders work both beaver , builder endearment have an option to , Center everything vertically so this , right here needs to be centered , vertically if you see right now it's , kind of more to the top where you do , that inclement as you click on the , column options right here it says , content position and you would switch it , to middle and then now it's perfectly in , the middle like that and go ahead and , click on save now I'll get out of here , just like this and I'll go back to the , dashboard and let'stake a look at the , website let's see I'pretty sure I , chose this and clicked on update let me , click update just to be on the safe side , and then I'gonna go ahead and view the , website right no wand you can see there , Otis I'vie Castro right here and here , is the menu that I could have styled if , I wanted to in Element or and this will , appear on every single website if I , wanted a background I would have added , that background inclement but right , now it's left to just the color that it , is and that'pretty much all there is , to adding ahead er or footer customize , now what's going to happen in the future , is this is going to turn into a pro , add-on for Strand you'll have page , targeting options here so you can have a , separate heading if you wanted then your , regular pages or different different , options like that it'serially nice when , you have a dynamic website like maybe an , e-commerce website you can show a , different header on the e-commerce side , when someone'sin your shop versus when , someone's on the rest of your website so , I'm gonna go ahead and deactivate this , and we'll just take quick look at the , beaver builder version so I'm going to , deactivate and then for the beaver , builder one I will activate this and , then go to appearance , I actually don't see it listed here is , an option I'm wondering if there is some , sort of conflict because I'm trying to , run both on the same website so I'm , actually not going to do this in beaver , builder however it's the same exact , thing the only negative though with , beaver builder is you will need ultimate , add-INS fora beaver builder because , beaver builder itself doe snot have a , menu module so you're not going to be , able to build a menu with just beaver , builder , you will need ultimate add-INS for , beaver builder the paid version of this , as well in order to create a menu using , beaver builder for the header and the , footer now one other thing is you can , also build your it's obvious , self-explanatory you can obviously also , build your footer there's a very same , way using this very same method okay so , now let's take a look at the standard , header options and these are going to be , just using the standard header that , comes with your theme an dis built with , your theme now everything's gonna be , done in the customize so let's go ahead , and go to appearance and then customize , and take a look at our option snow I , will tell you my preferred way right now , for having header is the one that the , theme sets up in controls I'm not into , having just yet having the page builder , do it , I am much more preferring having my , website to it now I know that , Element or is coming out with its own , header and footer builder now when that , comes out if you're an element or pro , user you're definitely gonna want to use , that or look into using that because , that would give you your most powerful , options but me personally I much more , prefer to use the the header that I'm , gonna be able to build with my theme and , the reason is because If ind that it's , more mobile responsive or just looks , better Ina mobile device so first what , Want to do is I want to let's look at , the options right here for the logo then , we'll look into the options here for the , menu , and then we'll get into some of the , layouts so for the logo that'always , pretty much on Andres's site going , to be under the site identity so right , now it'ssh owing the site title it'snot , showing the tagline but if I want edit , to show the tagline you can go ahead and , click on that checkbox and it's gonna , show the tagline as well this is not bad , if you don't have a logo and you just , want to have some text in there now one , of the changes coming up in aw eek or , two you'll be able to put like a logo , icon and it will appear off to the left , of the logo there so if you don't have a , graphic designer you can just put some , kind of icon relating to what you do or , maybe even a picture of yourself right , here off tithe left and then you can , have full control over the text but , that's not here now so if you wanted to , use an image for your logo most likely , you're gonna want to disable the site , title so we'll click on that checkbox , and you're gonna want to disable this , tagline just like that and it's gonna , make them both go away now the only , reason this Hans't gone away is because , the theme is smart it knows you haven't , uploaded a logo yet so I'm gonna go , ahead and click on select logo and I , already uploaded this Astor logo I'm , gonna go ahead and click on select , whenever you get here just click on skip , cropping and wants to screw it up just , click on a skip cropping you don't need , to crop anything so it's gonna refresh , right there and obviously it's like oh , my gosh this is way too big this is not , what I want and luckily there is a , setting underneath here if you haven't , uploaded your logo in the size that , looks good to you you have this dial , here you can go like this or you can go , like this you can make it whatever size , you want so this is actually controlling , the width so you can go like that too to , make it just how you want it so maybe I , want that to be W and that'just how , wide Want it and that's all you have , to do to get your lo goon the site now , for the retina logo this is what I was , talking about where ass , makes it really simple to have a , higher-resolution logo that will , automatically show when someone's on a , high-resolution display so I'm gonna go , ahead and click on select image and I do , have it right here and I'll show you , that the the resolution is a lot higher , it dozen't need to bean exact double , typically it'SA double so whatever the , dimensions are of your normal logo your , retina logo will be double so right here , is the normal one when I click on this , you can see I'vie got my dimensions right , here right there and when I click on the , retina one you can see it kind of is , pretty much a double and that's fine it , could be just like that so I'going to , go ahead and click on choose image and , we are pretty much set that'Sally it , takes to get the logo in there so I'm , gonna go ahead and go back and I'm gonna , go and set my menu so there's lots of , ways of doing this you can do it in the , bookend Wardress'll do it herein , the customize clicked on that and I'm , gonna click on main this is the menu , that created and I just need to assign , it right here to the primary menu so I'm , going to go ahead and click on this , checkbox and we're gonna see my menu pop , right on in there just like that let me , do quick save and publish so this is , now set up to have our logo an dour menu , now what's also nice is there's more , options there's more things we can do , here and those options are going to be , found right here where it says layout so , click on layout and then click on header , and you see we have these different , layouts available remember I said , there'three but to the pro version , there are more layouts coming so you can , go with a kind of popular layout like , this that I see on a lot of blogs and , businesses where you have the logo and , then you have the menu underneath it and , then I'm assuming this would be for your , right-to-left websites but for my , purposes I want the standard logo on the , Left menu on , right just like this okay and we are , back now we also have this option right , here and this is really cool this is , given us an option to place some custom , element off to the right of the menu so , right now Have it set to none but if I , click right here it will show me the , little search icon you see'vie got the , little search icon there right now we , also have the option of having it be , some custom text or HTML that I put here , and it by default populates this , button text like that and we also have , the widget so I know a lot of the , ostracism's are leveraging the , widget area to put a button or something , like that in there just like that and , later in this tutorial we're actually , going to use this widget to put a custom , built menu from our page builder so you , have these options right here now let me , go ahead I'll leave that at widget and , then I'll show you the widget area for , it actually let'just do it right now , so I'gonna go back I'm gonna go back , one more and I'm gonna click on widgets , right here and you have this header , widget location so I can go ahead and , click on add widget and I can choose to , add anything right here but typically , what you're gonna want maybe is to add , some HTML code or just some text so if I , go down here to the text widget right , here there Otis now you're probably not , going to want to give it a title because , if you give it a title it's gonna appear , above whatever the main content is so , right here can just say fill in a , phone number and there it is I put a , phone number in and we can even put a , call to action on the top I just put , call no wand I'vie got my phone number , and we can further style this we can , Center it we can make parts of it bold , we can do whatever we want it's , obviously looking Little basic right , now I would't recommend doing this but , it's really nice and this is a very , unique feature withdraw that it has , this widget area here it's actually , quite , so let me go ahead'll actually leave , that there right now why not so I'm , gonna go back into my layout and let's , go back into my header settings next you , can see we have this border bottom size , so that's just a thin border here at the , bottom and you can see the way it's set , up by default it kind of makes it look a , little lifted it's one pixel in size and , it has this color here so if took that , away just like that you can see it , dozen't have that kind of lifted effect , anymore but when you go like this you , can see there's a thin line going across , that gives it that quite lifted look now , you can obviously set this to whatever , you want now here is the width of the , header I think well it's up to you if , you want full width or content with the , full width will show you like on the , very left will be your logo and on the , very right of the page no matter how , wide someone has their web browser open , on the far left will be the logo on the , far right will Bethe menu this is , probably not what you want or you can , definitely give iota shot and try it out , so if you stick to content with it's , always gonna kind of be lined up with , the content on the left and on the right , that's what I tend to choose but some , modern website designs you do see a go , full width like that and that'salsa an , option now these next two settings are , with the mobile what the menus gonna , look like or the headers gonna look like , on amble device and I like that , there's some settings here so in the , customize you can actually change the , view so if I click right here it'gonna , switch it immediately to how it's gonna , look on a mobile device and it's fairly , accurate so we have this option right , here and we can choose label for this , button so right now we have this button , and when you click on it it shows , everything we could put a label on it so , if I wanted to put menu you can see now , it says menu now for most people they're , gonna know what this hamburger icon is , and you probably don't need to put menu , there but there is depending on the , typical , group of people that visit your website , it might be helpful for it to actually , say menu okay some people can get , confused and then right her ewe have the , alignment option so this is inline and , this is stacked so when I switch to , stacked you can see it's gonna put the , lo goat the top the menu at the bottom , like that I personally prefer inline , just like this everything on one line , so now I'gonna go back to the desktop , view and this is pretty much all the , options for the just having a standard , header that your theme controls and all , of these options are actually available , in the free version of Astray it's pretty , pretty flexible if you ask me to have , all of these options available now the , styling controls are available in the , pro version and this would be the colors , of these fonts the fonts themselves all , of that those are going to be options , that are available in the color sand , background so I can choose that and then , right here we can choose the different , menu colors and this is nice to have all , these option sand you can also go here , and change the background color but you , could do the background color in the , free version of Element or as Welland , let'stake a look at the typography so , you can go typography then choose menu , and you have full control over the Depart , but also if I had the site tagline and , the site title enabled right here there , would be option sin here to change those , fonts let's actually do that really , quick so I'm gonna go here I'gonna , enable these site title and'll enable , the tagline they're gonna show , underneath it but like I said they're , gonna actually move it to be inline with , the logo which think is a much better , option and then I can go into typography , here believe it's the header option , there it is you notice how the header , option and typography wan't there a , second ago and that's because if you , don't have it enabled why even show you , the option that's one of the beautiful , things about theatre theme is that , smart , that and you can do the same thing for , the colors you can go colors and then , header and before remember you just had , the background color but now because , it's enabled you also have these site , title options right here so this could , be perfect for someone that dozen't have , a logo yet but definitely wants to have , some branding and options for the text , that shows so let me go ahead and , disable these two like that and I will , go back so this is pretty much your , standard header and this is what comes , to the free version of Element or so , let's go ahead and do is click Save and , publish and now let's go ahead and look , at the options for having a sticky , header they're gonna be found by , clicking on layout and then sticky , header right here and then here's an , option to enable that sticky header and , remember this is just an option found in , Astray Pro so right here you would choose , if you wanted to have different logo , for the sticky header you can do that , right here and you can also put retina , version let's back up a bit and actually , demonstrate it so you can see when I , scroll now it sticks a little and it , kind of has that lifted effect like that , let's see that okay so now let's look at , these options so you can have the logo , change if you wanted to could be smaller , a different size a different logo and , the reason why you might want it to be a , different logo as well because you maybe , you want the background color to be a , different background color when you , scroll or something like that or have , some opacity or anything like that so , you have the width option snow in order , to use these dials you will actually , ha veto put LOGO Ora sign a logo in , here so let'sago ahead and do that , because already have it so right here , is the normal logo and then right here , is my retina logo and when scroll down , let's make the logo smaller than it , would be so now you see there are , options to change the size so say I , wanted this to Beau little small , like that so now there's Little bit , more of a dramatic effect in the size , when I start scrolling up or down okay , but you have to have the sticky logo , assigned to be able to change that those , properties next is this background , opacity this is how see-through it is so , you could adjust this to whatever you , want so it's white but then as soon as I , do that you see how it's kind of , see-through so you have those options , right there let me go ahead and make , that reset and then there's the shrink , effect so I don't know if you notice , that there's that momentary shrinking , going on but you can disable it right , here like it so I would keep it you , see you know there's let there's no , animation or effect going on there so , there it ISO like to keep that there , now we also have these other animation , effects we can do Prefer none , personally but you can have a fade , actually fade might not be so bad so , here Otis you see how it fades uni , scroll Dona little bit and then it , just kind of fades in that's not bad , right there and then here'st he slide , option okay so I'm going to scroll down , and you see how it just kind of slides , down so you definitely have a ton of , great animation options there as well , and actually like this right here hide , Ina scroll down so what this is going , to do is when you are scrolling down , it's hidden but the minute you start to , scroll up then it shows this has also , been referred to as a smart scroll , header so you see like that and Think , this is the option would choose mostly , because it keeps the header out of the , way if someone's scrolling down they , obviously don't need the info in the , header but then when they start to , scroll up that's usually when they want , to scroll up to the top and then that's , when it's a good idea to make those , options available so that is a really , cool option right there and lastly for , the sticky header we have these display , options if you just want it on desktop , and typically you just want it on a , stop you don't want it to also show on a , mobile device because mobile device , you're already dealing with limited , space so you might not want it , personally only prefer the desktop but , you can do it on a mobile if you wanted , to and you have these options right here , which Think are awesome , so this is actually a pretty deep , feature set for the sticky header am , so glad that they put all of these , options here these are every option that , I could think of wanting wit ha sticky , header but I'm gonna turn it off so I , can continue on in this tutorial so now , let's talk about having transparent , header so I'gonna go ahead and get out , of the customized here now this is , going to be one of those things that , they are going to simplify right now the , way you do it is with this option here , under appearance and then Strand , there's this option here that says , advanced headers some people have felt , that this is a little complicated so , what Think they're gonna do in the , future is they're gonna make an easy , option to enable it in the customize , and just put all the options in there , and make it real easy what you're used , to and then they might change this name , from advanced headers to maybe page , headers or something like that Think , those are some of the ideas bouncing , around so this is where you're gonna , want to check out the video description , and I'll put a link Tao new dedicated , updated video if that change has , occurred okay so it's now transparent , header time and I gotta be honest with , you transparent headers for websites , Word Press websites can be a little , complicated in the way that most themes , implemented is very problematic okay so , the reason is is because there's , different that I'll just have to show , you actually it's kind of hard to , explain but I will try to show you so , let me give you a couple examples so , right here is on theatre's website you , can see on the blog we don't have a , transparent header we just have this , purple head , but then right hereon the very same , website you have this transparent header , where you can see this is a background , gradient and actually thin kit's an , image on the background like that and , all sort of blend sin together now let , me show you the difference between these , two pages this page here was built with , a page builder so it's very appropriate , to do this transparent header because , essentially everything is built in the , page builder and then when the site goes , live the background for the top part of , this page builder just lifts up and this , beautiful header gets laid on top of it , and you have total control over the , spacing and everything but when you go , here you don't have this happening why , because this page right here was not , built with a page builder this is just a , native blog post so you don't have the , page builder aspect so on this part of a , web site on a blog post you don't want , to have transparent header so does , that kind of make sense because you're , not using a page builder so if you did a , transparent header it would just be over , this kind of a grayish background and it , would not look good , so with Depressing themes make it , global it can be a little problematic , and know this might be a hard concept , to understand and there's also this , weirdness with archive pages so if I , click right here where it says news this , is called an archive page in this as , well these are obscure pages on your , Word Press based website that people , don't even think about where you're not , doing this with a page builder as well , it's just something automatically , generated by your theme so you have all , these different variable sand that's why , transparent headers can be a little , tricky and hard to understand at times , so here I am back on that website and , I'm going to give you some advice of , what I recommend so the way we're going , to create this we go to appearance we go , to Astray have this option right here , says advanced , header sand I'veal ready created to , transparency header with no title and , then transparency header with title now , you can create as many of these advanced , headers as you want and you can even , specifically apply them with rules so , you don't see anything here here because , I haven'tap plied it anywhere with a , rule so one of the things I'going to , need to do is this right here is I , haven't assigned homepage so let me go , and assign a page tithe home page , really quick so the way I'going to do , that I'm going to go to settings'm , gonna go to reading and then for the I'm , gonna change this for Otto show your , latest post too instead choose a static , page and on the front page I'll show , this blog page okay that I'vie created , let me save it and then go here and now , do a refresh of the page so now we're , seeing the blog page right here it's a , specific page set to Bethe home page of , this website so this is important now , let me go back to where I was Astray and , then I'gonna go into advanced headers , and let's go ahead and take a look at , each one of these first let's take a , look at the transparent header with no , title and let's look at the settings so , you have these three tab options right , here so the first one is if it's gonna , include the page header with the site , header and what this means is underneath , the actual header it will show like for , here it'll show the page title or post , title and then underneath that the , breadcrumbs , and here's the same thing but it'll show , the title on the left and the , breadcrumb son the right so you can see , with this advanced header I have it set , tithe third option which is no page , header okay and then I'm going to click , right here for site header and this is , what you need to fill out sou enabled , transparent header so when it's not , enabled this is what it looks like and , then you check this box you need to put , in your logo again and your logo might , you why , might want it to be different so if it's , a darker background you might want a , lighter logo so that it it just fits , right so you'll do that and we'll choose , the logo with you saw me earlier in the , video Inset it to that's the width , of the log owe set that again and then , we have these other options right here , so if want there to be a slight color , we can go ahead and enable that here's , what that looks like so actually they , did'tenable a slight color but they do , have this slight little border right , here actually where was it there was , this is actually something else I wanted , to show you let me go back right here , here are some examples of what the page , header with the page header looks like , the two option sand you can see there's , a slight tint in this that is that , setting right here where it says , background overlay color so if you want , one you could do it if you don'you , don't need to and it can still be , transparent or see-through and then we , have this border bottom size and that's , what we see implemented right here this , is like one pixel border and you can , see it's Avery light color if you , wanted to set that so you can increase , this to one or two probably one and then , you could choose the color then we have , some different options we can apply to , the primary menu so you can put a , background color on the menu I don't , usually like websites that do that but , you'll definitely want to change the , link and the link active for the menu , set those both to white and I chose my , menu to be the main menu so this is how , Have it set up here are the display , rules now you can use these display , rules in just when you click on this box , you can apply tithe entire website you , can apply it to specific pages and and , special page sand specific posts and , whatever you want you could do it that , way and right here you can choose to , show it to people that are logged in , logged out or a certain role so here is , what I find the problem if I was to go , ahead and choose entire web , right just like this and then click on , update it's going to apply to this page , because I chose entire website but it's , not gonna look good because it's just , gonna essentially get rid of this and , it'gonna have this other color for the , background so when I do refresh and it , also lifts it up by the way because like , I Saudi'm not using a page builder to , build this blog page this is what it , looks like you can see you know this , dozen'really look good at all and so , this is a problem so let me remove it , and not display it there on that page , let me click on update now let me show , you the other page transparent header , that set up so let me go back to all , advanced headers so that was the one , with no title and here is one with the , title so the settings on this one are , going to be identical in this column , here they're going to be exactly , identical but for here chose this page , header option to go along wit hit and I , did't activate breadcrumbs it's fine , chose a text color of white eye for the , background I did't play around with , these options here but you can adjust , the size'll show you what it looks , like in minute here's a fixed , background calorie chose an image and , what this is well you're gonna see here , in a moment , and I could pita overlay color over , that it's pretty dark Id on't need it , and I could even make it parallax I , did't even realize that let me just do , that just because okay now let me go to , display rules now let me go ahead and , make this the entire website and click , on update okay now that that's updated , so you can see this is what it looked , like the other transparent header and , now when do a refresh we can see this , is that it I should probably crop the , image we don't see the actual , fist-bumping of it but that's okay so , you can see NOW have this kind of a , transparent header bu tit's but with , this background image and I'vie got that , title going on right there , but see if I have a different home page , or a services page or a contact page , that I'm using a page builder- to build , I might not want this I might want it to , be no page title and I might want to , totally do something entirely different , but if I have this set tithe entire , website there really is noway to , override it , so let me remove this and show you what , I think my best advice to you would be , so you could create an advanced header , and apply it to specific items or this , is what Think I want to do let MEGO , ahead and do a refresh and you'll see it , goes back to normal so what Would , recommend is this one of two options one , you could target your pages better or , posts better with the display rules so , instead of doing the entire website you , could do something like all posts and , you could at locate let's see here we , can add another rule and we can maybe do , all pages like this and we can do it , this way and so this will target all , page sand all posts but not those kind , of category pages those ones that are , like the archive pages that are setup , bywords you can have those be , different but you actually probably , would't want all pages because on the , pages you might want the other one , because you're gonna know they're gonna , be done with the page builder so you can , do it this way and this is this is not , bad let me get rid of that and go here , here's the other way and kind of like , this too it gives you a little bit more , control so let me go to Post , here's your default hello world post and , if I go to edit this post there's some , theme options here off tithe right you , can see it says Astor settings and one , of them is advanced header and I can , choose which of those headers Created , so if I wanted to do the Wii , already know if I choose transparent , header no title it's not gonna look , right see if I go there I click update , and then I take a look at it it'just , not gonna look right it's gonna get rid , of the background and pull it up see , that's not what we want but I can go , here and instead choose the other option , with title transparent header with title , click on update and I can do this on a , page by page or post by post basis just , like this let me try to give you an , example of this with a page wit ha page , builder so I'm gonna go back here and I , do have a page set up that I was playing , with called transparent header let's , actually see what this looks like right , here so we don't actually have anything , assigned to it so if I go ahead and , click on transparent header right here , it looks like Already clicked on the , Edit element you can see I don't , have anything set for it so let me go , ahead and show you what happens if , have advanced header set to let's see , out go transparent with title just like , that I'll click on update and now I'm , going to jump into Element or and it's , gonna be the same thing in beaver , builder so let me jump in there and show , you what that top portion is gonna look , like you see I don'thieve control over , this area anymore be to have the image , behind it that want and to have , whatever text behind it that I want so , if I was to say apply a page template , let me just go here click on add a , template it's gonna show me all of the , element or templates let me just go , ahead and say grab this coffee shop one , I'll go ahead and insert this really , quick and this will help demonstrate the , what I'm trying to explain better so , here we go if I hide this'm stuck with , this transparent header and then this , beautifully designed website but I got , this , transparent header here don't want that , so I'gonna go ahead and click on save , to save the the the page there and then , I'm gonna get out of here let me go back , to the dashboard okay so when I do a , refresh on the front-end this is what it , looks like not what we're after but if I , go here and change it from the , transparent header with the title to a , transparent header with no title , watch what happens'm gonna click on , update and then I'm gonna go to the , front end do a quick refresh and this is , how we wanted it to look so now , everything was kind of pulled up and the , header is just right there transparent , on what created with the page builder , just a quick word of caution here too , you need to have spacing hereto , accommodate for the header because it , just literally lifts everything up so if , I click on edit element let me , show you how this works and this is one , of the beautiful things bootstrap , theme is it's made for any page builder , it lets you access this entire area and , only when you're viewing it on the front , end or you go to preview it do you get , to see what happens other things that , Warren't made to work with every page , builder this header is just laid on top , of it and what happens is you can't get , to the settings right here and that's , what happens with every other theme that , wan'quite made for a page builder so , you want to make sure there's some , spacing in here to accommodate for that , so but anyways Think you get the point , why you have to consider what the , transparent header these various , differences and know it can Beau , little complicated if you're you're new , to building websites but it's very , imperative to understand this whole , concept of what's happening when you , make transparent header and how you , ha veto be cautious on how you you apply , it to your site so anyways this is , transparent headers I hope I did it some , justice and , could play around with some of the , settings know I did't do that well so , this was the transparent header with no , title so let me just , oops let me just show you some of the , options of what you could do there so , here's our no title right there'm , gonna go here and so for that background , color we can maybe make it white and , then make it very see-through but just , kind of barely there maybe something , like that I actually have no idea how , that'gonna look but let's see real , quick I'm gonna go here do a refresh and , see if there we go we got a little bit , of it in there but it'still , transparent and then we could get rid , of that here clear this out and for the , border bottom thing we can give that a 1 , there and we can choose another color , and we'll want that to be like really , light as well that'probably a little , too pronounced let's go something like , that just to give some separation so if , I go here and do a refresh that's gonna , go away and we should seethe very light , color there'd even make it even more , transparent for that separation so this , is transparent headers and there's , actually one thing that did't cover , if you go right here on my home page I'm , instr there's this menu in above , header area right here and there's also , an option for a below header area and , you can put a menu in there you could , put text in there you could put all , kinds of different things in there these , are options that you would find inside , the customize so if I went into the , customized here and I went into , layout we're gonna have that option , available right here is layouts here's , my above header so if I wanted to turn , it Ono could do this actually this , would probably make more sense here and , I have the two sections I can choose , what I want in each section whether I , want a menu search option some text or a , widget we have that option there as well , all right so we only have one thing left , to do and that is for me to show you how , to put element towards a menu and , replace this menu with it it's actually , quick and easy so let me go ahead and go , into element or I'going to go to , elements where I'going to go into my , library'm gonna go ahead and click add , new and let's just call this menu , navigation'm doing this off of memory , I did this when the element or menu , widget came out I'm gonna click on edit , with element or essentially I'just , gonna drag and drop in the navigation , option there so all right I'm gonna go , to the Navy option where are you it is , right here I'm gonna drag that in I'm , gonna click on it I'm gonna choose main , I will let's see maybe will right , align it and'm not gonna get into , customizing it I have a video on it , there's tons of videos on customizing , this menu so then you want to hover , right here off tithe right of the , widget there's a little Save icon let's , click on it let's save this and name it , menu'll go ahead and click on save , think that did it if I memory serves me , best let's see if that is available in , the the my library here so I'going to , go to back to my dashboard and let's see , what options we have let me go back to , the element or my library like here now , when you have Element or Pro it provides , shortcut here oh there it is menu , that's exactly what I wanted so let me , go here and copy this short code and then , we're going to take that short code and , we're gonna put it in that widget area , that we get on our theme okay there we , go , come on it's pulling UPI'm gonna go to , layout'm gonna go to header first , thing I need to disable the menu just , like that and then for the custom menu , item in my testing I put it in the , witch , but you know what Wonder if it will , work here if this will accept short codes , we're gonna find outright now , I just pasted that in and that dozen't , look like it's rendering properly so , let'sago ahead and remove that and let's , we can go ahead and put our our widget , back in there just like that , okay that's fine so we needed to disable , that that menu we had so let's go down , hereto widgets need to go back one go , to widgets , it's the header widget and it's for the , text'm gonna go ahead and go here I'm , gonna replace it with shortcut , just like that and go here let's do a , save and publish and this should work on , the front-end let me go ahead and click , on the home page right here actually I , remember what I did wrong we ha veto , remove this widget right here I'going , to click on remove I'm gonna click on , add widget right here and then Have , this option here for element or library , and this was it I can choose that menu , widget right here that Created and now , it should actually appear that there it , is finally got that working so there you , have it if you have element or pro , obviously you need element or pro to , even have the menu option all you need , to do is put the element or library , widget and then select the widget that , we saved let me see if the other works , just as fine this would be the entire , column don't know it kind of stretches , it a little so this would actually give , you just the widget the global widget , that created real quick and there's , tons of beautiful menu Styles that are , available and you get full responsive , control so it's very very impressive so , we'vie covered a lo tin this video we , talked about logo sand menu sand mobile , responsiveness and we'vie talked about a , standard header sticky headers , transparent headers and all the pitfalls , with that , menus via shortcut in the header , widget element one that we just , did and in the beginning we talked about , fully creating your own header with , Element or or beaver builder actually , wanted to add one last little piece of , information what I would think would be , cool if you did use the header footer , plugins for beaver builder element or , and you just created the top portion of , the header and then instead of having a , menu you do like LOGO some kind of , three calls to action up here maybe your , business hours your business phone , number and maybe a bit oaf sale that , you might be having you kind of see this , layout a lot with e-commerce stores , where they pack alto of info and then , what Would do is for the layout I , would Good this below header option , would enable it right here and then I , would put Amen below the header like , that obviously you can choose the colors , whatever colors you wanted we'factually , have to assign a menu to that area , this way you can design a beautiful , header up here with Callisto action in , it whatever business information and , then you could still have your menu here , obviously you'd have to customize the , colors and everything using the options , starstruck gives you so we covered it , all in this video there is going to be , links in the video description for , updates and also to take you to specific , parts of this video so you don't have to , star tit from the beginning every single , time and like I said in the last video , if you don'thieve stroke row go ahead , and click on my link it'll take you over , to a bonus page that I have for it here , on my website and if you see anyone , asking any questions about any of these , header styles if you would go ahead and , refer them to this video and make sure , you let them know they can open up the , video description box for links to , specific parts in the video so I'm , enjoying making these videos for you and , the link tithe entire playlist will be , in the video description box thank you , for watching the video give it a thumbs , up ask me any question sin the comment , area , be happy to get in touch with you thanks , for watching .
