Yellow Page Killer

Ultimate Guide To Marketing Your (Local) Business Online

Sample Squeeze Page Content
Squeeze pages MADE EASY!

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

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

Please note: much of the information included in this page and the code assumes you are using this squeeze page with my FlexSqueeze Theme for WordPress. If you are using this page with a different WordPress theme or on a standalone HTML site, much of the link information will be different.

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.

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, upload your image to your images folder.

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 your 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.

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 is another form example showing how arrows can enhance form visibility

Your Name:
Your Email:

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!

P.S. The font used for this signature is included in your zip file. It's called Honey Script. Simply install it on your computer and create your own signature in your graphics editing program.