Build Your Own Business Website header image

A Conversation About Creating A Full Width Header

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session a member asks how to create a full width header using one of our plugins. You can do this using the BYOB Thesis Full-Width Backgrounds Plugins. The first thing you need to do is to select the Full-width Framework under Site Layout in Thesis Design Options; this gives you the ability to style all the way across the screen and instead of stopping at the edge of the Page.

Video Transcript

Rick: Okay good morning, Art. How are you doing?

Art: Hey, Rick. Can you hear me okay?

Rick: I can, yeah. It’s a little garbled but it’s working.

Art: Okay. Okay yeah, basically, I’m pretty much a newbie at this and when I was trying to do… I was going to create a header that runs across the page width instead of just covering the page. And I’ve got your header on here, I’m got your simple header and I’ve just been struggling with it for some reason. I do not get the header to get…

Rick: And by full width you mean from this edge of the screen to that edge of the screen?

Art: From infinity left to infinity right, essentially.

Rick: Okay well, the reason why you can’t is because the full width nav… actually, all of my plugins except for the full width backgroudn pluins work inside of the page. And so since your page ends here and here and in this case, here, and since your page is ending there, that’s as far as those plugins can go. Now, I accomplish stuff like this by using the Full Width Backgrounds plugin. But more to the point here, you need to be using… you’re not using this. You need to be using the Full Width framework in order to do this. Now by that, what I mean is under Thesis Design Options…oh let’s see, obviously, I went right past it. Under Thesis Design Options, you need to select the… under HTML framework, you need to select the Full Width Framework rather than the page framework because the full width framework gives you the ability to style all the way across where the page framework doesn’t. And essentially what that means is that the full width framework divides your page into 3 sections and it divides your screen, actually, up into 3 sections. And so I’m just going to draw on the screen here so you can see what I’m talking about.

It divides it up like this and creates this area up here called the header area. And then draws another line and actually draws it down here below but you get the concept. It draws another line and in between these two lines, this is called the content area. And then finally here, to the bottom of the screen, this is called the footer area. So in addition to those 3 big divisions, inside of those divisions, it also creates a page. And let’s see, choose my pen color. And so the page it creates then is like this and so what you have here is… well, from there, from across… to there to there, this is the header area page. This is the content area page and then this is the footer area page. So you’ve got these 3 sections.

Now, the header plugin that I have is always going to be inside the page just like the nav menu always will be. But the full width backgrounds plugin will let you style something that goes from the edge of the screen to the other edge of the screen behind the page. So you can have essentially, 3 different styles. You can have a top style, a middle style, and a bottom style that goes from page edge to page edge. So an example of that is probably more explicitly seen on this site, on Thesis Toolbox.

Okay we have a style that goes from here all the way across to here for the header. Now we have another style that is the content that goes all the way across and then we have another style that is the footer that goes all the way across. And then this… and that happens behind everything else. So if that was turned off for a moment, you would see, in my header here, there’s this little toolbox is one thing and there’s this logo and this text is another. And then there’s this nav menu as another and this little widget area is another and this gray would go away entirely. We could turn this gray off entirely and we would just see each one of these things sitting there. But because I’m using that Full Width Background plugin, this background shows through what’s happening out here.

And so that’s why on my site, it looks like my nav menu goes all the way across, right? Actually, my nav menu doesn’t. My nav menu really starts here and ends here and what goes all the way across is this background image that goes… that essentially coincides with the menu that sits under the menu. And it’s this background image that goes all the way across.

That’s the same thing that’s true with the header here. I have one background image which is about 20 pixels wide and goes from here to here like that and gets repeated all the way across behind all of this. And then on top of that sits my logo and on top of that, sits this little widget area and sits the nav menu. So it looks like the header is stretched all the way across but really, the header isn’t. The header is just inside the page, from there to there.

Art: Okay, was the header developed using the header plugin?

Rick: Actually, this was not, no. And the reason is because thi… because this header and this area here change depending upon a person’s logged in status and depending upon where they are on the site. And so this is a fairly complicated little thing you know, this little box right here knows whether or not your account is expired. If your account is expired, it’s going to up you know, renew your account. If you’re logged in and you count as active then it’s going to tell you, “Well, sign up as an affiliate and make some money.” But if you’re not logged in, it’s going to tell you to join us. And if you’re logged in as a free member then it’s going to encourage you to you know, upgrade your membership to a paid membership.

Rick: So because this is… what happens in this header is different, for different people at different times, it’s not using my plugin because my plugin’s not that complicated.

Art: Okay, I got you. So let me review that. To actually have a background that goes all the way across, I’d use the Full Width Header plugin?

Rick: No, you’d use… first off in Thesis, you need to use the Full Width Framework and then secondly, you would use the Full Width Backgrounds plugin.

Art: Okay, Full Width Backgrounds plugin. Okay.

Rick: So if you go over to plugins under member benefits, the Full Width Backgrounds plugin is right here.

Art: Okay, got you.

Rick: And I don’t have any instructional videos on this page at the moment to show you how to use it. However, I have plenty of vidoes on how to use it. So if you go over to Video Lessons and come down to Basic Tutorials and then look at plugins, the plugin tutorial list and come down to the Thesis Full Width Backgrounds plugin, you’ll see I’ve got a whole bunch of videos in here on how to use this plugin. And I have some new ones that are going to be posted in the next couple of days that are going to go on that page. But for the time being, you can watch these and these will show you exactly how to do exactly what I’m talking about.

Art: Okay. And to create the header or the background then, can I just do that with your header plugin?

Rick: Yes. Yeah so if you look at this here, this is… everything on this site is created using the plugins. And so the Full Width Backgrounds plugin is used to create these full width backgrounds. The Thesis Header Widgets plugin here is used to create this header. The feature box plugin is used to create the feature box. You know, this is the Shortcode Content Widgets plugin. The styling is the Widget Styles plugin and then the footer is the Footer Widgets plugin.

Art: Okay, I got you. And one similar question on header, I assume that if you do any customization on the header, you’d use the standard….that you normally put in. I think it’s…

Rick: Well you…

Art: You know what I’m talking about?

Rick: Sure. You can… for example, this is an example of a site that has a standard WordPress Thesis header stuff, right? It’s got the name of the site and it’s got the tag line of the site. And let’s see, here’s another example. Okay, this is…actually… no, it’s not a good example because actually, this is a piece of text. I mean, this is an image. But yeah, that’s not a good example of it either. But if you’re using that header widgets plugin, if you’re using the… actually, let’s just look at installed plugins for a second here. Well, I don’t have it installed here but if you’re looking… if you’re using the Simple Header Widgets plugin, it has that section about using the Thesis defaults. And if you turn on the Thesis default for a given header area, what will happen is this stuff will show up.

Art: Okay so I could conceivably… that standard banner that I had sitting up at the top, I could have that text show thru?

Rick: Absolutely, yes. Absolutely.

Art: Okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one