Company Blog Support
Martin Cogburn
posted

Contents

    Back to Top

    Landing Pages Overview (Legacy Landing Pages)

     

    What is a Landing Page?

    ONTRAPORT allows you to create custom landing pages quickly and easily. Landing Pages are single web pages that are designed to 'go with' or be an 'add-on' to a particular marketing campaign. They can serve many purposes such as squeeze pages to house Order Forms, provide additional information to your clients/prospects, or serve as thank you pages for Smart Forms.

    When someone is turned on by your ad, your Postcard, your Email, or even an SMS you've sent, they’re bound to click a link or visit a URL found within. What they see next is vitally important. Drop them onto your home page to flounder about and they’ll usually wander off. But, drop them onto a page that matches the campaign, reiterates the message in the ad, email, postcard, or SMS and is personalized to them, and you’ll see response rates soar.  If you’re currently sending ad responders to your homepage, you’ll see an increase in response by sending leads to a custom Landing Page instead. You can host them yourself or you can have us host them for free. Plus, any Landing Page created in ONTRAPORT automatically becomes a PURL.

    Where Do I Create a Landing Page?

    To access the Landing Page creator, open the Sites menu on your main screen and then click on Landing Page. Once there, click the New Landing Page button and select either an ONTRApages, Redirect, Code Mode, or Legacy Pages depending on what type of landing Page you'd like to create.

    select landing page type

    Types of Landing Pages

    There are 4 types of Landing Pages that you can create in ONTRAPORT based on your needs and/or web development experience: ONTRApages, Redirect, Code Mode or Legacy Pages. Read about each type of landing page and their functions below.

    ONTRApages

    ONTRApages are beautiful, responsive Landing Pages you create quickly from a built-in selection of templates. They look great on any device. Editing is enhanced with a click-to-remove interface called the Canvas that simplifies customization and incorporates options that rival the features of extra-cost applications. This article provides details on our Legacy Landing pages, and will be deprecated in the future. See our full article on ONTRApages or jump right into creating one by logging into ONTRAPORT in another tab and clicking Create an ONTRApage Landing Page.

    Code Mode

    Code mode pages provide a visual/HTML view for creating/editing the page. This option is available for users who are experienced in HTML/CSS/JavaScript in order to completely customize and tweak their page. While there is a visual mode to view the page in WYSIWYG form, it is not as easy to use as the Easy Mode creation.

    Redirect

    Redirects will redirect a visitor to an ONTRAPORT-hosted Landing Page on our hosted domains (or even one of your own domains) to another page. With it you can use PURL tracking to keep track of who’s visiting an external page, like your own website or a 3rd party site.

    • URL Selection - like Legacy and Code Mode pages, you can use one of our hosted domains or your own. Select the address for your page.
    • Redirect To - Select the redirect destination URL. You can select up to 4 different redirect destinations for split-testing purposes.

    Legacy Pages

    Legacy Pages are...easy. They provide a drag and drop interface to quickly create a page without needing any kind of HTML/CSS code knowledge. However, we do have "HTML" Layer types available if you need to make a tweak to a page. In the editor, there are a few options immediately available. Legacy Pages are not current in design or capability, and will not render well on mobile devices. We strongly recommend using ONTRApages instead. 

    The rest of this article discusses creating Legacy Pages for our clients who still have them in their accounts.  

    Landing Page Settings (Legacy Pages)

    legacy landing pages menu options

    • Save: Use this button to save your landing Page. Save it often!

    • Preview: When clicked, preview generates an example of how the page will look when people visit it in their internet browser

    • Page Title: This is what the title will look like in a browser window/tab. When someone visits your Landing Page, they’ll see this.

    • Page URL: This is the web address of the Landing Page. You can either use one of our hosted domains and enter a subdomain/file name, or use your own domain.

    • Background: Select a background color/image and adjust the visual settings of that background.

    • Page Alignment: This is the way that you want your Landing Page to display in a browser. Landing Pages are centered by default.

    • Page Size: Set the dimensions of the page as you would like it to display in a browser window. Sometimes the pages may need to be skinnier/wider or shorter/taller, and this is where you will be able to change those values. The unit of measurement is in pixels, which differs from computer to computer, but 800 x 1000 is a safe bet for a regularly sized Landing Page.

    • Split Testing: Split Testing allows you to create more than one version of a Landing Page. This is used to determine the effectiveness of various aesthetic elements (e.g. red arrow vs blue arrow) and content on your live pages. All pages are created as split test "A" by default, and up to three more tests can be added here. After the tests have been running for some time, you can check the stats of each page and determine which technique is most effective.

    Adding, Sizing and Repositioning New Layers (Legacy Pages)

    All design elements such as text, images, shapes, gradients and images are added in the form of Layers, which, if you’ve used Adobe Photoshop, or Paint, should be familiar to you. If not, they’re very intuitive and you’ll quickly get the hang of Layers.

    Adding a new Layer
    1. Click New item on the right.

      add new layer on legacy landing page
    2. Choose to add one of 7 different Layers
      1. Text area
      2. Shape
      3. Gradient
      4. SmartForm
      5. HTML
      6. Video
      7. Image

    As soon as you create a new Layer, it will start out selected. You’ll know it’s selected because in the Layer stack, it will appear as blue; grey = not selected. To select a Layer, you can either click on that Layer in the stack or click on the Layer in the actual Landing Page. You must first select any Layer before you can edit it (resize, reposition, etc). If you select a text Layer in this way, it will make it so you can edit the text.

    Re-ordering Layers

    You can drag the Layers by clicking and holding the up/down arrows icon within the Layer stack on the right to control which are on the top and bottom (and everywhere in between) of the stack,. If a given Layer is underneath another Layer, it may not be visible because it’s hiding underneath another Layer. If you want that Layer to show, you’ll need to drag it in the Layer stack so it’s above the Layers that might otherwise be blocking it.

    move layers on legacy landing page

    Resizing a Layer

    There are two ways to do this:

    Dragging Method

    1. Select the Layer you want to resize
    2. Then grab (click and hold) one of the little red squares, or “handles” on the edges and drag it outward to expand, or inward to shrink.
      1. Note that if you want to keep the height to width ratio the same while you resize the Layer, you can do so either by using one of the handles on the corners (as opposed to the sides) of the frame, OR by holding shift while you resize. This is especially useful when resizing pictures so you don’t accidentally change the width, but not the height, or vice versa, thus, distorting the image.

    Numeric Method

    This method allows you to enter a specific height/width measurement (in pixels) for the size of the photo as you’d like it to be.

    1. Select the Layer you’d like to resize.
    2. Then, in the upper right of the editor screen you’ll see the current height and width measurements for that Layer. Simply select EITHER the height or the width value and change it to whatever you’d like. This option automatically keeps the height to width ratio (or proportions) of the image the same. Thus, if you change the width, the height value will instantly be changed as well; in order to maintain the proportions of the Layer. This method of resizing is good if you’re looking to make exact changes and where specificity is key.
    Repositioning a Layer

    There are three ways to do this:

    Drag and drop method

    1. Select the Layer you want to reposition
    2. Grab the Layer (by clicking and holding within the Layer itself, on the Landing Page, not in the Layer stack).
    3. Drag and drop it wherever you like.

    Micro-Adjust Arrow Key Method

    This method allows you to use the arrow keys to adjust the layer position a pixel at a time.

    1. Click the layer to select it

    2. Hold down the ctrl key (command key on a Mac). The distance in pixels to the adjacent layer will be displayed.

    3. While holding down the ctrl key use the arrow keys to move the layer a pixel at a time

    Numeric method

    1. Select the Layer you’d like to reposition.
    2. In the upper right of the editor screen you’ll see the current position for that Layer. The positioning is shown in the following measurement:
      1. Left: This is the number of pixels the Layer is from the left-hand edge of the Landing Page.
      2. Top: This is the number of pixels the Layer is from the top edge of the Landing Page.
    3. If you want to change the horizontal positioning of the Layer, simply enter the number of pixels you’d like the Layer to be from the left and press enter. Similarly, if you’d like to change the vertical positioning of the Layer, enter the number of pixels you’d like the Layer to be away from the top of the card. This method of repositioning is good if you’re looking to make exact changes, and where specificity is key.
    Working with Layers (Legacy Pages)

    Gradient Layers

    On the left hand side of the toolbar you’ll see your shape selection choices. Your gradient area can be in any of the available shapes: Rectangle, Circle, or Rectangle with rounded corners.

    Gradient Adjustment Slider:

    1. To change the colors in your gradient, double click the rectangle that sits underneath the little ‘carrot shaped pointer.’
    2. To increase the distance of the transition (and thus, the subtlety of the gradation) from one color to the next in your gradient Layer, move the two sliders further apart. To decrease the distance and subtlety of the gradation/transition from one color to the next, move the sliders closer together.
    3. To increase the area of the color, say, on the left, move both sliders to the right, and vice versa.
    4. To change the direction of the gradient from vertical to horizontal, or vice versa, click the button just next to the Gradient Adjustment Slider.
    5. To change the opacity of the gradient Layer, use the Opacity slider.

    Add an image

    When adding an image you have a few options:

    Use one of the free ONTRAPORT stock photos

    These images are located in the ‘Public’ image folder. Browse around, find one you like, click it, and then click ‘accept’.

    Add a new image

    1. On the bottom of the Select an Image popup window, you’ll find a link to +Add New File
    2. Here you can choose to upload a file from your computer by clicking the ‘browse button,’ locating the file on your computer, selecting it and uploading it OR if you’d like to use an image that’s already online somewhere, you can choose the Enter image URL option, and do just that. Simply enter the address where the image you’d like to use is hosted.
    3. WARNING:
      1. Most web images are at too low a resolution to look good when printed, so be sure before you use an image that it’s a high resolution image.
      2. You must either have created an image, or have permission from its author in order to use a copyrighted image. You may, however, use certain images offered under the creative commons license.
    4. Finally, you’ll select which folder(s) you’d like this image to be put into and click Upload

    Use an image you've already uploaded

    In this case, simply locate the photo in its folder, select it and hit accept

     

    Add a video

    Videos can be added to Landing Pages via the video Layer if you are using ONTRAPORT to host your video or via an HTML Layer if your video is hosted elsewhere and you possess the embed code of the video you wish to place on the Landing Page.

    How to post a video hosted by ONTRAPORT on a landing Page

    1. Click on +New Item in the Layers bar
    2. Click the Layer type called Video
    3. Click dropdown in upper left of screen and select your video.
    4. Choose your player and skin
    5. Select the Autoplay button to have the video play automatically when the Landing Page is accessed
    6. Save your page

    Add a Smart Form

    Forms can be added to a Landing Page in 2 ways: via a Form Layer or an HTML Layer.

    Adding a Smart Form via a Form Layer
    Adding the Smart Form as a Form Layer is the simplest way of placing a Smart Form on a Landing Page. When you add a Form Layer, you will be asked to select a Smart Form that you’ve already created in ONTRAPORT in the dropdown menu that appears in the upper left.

    Adding a Smart Form via an HTML Layer
    This method of adding a Smart Form is almost just as easy as the Form Layer method and basically presents you with an alternative in case you want to do any further customization within the HTML before placing the Smart Form on the page. To do this, add an HTML Layer to the landing Page, double-click the Layer, and then paste the HTML or javascript code into the Edit HTML box that appears. You can make any additional edits to your code in this box as well by double-clicking your on your HTML Layer item at any time.

    Page Visit and Conversion Stats

    What is a page visit?

    The number of unique visits to the Landing Page.

    What is a conversion?

    The number of times the Smart Form on the Landing Page has been filled out.

    How to view your page visit and conversion stats

    To view your Landing Page stats, go to Sites > Landing Page. If your page is unhosted and has never been hosted, the stats will show only zeros.

    Best Practices
    • DO put your Form Layer at the top so that you can be sure page visitors can fill out the Smart Form.

    • DO operating system and browser testing to make sure you page looks great on all since each browser can render items slightly different. This includes Mac and PC, Internet Explorer, Mozilla Firefox, Google Chrome, Safari, iPhone, Android, iPad, and tablets.

    • DO optimize your web images so that they load fast for your page visitors. This usually means making resolution less than 200dpi with a tool like picture girdle or any basic image editing tool.

    Where to go From Here

     

     

     

     

    Articles in this section

    Have more questions? Submit a request

    Comments

    • Avatar
      Lauren Gallagher

      I'm trying to set-up an opt-in landing page with a download button and can't find how I attach the pdf I want them to download.

    • Avatar
      Frank Hagan

      In ONTRApages it is fairly easy; select the button and then the link icon, select ONTRAPORT Hosted File, then Select File. You can then upload a file from your computer or select a file you have uploaded previously:

      set-download-file-link.png

      For Legacy Landing Pages, first upload the file into the File Manager. To find the File Manager, click your email address at the top right, then select Administration. Select File Manager. After you have uploaded your file, click on the name of the file to show the Download Link. Use this link as the URL for your button: 

      get-download-link.png

    Powered by Zendesk