<h1 class=”center”>FlexSqueeze - WordPress squeeze pages <span class=”yellow”>MADE EASY!</span></h1>
<h2 class=”center”>All the code you need to make a professional sales page in your WordPress blog!</h2>
<p class=”center”>The content on this page gives you examples of how to style your sales page to <strong>SELL MORE ONLINE!</strong></p>
<h3 class=”center”>Two easy ways to edit this content for your own sales page </h3>
<!– Start greecheck unordered list –>
<ul class=”greencheck”>
<li>You can either edit this file, which is called <strong>sample-squeeze-content.html</strong> 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". <strong>Make sure you turn off your visual editor before pasting the code!</strong> This can be done in your user profile page. </li>
<li>Another easy way to edit this content is to copy the contents of the file called <strong>sample-squeeze-content.txt</strong> 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.</li>
</ul>
<h2 class=”center”>Look at the HTML code - it’s easy!</h2>
<p>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. </p>
<p> <strong>The HTML comments look like this:</strong> <– Comment goes here –></p>
<!– End greencheck unordered list –>
<p>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.</p>
<h3 class=”red”>This is red text using the H3 tag</h3>
<h3 class=”blue”>This is blue text using the H3 tag</h3>
<h3 class=”green”>This is green text using the H3 tag</h3>
<h3><span class=”red”>This is red text</span> within an H3 tag</h3>
<h3><span class=”blue”>This is blue text</span> within an H3 tag</h3>
<h3><span class=”green”>This is green text</span> within an H3 tag</h3>
<!– Start of greybox –>
<div class=”greybox”>
<h4><strong>This box is a div container with the class of "greybox"</strong></h4>
You can create a box like this anywhere on your page. Simply apply the class of "greybox" to any tag like a heading (H1, H2, etc) a paragraph or even a div tag. To use the <span class=”yellow”>yellow highlight text</span>, simply wrap the text with code that looks like this: <br />
<br />
<span class="yellow">Text goes here</span><span class=”yellow”></span><br />
<br />
To prevent your box from being multiple smaller boxes when you hit ‘enter’, use a HTML line break, which looks like this: <br/>
<br />
<br />
It takes two line breaks to make a space between paragraphs like the one above this paragraph.
</div>
<!– End of grey box –>
<h2>Here are some styled testimonials</h2>
<!– Start blockquote testimonial –>
<blockquote> 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:<br />
<br />
<blockquote>This is your content</blockquote><br />
<br />
<em>Johnny Doe</em><br />
<a href=”#”>JohnnysDomain.com</a> </blockquote>
<!– End blockquote testimonial –>
<!– Start blockquote testimonial –>
<blockquote> You can use all the normal styles like <span class=”yellow”>yellow highlighting</span>, <em>italics</em>, <strong>bold</strong> and even <em><strong>bold italic</strong></em> within the blockquote style.<br />
<br />
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.<br />
<br />
<em>Johnny Doe</em><br />
<a href=”#”>JohnnysDomain.com</a></blockquote>
<!– End blockquote testimonial –>
<h3>Here are some list styles</h3>
<p><strong>This list is made by applying the "greencheck" class to the UL (unordered list) tag</strong></p>
<!– Start greencheck unordered list –>
<ul class=”greencheck”>
<li><strong>This is the bold text to emphasize this list item!</strong> 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.</li>
<li><strong>This is the bold text to emphasize this list item!</strong> 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.</li>
<li><strong>This is the bold text to emphasize this list item! </strong>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.</li>
<li><strong>This is the bold text to emphasize this list item! </strong>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.</li>
</ul>
<!– End greencheck unordered list –>
<p><strong>This list is made by applying the "redstop" class to the UL tag</strong></p>
<!– Start redstop unordered list –>
<ul class=”redstop”>
<li><strong>This is the bold text to emphasize this list item! </strong>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.</li>
<li><strong>This is the bold text to emphasize this list item! </strong>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.</li>
<li><strong>This is the bold text to emphasize this list item! </strong>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.</li>
<li><strong>This is the bold text to emphasize this list item! </strong>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.</li>
</ul>
<!– End redstop unordered list –>
<h2 class=”center”>Make sure you check out the included graphics files! <span class=”yellow”>Over 240 images Absolutely FREE!</span></h2>
<p>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.</p>
<h1 class=”center”>Tips for inserting images into your squeeze page</h1>
<h3 class=”center”>It’s important, that’s why the font is so big! </h3>
<p>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<strong> WHOLE link to the image </strong>and not a relative path.</p>
<p>If you want to place an image on your page, the easiest way is to <strong>upload the image to your server first using the built-in image uploader on the theme options page.</strong> 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.</p>
<p>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):<br />
<strong><br />
http://www.yourdomain.com/wp-content/themes/flexsqueeze/images/button.png</strong><br />
<em>(Change the yourdomain.com to your actual domain name!)</em></p>
<p>If you installed WordPress into a folder called /blog, your link would like like this:</p>
<p><strong> http://www.yourdomain.com/<span class=”yellow”>blog</span>/wp-content/themes/flexsqueeze/images/button.png</strong><br />
<em>(Again, change the yourdomain.com to your actual domain name!)</em> </p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h3>Here are some pre-styled forms you can use. </h3>
<p>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.</p>
<!– Start coupon box form with CSS hover button –>
<div class=”offercouponoutline”>
<div class=”offercoupon”>
<form action=”" method=”post” name=”form1″ id=”form1″>
<p>
<input type=”checkbox” name=”checkbox” id=”checkbox” />
<span class=”red”>YES!</span> I want to make easy squeeze pages in WordPress!</p>
<p>You made the right choice! Now you’re on your way to converting MORE visitors, building a BIGGER email list and making MORE MONEY on the internet!</p>
<input name=”button” type=”submit” class=”button” id=”button” value=”Download Now!” />
</form>
</div></div>
<!– End coupon box form –>
<!– Start coupon box form with graphic button –>
<div class=”offercouponoutline”>
<form action=”" method=”post” name=”form1″ id=”form3″>
<h3>
<input type=”checkbox” name=”checkbox2″ id=”checkbox2″ />
<span class=”red”>YES!</span> I want to make easy squeeze pages in WordPress!</h3>
<p><strong>You made the right choice! Now you’re on your way to converting MORE visitors, building a BIGGER email list and making MORE MONEY on the internet!</strong></p>
<!– The image link below will need to be updated as an absolute link (ie: http://www.yourdomain.com/wp-content/themes/flexsqueeze/images/btn-blue-signup.png) –>
<input type=”image” src=”images/btn-blue-signup.png” alt=”Sign Up”>
</form>
</div>
<!– End coupon box form –>
<br/><br/>
<h2 class=”center”>Here are MORE testimonial boxes!</h2>
<p class=”center”>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.</p>
<!– Start yellow testimonial box –>
<table width=”90%” border=”0″ cellpadding=”8″ cellspacing=”0″ class=”testimonial”>
<tr>
<td width=”25%” valign=”top” align=”center”>Insert picture here</td>
<td width=”75%” valign=”top”><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia, velit condimentum dapibus laoreet, felis lorem interdum ligula, sed venenatis turpis lectus tristique mi. </p>
<p>Quisque venenatis dignissim metus. Duis quis orci. Integer eget nibh ut dui lobortis rutrum. Aliquam gravida lectus non turpis suscipit malesuada. </p>
<p><em>Johnny Doe</em><br />
<a href=”#”>www.johnnysdomain.com</a></p></td>
</tr>
</table>
<!– End yellow testimonial box –>
<!– Start yellow testimonial box –>
<table width=”90%” border=”0″ cellpadding=”8″ cellspacing=”0″ class=”testimonial”>
<tr>
<td width=”25%” valign=”top” align=”center”>Insert picture here</td>
<td width=”75%” valign=”top”><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia, velit condimentum dapibus laoreet, felis lorem interdum ligula, sed venenatis turpis lectus tristique mi. </p>
<p>Quisque venenatis dignissim metus. Duis quis orci. Integer eget nibh ut dui lobortis rutrum. Aliquam gravida lectus non turpis suscipit malesuada. </p>
<p><em>Johnny Doe</em><br />
<a href=”#”>www.johnnysdomain.com</a></p></td>
</tr>
</table>
<!– End yellow testimonial box –>
<h2 class=”center”>A sales page isn’t complete without a teaser!</h2>
<p class=”center”>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></p>
<!– Start shadow box –>
<div class=”shadowbox”>
<div class=”sbcontent”>
<h2>Act NOW! <span class=”red”>Only <span class=”lineout”>139</span> <span class=”lineout”>27</span><span class=”black”> 6 left!</span></span></h2>
<p>Are we telling the truth? <strong>You’ll never know!</strong> But that’s not the point!</p>
<p>Our <strong>FlexSqueeze WordPress theme</strong> gives you all these cool boxes and styles already coded for you! All you need to do is insert your content, throw a few pictures in, put in your affiliate links and fire up the AdWords campaign! Then just sit back and <br />
<span class=”yellow-highlight”>WATCH THE MONEY ROLL IN!</span></p>
</div>
<div class=”sbshadow”></div>
</div>
<!– End shadow box –>
<br/><br/>
<!– Start ebook form –>
<div class=”roundbox”>
<div class=”roundboxtop”></div>
<div class=”roundboxcontent”>
<p>Enter your name and email address to download our 1/2 page eBook <br />
<span class=”red”>"Ultimate Guide to Everything"</span></p>
<form action=”" method=”post” name=”form2″ id=”form2″>
<table width=”425″ border=”0″ cellspacing=”0″ cellpadding=”2″>
<tr>
<td class=”label”>Your Name:</td>
</tr>
<tr>
<td class=”label”><input name=”name” type=”text” class=”input” id=”name”/></td>
</tr>
<tr>
<td class=”label”>Your Email:</td>
</tr>
<tr>
<td class=”label”><input name=”email” type=”text” class=”input” id=”email” /></td>
</tr>
<tr>
<td><div align=”center”>
<input name=”button” type=”submit” class=”button” id=”button” value=”Download Now!” />
</div></td>
</tr>
</table>
</form>
<p>This is just a sample form. Doesn’t really get you an eBook. </p>
</div>
<div class=”roundboxbtm”></div></div>
<!– End ebook form –>
<!– Start form with arrows –>
<div class=”roundbox”>
<div class=”roundboxtop”></div>
<div class=”roundboxcontent”>
<p> This is another form example showing how arrows can enhance form visibility</p>
<form action=”" method=”post” name=”form2″ id=”form4″>
<table width=”425″ border=”0″ cellspacing=”0″ cellpadding=”2″>
<tr>
<td class=”label”>Your Name:</td>
<td rowspan=”4″ class=”label”><img src=”images/arrow-rt-orange.png” width=”91″ height=”106″ align=”right” /></td>
</tr>
<tr>
<td class=”label”><input name=”name2″ type=”text” class=”input” id=”name2″/></td>
</tr>
<tr>
<td class=”label”>Your Email:</td>
</tr>
<tr>
<td class=”label”><input name=”email2″ type=”text” class=”input” id=”email2″ /></td>
</tr>
<tr>
<td colspan=”2″><div align=”center”>
<!– The image link below will need to be updated as an absolute link (ie: http://www.yourdomain.com/wp-content/themes/flexsqueeze/images/btn-blue-signup.png) –>
<input type=”image” src=”images/btn-blue-signup.png” alt=”Sign Up” style=”margin-top:20px;”>
</div></td>
</tr>
</table>
</form>
</div>
<div class=”roundboxbtm”></div></div>
<!– End form with arrows –>
<p class=”center”>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. <strong>Make sure you upload your image into your theme using the image upload tool on the theme options page.</strong></p>
<p class=”center”>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.</p>
<!– Start form with custom header image –>
<div class=”roundbox”>
<!– To insert your custom header, copy your image to your theme’s image directory and change the image name in the line below. –>
<div class=”roundboxtop” style=”height:129px;background:url(images/offer-header-1.jpg) left top no-repeat;”>
</div>
<div class=”roundboxcontent”>
<p> Easily include a custom form header like the one shown. Use the included PNG or PSD file and create your own!<span class=”red”></span> </p>
<form action=”" method=”post” name=”form2″ id=”form5″>
<table width=”425″ border=”0″ cellspacing=”0″ cellpadding=”2″>
<tr>
<td class=”label”>Your Name:</td>
</tr>
<tr>
<td class=”label”><input name=”name3″ type=”text” class=”input” id=”name3″/></td>
</tr>
<tr>
<td class=”label”>Your Email:</td>
</tr>
<tr>
<td class=”label”><input name=”email3″ type=”text” class=”input” id=”email3″ /></td>
</tr>
<tr>
<td><div align=”center”>
<!– The image link below will need to be updated as an absolute link (ie: http://www.yourdomain.com/wp-content/themes/flexsqueeze/images/offer-1.png) –>
<input type=”image” src=”images/button_r11_c21.png” alt=”Sign Up” width=”306″ height=”204″ style=”margin-top:20px;”>
</div></td>
</tr>
</table>
</form>
</div>
<div class=”roundboxbtm”></div></div>
<!– End form with custom header image –>
<p class=”center”>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.</p>
<!– Start torn out paper section –>
<div class=”paper1″>
<div class=”paper1top”></div>
<div class=”paper1content”>
<p> Dear Joe,</p>
<p>I just wanted to write to thank you for this great product!</p>
<p>My online business has prospered like I never though possible. Your excellent tutorials have given me all the tools I need to become a success, and for that I thank you!</p>
<p>Sincerely,</p>
<p>Jane Smith<br />
Palo Alto, CA
</p>
</div>
<div class=”paper1btm”></div></div>
<!– End torn out paper section –>
<!– Begin sticky note section –>
<p class=”center”>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.</p>
<div class=”stickywrap”>
<div class=”stickynote”>
<h2><strong>Special Offer:</strong></h2>
<p>If you order in the next 15 minutes, I will include this obscenely great extra value that <strong>WILL NOT be offered again!</strong></p>
</div>
<h3> </h3>
<h3>Here’s another offer you cannot miss! </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia, velit condimentum dapibus laoreet, felis lorem interdum ligula, sed venenatis turpis lectus tristique mi. </p>
<p>Quisque venenatis dignissim metus. Duis quis orci. Integer eget nibh ut dui lobortis rutrum. Aliquam gravida lectus non turpis suscipit malesuada. </p>
<div style=”clear:left;”></div><!– Make sure to include this clearing div so the wrap contains the entire sticky note –></div>
<!– End sticky note section –>
<br/><br/><br/>
<p class=”center”>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.</p>
<!– Start tan burnt edge paper section –>
<div class=”paper2″>
<div class=”paper2top”></div>
<div class=”paper2content”>
<p> Dear Joe,</p>
<p>I just wanted to write to thank you for this great product!</p>
<p>My online business has prospered like I never though possible. Your excellent tutorials have given me all the tools I need to become a success, and for that I thank you!</p>
<p>Sincerely,</p>
<p>Jane Smith<br />
Palo Alto, CA </p>
<p>Here’s an example how our buttons can be used on any background because they are PNG images with alpha transparency:</p>
<p class=”center”><img src=”images/button_r11_c21.png” width=”306″ height=”204″ /></p>
</div>
<div class=”paper2btm”></div></div>
<!– End tan burnt edge paper section –>
<br/><br/>
<!– Begin rolled white paper section –>
<div class=”paper3″>
<div class=”paper3top”>
<h3 class=”center”>Here’s another cool element you can use to get some attention to your important points!</h3>
</div>
<div class=”paper3content”>
<p> <strong>Here are the important points:</strong></p>
<ul class=”greencheck”>
<li><strong>Important point #1</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li><strong>Important point #2</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li><strong>Important point #3</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li><strong>Important point #4</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
<li><strong>Important point #5</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
</ul>
<p class=”center”><img src=”images/button_r11_c21.png” alt=”" width=”306″ height=”204″ /></p>
</div>
<h1 class=”center”><span class=”red”>Bonus offer!</span></h1>
<div class=”paper3btm”>
<p class=”center”><strong>Buy in the next 15 minutes and we’ll give you something really cool at NO EXTRA COST!</strong></p>
</div></div>
<!– End rolled white paper section –>
<p class=”center”><strong>And in closing… an action button to get people to <span class=”yellow”>BUY YOUR PRODUCT!</span></strong></p>
<p align=”center”>
<!– The image link below will need to be updated as an absolute link (ie: http://www.yourdomain.com/wp-content/themes/flexsqueeze/images/offer-2.png) –>
<img src=”images/button_r1_c1.png” width=”365″ height=”110″ /></p>
<br/><br/>
<!– Start closing signature –>
Best Regards,<br />
<!– The image link below will need to be updated as an absolute link (ie: http://www.yourdomain.com/wp-content/themes/flexsqueeze/images/signature.gif) –>
<img src=”images/signature.gif” width=”175″ height=”74″ /><br />
<strong>Your Name</strong><br />
Your Company
<p><strong>P.S.</strong> 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.</p>
<!– End closing signature–>