Documentation – Rocket Landers Landing Page Templates v1.0

Getting Started

if you’ re new to web design & landing page creation, or if in the past you’ve left the nuts-and-bolts design of your landing up to someone else, this document will help you get the most out of your Rocket Lander landing page template (RLLPT). You will require the following tools:

  1. FTP Client to upload the landing page files/images.
  2. Text/HTML Editor to edit the landing page placeholder text.
  3. Web Host to host your landing page (not required if you already have website).

See our recommended list of FTP & File editing tools.

ToolFile UploaderFile Editor
Dreamweaver (paid)
FileZilla (free)
BulletFTP (free)
MonstaFTP (free)
Notepad (available on your computer) 
Your Web hosting Tools (free)
Chrome, Firefox, IE – web browsers (free)
   

Install Your Landing Page

Installation should take less than 5 minutes.

Once installed, the folder/file structure will look like this:


<landing-page-name>/
├──── index.html landing page (single file template that contains all contents)
├──── thankyou.html Confirmation page displayed after visitor submits form (converts)
├──── assets/includes jquery, bootstrap, css etc. source files
├──── images/contains all images used in landing page 

We recommend uploading your (RLLPT) before you start editing the files. We have found it is easier if you preview your RLLPT in working state on your server first, then simply swap/edit the files as required. As long as you have copies of your original files, you will never make an irreverable mistake. And, if there are any issues in uploading, you can figure them out now rather than at launch.

Replace Placeholder Text

You can edit the text in your template by opening the index.html & thankyou.html file with your code editor, locating the placeholder text and replacing with your text/html.

Make sure you replace only the text between the code markers <!-- Start EDIT --><!-- End EDIT -->, and not the code like “<p>” , “</h1>”, “<div>” etc. (unless intended). You can also use your editors find/replace function to locate specific text/images/elements etc. inside the code. For best results, make sure the text you add is approximately the same length in the code as the text you replaced.

TIP: If you are intimidated by code? Don’t be – it’s just text. You’ll be cutting and pasting snippets in no time. Before you get started editing, take a moment to scan through the html and get a feel for where all the information is in your template. Every design is different, but in general, fonts and styles are at the top, content is in the middle, and jQuery/Javascript, Google tracking codes are at the bottom.

Remember to replace the placeholder text inside both the index.html & thankyou.html file

Replace Placeholder Images

Your Rocket Lander comes with placeholder images correctly positioned on the page. In most cases, you will want to replace/swap them out for your own images. This is especially true of product images and your own logo.

All image source files used in your landing page are located inside the folder: /<template-name>/images

The easiest way to change your Rocket Lander images is to open the existing image in your photo editor, paste or place your image over top, size your image to fit the space, then save using the same file name. This will insure that your new image is the exact same name & dimensions as the original placeholder image.

TIP: For best results, make sure that your replacement image is the exact same size in pixels (width x height) as the image you are replacing. It also saves you time and hassle if you replace the placeholder image using the same file name and format (jpg, png, etc.). So if, for example, you want to change logo.jpg, save your own image as logo.jpg and overwrite it on your server.

To replace video – If your template uses a video background or video content, simply locate the videoURL inside the index.html file and replace with the url to your own video from youtube.

Enable Conversion Tracking

Your RLLPT includes the latest Google analytics tracking snippet. To get your landing page to start reporting traffic and conversion statistics inside your Analytics account, you will need to add your Analytics Account Tracking ID to your landing page template. Here is how to do it:

  1. Open the file <template-name>/assets/google-analytics.js using your file editor.
  2. At line 7, replace the placeholder text “{ADD-YOUR-TRACKINGID}” with your Analytics Account Tracking ID. For help locating your Analytics Account Tracking ID, see here.
  3. Save & upload.
  4. That’s it … Login to your Analytics/AdWords account to review your traffic & conversion details.

Configure lead notification email message

The template uses a form to capture user information. The contents of the form are sent to an email address you speciify. To add your email address:

  1. Open the file: assets/mailer.php at line 81
  2. Replace the placeholder email address with your own $my_email = {add your email address}
  3. Save & upload

To edit the contents of the message text:

  1. Open the file: assets/mailer.php
  2. Follow the inline comments to edit the code
  3. Save & upload

Launch your Landing Page to the public

Once you are happy with your landing page you are ready to launch to the public. The basic premise of launching your LP involves sharing the URL to your landing page. For SEO reasons you can create a descriptive url that describes your landing page i.e. http://domain.com/my-landing-page-campaign. Here is how to do it:

  1. Open your FTP program to view your web folders
  2. Rename the the folder that incudes your landing page to your custom name i.e.
    • Change from: domain.com/{template-name}/
    • Change to: domain.com/your-landing-page/
  3. That’s it … share your custom url i.e. http://domain.com/my-landing-page-campaign

Advanced Customization

The application uses the latest version of Bootstrap, jQuery and other related JavaScript libraries. You can add/edit the usage as required by your project. Here is the complete list of Bootstrap/jQuery plugins. Please note that most plugins are included in the application using an absolute link to the hosted CDN version.

How to Optimize for PPC & SEO

Here is a checklist of the latest Google AdWords best practices for mobile optimized landing page design. Here is a checklist of the latest SEO must-haves in your landing page. Here is a checklist of the latest SEO must-haves in your landing page.

Extend jQuery & Bootstrap

  • Jquery – The most popular fast, small, and feature-rich JavaScript library in use today. jQuery Foundation.
  • Bootstrap – You can learn more about customizing Bootstrap from the official Bootstrap website. We also recommend searching google for additional Bootstrap design/development resources.

Credits & Contributions

Change Colors, Fonts & Styling

You can customize the look & feel of your theme by modifying the css styles located inside the external CSS file used by your theme. You can also add your own custom CSS rules. Your theme is located here:

assets/css/styles.css

You can learn more about customizing the CSS from the official Bootstrap website. We also recommend searching google for additional Bootstrap design/development resources.

If you want to use the provided fonts, cool! No reason to mess with a good thing. But if you’re looking for a new font, go to Google Fonts (http://www.google.com/fonts) and follow the instructions to find, copy, and paste your new font. Here is is the general guideline on how to change the font for your template. Each Rocket Lander includes the use of 2 Google fonts. One font is used to display headline text. The other is used to display paragraph text.

Modifying the Contact Form

The template uses a form to capture user information. The contents of the form are sent to an email address you speciify. You can customize the form by adding new fields or replacing with a 3rd party form i.e. survey monkey survey form, mailchimp subscription form, google form etc.

Integrating 3rd party form tools:

Create a native Android app of your landing page

You can create a hybrid android app of your landing page. Creating an android app will allow users to download and install your landing page on a mobile device. Create app for Android deviceCreate app for iPhone, iPad and other IOS devices.

Add social share buttons so visitors can easily share your page

Social share buttons are built-in to your landing page using the “AddToAny” sharing service. This service is free and no configuration is required. Your visitors can quickly & easily share your landing page with one simple click.

Credits & Contributions

Your rocket landers uses Bootstrap, jQuery and other related JavaScript libraries. You can add/edit the usage of these components as required by your project. Refer to the author website for additional info. Here is the list of contributors that were used to create the Rocket Landers experience: