Elements are the text, images, videos, forms and other content that you drag and drop onto a landing page. They appear in the palette on the left side of your canvas when you’re creating a page. You have lots of flexibility in Ontraport Pages to edit your elements to appear just how you’d like.

 

Text and Button Elements


text and button elements

Headline, Subheadline, Text, Button and Divider are the five elements available in the Text and Button section.

To adjust the font, size, or style of text simply click on the text you’d like to edit and use the formatting bar at the top of the canvas. Note, only one font and size can be applied per element.

editor menu bar

To create a consistent style for your headlines, subheadlines, body text, button text, etc., that will appear throughout your page, click the font style button and then click any of the pencil icons to choose a new font face and size.

To edit a button style click on it, click the style tab ,  then click edit style. Options that have a lock icon next to them apply the style uniformly to the button; click the icon to unlock that setting and see additional options.

To add links to your text or buttons highlight text you’d like to link and click the hyperlink icon from the formatting bar. You then have the following options for types of links to add (our workflow will enable you to create these assets on the fly and return to this dialog afterwards).

  1. URL: The address of a specific page such as your business website
  2. Ontraport Page
  3. Link to a block on this page: This allows the visitor to jump to a block located somewhere else on the page
  4. Tracked Link
  5. Ontraport Hosted File: A PDF or other type of file you hosted in the Ontraport File Manager
  6. Ontraport Form Lightbox: Pop-up form block

Additionally, when creating a link, the link style dialog in the palette allows you to set the font style and the color of the link.


Image Element


the image element

The image element allows you to add and edit images on your page.

To insert an image onto your page, drag and drop the image element onto the canvas.

To resize an image select the resize handles that appear in the corners and drag them how you’d like.

To move an image click and drag the handle that appears on the side of the image.

To replace an image click on it and select change image.

When working with images, three tabs will appear in the palette:

  1. Settings tab: This is where you can hyperlink the image, provide a title for search engine indexing, and provide alt text for the image.
  2. Style tab: This is where you can edit style such as borders and drop shadows.
  3. Position tab: This is where you can fine tune the padding and margin, or align the image to the left, center or right of the column it is in.


Editing Images


In the palette, click the edit button above the image to access the image editor. The following editing options are available through the icons in the left sidebar. Remember to click the orange save button after you’ve made your edits.

Transform: This is where you can crop, flip and rotate images. Use the common crops to speed up your workflow, and click on the “Lock Resolution” check box to enter new dimensions for the image. It will be resized upon saving.

Filters: Choose from up to 50 different mood settings. Use the slider to adjust the amount of effect.

Adjust: Use the sliders to adjust brightness and contrast or to fine tune highlights, shadows, sharpness, etc.

Focus: Add effects that blur backgrounds and focus in on parts of an image. Use the slider to adjust the amount.

Text: Add text to a photo and adjust its font, color, etc.

Frames: Create a frame around your photos, with the ability to adjust width and opacity.
Overlay: Add various layers on top of an image. Use the slider to adjust the level of effect.

Video Element


the video element

To insert a video onto your page, drag and drop the video element where you’d like it. Then use the video element settings to embed and configure videos.

To embed an Ontraport-Hosted Video: Upload your video into the Ontraport video manager. The videos you upload will appear in the dropdown for background video. If you don’t have any videos in the video manager this option won’t appear.

To embed a video from other sources, you’ll go to Settings and insert the URL into the URL box. Follow these instructions depending on which source you’re using:

  1. YouTube-Hosted Video: Use the full video URL as shown in the address bar when the video is playing on YouTube, and not the shortened URL used by the share link. Add “?controls=1” after the URL to enable the controls bar to appear upon hover (as shown in the screenshot above).
  2. Vimeo Video: Use the URL of the video that appears in the URL bar.
  3. Wistia Video: Display the video in your Wistia account and click the video actions dropdown. Select the “embed and share” option in the share link tab. Click the copy link button.
  4. Embed Videos: This option can use embed code from different sources. Typically you would use code contained within <iframe> or <video> tags. You can create your own HTML5 video tags for a video hosted on your own website or video hosting service.

If you want your video to autoplay, mute the sound by setting the Audio on/off option to off. Chrome and Firefox will prevent autoplay videos with sound from showing up in the browser window.


Icon Element


the icon element

To add an icon to your page, simply drag the icon element to the canvas to display hundreds of options from Google Fonts and Font Awesome. You can then use Settings to adjust the color of the icon, resize the icon, link your icon and more.


Slide Show Element


the slideshow element

To create a slideshow on your page, which displays items that rotate, drag the slide show element to a block. It will automatically insert three sample slides; click on the slide element to display the settings, then click on one of the slides in the list to show the settings for that slide. You can click the + add button to add additional slides.

The Style tab in the slide element editor allows you to control the height, slide indicators (the dots at the bottom of the slide showing you the position in the series), the slide arrows that appear on the sides of the image, the animation speed (how fast the transition from slide to slide is) and the time between slides (how long the slide stays on screen before transitioning to the next slide). To turn off the automatic transition to another slide so that viewers can manually cycle through slides, select off in the time between slides (seconds) drop down.

 

Form and Sales Elements


form and sales elements

When creating a form on your page, the following elements available are:

  1. Form Field: This allows you to insert a single form field such as “first name” on the page. When you add your first field, we recommend going to the Style tab and designing it; your style will then be applied to the rest of the fields as you drop them on the page.
  1. Submit Button: This button is required for every form to ensure the information from the form gets passed into your contact database; be sure that it’s included within the same block as the form fields. Click on the settings gear to choose where to redirect visitors after they submit.
  2. Billing Address: This element includes all the required billing address fields, such as address and zip code. When a customer enters information here, it is sent to your payment gateway for credit card verification.
  3. Shipping Address: These are premade fields for a shipping address to use if you’re shipping a product.
  4. Credit Card: This set of fields includes the minimum required for most payment gateways: the name on the credit card, the card number, the expiration month, expiration year and CVC number.
  5. PayPal Button: This button redirects the customer to your PayPal sales page to complete their payment with PayPal.
  6. Order Summary: This will display the total purchase price. You will configure your product and payment settings here.
  7. Order Bump: This allows you to promote an additional, often related, product to your order form. Drag the order bump element to the same block as your order summary, and click  to edit.Configure your product settings and the content of the order bump, then click .

    If the customer clicks the check box for the additional product, the product is added and their total price adjusts. This allows you to upsell the customer prior to their purchase. All products selected are billed on the same invoice as the main product. You can use a PayPal Standard gateway as well as any other credit card gateways to process the transaction.

  8. Upsell: An upsell is an additional offer presented to customers after they submit a purchase. It appears on the page the customer sees after the submission. We cache their payment information so customers only need to click Yes if they want to purchase the upsell. You will configure your product and payment settings for your upsell form just as you do on an order form. Be sure to configure both the Yes and No buttons.
  9. reCaptcha: If you’d like to decrease the potential for spam form submissions by automated bots, add a reCaptcha element. This will require the person filling out the form to click a checkbox to confirm they are a person.

To adjust states, countries and other dropdown field values, select the field and click the Advanced link in the Settings tab. Click Edit Dropdown Values to display all the values and hide or rearrange them. Click the button next to the entry you want at the top as the default choice, then the Hide All button to deselect all the other entries. Manually select the entries you want to include in the dropdown.


Advanced Elements


the advanced elements

Additional elements are available to customize your page even further.

Countdown Timer

Drag the countdown timer onto your page, then set the deadline date, which is based on your computer’s time zone, and the countdown timer will continuously update until that date.

You can also set which URL, Ontraport Page, tracked link or Ontraport-hosted file you’d like visitors to be directed to once the timer has run out.

Social Share

Drag and drop this element onto the page to add social media icons and links. Click the add button to add additional icons, and click the Style tab to choose from 12 icon sets.

By default, the social share icons take the visitors to your social media page or account.

You can also create “share this page” links:

  • Visit Share Link Generator.
  • Add the URL of the page you want your readers to share (i.e, your Facebook page, Twitter feed, etc).
  • Click Create the Link.
  • Copy the output and paste it into the icon URL field in Ontraport.

Facebook Comments

This element allows your customers to comment on your pages using their Facebook credentials. To use it, you’ll first need to create a Facebook App and obtain the App ID. Because this is a complex process, you may want to enlist the help of an Ontraport Certified Consultant to complete this step. 

To create your Facebook App:

  • Create a Facebook for Developers account.
  • Click Create App and name your application.
    1. Click Settings  → Basic and add the required information. 
    2. Click Save Changes
  • Toggle your app from “In development” to “Live.”
  • Copy your App ID.

To add Facebook comments to your Ontraport page: 

  • Open a new or existing landing page and drag and drop the Facebook Comments element onto the canvas. 
  • Click your Facebook comment element to open its settings. 
  • Add the App ID you copied from Facebook into the App ID field. 
    1. (optional) If you want your comment element to show posts made on another page, add that page’s URL to the “comment URL” section. This is a great option if you’d like to continue a conversation that was started on another page. 
  • Click .

To add Facebook’s moderation tool:

Facebook provides a tool that allows you to moderate and manage the comments posted on your pages. 

  • Go to Facebook’s moderation setup instructions and copy the meta tag provided under “Setup using a Facebook App (Preferred).”
  • Log in to your Ontraport account and go to the page editor of the page that you put the comment block on. 
  • Click  Custom Code.
  • In the header section, paste the meta tag and replace {YOUR_APP_ID} with your Facebook comments App ID. 
  • Click .
  • Click   → .

Note, once you’ve saved your page, it may take up to an hour for Facebook to add the moderation tool to your comment block. 

To add moderators:

  • Go to Facebook’s Developer Tools page.
  • Click Comments Moderation Tool  → Settings → Moderators.
  • Add your moderators and click save.  

From the Style tab, you can set the color theme, number of comments to display and a sort order for the comments.

Custom HTML

The Custom HTML element allows you to add raw HTML, CSS or JavaScript code into your page, further expanding the page’s capabilities. This could be used to insert your appointment calendar, to connect to your custom-coded external application, or for a variety of other use cases.

This element is intended for advanced users and coders only. Please note that Ontraport cannot support or troubleshoot custom code, and that coding errors you introduce within the Custom HTML element can cause problems with no recovery possible.