Company Blog Support
Martin Cogburn
Updated

Contents

    Back to Top

    Landing Pages Overview (Legacy Landing Pages)

    About Legacy Landing Pages

    Applies to: ONTRAPORT Pro and above.

    Note: ONTRAPORT's older legacy Landing Pages can still be edited in ONTRAPORT even if the editor selection is no longer available under Pages > +New Landing Page. This article provides instructions for that editor for those that have older ONTRAPORT accounts.

    Introduction to the Pages Collection

    The Pages Collection lists all the Pages created in your account. Just like the Contacts Collection, you can click the item to open it for editing, select one or more items for Actions that appear in the Action Bar, create Groups and apply Group Actions to all items selected in the Group.

    The Group Quick Selection Icon is positioned on the left in all Collections and allows you to quickly select all items in the Group, all the items on the page, or to deselect all the selected items with one click.

    Group quick selection icon

    Along the top is the Group Dropdown, where you can create a new Group or select one you have previously created. The Edit Group button allows you to edit the criteria for the selected Group. The Actions button will show the actions available for the selected items, with the Action Bar showing at the top of the screen. Note that Actions that cannot be taken because no item is selected, or because the action is not available for that item, are presented in a lighter, faded color. The New button will allow you to create a new Contact (shown) or Sequence, Rule, Form, Message, Upsell Form, Partner Program or Landing Page as appropriate for the section you are in.

    the Group dropdown, edit Group, Actions and New buttons

    At the right top are three more tools for the Collection. You can search for data in any of the columns displayed in columns in the Collection, click the Pin icon to add the Collection page to the Pinned Items page, and add columns to the Collection listing.

    add column, pin page and search icons are at the top right

    The Pinned Items page is accessed by clicking the Pin Icon in the main navigation bar when it is visible. The page will show all the pinned items, allowing you to jump to that page with one click.

    the pinned items appear in the page, allowing one-click access to any page in ONTRAPORT

    The Add Column button displays all the available columns allowing you to select what to show in the Collection. Here are some of the columns available and what they are:

    Pages Collection

    • Name (what you named the page)
    • Domain (where the page is hosted)
    • Visits (unique visits to the page)
    • Type (Legacy Landing Page, Legacy Code Mode Page, ONTRApage, etc.)
    • Conversions (number of visitors that submitted an opt in or order form)
    • Date Created (added Nov. 7, 2017; will show a date if the page was created after that date)
    • Date Modified (added Nov. 7, 2017; will show a date if the page was modified after that date)

     

    the Pages collection fields

    Other Features of the Collection

    You can resize the width of the columns by hovering over the far right side of the existing column and dragging the <> indicator.

    change width of the column

    To select a new field for the column, hover over the column name and click the pencil "edit" icon. You can select a new field, delete the column entirely, or move the column by clicking and dragging on the move icon.

    move icon to rearrange the columns

     

    URLs listed in the columns with the external link icon will open in a new window or tab when clicked.

    the external link icon

     

    At the bottom of the collection you can decide how many records per page should be displayed, along with navigation controls to page through the records.

    pagination controls on the collection

    Where Do I Create a Landing Page?

    Legacy Landing pages will be deprecated and you will not be able to create them after mid-2018. To edit an existing Legacy Landing Page simply open it for editing. ONTRAPORT will load the Legacy Landing Page editor for you.

    Types of Landing Pages

    There are 4 types of Landing Pages that may appear in some accounts. You can still edit each type by opening it from the Pages collection. New landing pages can only be created using the ONTRApages editor. You can also create new Redirect Landing Pages.

    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. 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 in older accounts. Your existing Code Mode pages can still be edited, but you cannot create new ones. ONTRApages provides an alternative with the Custom HTML block.

    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 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 and editing Legacy Pages for our clients who still have them in their accounts.

    Legacy 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

    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

    Click New item on the right.

    add new layer on legacy landing page

    Choose to add one of 7 different Layers:

    • Text area
    • Shape
    • Gradient
    • SmartForm
    • HTML
    • Video
    • 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. 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. 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.

    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 down the Shift key 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 and width measurement in pixels for the size of the photo.

    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 measurements
      • Left: This is the number of pixels the Layer is from the left-hand edge of the Landing Page.
      • 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

    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:
      • 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.
      • 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 Already Uploaded

    In this case, simply locate the photo in its folder, select it and click 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. ONTRAPORT uses a cookie to identify the browser, and checks each visit for the presence of the cookie. If the landing page is listed in the cookie the visit is not counted for the Total column. If a visitor clears their cookies, or uses a different browser, they will be counted as a new page visit again.

    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 Pages. The "Visits" and "Conversion" columns can be added using the + (plus sign icon) at the top right if they are not visible.

    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.

    Articles in this section

    Created - Updated
    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