Legacy Version 1 Landing Pages

About Legacy Landing Pages

Applies to: ONTRAPORT Pro and above.

Note: ONTRAPORT's original 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.

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.

 

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.

 

Redirect

Go to Administration > Legacy features

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

• 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.

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.

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

• Legacy ONTRApages
• Edit Legacy ONTRApages Colors, Fonts, Backgrounds and Page Width
• Add, Delete, Move and Copy Legacy ONTRApages Blocks
• Editing Content in Legacy ONTRApages Blocks
• Legacy ONTRApages Slideshow and Countdown Timer Blocks
• Legacy ONTRApages Custom HTML Block
• Legacy ONTRApages Facebook Comments Block
• Add Smart Form Blocks in Legacy ONTRApages
• Legacy ONTRApages Opt-in Settings on Smart Form Blocks
• Automation After a Legacy ONTRApages Smart Form is Submitted

See more