How to Create a Mobile App Landing Page With Templates

As you’re getting ready to launch your app and release it onto the app marketplaces, you need to start planning for the promotion and marketing of your app. When the time comes to promote your app, look into using an app landing page. App landing pages are better for marketing than a regular website because they focus on getting the visitors to take a specific action.

You can tailor your landing page based on your needs—drive downloads via app store links or encourage them to leave reviews/sign up to be notified when the app launches, and more.

App landing pages are quick and easy to create with the help of a template. Another benefit of using app landing page templates is that you can focus on finishing your app and promoting it rather than designing a landing page for it.

In this post, we’ll explain what to look for in an app landing page template, the features you’ve got to include on your landing page, and we’ll show you how to create a landing page from a template.

What to Look For in an App Landing Page Template

There’s no shortage of beautifully designed app landing page templates, which means that when it comes to choosing the right landing page template for your app you might spend a lot of time going through all the options. Here are the most important features to look for in an app landing page template:

• Responsive and attractive design. Having a responsive and attractive website allows your visitors to enjoy your site and see everything your app has to offer no matter what device they’re using.
• The ability to customize your template with your brand colors. This will make it easy to maintain brand consistency.
• The ability to showcase user testimonials. Testimonials will help build social proof, which goes a long way toward establishing trust and converting visitors into subscribers.
• Template documentation. Thorough documentation will help you quickly find answers about your mobile app landing page template and guide you through the setup process.
• Template that’s geared for their app niche. Or look for a versatile template that can be used across different niches.

What Makes a Great App Landing Page?

Now that we’ve covered what features to look for in an app landing page template, there are some elements you need to have on your site to ensure the best possible conversion rate.

1. Compelling Copy

One of the most important elements of your landing page is the copy. Your headline, subheadline, and the rest of the body copy should share the benefits of using your app to convince visitors they should purchase and download it. Use the headline to pique curiosity, encourage them to continue reading with your subheadline, and then use the rest of the copy to seal the deal.

2. App Screenshots

Don’t skimp out on the screenshots of your app just because it’s a digital product. Show the icon that’ll appear on the home screen and use smartphone mockups to show how the app’s interface looks. This will give your users a sense of how they can use your app.

3. User Reviews

As mentioned earlier, user reviews will help you build trust with your visitors which helps conversion rates. Once visitors see that other users were happy with your app, they’ll be more inclined to download it and try it out for themselves.

4. Call-to-Action

Lastly, you want to make sure your app landing page has multiple calls-to-action that point the visitors to the app marketplace where they can download the app or sign up to be notified when the app launches.

How to Set Up Your App Landing Page Template

Before setting up your app landing page template, you need to understand how HTML templates work. Once you understand the structure of an HTML template, it’s easy to set it up.

HTML Template Structure

HTML templates consist of HTML, CSS, and JavaScript files as well as images that you add to your website. The HTML files control what elements are present on your landing page. This includes headlines, paragraphs, testimonials, calls-to-action, buttons, and more. The CSS files are responsible for how the template looks. They control colors, fonts, spacing, and other visual elements.

The JavaScript files add extra functionality and usually control animations, transitions, and form validation.

In some cases, your template might include PHP files which are used for contact forms or newsletter sign up forms.

Your template will come in a folder that’ll hold all the HTML files and the CSS and JavaScript files, which will be in their respective subfolders. Let’s take a look at how an example HTML template is structured.

For the purposes of this tutorial, I’ll be using the Focus template. The Focus template is a multipurpose mobile app landing page template, which means it can be used to showcase various apps. It’s also responsive, SEO-friendly, and comes with the ability to use video backgrounds.

Here’s how the Focus template is organized:

• CSS. This folder contains all the stylesheets that the template uses.
• Fonts. In this folder, you’ll find the fonts that were used in the template that need to be uploaded to your server
• Images. The images folder has all the placeholder images and you can use it to add your images for the template
• js. This contains the JavaScript code that’s needed for the template
• php. This contains the PHP code for the contact and newsletter forms
• Index.html. The main page of your mobile app landing page template

As you can see from the screenshot below, the Focus template also has several different versions that are in their own folders. Each of those folders follows the same structure as above.

1. Create Your App Landing Page With a Template

Now that you understand how HTML templates are structured, let’s go through the steps of setting up your app landing page with a template.

1. For starters, you’ll want to open up the HTML file in your browser. To do this, right-click on the index.html file and select Open With and then choose your default browser. Then, right-click the file again and this time choose Open With and choose a text editor like Notepad, Sublime Text, or TextEdit. Doing so will allow you to see your template and the code that you need to edit:

2. Once you’ve got the file opened in your browser, you need to inspect the element you want to edit. To do that, right-click on the large heading and select Inspect. You’ll notice a panel appear at the bottom of your screen. The panel allows you to see the HTML code that makes up your mobile app landing page template as well as the CSS template that controls how the elements on the page look.

As you can see from the screenshots below, the heading is surrounded with

3. Switch to your text editor and scroll down until you see the same

To edit the text, click in between the

4. To edit the rest of the mobile app landing page template, you’ve got two options. You can go back to your browser and continue inspecting the parts of the page with the Inspector, locating them in the HTML file, and replacing them.

The other option is to stay in your text editor and simply continue editing the HTML tags that contain dummy text. As you can see from the screenshot below, you can edit the paragraph that’s immediately below the

Whichever option you choose, continue repeating these steps until you’ve edited all of the demo content.

When you’re done making changes, click on File > Save in your text editor and then refresh the template tab in your browser window. You’ll see all of your changes have been applied.

5. The next step is to replace the images that the template uses. We’ll go over the steps needed to replace one image and you can then repeat the same steps for all of the other images.

To start replacing the images, you’ll need to add them all to the images folder. Once more, open up your index.html template in the browser, right-click on the first image in the header and click Inspect.

You’ll see the HTML code for image tags that looks like this: .

6. Now all you’ve got to do is edit the index.html file in your text editor. Open up the index.html in the text editor and look for the above line of code. Delete everything after the images/ and replace the image name with your own image.

2. Style the Template

The next step after editing the content is to change the way your template looks. This can be done by editing the CSS file but first, you need to know which styles are associated with what HTML element.

1. You’ll start by right-clicking on an element in your browser and selecting Inspect. This time look at the right side of the screen and you’ll be able to see the CSS code for that element as well as the line where the code is located in the CSS file.

2. To edit the CSS file, go to your template’s folder and open the CSS folder. Now, right-click on the style.css file, click Open With and select your text editor.

3. Now, find that line of code you saw in the Inspector. For example, I want to change the background color of the featured background. That line of code is located on line 170 so all I need to do is scroll down in the CSS file and replace the color code. The code looks like this:

.section-grey{

background: #f2f7f8;

padding: 70px 0;

}

I’ve changed the hex color code and replaced it with this:

background: #f4f3f2;

The CSS allows you to also change the fonts and the colors of your text. Simply repeat the steps as you did with the HTML file and adjust the styles to your liking.

3. Upload Your App Landing Page Template to the Server

Now that your template is edited and styled, you need to upload it to your hosting server so that your landing page can be live and you can start promoting it. For this, you’ll need the FTP information for your server. If you haven’t received this information from your host, you’ll need to contact them. You’ll also need an FTP client that’ll allow you to connect to your server and transfer the files from your computer.

A good FTP client that can be used across platforms is FileZilla. Download it and launch it and then enter your hosting information in the QuickConnect bar. Then, click the Connect button.

Once you’re connected, locate your template’s HTML folder on the left-hand side of FileZilla. Select all of the files and then drag them over to the right-hand side. Drop the files into the public_html folder. All that’s left to do is wait for the upload process to finish and your landing page is ready for visitors.

Get Your App Landing Page Up and Running Quickly With a Template

You’ve just learned how to create a landing page using a template. Getting your app landing page up and running quickly is easy when you’ve got the right template and know how to set it up. Start by heading to Envato Elements to choose an app landing page template and use this tutorial to guide you through the process of setting it up.