Your landing page matters. Get it right, and you can capture visitor information, deliver great content, and get them on the path to conversion. Get it wrong, and your site may still get seen — but it won’t drive sales.

As a result, it’s worth knowing what makes a great landing page, what you should avoid as you develop your website, and what options are available if you take on this task yourself. 

Grow Your Business With HubSpot's Tools for WordPress Websites

We’ve got you covered: Here’s a quick look at how to create a landing page in HTML that visitors actually want to land on.

Cleared for Landing

The goal of any landing page is to drive visitor action. Visitors click through from your WordPress, HubSpot, or other CMS-hosted site to get more information about the product or service you’re offering. Your landing page then asks them to provide details such as name, email address or phone number in exchange for this information.

What you offer is up to you — whitepapers, eBooks and newsletters are common — but you need to make it valuable enough that visitors don’t mind sharing their contact information.

Landing Page Best Practices

Landing pages are designed to capture specific streams of traffic — a subset of your website visitors targeted by your marketing campaign. For example, if you’ve created a full-featured mobile fitness application that includes a monthly fee, your landing page might offer a free trial period for interested users.

With the right search engine optimization (SEO), your website brings in fitness-focused visitors; your landing page captures potential customers by offering a free trial code when they share specific contact information.

While your specific landing page layout will vary, here are a few high-level “do this, not that” recommendations to improve your impact.

  • Make it clear, not complicated — Your unique selling position (USP) and call-to-action (CTA) should be front-and-center. Don’t go into depth or detail: Make it clear what you’re offering and what visitors need to provide in return.
  • Make it clean, not cluttered — White space is your friend. Keep your landing page simple and clean with limited text and curated images for maximum impact.
  • Test, don’t guess — As noted by Forbes, testing is critical to ensure your landing page captures leads. Design it, make it live, and then record the results. If it’s not working, make changes.

HTML Basics

You’ve got a solid USP and a great CTA. Now it’s time to build your landing page. One of the most popular methods leverages HTML — or Hypertext Markup Language — to make web pages display exactly the content, images, and links you want.

First up: It’s not a programming language. It’s a markup language that gives you control over the text, images, and links that appear on your webpage. Every HTML element uses “tags” to specify how content will be modified. There are always two tags — opening and closing — that use <> brackets, and the closing tag contains a forward slash.

Let’s say you wanted to create a line of text that stood by itself as a paragraph on your landing page. Here’s the line:

“This is my landing page”

Here’s what it looks like in HTML:

<p>This is my landing page</p>

The “p” means paragraph, and the tags on either side indicate that the paragraph modifier only applies to this specific piece of content.

Other popular tags include:

  • <h1> — Makes the text a header element. Sizes range from h1 to h6.
  • <a> — Creates a new link within your text.
  • <b> — Any text between <b> and </b> is bold.
  • <i> — This tag applies italics to text.
  • <br /> — Inserts a line break. One of the few tags that doesn’t need both a start and end tag.

HTML also uses CSS (cascading style sheets) to change the style of the elements on your landing page. Using what are called top-level stylesheets, you can change specific things like background color, text color and font type. These changes then “cascade” across all elements, allowing you to make changes that apply to your entire landing page at once.

The first thing you need to create a landing page in HTML is a text editor, since both HTML and CSS are written in plain text.

One option is opening Notepad for Windows or TextEdit for Mac but if you want to streamline the process open your WordPress site, log in and use the Custom HTML Block function. You can also click on a specific block in your WordPress editor, click on the three dots and then select Edit as HTML. If you want complete control over your HTML elements, start by editing a page or post, then click on the three dots in the top-right corner of the editor and select Code Editor.

No matter which method you choose, you’ll want to include some basic elements:

  • A header using the <h> tag at the top of your page
  • Some text using the <p> to define paragraphs and CSS styles for color and font
  • The <input> tag to create form fields where visitors can enter their name and contact information
  • Links using the <a> tag that lets visitors download or access content once they’ve provided their contact details.

To build an HTML landing page from the ground up, your best bet is using a simple HTML framework like MDB — the Material Design for Bootstrap — available in both free and professional versions.

Once you’ve downloaded and unzipped the MBD package you’re ready to get started on your first landing page, which needs five key elements: Basic structure, a navigation bar, a navbar class, a full-page background and some CSS stylesheets.

In practice, this lets you create a quick description on your landing page, include links to forms or sign-up sheets and design something visitors want to look at. Let’s break down each step.

1. Create the basic structure.

Start by opening the index.html file in your project folder — this is typically where you’ve unzipped the MDB or other HTML editor package — and paste this code underneath the <body> tag:

 

<!--Main Navigation-->

<header>

 

</header>

<!--Main Navigation-->

 

<!--Main layout-->

<main>

 

</main>

<!--Main layout-->

 

<!--Footer-->

<footer>

 

</footer>

<!--Footer-->

2. Create a navigation bar.

Paste this code between the opening <header> tags:

 

<!--Navbar-->

<nav class="navbar navbar-expand-lg navbar-dark primary-color">

 

  <div class="container">

 

    <!-- Navbar brand -->

    <a class="navbar-brand" href="#">Navbar</a>

 

    <!-- Collapse button -->

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"

      aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

 

    <!-- Collapsible content -->

    <div class="collapse navbar-collapse" id="basicExampleNav">

 

      <!-- Links -->

      <ul class="navbar-nav mr-auto">

        <li class="nav-item active">

          <a class="nav-link" href="#">Home

            <span class="sr-only">(current)</span>

          </a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Features</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Pricing</a>

        </li>

 

        <!-- Dropdown -->

        <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"

            aria-expanded="false">Dropdown</a>

          <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">

            <a class="dropdown-item" href="#">Action</a>

            <a class="dropdown-item" href="#">Another action</a>

            <a class="dropdown-item" href="#">Something else here</a>

          </div>

        </li>

 

      </ul>

      <!-- Links -->

 

      <form class="form-inline">

        <div class="md-form my-0">

          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

        </div>

      </form>

    </div>

    <!-- Collapsible content -->

 

  </div>

 

</nav>

<!--/.Navbar→

Pro tip: Don’t forget to add .container so your links will stay centered.

3. Stick the navbar to the top of the screen.

Adding this quick line of code ensures that even when you scroll down the page, the navbar stays with you at the top of the screen:

 

<!--Navbar-->

<nav class="navbar navbar-expand-lg navbar-dark primary-color fixed-top">

4. Create a great background.

A great background helps your landing page stand out. Put this code underneath the navbar and before the closing </header> tag:

 

<!--Mask-->

<div id="intro" class="view">

 

  <div class="mask">

 

  </div>

 

</div>

<!--/.Mask-->

5. Add some style.

Open the style.css file in your project folder and paste this code:

 

html,

body,

header,

#intro {

    height: 100%;

}

 

#intro {

    background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20%283%29.jpg")no-repeat center center fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

}

 

 

Setting height at 100% ensures that background elements cover the entire screen, while #intro lets you set a URL path for your image and direct visitors to the right place.

HTML Landing Page Tools

Need some help with your landing page? You’ve got options, such as:

  • HubSpot — HubSpot offers a landing page builder that can help you create and test beautiful landing pages that generate leads and look great on any device.
  • Elementor — If you’re building a landing page in WordPress and would rather choose from 300+ professional-grade page options rather than creating one from scratch, Elementor has you covered. Pricing starts at $49 for one site for one year.
  • Ucraft — Ucraft offers a host of free landing page options to help drive lead generation on your site and streamline visitor data collection.
  • Leadpages — You can leverage Leadpages as a WordPress plugin to manage site landing pages or upload an HTML page directly to your server, letting you decide exactly how much HTML work you’re comfortable with and how much you want to offload.

Converting visitors into valued customers starts with clear, clean, content-rich landing pages. Leverage HTML and CSS basics to design and deploy the best-fit page for your business.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Feb 19, 2020 12:17:07 PM, updated April 02 2020

Topics:

Website Development