Wynter Jones

Tutorials

How to Create a Beautiful CTA-Filled Landing Page

Posted on .

How to Create a Beautiful CTA-Filled Landing Page

Tutorials

How to Create a Beautiful CTA-Filled Landing Page

Posted on .
“Every morning we are born again.
What we do today is what matters most.”

- Gautama Buddha

You ready to learn something cool? Not sure how well you know current web technologies such as jQuery which is essentially a Javascript framework to make interactions on a website really easy and actually very fun!

 

View Demo or Download Now

In this tutorial blog post I am going to show you how to take a few cool plugins, frameworks and some simple HTML/CSS to create an action packed “Call to Action” landing page. Yeah… there may OR may not be too many calls to action on this page. However you can take some of these techniques to create your own marketing pages.

What do you need to get started?

First you need a text editor like Sublime Text. This has an unlimited number of customizations to make your coding experience super simple. I will discuss some of that magic in later posts. In this post I will basically give you the files at the end and showcase the steps on how this page was built.

  • Twitter Bootstrap Framework
  • jQuery + bgStretch Plugin

Thankfully you do not even need to download of those files. They can all be accessed using certain CDN (Content Delivery Networks) that will serve these files super fast. Awesome, no need to download them and include them in a “js” folder. This just makes it much faster to get going. All of what you will need for this tutorial are all here:

Twitter Bootstrap CDN


<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Load jQuery and bgStretch Plugin

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js" type="text/javascript"></script>

Now Lets Setup The HTML for Page

Again! I don’t know how much you know about HTML or CSS. But! You are here, at my blog, so you must know or want to know. That’s some crazy grammar eh? Must be because I am Canadian… or because I manipulate grammar to make it more fun. That is my way of connecting HTML and grammar. Both have strict rules but can actually be played with to give same results. However in both cases clean semantic markup matter.

Using Sublime Text and Emmet plugin (formally known as ZenCoding) you can use snippets to short hand code. You can even write a quick line to output 10+ lines of HTML. It’s cool stuff. If you are awesome and have Sublime setup just type “html:5″ and press tab and you will have this beautiful code written for you:

<!doctype html>
<html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Document</title>
  </head>
<body>

</body>
</html>

Simple. This is using the standard HTML5 doctype. You may be used to using HTML4.blah Transitional or Strict. Never fear just write <!doctype HTML> and you’re golden. Okay, now let’s add Bootstrap, jQuery and the bgStretch plugin of which I have yet to talk about. Here is what we need to do next. Add the files to the HTML page and start using Bootstrap to make a quick page layout.

HTML All Ready to Go!

<!doctype html>
<html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js" type="text/javascript"></script>
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
   </head> 
<body> 
</body> 
</html>

Not familiar with Twitters Bootstrap?

You should be or at least be aware of it. The chances of you having never used a website application that hasn’t used it is very slim. That is because it is jam-packed with elements and components. I have used it numerous times, but always felt it had too much in it. Especially when you only needed it basically for the grid layouts. Fortunately for us – it is much better now. It is now in version 3.1 and it’s better than ever. Version 1.0 was good but far too bloated. Now all you need is just ONE javascript file. That is pretty awesome to me :)

Let’s continue. So we have everything we need in the HTML to get started. Using the CSS that bootstrap gives us we can quickly setup a layout. We’re going to do a simple layout.

  • Large Headline
  • Area for Video (left)
  • Area for Signup Box (right)
  • Footer

That contains it all! Do you know why there is no navigation? Because this is a landing page. What that means is this is a page that you should only have one (maybe two) ways to get through the page. That is usually signing up or clicking a button to go the next page. You do not want to have your traffic going through a navigation or worse clicking a link that goes to a completely different website. We want this page to do what us marketers call “convert” in other words – we want this page to WORK FOR US! Not just be a fancy page that looks nice. Ohh.. and it will look nice!

Add Simple HTML to Setup Layout

<div class="container">
    <div class="row">
   <div class="col-md-12 header">
        <h1>Write Your Effective Direct Response Headline to Sell Your Amazing Offer</h1>
      </div>
    <div class="col-md-7 content>
      Video Here
    </div>
    <div class="col-md-5 sidebar">
       <h3>Sign Up Now To Get This Amazing Offer For Absolutely FREE!</h3>
       <form action="">
        <input type="text" placeholder="Write Your Full Name" name="name" />
        <input type="text" placeholder="Write Your Email Address" name="email" />
        <input type="submit" value="Click to Subscribe" />
      </form>
    </div>
    <div class="col-md-12 footer">
        <p>Copyright &copy; All Rights Reserved</p>
    </div>
  </div>
</div>

With this we have setup all the areas we need to get the basic of layout done. Everything looks crude at the moment but still enjoyable as we didn’t even have to touch a single line of CSS. Thanks to Bootstrap it’s all look pretty right away. Oh and they have some sweet default color choices for buttons, which helps us get our signup box looking good right away. Now what we need to do is give the .Container class (the div that holds our content) a background of white. Plus some CSS3 tricks to let it stand out from the background.

Fancy Up The Container

<style>
  .container 
    width: 750px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 5px #333;
    margin-top: 90px;
  
  .row 
    padding: 0 30px;
  
  .footer, .header, .sidebar 
    padding: 20px 0;
    text-align: center;
 
</style>

Now that we have our page looking more to how we want it. We can start doing what this tutorial is really all about. Adding some Call to Actions! Or making it look pretty? Ok! It’s both. Let’s start by adding the bgStretch plugin. You’re probably wondering what it does. It is an awesome plugin that adds an full width image slideshow to your background. You can forget about using background graphics and just some some nice high quality photos instead. I love this plugin to make any page jump to life right away!

Let’s Add Some Life with bgStretch

<script type="text/javascript">
$(document).ready(function() 

   $.backstretch([
     'http://upload.wikimedia.org/wikipedia/commons/b/bf/Lano_Beach_-_Savai%27i,_2007.jpg',
     'http://upload.wikimedia.org/wikipedia/commons/0/0a/Sunset_at_Varkala_Beach_Kerala_India.jpg',
     'http://upload.wikimedia.org/wikipedia/commons/2/2d/Coogee_Beach_view_from_Dolphin_Point.jpg'
     ], duration: 3000, fade: 750);

);
</script>

Now you might notice that we opened up a new script tag and wrote .onReady function. This allows us to fire off some jquery code right when the website is loaded. You can add “document” or “window” they fire off at slightly different stages. If you want to load it right away you can use function .onLoad() – but hey? Do you really need to know that stuff? Not really. Let’s just get onto the gusto. Now that our page is looking good. Let’s start adding some CTA magic.

The first Call to Action is signing up to our form or watching the video. But let’s jam pack this suckah! How are we going to do that? Easy. Let’s assume the user may want to leave your page and start browsing other websites like Facebook or Google another similar product! Oh no! We need to try and get their attention one last time.

Add Last Ditch Effort

Here we are going to use jQuery and Bootstrap JS together to detect when the users mouse has left your website. Once it has gone we know that they may no longer be interested in your page. When this happens we will use bootstraps popup modal to show a popup over the page. This will darken out your landing page and showcase a popup window that will tell them to click on a big button to send them to another page you have to further sell your offer.

Detect Mouse Leave with jQuery

$( "body" ).mouseleave(function() 
     $('#myModal').modal();
);

We add this under the bgStretch code we wrote earlier. Inside the mouseLeave() function we will added the code to showcase the popup modal. Here is the HTML code that will let us showcase the pop up:

Bootstrap Popup Modal HTML

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div  class="modal-body">
        <h1><strong>You Need to Read This!</strong></h1>
        <h2>If You Are Wasting Your Time Not Being at The Beach Right Now?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, dolorum a alias iure voluptatibus nesciunt similique possimus dicta illum id! Molestiae, incidunt, aperiam ipsam vitae dolores adipisci voluptatibus asperiores minima.</p> <br>
        <a href="#" class="btn btn-lg btn-success">** Click Here to Go To The Beach **</a>
      </div>
    </div>
  </div>
</div>

Awesome! We did it! We took a few javascript files, wrote some HTML and CSS to make a quick landing page that is packed with a cool feature to increase interest in your offer. Hopefully you learned something to add to your projects or download the source code to use in your personal or commercial projects! Big thanks to all web developers who made these plugins to make this all possible.

I made some changes so make sure to download the file to start editing your page based off the landing page in the demo.

View Demo or Download Now

If you like it you can use it for any of your project. Let me know if you learned anything and/or going to use this for a base in your project by adding a comment!

profile

Wynter Jones

http://www.codecore.io

Wynter Jones develops web software. He has created over 30+ Wordpress plugins and been apart of a few large Internet Marketing launches.

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

View Comments (0) ...