This is Part 2 of the series How to Add a Call to Action to the Thesis Header and in this session we show how to set the overall Header Settings and the right Header Area. Then we specify the correct height and width and add a background color. We show how to keep the Thesis default behavior to the left and a call to action widget on the right side of header using a text widget and placing the html code created using our “Sandbox”.
Okay so what we’re going to do here first is we are going to add a call to action widget to the Thesis… let’s spit this out… to the Thesis header on the left hand side. So we’re going to keep default behavior on the left, I’m sorry. We’ll keep Thesis default behavior on the left and we’ll add this call to action widget on the right.
And so the first thing we want to do here is we set it to 2 areas o to 2 sections. We want to make sure that in the overall that what we do is we come along here and we just zero out everything. We zero out all the margins and the padding in the overall. And we don’t need a background color, we can even delete the white color that’s in here. We’re not going to add a background image and so we don’t need to specify a repetition for that background image.
And then let’s see, let’s specify a height. And I think we’re going to start with a height of 215 pixels. So that’s the overall height of our header.
So then we need to specify what’s going to happen in the left header area. And so since we want to use the default Thesis behavior in the left header area, we’re going to check this box, retain default Thesis functionality in this header area. Now if you want to put widgets there, you don’t want to check that because checking this will remove the widgets from us.
And so we want to specify a width and I’m going to say… because later on, I’m going to put an image in here that’s 744 pixels wide. So I’m going to say 744 here and again, I’m going to specify that it’s 215 pixels tall. And we’re not going to put anything for margin or padding or background color or background image. So we’ll just leave that like it is.
And then what we’re going to do is come over here to the right header area. Now the right header area we don’t want to check this because we want this to be widgetized. We’re going to specify a width of 212 pixels and a height of 215.
I’m going to digress for a moment here to help you understand how to specify a width. To specify the width based on the available width, because what you want is the right header area width and the left header area width to equal the total available width. And you can find your total available width by coming over here to Thesis header image. We’ll open it up in a new tab. You can see here it says the optimal header image width is 956 pixels. This is what we want those 2 numbers to add up to. So 744 and 212 add up to that 956. So that’s our width.
Again, we’re not going to do anything with margins or padding but we are going to add a background color to this. And what I want to do is I want to add this background color right here and so that’s this dark green. So I can get that from my Thesis Design Options because that’s the color that I use for my nav menu and that color is this one here, 2f whatever… 2f3a32. So I’m just going to copy that, come back over to my plugin and paste that number in the plugin there. And I’m going to go ahead and save changes.
Okay and so before we add a widget, let’s just take a look at it. Okay there we go so we have on the left hand side, we have this default Thesis behavior and on the right hand side, we have this widget area with that background color.
And so the next thing we’re going to do is go ahead and add a widget to this and then we’re going to adjust some margins and padding to make this all look right. So to add the widget, we would come over here to Appearance and Widgets. You can see that now this sidebar’s been created called right header area widget. So what I’m going to do is I’m going to add a text widget and then I’m going to come over to my sandbox page where I’ve begun creating the HTML for this.
So if we come back over here to pages, open link in new tab and then scroll down to sandbox, there we go. This is my sandbox page. You don’t know what a sandbox page is. I’ve talked about it in another lesson. Sandbox page is a page that you keep as private and it’s one where you can put code in to play around with stuff.
And so what I have here is a header call to action so that’s going to be a headline and then using J shortcodes, I’ve created this button, J buttion, with the color orange, a size of medium. I’ve linked it to main website. I’ve given the text, “Get a free access now.” And then ive added another line, “You won’t be disappointed.” Into that.
And so if we switch over to the visual view for a second, here’s what this looks like, header call to action.
Now what I want ot do is I want to take this and I’m going to make that an h2. Let’s see, let’s undo that. So what I really need to do is give myself some space here. So I’m going to make this an h2 and I’m going to make the text white and I’m going to center it. Okay then I’m going to center this one and then I’m going to… let’s see, I’m going to make this text yellow and I’m going to center it as well. Not indent, center. And then we’ll come back over to the HTML and now we have it all set up here so I’m just going to copy this. And come back over to my widget and paste that and hit save. And then if we go look at the page again and refresh it, now we have a little call to action here.