Setting up a landing page

Share on:


A landing page is just a simple webpage that typically has a background image and some information. Here are some examples to get you started.

Lets use the free template as an example page to get up and running.

Working with the example Landing Page

As you might expect the most of the work has been done for you. A live preview shows what the template looks like. If you do not like what you see, keep searching the templates. If you do like what you see ...

  • Download the template zip file onto your development machine
  • Unzip the zip
  • Explore the zip folder

Test access

Now you have access to the zip contents, you can run the contents on your development machine.

  • Open the index.html file in your browser

That's it - you now have an example landing page available to customise!

Customizing the template

Most templates follow the same hierarchy. The general layout of html content is as follows:

 2├── assets
 3│   ├── css
 4│   └── sass
 5├── images
 6│   ├── background.jpg
 7│   ├── favicon.png
 8│   ├── logo.png
 9│   └── social.jpg
10└── index.html

To customize the template, you can replace images or text. If you become familiar with the location of items, it helps to make amendments quickly and easily.

File Purpose
index.html Body of the document
images images shown in the document
assets script etc used in the document