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鈥檛 drive sales.
As a result, it鈥檚 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.
I鈥檝e got you covered. Here鈥檚 a quick look at how to create a landing page in HTML and CSS that visitors actually want to land on.
The goal of any landing page is to drive visitor action. Visitors enter your website and see this page first to get more information about the product or service you鈥檙e offering. Your landing page then asks visitors to provide details, including their name, email address, or phone number, in exchange for some type of offer.
What you offer is up to you 鈥� whitepapers, ebooks, and newsletters are common. But, whatever it is, you need to make it valuable enough that visitors are willing to share their contact information for it and move to the next phase of your sales process.
The offer itself is the most important aspect of your landing page, but it鈥檚 not the only important part: The design of your landing page should be based on driving conversions, too. To achieve a landing page that looks exactly how you want, it may be worth learning a bit of code.
If you鈥檙e a tech-savvy marketer, you鈥檝e heard of HTML, short for Hypertext Markup Language. It鈥檚 the coding language that makes up web pages. With HTML and its sibling style language, CSS, you can build a landing page completely from scratch. Or, if using a website builder or CMS, you can extend your designs beyond what鈥檚 possible with drag-and-drop editing.
The idea of learning to code in order to build a simple landing page may seem intimidating but don鈥檛 be discouraged. HTML is relatively simple to learn, and with some practice, you鈥檒l be able to craft an effective landing page yourself.
Landing pages are designed to capture specific streams of traffic 鈥� a subset of your website visitors targeted by your marketing campaign. For example, if I鈥檝e created a full-featured mobile fitness application that includes a monthly fee, my landing page might offer a free trial period for interested users.
With the right search engine optimization (SEO), my website can bring in fitness-focused visitors. Then, my landing page captures potential customers by offering a free trial code when they share their contact information.
While your specific landing page layout will vary, here are a few high-level recommendations to improve your impact:
You鈥檝e got a solid USP, a design vision, and a great CTA. Now, it鈥檚 time to build your landing page. Below, I鈥檒l leverage HTML to make the page display the exact text, images, and links I want, how I want them.
First, it鈥檚 important to note that HTML isn鈥檛 technically a programming language. It鈥檚 really a markup language that gives you control over the text, images, and links that appear on your webpage.
Every HTML element is represented by tags, which are identified by angle brackets (<>). Some elements only need one tag, while others consist of two tags, an opening and a closing tag. The closing tag contains a forward slash (/).
Let鈥檚 see an example. Say I want to create a line of text that stands by itself as a paragraph on my landing page. Here鈥檚 the line:
鈥淭his is my landing page鈥�
Here鈥檚 what it looks like in HTML:
<p>This is my landing page</p>
I鈥檝e used the 鈥�<p>鈥� (paragraph) tag to create a paragraph element 鈥� the text between the opening and closing tags is paragraph text.
Other popular HTML tags include:
HTML works in conjunction with CSS (Cascading Style Sheets) to change the style of the elements on your landing page. With CSS, you can change specific things like background color, text color, and font type. These changes then 鈥渃ascade鈥� 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, as both HTML and CSS are written in plain text. If you don鈥檛 have one yet, check out our HTML and CSS editor recommendations before moving on.
If you鈥檙e using WordPress, you can also click on a specific block in the editor and click on the three dots. 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.
Below, I鈥檒l go through the process of creating a landing page in HTML.
To build an HTML landing page from the ground up, your best bet is to use a simple HTML framework like (MDB), available in both free and professional versions.
A framework is essentially a collection of pre-written code that makes it easier to create in HTML. Rather than creating all elements from scratch, I can leverage a framework鈥檚 built-in elements to whip up landing pages more quickly.
Once I鈥檝e downloaded and unzipped the MBD package, I鈥檓 ready to get started on my first landing page. Here, I need five key things: A basic structure, a navigation bar, a navbar class, a full-page background, and CSS styling. Additionally, I need to include some basic page elements:
I start by opening the index.html file (the HTML file for my homepage) in my project folder. This is typically where I鈥檝e unzipped the MDB or other HTML editor package. I can then paste this code underneath the opening <body> and closing </body> tags:
This HTML provides the structure for your landing page. In it, I have:
These are all placed inside the <body> tags. <body> contains all things on my page that are directly visible to visitors.
Next, I paste the following code between the opening <header> tags:
There鈥檚 a lot more code here, so let鈥檚 break down what this all means. Everything is contained by the <nav> (navigation) element, indicating that the contents inside these tags serve to guide the user through the website.
First, in the navbar, I have a place for the brand text, followed by a button to collapse the navbar from view. Inside this collapsible section of the navbar, I have a list of navigation links to Home, Features, and Pricing pages, then a template for a dropdown menu.
Lastly, this code places a search bar in my navigation, allowing users to enter queries and quickly find their desired page.
A sticky navbar stays visible to the user even when they scroll down the page. To make my navbar sticky, I replace the first <nav> tag (directly under 鈥�<!--Navbar-->鈥�) with the following code:
After my content is set, a great background will help my landing page stand out. I put this code underneath the navbar, just before the closing </header> tag:
This code adds a mask over my background, which partially obscures the background image so content in the forefront is more visible.
Finally, it鈥檚 time to spruce up your page with styling. To do that, I鈥檒l make use of the language CSS. Like HTML, CSS isn鈥檛 a programming language, and it鈥檚 also not too difficult to wrap your head around.
How exactly you style your landing pages is, of course, up to you. In the next section, we鈥檒l provide some basic CSS code to get you started.
CSS can either be written in the HTML file it applies to or in a separate file called an external stylesheet. For this tutorial, I鈥檒l use the latter method. Create an empty text file called 鈥渟tyle.css鈥� in the same folder as index.html, and then paste the following HTML code in between the <head> tags inside index.html:
This HTML instructs the document to reference your style.css file for styling instructions.
Next, I open style.css, paste in this CSS code, and save the file:
This will provide a placeholder background image for my landing page. Setting the height at 100% ensures that background elements cover the entire screen.
Even after this CSS, my landing page will still look pretty generic. At this point, it鈥檚 up to me to decide how to populate the page with my content and style it to match my business鈥� branding.
Then, I can leverage CSS to change the look of your page. Here are the key styles I focus on when adding CSS:
You might be surprised at how far you can get with just these alone. But, if you need some help with your design vision, we have some landing page examples you can use for inspiration.
New to this process? To get started with CSS, check out our Ultimate CSS Tutorial for Beginners.
Coding from scratch offers you the most flexibility when building a landing page. However, starting completely from square one can be time-intensive. These landing page templates have code you can customize, all while saving the time it takes to build a page.
|
At a Glance
The OnePage landing page template is perfect for businesses of any kind, featuring a versatile design with a neutral color scheme and well-structured sections. I love the responsiveness of this template across both desktop and mobile devices. This ensures seamless viewing experiences.
Additionally, OnePage is built with user-friendliness in mind. There are easy-to-follow comments in the code. You can easily find which parts of the code can be customized, making it beginner-friendly. For businesses wanting to build a landing page fast, this template is a must.
At a Glance
Bloated landing pages can distract from your goal, pulling attention away from forms and CTAs for your offer. I like the simplicity of this design. You can avoid clutter and minimize the number of distractions on your page.
You can customize and add other elements to your page, including icons below the form. This template is a great option if you want to build a simple landing page fast.
|
At a Glance
With Open Pro, SAAS companies can quickly build landing pages that showcase their offerings. Plus, there are multiple ways you can edit this template. You can make changes in Figma, Vue, and HTML, making customization a breeze. You can also add a banner and MP4-compatible background.
I love this template's testimonial feature. You can showcase real customers who have benefited from your offering, making your audience more likely to engage. This template serves as a great starting point, streamlining the process of building a landing page.
At a Glance
If you鈥檙e looking for a modern, vibrant design for your pages, Focus is the way to go. This page has a simple layout that鈥檚 quick to customize. You just need to decide your form fields, your headline, the text for your offer, and a photo. You can easily upload your assets 鈥� a task made even simpler if you鈥檙e already using 探花精选.
At a Glance
Your landing pages don鈥檛 need to be filled with graphics to be well-designed. Sometimes, you just want a prominent headline, basic information, and a CTA for people to click on. If your style is more minimalist, Sprocket may be the best choice for you.
This is one of my favorite options for a straightforward offer strategy. Your newsletter, ebook, or gated content can shine.
|
At a Glance
This responsive template is perfect if you鈥檙e offering special coupons or deals. Businesses can offer free delivery or free add-ons in exchange for leads. I love the fun design of this page. Subtle yet impactful animations capture my attention effectively.
Beyond that, the template's minimalist approach ensures that only relevant information is shared, avoiding overwhelming customers.
|
At a Glance
This trendy template is an excellent choice for new businesses looking to establish a modern digital presentation. Applayer鈥檚 landing page has attention-catching CTAs with plenty of text modules where you can describe your offerings.
I also love the explore and FAQ sections. You can easily address common questions without the need for direct contact.
|
At a Glance
Treact is a great choice for marketers who want enhanced customization options. This template鈥檚 collection features prebuilt landing pages with an extensive library of customizable UI components. If you find a near-perfect template with one module you want to fine-tune, you can easily shift these UI components.
|
At a Glance
Activello is a free Wordpress landing page. Plus, it鈥檚 built on Bootstrap, making it fully responsive across multiple devices. Beyond that, SEO is essential, allowing customers to find their web page. Luckily, this template prides itself on being Google-friendly. No matter the type of content or business, this highly versatile template can suit your needs.
At a Glance
贬耻产厂辫辞迟鈥檚 landing page template offers a great way to capture blog subscribers. You can add your own hero image. Then, you can add any context visitors may need before downloading your offer. This template can also be edited with 贬耻产厂辫辞迟鈥檚 drag-and-drop interface for a no-fuss experience.
|
At a Glance:
The EventGrids template boasts an eye-catching design that鈥榮 hard to miss. With its vibrant colors and tastefully integrated animations, it鈥檚 sure to captivate your visitors and draw them into your content.
Purposefully crafted for event pages, the color palette is well-suited to the theme, enticing your audience to join in on the excitement. Simply incorporate your unique content, and you'll be on your way to generating ticket sales and bookings in no time.
At a Glance
If you work in consulting, this landing page template makes promoting your services easy. All you need to do is fill out a chart that describes your services and share your store. I love how this template has a smooth scrolling animation, making your site feel extra professional.
|
At a Glance
What I like the most about the Boutique template is its neutral design. As an ecommerce business, you need a distinct brand identity, comprising logos, colors, and fonts. Boutique landing pages allow you to quickly showcase your products on the web without confusing your customers with designs outside your brand vision.
With seven color variances, over 70 icons, and SEO Friendiness, the Boutique template is the perfect start.
At a Glance
If you鈥檙e promoting an app, simple is better. You want to describe how your app benefits users, showcase images of the app interface, and include buttons so visitors can download your offer. This template from Wix has everything you need, so you can create your page quickly.
At a Glance
Video can be an effective way to capture customers. You can describe your offer in your own words and even show a video demo. If you want to showcase video on your page, this 探花精选 template makes it easy. You can include your video, images, and a description of how users will benefit.
Need some help with your landing page? Here are my favorite options that make building web pages a breeze.
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, and take full control over its functionality and visuals.
Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.