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.
- Write your sales letter as a WordPress Page (Pages – Add New)
- 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).
- For my example let us say CSS class name is “salesletter“.
- 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.
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:
Why I run my blog on Thesis Wordpress Theme
Thesis theme gives my blog a professional, clean, easy-to-read layout and SEO friendly design. Thesis makes it simple to make your own blog unique. See more details and get your own Thesis today.
{ 120 comments }
Next Comments →
Marko-
Great post! I created a landing page for to promote my financial planning practice. I didnt’ strip it down as you did (I had no idea how until now-thanks!). I was curious to your input on my landing page. Love to hear some feedback from an excellent minded marketing guru as yourself.
Thanks for all the comments! Glad you liked the guide, let me know what you come up with from my tips…
@Jeff Rose – Content looks alright, but use some of my codes from above to for example remove sidebars and center your content. At the moment there are just too many things competing for my attention.
This info is very timely! I own Thesis and I need to develop a sales letter this week for a product I’m developing. You’re very generous with the free information you deliver on your blog. Thanks so much!
The end result of the landing page looks great! Yet another high quality how to for Thesis customization. Please keep up the good work.
Another great blog post. Keep up the good work.
I’m in the process of making a sales page so this is timely – thank you. I’m getting great value from my subscription to your blog.
@JeffRose I looked at your website and I think you have done a terrific job. One question though…why would you have google ads on your site? You run the risk of having ppl click on a competitors ad and leave your site.
Wow, what can I say of you Marko? You’re simply brilliant! Your step-by-step guides have really helped me in customizing my Thesis.
For that matter, it’s because of you that I bought the Thesis Theme!
Keep up the good work man!
I appreciate you.
thanks bro
leme try it
Hello!
First, thanks for the great site and all the super advice. I know that I have used several of your tips and I think they look great.
I am inquiring to see how you installed your background image. Could you help me out with some instructions on that?
Thanks in advance. You rock!
@Jim Mahan – Like this:
body.salesletter { background: #8db6b6 url('IMAGE_URL_HERE') 0% 0 no-repeat; }Thanks! Gonna try it!
Marco your twitter product landing page is very nice and stylish. How your landing page looks definitely has a big impact on your products perceived value and how many units you will sell. When I redid the look of one of my product landing pages it more than doubled my conversion rate.
Marko*^
I really like How To Make My Blog. I’ve been reading it steadily for over a month now and it has really high quality content and has taught me so much about problogging, how to trick out thesis, how to monetize, . Serious, you’re one of the first people I check every day on Twitter besides problogger and copyblogger. I read about 15 different blogs every day and this one is in my top three. Your alexa grpah is impressive too. Keep up the good work.
Peace,
Harrison
@Harrison Schmidt – Thanks man! I am glad you like my work here.
Excellent post. I just love the thesis theme and your blog is an excellent source of my thesis experience!
This is great. I’ve needed something like this (with Thesis) and couldn’t quite figure it out. I still cannot see how to remove a custom background image on this page, but everything else is clear.
I may try substituting a white image and see what happens.
Again, thank you for this.
I didn’t knew that! Well for me I usually buy wordpress themes that are specifically designed as a sales page. So far it works well with sales and SEO rankings because search engines love wordpress..
@Melvin – Well, now you will only need Thesis theme if you follow my tutorial. And of course you still have WordPress as Thesis runs on WordPress.
I have a background image on the site I’m building. All this has worked great except removing that image. I’ve tried everything I can find to *completely* make a page clean, but the BG image remains.
Knowing you, like most of us are super busy, here is my code:
/* body */
body.custom {
background-color:#FFFFFF;
background-image:url(images/dmc_bgbw_01c.jpg);
background-position:right 0;
background-repeat:no-repeat;
I put your code above this and tried various methods to remove the BG Image. Example:
.salesletter body.custom { background:none; }
Can anyone tell me how to remove the BG image on this page?
Thanks again, even if I don’t get this working, the knowledge/idea is a good thing to know.
@Hal – This should remove any background you might have:
body.salesletter { background: #none; }Marko,
That’s it! This is absolutely what I’ve been looking for. Thank you for taking the time to add this. I truly appreciate it.
Oops, I spoke too soon. This code removes my BG image from every page. I wanted to post this in case someone else tried it. I think I’m going to have to do this with PHP using a hook and a different style sheet for this page.
Nevertheless, everything works except removing the BG image. In fact, if I put this code before my BG statement it removes the image – after the BG statement it doesn’t.
Thanks for the effort Marco.
An excellent post, and very helpful.
I started using Thesis last week and am just starting to feel confident enough to play with it. Thanks for your generosity in sharing your time and skills!
Allan
(@Ozegold on Twitter)
This is exactly what I am looking for, unfortunately I cannot seem to get it to work. The published page does not seem to be pulling in the custom CSS style.
I have customized my site to be full-width, do you think that could have something to do with it? Or maybe somehow the page templates are interfering?
Even when I just directly copy and paste what you have done above, I see no changes on my page. I feel like I must be missing something very simple
.
Any help would be greatly appreciated, Thank You.
I tried to follow your instruction, but can't remove the header ( it was already customized as a clickable graphic header, covering the whole header space.
I put in your codes to 'strip the page', and added the specifc salespage css info below it. But the page is trying to render on the content side of my 2 column blog.
How can I strip the page completely clean of headers and sidebars?
I'm doing this still locally before I convert live to thesis theme.
I essentially want to insert an existing pre-formatted optin page (with its unique product header) onto a blank canvas, just over 700 px wide and centered in my 960px blog space.
Thanks for any insights
I created the salesletter with thesis, but I have little problem. I have an image of 650 px width and it doesnt fit with the salesletter width. Is there a way to reduce the margins at the top of the salesletter(header), so it can fit?
thanks
I was making this way too complicated. Thanks for the post and explanation.
hi I think this is a nice and differ article of others.thanks for have a nice post. I am very glad after read it.
WOW! I've been looking for an answer to this challenge for months – and you are the first guy to come up with a good and great looking solution. I put it to work on http://rickbutts.com/business-therapist
Now, if you could just tell me how to remove the PAGE title and move the content up to the top of this page?
The easiest way is probably to leave the page title blank in WordPress. But I think something like this should work:
.salesletter #no_headline .headline_area { display: none; }
.salesletter #no_headline .post_box {padding-top: 0;}
Thanks Marko – if I leave the title blank I will have a hard time telling pages apart in the dashboard display of pages – right?
I'm gave your css a try but the page title still displays upon refresh – here's the css of yours that I'm using (I'm so grateful for what you've created here!
http://rickbutts.com/testimonials – is the page
.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; }
.salesletter a { color: #111; }
.salesletter a:hover { color: ; background: #f2e127; }
.salesletter #content h2, .sale #content h1 { font-size:30pt; text-align:center; font-weight:bold; }
.salesletter #no_headline .headline_area { display: none; }
.salesletter #no_headline .post_box {padding-top: 0;}
I also have this in my css – to display my header on the site – I'm thinking this is the reason that the header still shows up on my salesletter style pages?
.custom #header #logo a { display: block; height: 125px; width: 970px; background: url('images/IMHBAO.jpg') no-repeat; outline: none; }
You can recognize it by the permalink of the page, even though the title is removed.
I was under impression that this would remove the header from the specific page:
.salesletter #header #logo { display: none; }
I had this code in Thesis Open Hook Header:
<img src=”images/IMHBAO.jpg”>
Once I removed it there was no visible header on the “salespage” designated css page
I still have not gotten the Title to disappear
Tweeting about your blog and going to send you some more traffic – excellent stuff here!
Next Comments →