Build Your Own Business Website header image

How to Add a Call to Action to the Thesis Header – Part 4 Include the Thesis Header Image Beside the Call to Action

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

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.

This is Part 4 of the series How to Add a Call to Action to the Thesis Header and in this session we show how to take out the text header and replace it with a Thesis header image with the correct size. Then we add a margin to make it line up perfectly with the header Call to Action.

Video Transcript

There’s out little call to action here. Now the next thing that we want to do, now that we’ve got it with you know, say text and that sort of thing, what I want to do is take out this text and replace it with a Thesis header image. And again, that’s one of the Thesis default behaviors so what we can do then is we just come over to Thesis header image and choose file. And let’s see, go to graphics and redesign and we’ll just use this one here. Upload that, this is image is 744 by 215. That is where I got my other sizes.

So now we place this image in here and it will behave just like…now that Thesis header image comes in here rather than the text. Now you can see this doesn’t actually line up that well so what I want to do is I want to add some more margin so that the white comes down and I need to decrease the size of this. So if we come back over to our header widgets and come back over to our right side, now we’re going to add top margin I think, of 14 pixels. And so, I’m going to reduce the height down to 181 and I think that will do the job. Let’s try that, save changes. We might have to adjust it a pixel one way or the other to get it to line up just perfectly.

Okay yeah, I think we need to make it a little shorter by 1 pixel because the top lines up nicely but the bottom is a problem. So if we make this 180 and hit save changes, I think that will do the job. Yes, it does.

Okay so now we have the top of this image, apparent image line running along the line of the top of this. You know, we could add a br tag to this so that it would drop down to 2 lines. We’ll do that just for grins. Come down here and then we’ll just add a br tag which is a line break tag and hit save. Hit return, there we go. You won’t be disappointed.

So now we have a call to action in the header image all in the Thesis header and it behaves exactly like the header image too. We can click on this and it automatically takes us back to the homepage. So it’s a clickable header and then we’ve got the little call to action here and we accomplished that.

0 Comments… add one
0 comments… add one

Leave a Comment