Making a sales page with Headway is amazingly easy to do. Just check out the HH premium section’s sales page. So, let’s get started, huh?
How to Make A Killer Sales Page with Headway
The first thing you need to do is create a new page. Once that’s done, follow these settings to optimize it and hide it from your viewers.
- Create a new page in the wordpress dashboard.
- Add your copy to the page you’ve created in the wordpress dashboard.
- Check “hide from navigation” in the navigation panel.
- Customize the SEO settings as needed.
- Alter the page title if needed.
Removing the Header and Footer Elements
Now that you’ve got your page created, scroll down to the “Header Elements” tab in the write panel and check all of the options.
Publish/update the page and the header elements will magically go away! Unfortunately, you’ll need to use CSS for the footer.
Find the ID number of your sales page. It either appears in the address bar URL of the dashboard page editor (&post=xxxxx) or you can look it up in the body tag with FireBug. Once that’s done, add the following code to the bottom of your custom.css file:
body.pageid-xxx div#footer, body.pageid-xxx div#footer-container {display: none;}
Be sure to replace the “XXX” with the ID number of your page. This will relieve your sales page of its footer.
How to Customize the Styling of Your Sales Page Content
From here on out, it’s all CSS. If you want to use fancy formatting on your sales page, simply follow this structure when adding code to your custom.css file:
body.pageid-xxx .entry-content h2 {font-size: 40px; line-height: 45px; color: red;}
body.pageid-xxx .entry-content blockquote {border: 3px dashed #ccc;}
You’ll need to use the “.entry-content” selector because that’s the closest element to your body text. Without it, your CSS code may not work. Note that you need to replace “XXX” with the correct ID number for your sales page.
How to Give Your Sales Page a Custom Background
I’m going to assume that one of the most common things you’ll want to do with your sales page is give it a custom background. This can be achieved by adding the following code to the bottom of your custom.css file:
body.pageid-xxx {background: url(custom/images/sales.jpg);}
Note that this code doesn’t use the “.entry-content” selector. That’s because we want the entire body of the sales page, not just the content.
Made Your Sales Page Yet?
- What questions do you have about creating sales pages with Headway?
- Have any examples you want to share?
Share your thoughts and opinions below!
Tweet