How to create a sales letter landing page with WordPress Thesis Theme

If you want to sell your own product, you need a sales letter landing page to send potential buyers to either from your own blog, via affiliates or via PPC search engine marketing. Landing page template can help you improve conversions and drive sales.

When I released my Twitter marketing e-book last month I created a landing page for affiliates to use. In this article I will explain how I did it. If you follow these steps, the end result will look something like my Twitter marketing page.

Strip your Thesis to the bare bones

To create this landing page I am using a self-hosted WordPress blog with a premium theme Thesis Theme.

1. Write your sales letter as a WordPress Page (Pages – Add New)
2. Give your page a CSS Class Name in the Thesis “Page” interface just below your page content writing field (SEO Details And Additional Style – CSS Class).



3. For my example let us say CSS class name is “salesletter“.
4. Clear up Thesis page: remove sidebars, remove header, remove tag line, remove navigation bar, remove “comments are closed” message, remove the Thesis footer message. Copy/paste this code into your custom.css file in your Thesis folder:

.salesletter #header { padding: 0; border-bottom: 0em; }
.salesletter #footer { padding-bottom: 0; border-top: 0em; }
.salesletter #footer { display: none; }
.salesletter #sidebars { display: none; border: none; }
.salesletter #tabs {display:none;}
.salesletter #content_box { background:none; }
.salesletter .comments_closed { display: none; }
.salesletter #header #logo { display: none; }
.salesletter #header #tagline { display: none; }
.salesletter #content { margin: 0 auto; float: none; }

The code above will basically strip your Thesis theme to bare bones. But what is cool is that it will only do it to the “salesletter” CSS class name page. The rest of your pages / posts will stay with the default design customization you have.

Customize your sales letter template

Time to customize your sales letter landing page. In the codes below, I have bolded some parts that you can play with and experiment to get the sizes and colors that fit you best. Again everything is done via the custom.css file in your Thesis folder.

• This code will make the page headline large, bold and centered:

.salesletter #content h2, .sale #content h1 { font-size:30pt; text-align:center; font-weight:bold; }

• This will center your content in a nice box:

.salesletter #container { width:650px; margin-top: 1em; border: 0.2em solid #000; }

• This will give the yellow background when someone hovers over a link. A very good sales letter effect:

.salesletter a { color: #111; }
.salesletter a:hover { color: ; background: #f2e127; }

• This will put a background color outside your text box, which will make your text stand out more:

.salesletter #page { background: #fff; }
body.salesletter { background: #8db6b6; }

Just another reason to love Thesis

For me, this is just another reason that I like to use Thesis theme. It is so flexible and so easy to customize with simple copy / paste lines of CSS code. And I just love that you can have customized design different from page to page (or post to post) in the same blog.

I hope this helps you create your own sales letter landing page for your own product, helps you promote it better and hopefully improves your sales.

Image by Mandj98.

Share

Join thousands of bloggers and get all my blogging tips for FREE! Subscribe to HowToMakeMyBlog via RSS or via e-mail.

If you liked this article, you may also like:

Post written by Marko Saric on June 16, 2009 in Thesis Theme