how to create a business website using a landing page template

This guide is dedicated to everyone looking to create a landing page type of website as a personal project for themselves or as a commercial gig for a customer. Landing pages are great for websites that don’t rely on a lot of content but still need to engage online visitors and generate leads for the owner.

Here are the steps we’ll go through together in order to setup the landing page. They should be enough to cover the entire customization process A to Z:

  • Setting objectives
  • Requirements
  • Getting the landing page template
  • Customizing the template
  • Testing in browsers
  • Upload to hosting

Setting the objectives

First step is to clarify what are your expectations from the landing page, what are you trying to achieve with it. There are many use cases out there but for this article let’s assume that the main objective for your landing page is to generate leads for your services through a contact form.

Basically that means you are going to present your business online, present the services and ask people for their contact information through a form so that you can get in touch with them for a personalized quotation or an in-depth discussion about how your company can satisfy their needs.

Requirements

Now let’s focus on what you need to create the landing page in order to generate leads and meet your objectives. Starting with the skill set, you can’t get away without basic HTML/CSS knowledge and image editing abilities. So knowing a thing or two about tags, classes, properties and how to manipulate images in Photoshop or other editing software will definitely come in handy when you’ll be editing the landing page template files.

Speaking of files, in terms of apps there are numerous choices you can make but I suggest you stick to whatever is more familiar to you. Personally I use Visual Code as code editor, Photoshop for images, Total Commander for FTP uploading and… that’s about it.

You will also need a basic hosting plan from any hosting provider and a domain name linked to the hosting server. If you’re still in the planning phase I recommend you buy the domain together with the hosting plan from the same hosting provider because they will save you time by setting everything up so you can get started immediately.

And finally the landing page template. It’s important to choose one that fits your project because it will serve as the foundation for your online presence and while you can always improve anything you want in a template, starting with a solid foundation will save you a lot of time in the long run.

There are a quite a few websites that offer high quality landing page templates but Landingrepo stands out because here you can find both free and premium templates with great looking design and well-structured code. Also Landingrepo is one of the few places where you can download free landing page templates for commercial projects without registering your email address and with no attribution requirements.

For this guide I will be using Aria - Free Business Landing Page Template which can be used for any number of personal and commercial projects without any attribution requirements. It’s an HTML template with vertical navigation featuring all the components we need for a beautiful and engaging landing page.

Customization

It all starts with downloading the template from https://landingrepo.com/aria-free-business-landing-page-template.html and then unpacking it to your local drive. The way I work is to make all the customizations on my local drive and then upload the finished project on to the live server. So with the zip package uncompressed you will have the following file structure.

alternative

Now you should open index.html in the browser to see the default look of the template and to see how the changes you make in the code affect its content and appearance. To edit the code open index.html and css/styles.css in your code editor and start customizing the template. In index.html you can change the text and work on different layout elements, in styles/css you can change the appearance of elements like section backgrounds, colors, text font style, sizes and so on.

For example, in most cases you will be able to change the header background image by finding the lines of code which handle this in the styles.css file. In Aria the steps would be:
- Edit and save the image file in the images folder. I recommend 1920x1080px resolution
- Open for editing css/styles.css and find the following lines of code in the Header section:


.header {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('../images/header-background.jpg') center center no-repeat;
    background-size: cover;
}

- And replace header-background.jpg with your own file name
- Save the file

Now with the code changes applied you should check your browser and refresh the page (F5 or the Refresh icon) to see the new background image. This procedure applies to most cases when you need to change background images.

For the text you just need to update the text you see between tags like the following and then save index.html and refresh the browser to see the changes


<h1></h1>, <h2></h2>, <p></p>, <div class="testimonial-text"></div>

Testing in browsers

When you’re done customizing the template it’s important to check that your landing page looks good in all major browsers like Chrome, IE, Edge, Firefox, Opera and make the necessary adjustments where things don’t look that great. You can check how things look on smaller screen sizes by pressing F12 in Chrome to open Developer Tools and shrinking the window.

Upload to hosting

There are multiple ways of getting your project online like using the cPanel of your hosting account, uploading with a FTP software like FileZilla or transferring the files with the FTP functionalities of Total Commander. I currently use the last option because it’s very easy to setup. In Total Commander press Ctrl + F and in the window that has appeared click New Connection. You will end up with this window

alternative

Here in the Session text box enter a name for your future session, anything works but I suggest you enter your domain name. In Host name textbox enter the ftp server address provided by your hosting provider. It should be something like ftp.yourdomain.com:xx where xx is a port number. Now you also need to enter your username and password and you are done. You can click Ok and then Connect to reach your server through FTP. Each time you press Ctrl + F in TC you will see your saved connection and just need to click Connect.

Once on your server just find public_html folder and copy your entire project here in such a way that index.html will be directly under public_html. Now when you visit your domain in the browser the landing page will load and you will be able to see it live together with other visitors. At this point for any change you want to make you need to re-upload the files on the server.

All Landingrepo landing page templates have a Documentation folder inside the downloaded package so don’t forget to check that out too when you’re stuck somewhere. You can find a great selection of free and premium landing page templates on Landingrepo