Easy Squeeze Pages with Thesis Theme

Step by Step Squeeze Pages using Thesis Theme

Have you ever wondered how so many marketers create beautiful Squeeze Pages that look just like their normal blog, but with the navigation menu, sidebar and comments section missing?

If you have, well I have to tell you that you have come to the right place. Of course you must have Thesis Theme. (Clicking the link will take you to the Thesis Theme sales page. It is an affiliate link and I will make a commission on any sale. Just thought you should know.)

Let’s get right to it!

First you will create a new page, not a post. It doesn’t matter what you name this page, but if you are looking to rank in the search engines, then you might want to consider using your chosen keyword.

Thesis Theme Custom CSS Class Box

Ok, now that you have a new page, you are going to scroll down and look for this –>

If you do not see the CSS Class text-area, make sure that the “SEO Details and Additional Style Meta Box” is open. If you don’t see the “SEO Details and Additional Style Meta Box”, then go to the top of the page and click the “Screen Options” tab and click the box next to “SEO Details and Additional Style” and then open it.

You will notice that I put “squeeze”, without the quotes, in the CSS Class box. You must do this also. I’ll explain why in a minute.

Alright, now it is time for you to get creative. Put whatever you want in the editor, create your enticing squeeze page that people won’t be able to leave without entering their email. Not that you can actually stop them, but make them not want to leave without filling in their email.

How Thesis Theme Makes Squeeze Pages Easy

Ok, the hardest part is over, now on to creating the Custom CSS for your new Squeeze Page. This is where the “squeeze” comes into play.

Download the text file below, by clicking on the link. Then open and copy/paste the code included into the custom.css file. You can find it under the Thesis tab > Custom File Editor

Thesis Squeeze Page Code

Make sure you copy all of it.

You may not need all of this Custom CSS code for your particular blog, but the important ones are all in there. You will notice the “.squeeze” in front of each element in the code. When you added “squeeze” into the CSS Class Box, it tells Thesis Theme that you want to add a special class to this page. Classes are denoted by the “.” and id’s are denoted by”#”, but we won’t go into that right now. I could write a whole book on that subject.

How To Make Adjustments to Your New Squeeze Page

One 0f the adjustments that you will probably need to make to your new Squeeze Page is the height of the #header_area. You will notice I have it set to 210px right now and that is because my header is 210px in height. Now to adjust this, just change the 210px to whatever height your header is. It’s that simple.

There are many other changes that you may need to make in order to get your Squeeze Page just the way you want it.

The best tool for this purpose is FireBug, an add-on for the FireFox browser. I am not going to go into detail about how to use it right now, because this post is getting too long as it is, but if you would like to learn how I use FireBug. The check out this post on my personal blog, Back and Better Than Ever, With Some of My Favorite Tools. In this post I explain how to use FireBug to edit blogs and websites. I plan to write a more in-depth post on how to properly use FireBug, so keep your eyes pealed for that.

You also probably noticed that “display: none;” is under a lot of the different elements in the code. This of course, makes it so these thing don’t show on your Squeeze Page. For instance, the sidebars, the navigation menu and the comments section. None of these things you want on your Squeeze Page. If you do want them, just remove “display: none;” and they will show up.

What To Takeaway Form This

Well, takeaway whatever you want. I have showed you the most simple way to create a Squeeze Page using the Thesis Theme. The best WP theme out there.

Please leave me a comment below and let me know what you think of this post. Also share it with all of your friends, please.

If you have any questions, please feel free to ask me in the comments below and I will answer them as best I can. If you are having trouble using the code I have given you, it may be because of the way your blog is setup or the WP editor may be stripping code from your page. It likes to do that sometimes.

I have an HTML template that I use for all of my Squeeze Pages and it is very easy to use. If you would like to get your hands on this template, check out this page, Learn How To Customize Your Blog and fill in your email address to get the template and directions for using it.

Thanks for reading and come back soon!

If you need any Web or Graphic Design work done. Make sure to check us out. Our prices are the best around and service is top notch.