All the code you need to make a professional sales page in your WordPress blog!

The content on this page gives you examples of how to style your sales page to SELL MORE ONLINE!

Two easy ways to edit this content for your own sales page

• You can either edit this file, which is called sample-squeeze-content.html in the theme files, in any HTML editor. When you have your page complete, simply copy the HTML code from where it says "Begin here to paste into your WordPress page" to then end of the file where it says "End here to paste into your WordPress page". Make sure you turn off your visual editor before pasting the code! This can be done in your user profile page.
• Another easy way to edit this content is to copy the contents of the file called sample-squeeze-content.txt into your WordPress page. Again, turn off your visual editor. You can then edit your page in WordPress. The content in that file is identical to this one, but you don't have all the extra HTML code to work around.

Look at the HTML code - it's easy!

I commented each content section in the HTML code. You can simply copy and paste any section into your sales page. Just look for the commented start and end of each section.

The HTML comments look like this: <-- Comment goes here -->

The following are the sample content items that you can use in your own page. I've styled these to give you a fast start in creating your own page and present some ideas for content presentation. Again, take a look at the HTML code to see the difference between the lines below. In the first three, the class is applied to the H3 tag. The last three have a span tag within the H3 tags to apply the color to only a portion of the text.

This is red text using the H3 tag

This is blue text using the H3 tag

This is green text using the H3 tag

This is red text within an H3 tag

This is blue text within an H3 tag

This is green text within an H3 tag

Here are some styled testimonials

To make a testimonial section like this, simply add the blockquote tag. It will automatically add the quotation mark and the bottom border. The code looks like this:

<blockquote>This is your content</blockquote>

Johnny Doe

JohnnysDomain.com

You can use all the normal styles like yellow highlighting, italics, bold and even bold italic within the blockquote style.

Again, I'm using line breaks instead of 'enter' when spacing these paragraphs. If you use an actual paragraph tag like this: <p> you will end up with too much space around your text.

Johnny Doe

JohnnysDomain.com

Here are some list styles

This list is made by applying the "greencheck" class to the UL (unordered list) tag

• This is the bold text to emphasize this list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, egestas vel, tincidunt adipiscing, scelerisque non, ligula. Morbi tincidunt euismod elit. Maecenas in tortor. Sed commodo.
• This is the bold text to emphasize this list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, egestas vel, tincidunt adipiscing, scelerisque non, ligula. Morbi tincidunt euismod elit. Maecenas in tortor. Sed commodo.
• This is the bold text to emphasize this list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, egestas vel, tincidunt adipiscing, scelerisque non, ligula. Morbi tincidunt euismod elit. Maecenas in tortor. Sed commodo.
• This is the bold text to emphasize this list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, egestas vel, tincidunt adipiscing, scelerisque non, ligula. Morbi tincidunt euismod elit. Maecenas in tortor. Sed commodo.

This list is made by applying the "redstop" class to the UL tag

• This is the bold text to emphasize this list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, egestas vel, tincidunt adipiscing, scelerisque non, ligula. Morbi tincidunt euismod elit. Maecenas in tortor. Sed commodo.
• This is the bold text to emphasize this list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, egestas vel, tincidunt adipiscing, scelerisque non, ligula. Morbi tincidunt euismod elit. Maecenas in tortor. Sed commodo.
• This is the bold text to emphasize this list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, egestas vel, tincidunt adipiscing, scelerisque non, ligula. Morbi tincidunt euismod elit. Maecenas in tortor. Sed commodo.
• This is the bold text to emphasize this list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam ligula, egestas vel, tincidunt adipiscing, scelerisque non, ligula. Morbi tincidunt euismod elit. Maecenas in tortor. Sed commodo.

Make sure you check out the included graphics files! Over 240 images Absolutely FREE!

The FlexSqueeze theme includes a variety of icons, bursts, buttons and other elements that work great on sales pages. You can insert them anywhere you want and they really jazz up your page.

Tips for inserting images into your squeeze page

It's important, that's why the font is so big!

Manually inserting images into your blog pages can be a little tricky. The trick to successfully inserting images is to use an absolute path to your image. This simply means to use the WHOLE link to the image and not a relative path.

If you want to place an image on your page, the easiest way is to upload the image to your server first using the built-in image uploader on the theme options page. This will copy your images directly into your images folder. If you upload images using the upload function built into the WordPress page editor, it will upload your image into the uploads directory, not the images directory. And if you have month and year based file upload enabled, retrieving your image can be a nightmare.

Once you've uploaded your image to your theme's images directory, you can link to the image using the full path to the image. For example, say you upload an image called 'button.png' to your theme's images folder. You can now link to the image like this (assuming you installed WordPress into the root of your domain):

http://www.yourdomain.com/wp-content/themes/flexsqueeze/images/button.png

(Change the yourdomain.com to your actual domain name!)

If you installed WordPress into a folder called /blog, your link would like like this:

http://www.yourdomain.com/blog/wp-content/themes/flexsqueeze/images/button.png

(Again, change the yourdomain.com to your actual domain name!)

All the buttons and arrows included on this page are RELATIVE links, because I don't know what you domain name is, and you'll be editing the file first anyway. So you will need to change the links to any buttons and graphics to ABSOLUTE links. I commented in the HTML source code when there is a graphic on this page that needs the link to be updated.

All of the buttons an images used on this page are included in the images folder of the theme, so if you upload the entire theme, you will already have these images available to use.

Any images that are used in the CSS code will link just fine. This includes list bullets and much of the form graphics (except buttons). It's only the images that are placed within the HTML code that will need to be updated with your specific domain and link path.

Here are some pre-styled forms you can use.

You'll need give your form an action to process the click, but it's really quite easy to do. The form below has a hover button that you can set the color and hover color in your options page. The other form buttons are graphics that are included with the theme.

Here are MORE testimonial boxes!

You can set the background color of these testimonial boxes in your theme options page. There is also room on the left side for photos of your testimonial providers. A 100 pixel wide image would fit well, but the box will expand to fit larger images.

Insert picture here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia, velit condimentum dapibus laoreet, felis lorem interdum ligula, sed venenatis turpis lectus tristique mi. Quisque venenatis dignissim metus. Duis quis orci. Integer eget nibh ut dui lobortis rutrum. Aliquam gravida lectus non turpis suscipit malesuada. Johnny Doe www.johnnysdomain.com

Insert picture here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia, velit condimentum dapibus laoreet, felis lorem interdum ligula, sed venenatis turpis lectus tristique mi. Quisque venenatis dignissim metus. Duis quis orci. Integer eget nibh ut dui lobortis rutrum. Aliquam gravida lectus non turpis suscipit malesuada. Johnny Doe www.johnnysdomain.com

A sales page isn't complete without a teaser!

To put a line through text, simply apply the "lineout" class to a span element surrounding your text. The code looks like this: <span class="lineout">139</span>

This form is an example of how you can use a custom form header on your page. The source graphic file is included with the theme, so if you have Adobe Fireworks or Adobe Photoshop, you can easily edit the header graphic and text. All you need to do to get the image into your form is replace the image name in the "roundboxtop" div with the name of your image. Make sure you upload your image into your theme using the image upload tool on the theme options page.

The grey rounded corner form background is also included in the source graphic file, so you can easily make the box blue, red, yellow or whatever color trips your trigger.

The paper graphic below is actually made up of three boxes. You have the top graphic above the Dear Joe, a vertically repeating background behind the text, and a bottom graphic to complete the box.

The sticky note element below allows you to put anything inside the sticky note and also text to the right side. It's a good way to draw attention to a special offer. The sticky note graphic is included in the source graphic file so you can easily make it blue, red, purple, etc.

The graphic below is put together the same as the other paper graphic, with three different graphics. This graphic is also included in the source graphic file, so you can make it whatever color you want.

And in closing... an action button to get people to BUY YOUR PRODUCT!

Best Regards,

Your Name

Your Company

P.S. The font for this signature is included in the fonts folder of the theme zip. Simply install the font, which is called Honey Script, and you can then create a signature just like mine in your favorite graphics editor! There are hundreds of free script fonts available on the internet, so if you don't like this one, you can easily find one that suits your needs.