|
Training for Book Authors
|
|
|
Other Resources for Book Authors & Publishers
|
|
|
Please Support Our Advertisers
|
|
|
|
|
|
Sales Pages With Style - Create Quality Sales Pages With CSS
Copyright (c) 2008-2023 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
|
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: 2764
| Votes: 8 |
Rating: 0.88
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: 2824
| Votes: 6 |
Rating: 1.00
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: 4427
| Votes: 15 |
Rating: 2.13
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: 4528
| Votes: 8 |
Rating: 1.88
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: 3805
| Votes: 8 |
Rating: 1.75
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: 3190
| Votes: 15 |
Rating: 2.47
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
Four Tips For Creating An Effective Authors' Resource Box
Written by: Bill Platt |
Distributed: 2013-08-27 |
Word Count: 1669 |
Page Views: 8278
| Votes: 18 |
Rating: 2.50
In article marketing, there are many factors that will
affect your articles' ability to promote your website in
the most effective manner. In this article, we will briefly
discuss a couple those factors, before we dive into how to
create an effective Authors' Resource Box, also known as
the About The Author Information.
Website Traffic Generation: Winning the Love of the Traffic Fairy
Written by: Bill Platt |
Distributed: 2013-08-24 |
Word Count: 1149 |
Page Views: 9139
| Votes: 14 |
Rating: 1.86
Some people still believe that all they have to do is build
a website and customers will magically appear on their
site... Once they have built their websites, they wait
anxiously for the "Traffic Fairy" to come and sprinkle its
magic dust on their website too, so that they can make lots
of money like other success website owners.
What Kind Of Backlinks Are Best At Helping Your Website In Google?
Written by: Bill Platt |
Distributed: 2013-08-21 |
Word Count: 439 |
Page Views: 10206
| Votes: 23 |
Rating: 2.74
I was in the Warrior Forum, and someone asked what kinds of
Backlinks are worth pursuing. This is my answer to that
query.
Understanding the Mechanics of Effective Article Marketing and Article Syndication
Written by: Bill Platt |
Distributed: 2013-08-01 |
Word Count: 1399 |
Page Views: 6782
| Votes: 10 |
Rating: 1.80
Visit several marketing blogs or marketing forums, and you
will find dozens of people proclaiming the death of article
marketing as an effective marketing tool. Before we start
agreeing with them, consider this...
Top 10 Reasons Why Online Marketers Fail With Article Marketing
Written by: Bill Platt |
Distributed: 2013-07-31 |
Word Count: 1025 |
Page Views: 8076
| Votes: 13 |
Rating: 2.08
If you've been marketing products online for any length of
time, you've likely heard people talk about the power and
promise of article marketing for the promotion of your
online business. Unfortunately, many online marketers have
tried to utilize article marketing to benefit their online
business and failed. In this article, I document the top ten
reasons why people fail to find success with article
marketing... And how to fix your article marketing
campaigns...
Article Marketing Tip: Stop Trying To Sell From Within Your Articles
Written by: Bill Platt |
Distributed: 2013-07-30 |
Word Count: 1229 |
Page Views: 6236
| Votes: 10 |
Rating: 1.40
The basic premise of article marketing is to present people
information that will be important to them, then at the end
of the article, present information "about the author" and
offer to the reader a means to see how the author can help
the reader further. When done well, article marketing
continues to be one of the most effective methods of
promotion that one could employ online.
The Six Degrees of Internet Marketing
Written by: Bill Platt |
Distributed: 2013-07-30 |
Word Count: 991 |
Page Views: 8661
| Votes: 14 |
Rating: 2.43
The theory behind the Six Degrees of Separation is that all
people on earth can be connected together in as little as
six steps. Now, I know what you might be thinking at this
juncture... That sounds fun and interesting, but what does
that have to do with Internet Marketing? That is a great
question that I am going to answer for you in this
article...
How To Win More Eyeballs for Your Offers and Websites
Written by: Bruce Lansing |
Distributed: 2013-07-29 |
Word Count: 1373 |
Page Views: 6140
| Votes: 11 |
Rating: 1.45
Most people using search engines on the Internet are looking
for answers to questions and solutions to problems. If you
can give people what the answers they want, you will be able
to position your business as one worth hiring today or
tomorrow.
How To Increase Your Rates and Earnings As a Freelance Writer
Written by: Bill Platt |
Distributed: 2013-07-29 |
Word Count: 1191 |
Page Views: 6167
| Votes: 11 |
Rating: 1.55
Freelance writers fill a very important role in today's
business marketplace. They create the on-demand, customized
content that business owners everywhere need to push their
businesses forward. In this article, the author explains
what freelance writers should do to ensure that employers
will pay them well for their services.
Promoting Your Business With Content:: Defining Your Writing Strategy
Written by: Bruce Lansing |
Distributed: 2013-07-25 |
Word Count: 677 |
Page Views: 5864
| Votes: 11 |
Rating: 2.00
Many people suggest that you should write articles on the
basis of the benefits that people will get from reading your
articles. I'd like to suggest that there is a better
reason, and that is to write your articles on the basis of
what problem people will be able to solve, as a result of
reading your articles.
Most Viewed "Business Online" Articles
Attracting Readers to your Book
Written by: Alastair Hall |
Distributed: 2006-05-18 |
Word Count: 708 |
Page Views: 46676
| Votes: 17 |
Rating: 2.06
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: 38963
| Votes: 21 |
Rating: 2.19
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: 30470
| Votes: 33 |
Rating: 3.33
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: 28513
| Votes: 10 |
Rating: 1.70
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: 2013-07-24 |
Word Count: 816 |
Page Views: 26273
| Votes: 34 |
Rating: 2.79
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: 19527
| Votes: 18 |
Rating: 2.11
New people are coming online everyday. And many of those people
desire to turn their spare time into spare cash. So begins their
journey.
The Importance Of Effective Follow-up
Written by: Kate Smalley |
Distributed: 2007-01-15 |
Word Count: 493 |
Page Views: 14485
| Votes: 22 |
Rating: 2.55
Marketing experts say that following up with clients is crucial
to successful selling because most prospects do not buy the first
time, according to Aweber, a leading autoresponder company.
People must encounter a marketing message multiple times before
making a purchasing decision.
Today's Google Bots and What They Do
Written by: Kim Roach |
Distributed: 2006-08-02 |
Word Count: 1061 |
Page Views: 14173
| Votes: 16 |
Rating: 2.63
Google currently indexes over 8 billion web pages. However,
before these pages were placed in the index, they were each
crawled by a special spider known as the GoogleBot. Unfortunately, many web masters do not know about the internal workings of this virtual robot. This article will attempt to
reveal some of the most important Google spiders, their function,
and how they affect you as a web master. We'll start with the
well-known GoogleBot.
Ten Tips For User Friendly Online Registration Forms
Written by: Jim Romanik |
Distributed: 2009-02-24 |
Word Count: 775 |
Page Views: 13370
| Votes: 15 |
Rating: 0.93
Have you ever registered or attempted to register for an event
and spent half an hour trying to figure out what you needed to
do? Or have you used an online registration form that lost your
data or was so complicated that it seemed like more work than
faxing the form?
Successful Forum JVs and How To Get Them
Written by: Diana Barnum |
Distributed: 2006-06-15 |
Word Count: 648 |
Page Views: 13106
| Votes: 19 |
Rating: 2.11
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.
Highest Ranked "Business Online" Articles
Is Your Business 'Out Of Site'? Employ The Ultimate Marketing Tool
Written by: Rick Sloboda |
Distributed: 2007-01-09 |
Word Count: 445 |
Page Views: 5584
| Votes: 21 |
Rating: 3.76
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: 5992
| Votes: 48 |
Rating: 3.71
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!"
Why I'm A 'B-Level Marketer!'
Written by: Willie Crawford |
Distributed: 2007-07-16 |
Word Count: 917 |
Page Views: 6861
| Votes: 26 |
Rating: 3.58
At a recent Internet marketing seminar, I was sitting around the
hotel lobby with approximately 20 other seminar attendees and
speakers. The seminar's host was in attendance, and the
conversation covered a range of internet marketing topics with
extreme frankness. Our proximity to the hotel bar certainly
contributed to our 'conviviality.'
15 fixes for a failing website
Written by: Rick Sloboda |
Distributed: 2007-02-07 |
Word Count: 593 |
Page Views: 3551
| Votes: 25 |
Rating: 3.48
Employ these 15 tactics to improve your search engine rankings,
engage visitors and convert more sales.
The Most Important Ingredient for Info Product Success (is You)
Written by: Judy Murdoch |
Distributed: 2008-04-15 |
Word Count: 981 |
Page Views: 6040
| Votes: 15 |
Rating: 3.47
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 Keep Your Article Content Fresh and Interesting
Written by: Craig Ritsema |
Distributed: 2006-08-29 |
Word Count: 699 |
Page Views: 5563
| Votes: 25 |
Rating: 3.44
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?
How To Build A Profitable Twitter Profile
Written by: Harold Hemmings |
Distributed: 2009-08-06 |
Word Count: 1357 |
Page Views: 2743
| Votes: 8 |
Rating: 3.38
Online marketers everywhere are finally starting to tap into
the Twitter Marketplace. Marketers are getting involved in
Twitter at awesome rates, but all seem to have one
unanswered question: How do we actually monetize this
marketplace? It is my goal that by the time you have read
this article, you will have a clear idea of exactly how to
monetize your activities in Twitter.
Increasing Productivity In Your Online Business
Written by: Willie Crawford |
Distributed: 2006-06-14 |
Word Count: 1407 |
Page Views: 7451
| Votes: 40 |
Rating: 3.35
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."
Turn A One-Night-Stand With Google Into A Long-Term Relationship
Written by: Diane Metz |
Distributed: 2007-07-10 |
Word Count: 882 |
Page Views: 2709
| Votes: 6 |
Rating: 3.33
Want to win the favor of Google? Then you've got to build a
long-term relationship with her. Many new SEO strategies are
simply recycled old-tricks. And Google is a smart gal who can see
right through them. Position your website for the future by
understanding what Google really likes â€" and what she
really loathes.
Treat Online 'Guests' With Respect
Written by: Rick Sloboda |
Distributed: 2007-07-27 |
Word Count: 472 |
Page Views: 30470
| Votes: 33 |
Rating: 3.33
Does your website show your customers lack of respect? Review the
following checklist to find out.
|
|
|
|
|
|
|
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: 4041
Article Rating: 0.67 of 5
Votes Cast: 6
More Articles By Author:
Articles On This Website
Last Distribution Date:
2008-04-15 10:36:00
Internal ID: #5887
|
|
|
Home