|
Article Directory
|
+ Authors
+ Articles
|
|
|
|
Sales Pages With Style - Create Quality Sales Pages With CSS
Copyright (c) 2008-2012 Elizabeth Adams
Sales pages, to be effective, must immediately catch the attention of even a casual web surfer. The sales message contained in the sales page needs to be both easy to read and understand. If the content-display styling is well-crafted, the sales message can be absorbed with just a rapid page scan. An interested reader will re-read the page for the details.
Sales copy provides the content which entices the reader to move deeper into the page towards the "Order Now" button.
The job of a Cascading Style Sheet (CSS), is to
facilitate page navigation,
improve readability, and
call attention to important content.
There are lots of articles and ebooks available on the Web about "writing" profitable sales copy. You can easily find them with a quick search. This article focuses on "styling" the sales page and its content with CSS.
There are several advantages to using CSS for display styling. One of the best reasons is that it frees the copywriter from initial concerns about page formatting. Using very basic HTML code, such as that allowed for submissions to ezinearticles, the page content can be written with any basic text editor without concern for special content formatting.
Before any CSS styling has been applied, the sales page would not convert any prospects. At this stage, the HTML document contains all of the "content" that will be used. Text and images will typically be positioned on the page in roughly the order these elements will be used in the final sales page. CSS will make everything "pop" and "sizzle" when it is applied to the page.
After the sales copy is written, important page elements (identified through HTML tags) and content (information between HTML tags) can be identified and linked to the appropriate CSS formatting code, contained in separate CSS text file, for browser display. A previous article of mine, published at ezinearticles, explains how the HTML content gets linked to the CSS file. Briefly, the HTML-CSS link is done through the HTML "link" meta tag and content is identified through class and id tag attributes and through the use of the HTML span tag.
Content-specific styling includes special text formatting, such as highlighting and quotations, and the placement of items such as images and forms within the page.
I like to display the content in roughly the middle half of the monitor display and use a line length of about 60 characters. I also like to use a large enough font size to make blocks of text easy to read.
Because the page layout is so important, I use a fixed table design for the content: the content is placed in the center of the display and is framed in by wide right and left margins and narrow top and bottom margins. If the width of the browser page is narrowed by the reader, the right and left margins will narrow equally but the content area will remain the same width, and thus the content layout remains the way it was designed (i.e., not "liquid").
Essentially, my basic page layout consists of 4 nested "boxes:"
HTML Box -- demarcated by html tags and contains all other boxes.
BODY Box -- demarcated by body tags and contains the table and main-content boxes.
Table Box -- demarcated by table tags and contains the main-content box.
Main-Content Box -- demarcated by div tags and contains the sales-page content.
The HTML box includes the entire HTML document (except for the document-type declaration). The Body box contains everything visible to the reader. The Table box contains the sales page. The Main-Content box, as the name implies, includes all of the visible content of the sales page.
A sales page requires both global and content-specific CSS styling. Global styling includes such considerations as the page background, default font and line attributes, and page margins. Here is the global code I include in my CSS text file for sales pages:
body
{
font-size : 62.5%;
font-family : Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
color : black;
line-height : normal;
background-image : Specify the image URL here;
}
#main_content
{
font-size : 1.6em; /* this sets the default font size for the sales page and will display at 16px */
margin : 5%;
}
h1
{
font-size : 2.25em; /* will display at 36px */
}
h2
{
font-size : 1.5em; /* will display at 24px */
}
h3
{
font-size : 1.25em; /* will display at 20px */
}
h4
{
font-size : 1.125em; /* will display at 18px */
}
table.sales-letter
{
width : 60em;
margin-left : auto;
margin-right : auto;
table-layout : fixed;
background : #ffffff;
}
The body code above sets the default for the document's font size to 62.5% of 16px or 10px (px = pixels). This is too small for my sales page, and I adjust it in the #main_content section. The CSS body code also sets the font color to black, the line spacing to normal, the font family to sans-serif (with Verdana as the first choice), and specifies a blue background image used for the body background.
I use the #main_content code to set the actual base font size I use for the sales page text. All other font sizes in the sales page are sized relative to this base. Unless otherwise specified, all text in the sales page will be 1.6em or 16px. I use the margin attribute to provide content spacing between the content and borders around content.
The "Hn" tags set the basic header sizes and are calculated based on the font size I specified for the #main_content. As an example, since I will be using a default font size of 16px for the sales-page content, the H1 font size would be 2.25x16px or 36px. The "Hn" tags can later be modified with additional attributes, such as color and centering.
The CSS table attributes I use place the sales page in roughly the middle half of the full-size display page (1024 x 768 pixels). The width of the table, 600px, is just right for the line length I want to use. Since the table-layout attribute is "fixed," the table layout in the browser will be preserved at all times.
Since all of the font sizes are relative to the font size I set in the #main_content section, all sizes can be made larger or smaller by changing just the one value. For more information about the use of ems for sizing, I would suggest a visit to a blog post by Richard Rutter.
After the global formatting is applied page now has some nice-appearing structure.The content now lies between attractive borders and the content is contained on a "page" with adequate margins and on a background of choice.
Below are 12 additional tips, including the CSS code, you can use to stylize specific elements and text in your sales pages.
(1) I want my headline to be big, bold, red, and centered. Here is the CSS code I use:
h1.headline
{
line-height : 1.5;
color : #cc0000;
text-align : center;
}
(2) I use a smaller, blue, bold, and centered sub-headline.
h2.subheadline
{
line-height : 1.5;
color : #1b356e;
text-align : center;
}
(3) I use a small font size for the spider text and copyright. I position the spider text at the top of the page for the benefit of search engines.
#spidertext, #copyright
{
font-size : 1.2em;
}
(4) I use CSS code to position my photo so that it "floats" to the right and any text to the left flows around the photo.
.photo
{
float : right;
display : inline;
}
(5) If you want to center section headings and color the text red or blue, here is usable code:
h3.red
{
line-height : 1.5;
color : #cc0000;
text-align : center;
}
h4.blue
{
line-height : 1.5;
color : #1b356e;
text-align : center;
}
(6) I change the font type for quotations. Using Courier New sets the quotes apart from normal body text.
.quote
{
font-family : "Courier New", Courier, monospace;
}
(7) I use an unnumbered list for my benefits list. The list can be customized to use a custom bullet and extra space between list elements. The CSS code to accomplish my custom list formatting is as follows:
li
{
list-style-position: inside;
list-style-image: Specify the image URL here;
list-style-type: none;
margin-bottom: 1em
}
(8) You can highlight important text with a yellow background.
.highlight
{
background-color : yellow;
}
(9) You can emphasize text by making it bold.
.bold
{
font-weight : bold;
}
.boldred
{
font-weight : bold;
color : #cc0000;
}
.boldblue
{
font-weight : bold;
color : #0000ff;
}
(10) I like to make sales-page testimonials special by framing them and using a pastel background for the text.
.testimonial
{
display : block;
margin-left : auto;
margin-right : auto;
background : #fffacc;
padding : 1em;
border : double;
border-width : thick;
border-color : #999999;
}
(11) The purchase form is a very important component of the sales page. I use a red-dashed border for the form.
.purchase-form
{
padding : 1.5em;
border : dashed;
border-width :medium;
border-color : #FF0000 ;
background : #fffac6;
}
(12) If you use an image and associate a link with it, you will want to turn off the border or you will get a distracting blue border around the image.
a img
{
border : 0;
}
After all CSS styling has been applied, the sales page now has some "snap" and "pop". The colorful headline immediately catches the attention of even a casual web surfer. The sales message contained in the sales page is now easy to read and much easier to understand. The well-crafted content-display makes it possible for the sales message to be absorbed with just a rapid page scan. After a preliminary scan, an interested reader will more than likely re-read the page for the details.
To get a ZIP file of the HTML and CSS files mentioned in this article and that you can use for practice or for your own templates, please visit http://www.elizabethadamsdirect.com A full-color PDF of the article is also available for download.
Sample web pages showing the template sales page without CSS applied, with just global CSS applied, and with all CSS applied can be seen at http://www.elizabethadamsdirect.com/template/exhibits.html
To look at a "real" sales page that used the CSS techniques discussed in this article, you can visit http://www.elizabethadamsdirect.com/greatheadlines
|
Elizabeth Adams has been writing direct sales copy since the early 1990's, when she employed several people to handle mailings and product fulfillment for her postcard marketing business. Elizabeth learned in direct mail how to tweak her sales copy on the run and improve her sales conversion by as much as 400% in only one mailing. She learned how to write a great headline and effective sales copy. Get "Great Headlines - Instantly" today to learn how to do for yourself what Elizabeth learned in the trenches: http://www.elizabethadamsdirect.com/greatheadlines
|
Follow "The Phantom Writers" on Twitter
(@phantomwriters)
to be notified when new articles are made available.
VOTE ON THIS ARTICLE
Needs Work >>
0 -
1 -
2 -
3 -
4 -
5
<< Excellent Article
Tell our authors what you think about their article.
|
Top-Level Category: Business Online Articles || Related Categories: Internet Articles
10 Most Recent Articles Written by Elizabeth Adams
Earning Ecommerce Cash: Starting an Online Business
Written by: Elizabeth Adams |
Distributed: 2008-04-29 |
Word Count: 372 |
Page Views: 855
| Votes: 6 |
Rating: 1.17
There are many reasons why, each day, thousands of people are
drawn to the idea of starting an online business:
How Traffic Exchanges Work: A Short Review
Written by: Elizabeth Adams |
Distributed: 2008-04-23 |
Word Count: 407 |
Page Views: 770
| Votes: 4 |
Rating: 1.25
Successful internet marketers use various tools to assist web
surfers find their web pages. Blogs, article submissions, traffic
exchanges--these are just a few tools in the marketer's tool
kit. This article will present an overview of how traffic
exchanges work.
Writing Articles With Style - Create Quality Articles With CSS
Written by: Elizabeth Adams |
Distributed: 2008-04-08 |
Word Count: 2313 |
Page Views: 1240
| Votes: 7 |
Rating: 2.43
Writing your quality articles using Cascading Style Sheets (CSS)
will insure that your articles will be both easy to read and
aesthetically pleasing to the viewer. This article will teach you
how to utilize CSS within your articles and your website.
The Opt-In Form - Easily Get More Quality Leads
Written by: Elizabeth Adams |
Distributed: 2008-04-03 |
Word Count: 809 |
Page Views: 1917
| Votes: 6 |
Rating: 2.50
If the other ad components, such as the ad headline, have been
crafted properly, your visitors will already be presold on what
you are offering them. The opt-in form must eliminate any
misgivings a visitor might have about filling out the form and
hitting the submit button. The basic components of the opt-in
form work together to accomplish this.
Profitable Ads - How To Write Ads That Pull
Written by: Elizabeth Adams |
Distributed: 2008-03-31 |
Word Count: 753 |
Page Views: 1181
| Votes: 6 |
Rating: 2.33
In today's internet environment, ads that do not immediately
"grab" a surfer's attention will receive "the click of
death" as the visitor leaves your ad. An ad on the Web will
often receive only a glance. In that split second, a potential
prospect has to be enticed into giving the ad a second, deeper
look. Here are some basic guidelines for writing profitable ads
that pull.
Make Money Now Online With Reverse - Margin Marketing
Written by: Elizabeth Adams |
Distributed: 2008-03-29 |
Word Count: 635 |
Page Views: 1049
| Votes: 7 |
Rating: 3.00
With Reverse-Margin Marketing, your customer pays you directly,
not the company. The entire purchase price goes directly into
your merchant account and from there directly into your bank
account. You don't have to wait for a company-generated paycheck
and can make money now online--fast.
All of Author's Articles on this site: Elizabeth Adams Articles
Most Recent "Business Online" Articles
Sell Yourself, Not Your Products or Services
Written by: Bill Platt |
Distributed: 2012-01-02 |
Word Count: 989 |
Page Views: 2754
| Votes: 5 |
Rating: 4.00
Sell yourself, not your products or services. The point we
need to make is that your products and services will change
over time as your business adapts to the realities of the
marketplace.
Work From Home - Make Money Online With EBay Store
Written by: David Miller |
Distributed: 2011-12-12 |
Word Count: 2105 |
Page Views: 350
| Votes: 1 |
Rating: 2.00
Find out how to present your items, as well as other key factors
to profit from your eBay Store.
Bring Your Photography To Life With Stunning Video
Written by: Adam Harding |
Distributed: 2011-12-12 |
Word Count: 684 |
Page Views: 456
I want to let you in on my little secret. It is about how I bring
photographs to life by creating professional video slideshows
that look like they cost hundreds of dollars.
Leveraging the Social in Social Media
Written by: Enzo F. Cesario |
Distributed: 2011-09-21 |
Word Count: 907 |
Page Views: 393
| Votes: 1 |
Rating: 1.00
Social media marketing is about the conversation, not the
pitch. Having conversations with people is nice, but the
goal of a brand is ultimately to get people interested in
spending their time or money on the brand, after all. What
does having this conversation accomplish, and just how does
a brand use that conversation to get the critical conversion
from conversation to customers?
Blog Writing - Finding the Right Person
Written by: Enzo F. Cesario |
Distributed: 2011-09-21 |
Word Count: 884 |
Page Views: 629
There are a host of articles and sites covering advice on
how to address various topics, but one area that doesn't
get a lot of attention is what "person" to write the blog
in. Each linguistic person has its own strengths and
weaknesses, depending on the message that needs to be
covered. Ultimately, most will simply write in whatever
person is most natural to them, but there is some merit in
taking a bit of time to think about the implications,
advantages and disadvantages of each.
That First Impression: Title Considerations
Written by: Enzo F. Cesario |
Distributed: 2011-09-19 |
Word Count: 860 |
Page Views: 353
While it certainly isn't as much work as crafting the body
of a superior article, selecting a title for a piece is
definitely an important element of the entire process of
content creation. Here are some thoughts on crafting a
perfect title.
5 Tips For Writing Great Content For Your Blog
Written by: Lee Dobbins |
Distributed: 2011-09-16 |
Word Count: 987 |
Page Views: 404
If you want people to come back to your blog over and over
again, then you need to provide great web content. This may
seem like an impossible task if you aren’t a natural born
writer. Here are 5 tips that will help even the least
experienced writer create blog content that will entice even
first time visitors to become frequent readers.
Understanding Cloud Computing for SMBs
Written by: Audre Hill |
Distributed: 2011-09-16 |
Word Count: 449 |
Page Views: 512
| Votes: 2 |
Rating: 5.00
The buzz about cloud migration, or taking your business to the
cloud, is all over the internet. But the geek speak and sales
hype make understanding the cloud difficult for small and
mid-sized business owners. Read this to clear up your cloud
confusion.
Dynamic Content: Using Analytics to Write Your Blog
Written by: Enzo F. Cesario |
Distributed: 2011-09-16 |
Word Count: 873 |
Page Views: 424
The role of web analytics in setting useful metrics for a
site has been discussed in-depth in any number of places,
but this is far from the only useful function that web
analytic practices can offer. As in any field, a little
thinking outside the box can offer extensive rewards to the
creative researcher. Perhaps most usefully, creative
cultivation of web analytics can help conquer blogger's
block and help a good writer come up with some unique angles
for content they thought they had peaked out on.
Social Media Marketing Tools – Putting Your Finger on the Pulse of the Web
Written by: Enzo F. Cesario |
Distributed: 2011-09-14 |
Word Count: 856 |
Page Views: 341
Social media marketing is the home of successful brand
promotion, and finding the right mix of tools to take
advantage of it has become the defining issue of the modern
brand. Knowing the focus of each of these tools and the best
way to use them is the key to bringing all this power under
control and using it to help promote a brand to its full
potential.
Most Viewed "Business Online" Articles
Attracting Readers to your Book
Written by: Alastair Hall |
Distributed: 2006-05-18 |
Word Count: 708 |
Page Views: 42518
| Votes: 9 |
Rating: 2.11
One of the common and obvious ways to market a self-published
book is having your own website. The harder part is how to
attract your target audience and then convert the sale.
How To Make Visitors Bookmark Your Site
Written by: Cheryl Miller |
Distributed: 2006-10-10 |
Word Count: 536 |
Page Views: 34815
| Votes: 13 |
Rating: 2.38
When visitors bookmark your site it is a sign that you have built
a great website and are pleasing them. Visitors think highly
enough of your site to want to return and possibly tell others
about it. You are not only increasing traffic from your existing
clientele you are encouraging new traffic by means of viral
marketing.
Treat Online 'Guests' With Respect
Written by: Rick Sloboda |
Distributed: 2007-07-27 |
Word Count: 472 |
Page Views: 27199
| Votes: 25 |
Rating: 3.76
Does your website show your customers lack of respect? Review the
following checklist to find out.
How I Got 70,000 Useless Visitors To My Site In One Day! (One Internet Marketer's Analysis of Social Bookmark Traffic)
Written by: Titus Hoskins |
Distributed: 2007-11-06 |
Word Count: 1545 |
Page Views: 23761
| Votes: 8 |
Rating: 2.13
Is social bookmark traffic useless? Is it even worth cultivating
for your site? Can it be used from an online marketing
perspective? Read to discover one Internet Marketer's analysis
of social bookmark/media traffic...
Successful Article Marketers Help Readers Solve Problems
Written by: Bill Platt |
Distributed: 2008-10-29 |
Word Count: 816 |
Page Views: 18812
| Votes: 23 |
Rating: 3.26
Every week, I have the opportunity to speak with people about the
benefits and challenges of using article marketing to promote an
online business. Article marketing is about getting your sales
message in front of potential customers and to get links to your
website. Many interpret this to mean that an article should
directly promote a website within the article, but that approach
is wrong and will reduce one's success using this methodology.
Tips For Building Your First Website
Written by: Benny Tsabba |
Distributed: 2007-05-30 |
Word Count: 1511 |
Page Views: 14627
| Votes: 9 |
Rating: 2.00
New people are coming online everyday. And many of those people
desire to turn their spare time into spare cash. So begins their
journey.
Successful Forum JVs and How To Get Them
Written by: Diana Barnum |
Distributed: 2006-06-15 |
Word Count: 648 |
Page Views: 6634
| Votes: 11 |
Rating: 2.18
The forming of common alliances, also referred to as a joint
venture (JV), happens nearly every day in the business world.
One of the most popular means of linking people up online of so
that they can work together on their projects is via forums,
where people of all levels of business and expertise post in
common threads.
Increasing Productivity In Your Online Business
Written by: Willie Crawford |
Distributed: 2006-06-14 |
Word Count: 1407 |
Page Views: 4327
| Votes: 32 |
Rating: 3.72
Running an online "empire" of approximately 1600 websites and
blogs, selling a variety of products, services and ideas, I
have to be much more productive than the average person in a
"regular job."
Who Else Wants to Know How-To Write an Effective Advertisement?
Written by: Bill Platt |
Distributed: 2011-08-25 |
Word Count: 1431 |
Page Views: 4296
| Votes: 22 |
Rating: 2.59
Webmasters struggle everyday with the question of how they should
advertise their website. There are so many advertising venues; it
is hard to know which is the right venue or the right combination
of advertising venues.
A Recent Issue Of Playboy Revealed...
Written by: Bill Platt |
Distributed: 2010-01-19 |
Word Count: 1658 |
Page Views: 4193
| Votes: 1 |
Rating: 4.00
If you have ever spent money trying to use article
marketing, and you failed to generate any measurable success
with your articles, then this article will show you why you
most likely failed to see your articles generate a solid
return-on-investment for your online business...
Highest Ranked "Business Online" Articles
What Kind Of Backlinks Are Best At Helping Your Website In Google?
Written by: Bill Platt |
Distributed: 2009-11-09 |
Word Count: 439 |
Page Views: 1819
| Votes: 5 |
Rating: 4.80
I was in the Warrior Forum, and someone asked what kinds of
Backlinks are worth pursuing. This is my answer to that
query.
How to Keep Your Article Content Fresh and Interesting
Written by: Craig Ritsema |
Distributed: 2006-08-29 |
Word Count: 699 |
Page Views: 2155
| Votes: 17 |
Rating: 4.18
Webmasters everywhere are constantly on the lookout for fresh and
interesting content for their website. Along with these content
qualities is the requirement that it be unique. Everyone wants
their website to stand out above the others in the search engine
results. So what is the trick for you to keep a steady supply of
this quality content coming your way?
Is Your Business 'Out Of Site'? Employ The Ultimate Marketing Tool
Written by: Rick Sloboda |
Distributed: 2007-01-09 |
Word Count: 445 |
Page Views: 2200
| Votes: 19 |
Rating: 4.16
With the rapid expansion of the digital economy, the web site is
conceivably the most powerful marketing and sales tool you can employ.
Find out what a web site can do for you.
How To Use Your Race To Get Rich
Written by: Herbert Harris |
Distributed: 2009-07-07 |
Word Count: 1407 |
Page Views: 2572
| Votes: 40 |
Rating: 4.05
Amid recent news reports that there continues to be an ongoing
and substantial gap between the net worth of Whites and other
racial groups, it is easy to be distracted and overwhelmed by the
raw data. However, I am immediately reminded of a quote offered
by an economic expert from the past... "There are lies, damned
lies, and statistics!"
Secrets of Domain Parking - An Innovative and Easier Way to Make Money
Written by: John Khu |
Distributed: 2009-02-27 |
Word Count: 484 |
Page Views: 1391
| Votes: 7 |
Rating: 4.00
Using a good domain parking services to monetize expired domain
names seems to be a neglected aspect with a number of domain
names traders. Domain parking is also an unfamiliar concept to
many inexperienced domain name traders. Read this article to
better understand domain parking and how it can be of benefit to
you.
Expired Domain Gains - Simple Ideas to Create an Income Base
Written by: John Khu |
Distributed: 2009-07-31 |
Word Count: 549 |
Page Views: 3231
| Votes: 14 |
Rating: 4.00
You can use a number of simple methods and plans to create a
solid income base that earns a monthly ongoing income base.
For many expired domain entrepreneurs (both full-time and
part time), expired domains offer an opportunity to
supplement their current income with money earned out of
dealing with expired domains.
Sell Yourself, Not Your Products or Services
Written by: Bill Platt |
Distributed: 2012-01-02 |
Word Count: 989 |
Page Views: 2754
| Votes: 5 |
Rating: 4.00
Sell yourself, not your products or services. The point we
need to make is that your products and services will change
over time as your business adapts to the realities of the
marketplace.
The Most Important Ingredient for Info Product Success (is You)
Written by: Judy Murdoch |
Distributed: 2008-04-15 |
Word Count: 981 |
Page Views: 1428
| Votes: 13 |
Rating: 3.92
Last week I was attending a conference and mentioned to someone I
help small business owners create information products. The other
person was very friendly until I said "information products."
Then the temperature in the room dropped about 10-degrees
How To Build A Website That Will Rank Well In The Search Engines?
Written by: Fred Schebesta |
Distributed: 2007-04-23 |
Word Count: 1064 |
Page Views: 2129
| Votes: 9 |
Rating: 3.89
Redeveloping your website can be a real challenge when you assume
your web designers and developers understand search engine
marketing. Unfortunately this is not usually the case. Most
designers are great at making pretty pictures and developers are
great at making great technology. But pretty pictures and great
technology don't necessarily give you great search engine
results.
How to Prosper Beyond Virtual Real Estate
Written by: Kamau Austin |
Distributed: 2006-10-17 |
Word Count: 1263 |
Page Views: 1593
| Votes: 7 |
Rating: 3.86
We explore virtual real estate (VRE) sites as sites primarily
embedded with Google Adsense(tm) or Yahoo Publisher's Network (YPN)
ads.
|
|
|
Article Reprint Rights
|
This work is
licensed under a
Creative Commons
License
You are not required to show the creative commons license notice when you reprint this work.
|
|
Article Statistics
|
Word Count: 1734
Total Views: 1156
Views This Month: 16
Views Last Month: 26
Article Rating: 1.00 of 5
Votes Cast: 4
Author Overall Stats:
Times Viewed Overall: 8161
Author Rating: 2.08 of 5
Votes Cast Overall: 40
More Articles By Author:
Articles On This Website
Article Title Search:
Widow Search
Right Blinker
Google
Yahoo!
Zuula
Bing
Cuil
Last Distribution Date:
2008-04-15 10:36:00
|
|
|
Home
for Writers
for Publishers
Article Directory
Article Search
Contact
Get RSS Feed
