Guest Stars: Business Blogging Pros & how to make a landing page in TypePad

September 28, 2009

Guest Star David Barnhart of Business Blogging Pros wrote up a great post for how to make a landing age in TypePad. You can make a special page for a book, (like Dave's Guide to the New TypePad!) a whitepaper, or anything else you want to focus on. Take it away, Dave:

How To Build A Landing Page in TypePad

Not long ago, my friend Andy Wibbels hosted a webinar describing how to use a TypePad blog as an eCommerce website. You can view Andy's webinar here. An additional feature that I get asked about frequently is a landing page.

Most of us eventually need a landing page. We produce a book or white paper and we want to direct people to a page focused on our offering while providing them with as few other distractions as possible.

I'm going to describe three ways to accomplish this:

Method 1, The Simplest: Create an Ordinary Static Page on Your Blog

The simplest method is to create an ordinary static page on your blog. While it is the simplest, your landing page will display your blog's banner, nav bar, and sidebar(s). You may consider these elements too distracting.

Assuming you are on the New TypePad, click the down-arrow in the Compose button and select Page. Create your landing page, making it appear exactly as you wish.

Method 2, Landing Page on a Second Blog

This second method allows your landing page to share your blog's look and feel while eliminating distracting elements such as the Navigation Bar and Sidebar(s). You need to have a Pro account to use this method.

Click on Blogs in the green band at the top of the page and select Add a Blog. For the purpose of this post we'll name the new blog 'Landing'. On the Design Tab select Choose a Theme and select the same theme for your new blog that you use on your existing blog. While still on the Design Tab click on Select a Layout and select the 1 Column layout.

Next go to your main blog's Design Tab, click on Add Custom CSS and copy the contents of the large custom CSS field. Now go to your new landing page blog's Design tab, click on Add Custom CSS, and paste into the field. This will make sure that your landing page has the same look and feel as your main blog.

Most of TypePad's themes are 940px wide except in 1-Column layout. You'll want to modify the width of the 1-Column layout to accommodate your original blog's 940px-wide banner. To do so, add this to the end of the CSS in the Custom CSS field:

.layout-one-column #container,
.layout-one-column #banner,
.layout-one-column #alpha {
 width: 940px;
}

While still on the Design tab, click on Organize Content. Uncheck:

Navigation Bar
Archive Headers
Post Date Header
Post Title
Post Footer
Blog Footer

Remove (by clicking on the white X in the red circle) the sidebar modules:

Archives
Categories
Post Feed
Powered By TypePad Link

Create a static page for your landing page content.(Click the down-arrow in the Compose button and select Page.) Very Important: Leave the Title blank.

After publishing the page, click on the Settings tab. and select Posts & Pages. Scroll down to the Front Page section. Click on Display a 'page' as the front page. Since your landing page has no title the entry in the drop-down box will be blank.

Method 3: Landing Page on a Second Blog that Looks Completely Different from Your Main Blog

With two small modifications, the Journal theme makes an excellent blank canvas for a landing page.

Click on Blogs in the green band at the top of the page and select Add a Blog. For the purpose of this post we'll name the new blog 'Landing'. On the Design Tab select Choose a Theme and select one of the Journal themes. While still on the Design Tab click on Select a Layout and select the 1 Column layout.

While still on the Design Tab, click on Add Custom CSS and enter the following two lines into the large custom CSS field:

#banner{ display:none;}
.entry-header { background: none; }

While still on the Design tab, click on Organize Content. Uncheck:

Navigation Bar
Archive Headers
Post Date Header
Post Title
Post Footer
Blog Footer

Remove (by clicking on the white X in the red circle) the sidebar modules:

Archives
Categories
Post Feed
Powered By TypePad Link

Create a static page for your landing page content.(Click the down-arrow in the Compose button and select Page.) Very Important: Leave the Title blank.

Give Your Landing Page it's Own Domain Name

No matter which of the above three methods you choose, to finish this project in a professional way you should give your landing page it's own short memorable domain name. GoDaddy is an excellent place to register a domain name because they give you complete control over all DNS settings. The instructions are in TypePad's Knowledge Base here.

More Small Business Resources

Typepad has an entire website dedicated to providing help and resources to small business owners who want to make the most of their TypePad blogs. You'll find a series of webinars, tools, and experts dedicated to helping you leverage your blog and other forms of social media to grow your business. To visit TypePad's Small Business Center, click here.

11:50 AM in Blogging Business | Permalink | Comments (2)

Comments

BRILLIANT! I've needed landing pages, but hadn't thought of using Typepad in that way. Also, thanks for including the step-by-steps. Excellent article.

Posted by: Account Deleted | September 29, 2009 at 10:49 AM