This document describes how you can easily fire up your ultra-fast, static landing page in seconds.
Text Editor (e.g. Notepad)
FTP Client (e.g. FileZilla, CyberDuck)
cPanel or FTP access (FTP host, username, password)
Using FTP client of your choice, login to your website via FTP.
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.
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
Upload all these files & folders to your my-awesome-landing-page-lp folder.
Once upload, you should be able to access your landing page thru http://www.yourwebsite.com/my-awesome-landing-page-lp/
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.
To embed a Google Map, open config.php file and be sure BUSINESS_ADDRESS is correctly defined.
Open /js/main.js
and uncomment gmaps declaration there
You're done. Your map should now magically appear on your page WITHOUT affecting your page speed grade.
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.
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
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
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
Open both /index.php and /thank-you-email/thank-you.html
Add Google Tag Manager code immediately after <body>
tag.
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.