Build Your Own Business Website header image

How to Create a Landing Page in Thesis

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

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 we show how to create a landing page in Thesis using our Landing Pages Plugin to remove the header and footer. We use straight HTML and CSS without needing to use PHP. We show how to insert an image and make it float to where we want it. We also show how to create the HTML and CSS for the landing page our member wants to create.

Video Transcript

Rick:  You want to create a landing page?

Member:  Yeah, absolutely.

Rick:  And this is the landing page you want to create?

Member:  Yes please.

Rick:  Okay. What you’ve done is you’ve used my Landing Pages plugin to remove the header and footer, right?

Member:  Yes, I have.

Rick:  The next question is how do you do the rest of this? Really, all the rest of this stuff is HTML and CSS. You really don’t need to use any PHP in this.

Member:  Oh really?

Rick:  Yeah. All of these could go in the content, right? The very first thing that would go in the content would be this Clear Gauge image and when you insert the image you would just say float none or align none and it would automatically sit here in the left and everything else would go below it. Then for that section right there, while you create a wrapping div and just say, call that main content or something like that. But you’d create a wrapping div and then inside that wrapping div, you would insert a right aligned image and that would be this image here.

You insert a right aligned image, let’s unselect that so you’d create a right aligned image. You’d set it inside that right div and you would create an h1 tag for “Stop guessing when to change your Record fuel filter” and you would put that h1 tag in there, inside the same wrapping div. Then you’d create a style for this h1 that would make it look like this and I guess you would include the underline in that style. Well no, you could, sure. You could include the underline as a bottom border for this h1 tag.

Then you’d create a class for this p tag so you’d wrap this in a p tag, give it a class and style and give it a CSS style. You got your wrapping div, you have a right align image and you have an h1 tag with a special style. Then you’ve got a paragraph with a special style and you’ve got your Buy Now button.

Member:  Which is an image?

Rick:  Well, but it’s more than just an image, right? If you click on this, does it add something into the…

Member:  It takes you to another page.

Rick:  Oh, it takes you to another page so this is just a link.

Member:  Yes.

Rick:  Okay so then you just got a link and you’re going to assign it a specific style and the same thing is true with your money back guarantee.

Member:  Is the 30-day money back a p tag?

Rick:  Yeah, I would give it a p tag and give it a class. Now you have a custom class for your h1, a custom class for this emphasis text, a custom class for your Buy Now button and a custom class for your guarantee tag. Now you create another wrapping div and that wrapping div would take this whole piece and inside that wrapping div, you would create a left and a right div. The left div, I think what you’d probably do is do this as an unordered list wherein each one of these is an LI.

You wouldn’t necessarily have to do it this way. Each one of these could be a div as well so you could do a div with an h3 tag. That’s probably easier. Do a div with an h3 tag then regular text and this div has a background image with this arrow in it and its style gives a left padding to move this over.

Member:  Okay.

Rick:  Your right one is just going to have the h3 tag with the regular text in it. Finally, you come down to your last div and this last div is also going to be a wrapping div and it’ll be called, I don’t know, quotation or not quotation but testimonial. This testimonial div will have a style for that background and this style for this kind of text and finally, a style for the name of the testifier.

Member:  You make it so easy. I think I just try to over complicate it.

Rick:  Well, none of this requires php. This can all be done inside of HTML and that’s what’s going on on my homepage. I mean, it’s entirely different but it’s similar. If you go to my homepage, I’ve got these boxes, I’ve got the title. I’ve got what appears to be a title. I’ve got some more boxes. I’ve got another title and I’ve got an image. If we look at the page itself, that’s all contained inside the content.

Now I’m actually using the page title for this. You wouldn’t use the page title because you’ve just gotten rid of it, you’d use an h1 tag. If you look at the HTML view, I’ve got a div class byob column 1/3 first. There’s my div that wraps this, that wraps the first one. This is byob column 1/3 first and inside of that div, I’ve got what I call byob faux headline or fake headline, it’s just a p. Then I have my UL items with the little list items. Inside of this 1/3 column, I have a new div called testimonial and that testimonial gives the style to this section, the blue with the name of the person, right?

Once I’ve gotten to the end of that testimonial, I close out the testimonial div here and I close out the 1/3 div. Now, I go on to the next column 1/3. It’s got the same false headline, the same testimonial and the same div. Pardon me, I’m skipping ahead here some place. Full headline, that’s short first. Where did I jumped ahead. Okay, this is my last column, Learn Easily.

Now notice that I have byob column 13 first. That’s because these things have left margin except for the first one doesn’t have left margin that’s why this one is first and these ones are just normal. Same thing is true with this one. This is first and these are normal. However, I’ve specified an absolute height so they’d all be the same. Now I have a first and short as a class assigned to that.

We come back down to this one and here’s our column 13 then short and first and then column 13 short and then column 13 short last. I don’t remember anymore why I felt like I needed to say last. Oh, it’s just because of the way I wanted to style the image next to my heading. This was the default column 13. This was column 13 first and this was column 13 last. It just has to do with how I wanted to do the heading.

Member:  That makes a lot of sense. I think where I got off track was I was thinking I had to use PHP to put containers on the page to then fill. But this seems a lot easier.

Rick:  Yeah, this is very straightforward. Just put the HTML inside the content area and use CSS to style it so that it looks the way you want it to look. The only other thing you have going on here is this background image. If you will for just a moment, I’m assuming that you have access to the PSD file. If you don’t, that’s what you need because what you would do is create a background image that would be 20 pixels wide and say, this tall or wherever this fades stops down here someplace so that background image would be assigned to this page and therefore, it would have this line with the fade and the fade to the line and the new line to the fade. That would just get repeated all the way across the background of this page.

Member:  You lost me a little bit on that one. Could you repeat it please?

Rick:  Sure. In fact, I could probably show you. What I would do is I would create a background image that is essentially this and sort of zoom in on this thing and make sure. Now if you have access to a PSD file, then you don’t have to worry about doing what I’m doing right now because you can just turn that stuff off. There I have gotten rid of the text and I’m definitely getting rid of the Buy Now button and that stuff out of there. This going to be imperfect because there’s clearly a little bit of fade in there and that background color is going to be created by the other CSS file.

It could actually be that your background image is just this big, right? So image, canvass size so it’s 860 pixels tall. I’d bring it down to 20 pixels wide. There’s your background image, save for web and devices. If you save that as a png, that’s what I would probably save it, as a png-24. It’s 471 bytes so it’s very small and that’s what I’d make as the background image for that page and that would give you the whole background image then that spans the whole page. Essentially, all that stuff is in the background.

Member:  That makes sense. So you just make one image, leave it as background and overlay everything else.

Rick:  Exactly.

Member:  Slick.

Rick:  Okay?

Member:  Yeah, I really appreciate it, Rick. This is extremely helpful.

Rick:  You’re welcome. I’m happy to help and I’m happy you don’t have to do it using PHP, not that there may not be good reasons for using PHP in some cases but this isn’t one of them. This is one of those things that I wouldn’t use PHP for. I’d just use straight HTML and CSS inside my content area.

Member:  That insight is invaluable. Thanks again.

Rick:  Okay, you’re welcome. You have a good day.

Member:  Yeah.

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