Landing Page Setup

This document describes how you can easily fire up your ultra-fast, static landing page in seconds.

Minimum Server Requirements

  • PHP 5.6 or greater

Applications / Tools Needed

  • Text Editor (e.g. Notepad)

  • FTP Client (e.g. FileZilla, CyberDuck)

Logins Needed

  • cPanel or FTP access (FTP host, username, password)

Content Upload

  1. Using FTP client of your choice, login to your website via FTP.

  2. Inside your web root directorty, create a folder (e.g. my-awesome-landing-page-lp). You know you're in a root directory if you're inside the public_html, www or httpdocs folder.

  3. Extract your landing page copy. Once unzipped, you should see the following files & folders:

    /css
    /img
    /js
    /thank-you-email
    /config.php
    /favicon.ico
    /functions.php 
    /index.php
    
  4. Upload all these files & folders to your my-awesome-landing-page-lp folder.

  5. Once upload, you should be able to access your landing page thru http://www.yourwebsite.com/my-awesome-landing-page-lp/

Content Edits

The landing page comes with dummy text as fillers, and they need to be replaced or removed on your production site. To do that, follow these steps:

  • Login to your website via FTP

  • Navigate to /my-awesome-landing-page-lp/

  • View and edit the following files:

    /config.php
    /index.php
    /thank-you-email/thank-you.html
    

    These 3 web files are crucially important to get your landing page up & running, as briefly described below. If you're not comfortable editing these files yourself, you can ask your web developer to do it for you.

    /config.php

    This is where all your landing page configuration options get listed. It houses your desired email recipients, email notification subject line, phone number, search engine visibility and other SEO-related stuff.

    /index.php

    This is the frontpage or the file that gets rendered once a visitor accesses your landing page. Update this file as required.

    /thank-you-email/thank-you.html

    This is your thank you or confirmation page once a user has successfully submitted a form. Update this file as required.

Miscellaneous

Adding a Google Map

  1. To embed a Google Map, open config.php file and be sure BUSINESS_ADDRESS is correctly defined.

  2. Open /js/main.js and uncomment gmaps declaration there

  3. You're done. Your map should now magically appear on your page WITHOUT affecting your page speed grade.

  4. You may need to relocate the Google Map wrapper as needed. Just open index.php and look for <div id="gmap"></div> and move it as needed.

Adding Image Gallery

To add image gallery clickable via popup, follow the following syntax:

<div class="gallery">
    <a class="popup" href="http://placehold.it/900x600&text=Image1.jpg">
      <img width="400" height="200" src="http://placehold.it/400x200&text=Image1" alt="Relevant Title" />
    </a>
    <a class="popup" href="http://placehold.it/900x600&text=Image2.jpg">
      <img width="400" height="200" src="http://placehold.it/400x200&text=Image1" alt="Relevant Title" />
    </a>
    ...
</div>

It should transform into a gallery with lightbox support

Adding YouTube Video

To add YouTube video as popup, follow the following syntax:

<a class="popup_youtube" href="http://www.youtube.com/watch?v=hLdYvkILbSA">
  <img width="1000" height="320" src="http://placehold.it/1000x700&text=YouTube" alt="" />
</a>

Be sure the class popup_youtube is present or else popup will fail

Adding Vimeo Video

To add Vimeo video as popup, follow the following syntax:

<a class="popup_vimeo" href="http://vimeo.com/123456">
  <img width="1000" height="320" src="http://placehold.it/1000x700&text=YouTube" alt="" />
</a>

Be sure the class popup_vimeo is present or else popup will fail

Adding Google Tag Manager (GTM) Code

  1. Open both /index.php and /thank-you-email/thank-you.html

  2. Add Google Tag Manager code immediately after <body> tag.

Adding Google Analytics Code

To add Google Analytics Code, open /js/tracking.js and add the code. Be sure to omit all the <script> tags.

Also, be sure to add the Google Analytics code to /thank-you-email/thank-you.html immediately after <body> tag, this time with <script> tag.