Create an Awesome Landing Page for Startup: Step-by-Step Guide

By September 25, 2018Guides 🍓

The landing page is the face of your startup. And you want it to look brilliant. This simple guide will help you quickly (30-90 mins) create an amazing landing page for your tech project using the Unicorn Platform generator.

Unicorn Platform is a simple static landing page generator for tech startups of any kind: SaaS, web app, mobile app, browser extension, WordPress plugin etc. It generates an HTML template that should be then served from any hosting: AWS S3, Firebase, Github Pages,  Digital Ocean, shared or VPS.
The very basic HTML skills required to edit the contents of your website.

So let’s get to work!

 

Step 1: Pick your Type

Go to the generator. You are offered to take the tiny survey. The survey stands to make your landing page creation process quick and easy.

First, pick the type of your startup. Your choose affects:

  • The set of templates.
  • The set of components.
  • Buttons in call-to-actions (e.g. if you pick “Browser Extension” you will be given Chrome Web Store button).
  • Device mockups (e.g. if you pick “Mobile” your templates will contain iPhone & Android mockups).

choose-type-of-your-startup

Step 2: Pick an industry

Select the industry of your startup to help Unicorn Platform to offer you proper illustrations.

If you are in a doubt or do not see your industry, select ‘Other’.

Step 3: Choose a template

Now choose one of the predesigned templates from the Unicorn Platform collection. Or begin with a blank page.

 

Step 4: Compose a landing of your dream

Meet the generator itself.

Unicorn Platform Interface Explained

Unicorn Platform Interface Explained

Unicorn Platform UI is dead simple and intuitive. But I still want to explain it:

  1. Click the “Add component” button to behold the collection of components. Click on any component to add it to your template.
  2. Trash Bin removes a component.
  3. Up and Down Arrows moves a component up and down.
  4. Click on your profile pic to upgrade to Pro. Pro users can access all the Unicorn Platform components and create better pages.
  5. Back arrow returns you to the survey screen where you can repick a type, industry or select another template.
  6. The “Export Page” is the final step in generating a landing page. We will talk about exporting later.
  7. Click the “?” to get care and support.

Please note the Unicorn Platform (yet) is a static landing page generator. That means you can edit the content of your website only after exporting. The process of content editing will be explained later.

Step 5: Export

You have thrown in a few pretty components and the page looks cool. Good job!

Your next step is to download the template.
Click the “Export Page” button.

First, download the archive with CSS/JS/image files. Click the “Download assets” button, save and unzip the archive.

Then click the “Download .html” button to export your composed page. Save the file in the folder with the previously downloaded CSS/JS/image assets.

export-landing-page

Step 6: Edit contents

Now open your downloaded index.html. It’s time to edit content of your landing page.

  • Change all texts in the file.
  • You see that each link (<a> tag) has javascript:void(0); in the href=”” attribute. javascript:void(0); literally does nothing on click.
    Replace those with your links.
  • Add proper paths to images of each image (<img>) tag.

Unicorn Platform Exported Site CodeStep 7: Upload your website

Now you have a folder with a brilliant landing page. All you need is to upload the contents of the folder with the website to any hosting.

The uploading differs from hosting to hosting. Here are some popular cases:

If you have a different hosting and need help with uploading the website, ask for support.

Final step: Celebrate and show off!

Now you have a cool landing page. Yay!
Great job, really.

Show it to your mommy.
You should also post your landing page under the special Twitter hashtag. I’m very curious to see what you have created.

If you need a friendly human help, support or inspiration, join the official Unicorn Platform Slack channel.

P.S.: often landing page is used to collect emails. Here is a handy guide on how to activate MailChimp integration in Unicorn Platform forms.

Leave a Reply