With the inclusion of this post, William Ghelfi has extended his Bootstrap series from two to three parts. The completed stylesheets and HTML files are available for download here.
In the first article, we covered the fundamentals of Bootstrap 3 and how to create a simple website. Let’s take it farther and build a sales landing page that converts well.
It’s a popular misconception that Bootstrap can’t be adapted to serve more niche purposes like, example, a sales page.
This is precisely the case. A myth.
Let’s smash this myth in the most constructive way possible, shall we?
it.
Highly specialized pages are highly specialized
There is a formula for creating a successful sales page. I can’t possibly tell you everything there is to know about the ones I am familiar with, and I don’t know them all.
Instead, I’ll see if I can boil them down to manageable tablet form so you may begin experimenting with them right away.
with.
What is the most effective approach to get your attention,
Attention grabbing and first steps
?
There’s a hefty subtitle, then a query in boldface.
The next step is to briefly introduce the problem you’re solving for the customer. thanks to your goods, from the lives of your customer.
Bootstrap allows us to construct it in a way that
this:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Bootstrap Sales Page.</title>
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<header class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1>Have you ever seen the rain?</h1>
<p class="lead">You should always open a sales page with a catchy question.</p>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 col-md-offset-1">
<p>
Proceed then with the classic triplet: the pain, the dream, the solution.
</p>
<p>
<strong>The pain</strong> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /><strong>The dream</strong> enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur.
</p>
<p>
<strong>The solution</strong> selfies semiotics keffiyeh master cleanse Vice before they sold out. Vegan 90's tofu pork belly skateboard, Truffaut tote bag.
</p>
<p>
<em><strong>Interested?<br />
<a href="#packages">Go straight to the packages.</a></strong></em>
</p>
</div>
<div class="col-xs-12 col-md-6">
<figure class="text-center">
<img src="http://placehold.it/400x300" alt="The Amazing Product" class="img-thumbnail" />
</figure>
</div>
</div>
<hr />
<div class="row">
<figure class="col-md-2 col-md-offset-1">
<img src="http://placehold.it/100x100" alt="Jonathan F. Doe" class="img-responsive img-circle pull-right" />
</figure>
<blockquote class="col-md-7">
<p>
Testimonials are important. Be sure to include some in your sales page.
</p>
<p>
With Product, my sales page was <strong>online in minutes</strong>. And it rocks!.
</p>
<small>Jonathan F. Doe, CIO at Lorem Ipsum</small>
</blockquote>
</div>
</div>
</body>
</html>
It’s good, however I think it needs
customizations:
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400italic,700italic,400,700|Fjalla+One);
body {
font-size: 18px;
font-family: "Open Sans", Arial, sans-serif;
color: #292b33;
}
h1, h2 {
font-family: 'Fjalla One', 'Helvetica Neue', Arial, sans-serif;
font-size: 52px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
margin: 1em 0 0 0;
}
p {
line-height: 1.5;
margin: 0 0 20px 0;
}
blockquote {
border-left: none;
position: relative;
}
blockquote::before {
content: '“';
position: absolute;
top: 0;
left: 0;
font-size: 48px;
font-family: "inherit";
font-weight: bold;
}
blockquote p {
margin: 0 0 10px 20px;
font-style: italic;
font-family: "Georgia";
}
em {
font-family: Georgia, serif;
font-size: 1.1em;
}
.lead {
margin-top: 0.25em;
}
</style>
Beginning to sense
nicer!
All in
Now is the moment to properly introduce your remedy for the problem.
Offer something of value first, like a high-quality free trial of your product. The next step is to create three distinct packages, each with its own set of features and corresponding cost. What’s up with the number 3?
Between the starting price of $39 and the maximum price of $249, a bundle in the center of the two seems like a great deal.
Knowing your end goal will help you decide whether to move in sequence from lowest to highest or highest to lowest.
If you want to maximize sales of the cheapest bundle, direct customers to that option first. If that’s not possible, do the exact reverse.
Here’s more on the subject, in a fantastic article by Nathan Barry.
And now for the
code:
...
<style>
...
.bg-white-dark {
border-top: 1px solid #cccbd6;
border-bottom: 1px solid #cccbd6;
background-color: #e7e6f3; /* Older Browsers */
background-color: rgba(231, 230, 243, 0.9);
}
.container {
padding-top: 2em;
padding-bottom: 2em;
}
ul {
list-style-type: circle;
}
</style>
<div class="bg-white-dark" id="free-sample">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h2>Get a free sample</h2>
<p class="lead">A taste of what is included with the product.</p>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body text-center">
<img alt="sample" src="http://placehold.it/500x250" class="img-rounded" />
<p>Describe the sample dolor sit amet and why should I want to get it adipiscint elit.</p>
<p>
<a href="#" class="btn btn-lg btn-default text-uppercase">
<span class="icon icon-download-alt"></span> 
Download the sample
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="packages">
<div class="row">
<div class="col-md-12">
<h2>
The Complete Package
<span class="pull-right">
<a class="btn btn-success btn-lg" href="#">
<span class="text-uppercase"><span class="text-white-dark">Buy now for</span> $249</span>
</a>
</span>
</h2>
<p class="lead">
Cosby sweater cray skateboard.
</p>
</div>
</div>
<div class="row">
<div class="media">
<figure class="pull-left col-xs-12 col-md-4">
<img src="http://placehold.it/300x250" alt="The Amazing Product" class="media-object img-thumbnail" />
</figure>
<div class="media-body col-xs-12 col-md-7">
<h3 class="media-heading">The best package for lorem ipsumer</h3>
<p>
Mustache farm-to-table deep v cardigan, Banksy Godard roof party PBR&B.
</p>
<ul>
<li>Details</li>
<li>Lorem ipsum</li>
<li>Nostrud exercitation</li>
<li>Resources ipsum</li>
<li>Adipiscit resource</li>
<li>Resource numquam</li>
<li>Resources ipsum</li>
<li>Adipiscit resource</li>
<li>Resource numquam</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-white-dark">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
The Amazing Product + Resources
<span class="pull-right">
<a class="btn btn-success btn-lg" href="#">
<span class="text-uppercase"><span class="text-white-dark">Buy now for</span> $99</span>
</a>
</span>
</h2>
<p class="lead">
Cosby sweater cray skateboard.
</p>
</div>
</div>
<div class="row">
<div class="media">
<figure class="pull-left col-xs-12 col-md-4">
<img src="http://placehold.it/300x250" alt="The Amazing Product" class="media-object img-thumbnail" />
</figure>
<div class="media-body col-xs-12 col-md-7">
<h3 class="media-heading">Perfect for nostrud lorem</h3>
<p>
Mustache farm-to-table deep v cardigan, Banksy Godard roof party PBR&B.
</p>
<ul>
<li>Details</li>
<li>Lorem ipsum</li>
<li>Nostrud exercitation</li>
<li>Resources ipsum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
The Amazing Product
<span class="pull-right">
<a class="btn btn-success btn-lg" href="#">
<span class="text-uppercase"><span class="text-white-dark">Buy now for</span> $39</span>
</a>
</span>
</h2>
<p class="lead">
Cosby sweater cray skateboard.
</p>
</div>
</div>
<div class="row">
<div class="media">
<figure class="pull-left col-xs-12 col-md-4">
<img src="http://placehold.it/300x250" alt="The Amazing Product" class="media-object img-thumbnail" />
</figure>
<div class="media-body col-xs-12 col-md-7">
<h3 class="media-heading">The budget option</h3>
<p>
Mustache farm-to-table deep v cardigan, Banksy Godard roof party PBR&B.
</p>
<p>
Cliche sartorial roof party, shabby chic sustainable VHS food truck 90's four loko. Etsy hoodie distillery, organic beard DIY cliche.
</p>
</div>
</div>
</div>
</div>
Styling more
We’re almost there, but we can still make the look and feel even better and more distinctive from the standard Bootstrap by adding that color variation with.bg-white-dark, which is actually lilac just because with a name like.bg-white-dark you can switch to your preferred color without having to change the class name.
Please include more
styles:
...
<style>
...
.text-white-dark {
color: #e7e6f3;
}
.btn-default {
font-family: "Fjalla One", sans-serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-default:active,
.btn-default.active {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn:active,
.btn.active {
background-image: none;
}
.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
background-repeat: repeat-x;
border-color: #e0e0e0;
border-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
}
.btn-default:active,
.btn-default.active {
background-color: #e6e6e6;
border-color: #e0e0e0;
}
.btn-success {
font-family: "Fjalla One", sans-serif;
}
.btn-success {
background: #9292c0; /* Old browsers */
background: -moz-linear-gradient(top, #9292c0 0%, #8181b7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9292c0), color-stop(100%,#8181b7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9292c0 0%,#8181b7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9292c0 0%,#8181b7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9292c0 0%,#8181b7 100%); /* IE10+ */
background: linear-gradient(to bottom, #9292c0 0%,#8181b7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9292c0', endColorstr='#8181b7',GradientType=0 ); /* IE6-9 */
border-color: #f1ddff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
color: #fbfafc;
background: #a3a3d1; /* Old browsers */
background: -moz-linear-gradient(top, #a3a3d1 0%, #9292c8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a3a3d1), color-stop(100%,#9292c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a3a3d1 0%,#9292c8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a3a3d1 0%,#9292c8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a3a3d1 0%,#9292c8 100%); /* IE10+ */
background: linear-gradient(to bottom, #a3a3d1 0%,#9292c8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3d1', endColorstr='#9292c8',GradientType=0 ); /* IE6-9 */
border-color: #f1ddff;
}
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
color: #fbfafc;
background: #a3a3d1; /* Old browsers */
background: -moz-linear-gradient(top, #a3a3d1 0%, #9292c8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a3a3d1), color-stop(100%,#9292c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a3a3d1 0%,#9292c8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a3a3d1 0%,#9292c8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a3a3d1 0%,#9292c8 100%); /* IE10+ */
background: linear-gradient(to bottom, #a3a3d1 0%,#9292c8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3d1', endColorstr='#9292c8',GradientType=0 ); /* IE6-9 */
border-color: #f1ddff;
}
</style>
...
Closing thoughts
The discussion is over. Using Bootstrap, we created a basic sales page and modified it to meet our needs. It doesn’t look like a generic Bootstrap page, yet it actually improves conversion rates! Try this link out.
The page you and I worked on together forms the backbone of a fully functional, fully tested sales page.
For those who want to get up and running with Bootstrap as quickly as possible without getting bogged down in the official docs or diving too far into the framework too soon out of idle curiosity, I’ve written a short booklet called Bootstrap In Practice.
My website features a free 30-day Bootstrap tips course, a free sample chapter from the ebook, and the real, complete, battle-tested sales page.
In the next installment, we’ll incorporate Flask and build a beautiful boilerplate that you can use for your own web app.