Advanced Technique

How to Add a Landing Page

MemberGate has several prebuilt landing pages that can be downloaded and added to your site - these can be found in the Landing Page Library and are free to use

However, as these pages are more complex than a standard content page - because of the integration of design and code - the process of adding them to your site is different and perhaps, more challenging

Option 1

Download, unzip and install a Landing Page from the Library, by following the guide below (DIY)

Option 2

Use a Landing Pages by ordering up our install service (DFY)

 

By following the steps outlined in the tutorial you can add a Landing Page to your site

Please Note: As these pages have already been pre-designed for use, they contain additional code and are not the same as a standard Content Page and so you must follow the guide carefully.

Need More Help

MemberGate also offer a premium option to allow us to add the pages for you

Done For You

 

Instructions to Add a Landing Page

Downloaded File Contents

Each landing page can be downloaded through the MemberGate Libary.

It will come as a zipped file which will need to be unzipped prior to accessing it's contents.

The zip file will include everything necessary to recreate the landing page on your site:

  1. HTML code with a naming structure: *LandingPageName*_HTML.txt

  2. Style Sheet code (CSS) with a naming structure: *LandingPageName*_style.txt

  3. Images Folder

 

Zip File Contents

landing page zip file content

Upload the Images

The first step to add the predesigned landing page to your MemberGate site is to upload the images from the image file to your site.

  1. From your control panel under 'Utilities' choose 'File Upload'

    File Upload


  2. In the drop down box for 'Select Upload Location' choose 'Public Image Storage Area'



  3. Click the 'Upload Files' link and Open the 'Images' folder and select all of the images in the folder.



Those images will be added to the public image storage area which is the correct path to pull those images into the HTML coding of the landing page.

Add the CSS

The next step is to add your page. Both the styling information and the HTML code can be added to the content page.

  1. Choose 'add content' under the content section.

  2. From the zip file open *LandingPageName*_style.txt

    Add Content


  3. Click within the opened text file and choose 'CTRL-A' to select all of the text and copy it

  4. In the 'Add Content' page, click on the box next to 'Custom Header + Footer Javascripts' and paste the contents of the style file to the 'Custom Header Javascript' field

Add the HTML

The HTML code can now be added to your page. Along with a couple of other adjustments to the add content settings, this should complete the base of getting the landing page created.

Paste the HTML Coding

  1. From the zip file open *LandingPageName*_html.txt

  2. Click within the opened text file and choose 'CTRL-A' to select all of the text and copy it

  3. On the 'add content' page if your WYSIWYG editor is turned on, click on the source code button as show below



  4. Paste the HTML code into the source code box and press 'OK'

 

 

Adjust a Few Other Settings

  1. Add a Headline to the "Headline for Page' field. Surround the headline with pipe symbols. For example: |This is the Headline|

  2. Set both the left and right nav panels to not show. In the 'Show Right Nav Panel On This Page?' and 'Show Left Nav Panel On This Page?' choose 'No' from the drop down menu.

  3. Set the header and footer not to show. In the 'Show Header and Footer On This Page?' field, select 'Don't Show Header or Footer'

 

 

Click the 'Add Page' Button at the Bottom when Completed

Create Additional Features

Some of the landing pages include sections that are completed through the control panel like the image sliders, accordions, or video players. 

If your landing page includes any of those elements, they must be created individually on your site. 

Once those are completed, copy the resulting CF tag and replace your tag with the one on the landing page.

Please click below for tutorials if needed:

  1. Accordion

  2. Audio Player

  3. Clump

  4. Carousel

  5. Slider

  6. Pop Up Box

  7. Tab

  8. Video Player

Customize

After adding the styling and the html code has been added to the page, it's time to start customizing!

If using the WYSIWYG editor, it should be disabled for editing as it might be possible to write over the existing html code when editing directly in the WYSIWYG editor. 

To disable: UNClick the box on the 'Use WYSIWYG on this Page?' as seen below:

 

 

 

Apply Changes

 

Click the 'Re-Edit this Content Page' Button

Depending on your abilities, the code and css can be edited as needed and/or desired.

New images can be uploaded and text can be rewritten. For best results we suggest trying to keep the text and/or headlines around the same word count as is on the landing page.