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.
{ 109 comments… read them below or add one }
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!
Hey buddy – I still can't get the page title to disappear .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;}
any ideas?
.headline_area { display: none; }
That part is there to remove the page title.
Hey Marko – thanks for replying, but I don't understand. The command is there but the title remains?
Hi,
The syntax you need to remove the heading is as follows:-
.salesletter .headline_area { display: none; }
That’s what worked for me anyway.
Not sure to be honest. I would remove the title if that code doesn't work.
Great Blog Marko! I'm just getting going and it is wonderful to come upon a helpful blog such as this one! Any advice on how someone with all thumbs can get up to speed as fast as possible diving into an affiliate type blog using Thesis? And if I have multiple blogs will I need to purchase a new domain for each blog that I may want to add an affiliate link sometimes in the content?
Very helpful. I've been sort of agonising over whether I had to set up a subdomain just to host my sales letter, but I now see I can do it with CSS. Brilliant. Thankyou for getting rid of my headache
About starting… Just start writing good content and start connecting to the target audience.
About domains… it is up to you, you can have it all on one domain or you can have different niche sites on different domains. I find it that different domains work best.
Marko, exactly what I was hoping to find, a simple straight forward solution to a basic issue. Love the the Bryce Canyon pict. Near and dear to my heart, I lived many years ago as a elementary student in Panguitch only a short drive away.
Glad you liked the post and the pic. It looked good on some relevant keyword I searched for on Flickr so thought I would include it.
Marko,
Any examples of how this would look? Sorry if I missed any links…
Thanks,
Neal
Something like this: http://twittermarketingbook.com
This is great stuff, especially for those of us new to customizing Thesis. I’ve implemented your example, but am having trouble getting a custom element to not show up. I have a custom header loaded into before_header in the Thesis OpenHook plugin, and would like that to not be shown on pages using the .salesletter class.
Being a complete newbie to all this and not particularly good at css, I’ve tried it multiple ways but cannot seem to get the correct syntax in my custom.css file and was wondering if you could give me some guidance.
Thanks in advance!
Andrea
I am not sure what can be wrong. You can contact me with detailed information via the contact form and I may be able to give a better answer.
Hi Marko,
Great post. can you please help me with one thing. How to remove post/ page name from the any post/page. e.g. if page is http://www.domain.com/salespagefordog
first line of the page comes like this..
salespagefordog or whatever or whatever Permalink i used there.
but on your twitter page nothing is life that. ( there is no page )
thanks
hey thanks i got the answer from your comments
.headline_area { display: none; }
will remove all the headlines
thanks for great post!
I am currently just getting started with my Blog on wordpress, and I’m struggling a little bit with your instructions – when you say to “Copy/paste this code into your custom.css file in your Thesis folder:”, unless you are saying to copy/paste this code into the file on my computer, and then upload again to Wordpress, I’m not exactly sure where to access this file….
HELP!
wow..wow .. this is really a great tutorial seems like YOU ARE A KING OF HTML code.
Hi Marko,
Just a quick question. Is it possible to make one page using one column ( which to be used as sales page) and other part of the site as two column. I know your code can remove side bars but if I am using two column in theme (right side bar for widgets) then sales page doesn’t come in middle but looks left side of the screen ( right bar disappear using your code) is there anyway to put sales page in the middle even though using two column in the theme.
Appreciate your help.
Thanks
Amit
You can do a new page and in templates in the right-hand side choose “No sidebars”, then put your sales letter there.
THanks Marco but still same problem. this just chop the right bar. but page don’t come in the middle of the browser. page come bit on the left hand side ( depending on the sidebar size)
Please help.
THanks a lot!
AMit
This is absolutely fantastic. I love it. First time I ever modified my custom.css file. Your explanation made it easy!
One question. I don’t know how to get my “content in a nice box.” I inserted your line of code with #container in the custom.css file. But, do I have to define “container” somewhere? Is there some HTML code I need to use (in my webpage) to designate text as “content”?
Thank you very much. Dale…
Disregard my last question. Everything is working great on my new Sales Page. Now I’m almost ready to host my first telesummit. Thanks so much!
I am glad you found this guide useful. Good luck with your blog!
Hi Marco,
Can you please help me with above problem ( i asked 2 post above) or you think this can’t be done ?
Thanks again.
Amit
This is the code that did it in my case, test the width to find the best position for your own blog. It shrinks the content area.
.salesletter #container { width:650px; margin-top: 1em; border: 0.2em solid #000; }Hi Marko,
Really appreciate your help. This worked like magic. Now I can so much with my pages on my blog. You are BEST!!
Amit
No problem, glad it helped!
Marko,
thanks for the great help in developping with Thesis. I use your tutorials to customise my pages. I tried to customise my blogpage witch I pointed at from wordpress but I can’t customise that page with yor css tips. I know this is a special page! I realy want tot customise that page to with css. Can you help me?
Jacques
This tutorial is only for Thesis theme, I am not sure how you would do it on other pages.
Marko,
it is Thesis I was talking about. I made a page called testpage and css class test_page. I worked fine. I could mka all the css changes to that page with .test_page #….{ } Then I wanted to do the same with the standard blog page and called te css class blog_page. This is not working. I hope I made myself more clear now. Greeting Jacques.
Hmm not sure why it would work on one page and not the other. Multiple pages should not affect it at all.