Pages Elements - Overview – Knowledge Base | Ontraport

About Pages Elements

Elements are the content items you drag and drop onto a Page in ONTRAPORT. Text, images and more are all elements. They appear in the Palette, on the left side of the editing screen, when at least one block has been added to the page.

Elements inherit the page style and attributes, and most of the time you can resize, move and rearrange elements by clicking and dragging. If you need more precise control over elements you can drill down into the element properties.

Text & Button Elements

Text Formatting Options

Click to edit text and use the formatting bar to apply your desired styling. Only one font and size can be applied per element.

Text Styles

Click the Font Style drop down and then the pencil icon to choose a new default font face and size for that style throughout the page. If you want consistent looking pages, use this menu to edit these styles! Your choices will cascade throughout the page for every instance of that font style.

You can override the default font face and size for an individual element but that element is then considered a "Custom Font" element. This means that it will no longer react to changes made to the Sub Headline font style on the page level because you have customized it. If you have 7 text elements with 7 custom font elements and you decide you want to change it, you have to change it 7 times - this is time consuming so make sure you use the font style drop down as much as possible.

Text and Button Link Options

Highlight text and click the link icon from the text formatting bar. When you click it, six options appear. ONTRAPORT's exclusive workflow feature allows you to create these assets on the fly and return to this dialog afterwards. These same options are found where ever you create a link in an ONTRAPORT Page.

URL - a specific page such as your business website
ONTRAPORT Landing Page
Link to a block on this page - jump to a block (e.g. opt-in form) located somewhere else on the page
Tracked Link
ONTRAPORT Hosted File - file you hosted in the ONTRAPORT File Manager (e.g. ebook PDF)
ONTRAform Lightbox: Pop-up form block

Settings - Link Style

When creating a link, the Link Style dialog in the Palette allows you to set the font style and the color of the link. The lock icon and slider next to Link Style enables setting the hover style for the link. In this image the link is in blue, and is underlined when you hover over the link.

Button Style

Buttons can be styled in many ways. Click the Style tab for more options. Presets provide templated buttons that can also be customized. To edit a button style, click Edit Style. You can select Flat, Outline or Gradient styles, with options for each style. Options that have a lock icon apply the style uniformly to the button; click the icon to unlock that setting and see additional options.

Once you create a button that you want to use in other Pages, click the Style tab and click the heart icon. The button will be saved to your favorites.

Here's an example of setting the border radius of a flat button to 25px for the top right and bottom left corners:

Image Element

Drag and drop the Image Element onto the Canvas to insert an image. Click and select the resize handles that appear in the corners to resize the image. Move the image horizontally by clicking and dragging the handle that appears on the side of the image.

To replace an image click on it and select Change Image.

Settings in the Palette allow you to make minor tweaks to the image by clicking the edit button, hyperlink the image, provide a title for search engine indexing, and provide alt text for the image.

On the Style tab in the Palette click on Edit Style to change the border radius to round corners on the image edges, add drop shadows and set a max height for an image to constrain the height. Click the lock icon slider to show each border individually.

The Position tab lets you fine tune the padding and margin and align the image to the left, center or right of the column it is in. Usually you will just drag and drop the image to move it from side to side and will rarely use these settings. They come in handy to reduce the space between elements above and below your image.

Video Element

The video element settings allows configuration of images from ONTRAPORT, Youtube, Vimeo, Wistia, and Video Embed using regular HTML5 video tags. Here are notes on the different embed options.

ONTRAPORT Hosted Video

Upload your video into the ONTRAPORT Video Manager at Administration > Data > Video Manager. The videos you upload will appear in the drop down for "Background Video". If you don't have any videos in the Video Manager this option won't appear.

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:

Autoplay YouTube Videos: In the settings panel set Audio on/off to "Off" and Autoplay to "Enabled" to enable autoplay. Chrome and some other browsers will not autoplay video with the audio set to "On".

Add Controls to YouTube Videos: Add "?controls=1" after the URL to enable the controls bar to appear upon hover (as shown in the screenshot above).

Vimeo Video

Use the URL of the video that appears in the URL bar.

Wistia Video

Display the video in your Wistia account and click the "Video Actions" drop down. Select the "Embed and Share" option and the "Share Link" tab. Click the "Copy Link" button. Paste that URL into the "Add a Video URL" text box in the Settings.

Embed Videos

The Embed video option can use embed code from different sources. Typically you would use code contained within <iframe> tags to extract the URL to the video and use that code inside of the HTML5 Video Tags:

You can create your own HTML5 video tags for a video hosted on your own website or video hosting service.

Note: If you want the video to autoplay, mute the sound using the settings 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.

Video Element Style Tab

The Style tab settings include border radius, border style and drop shadow. Unlocking border radius allows editing individual corners, and unlocking drop shadow enables a different drop shadow effect on hover.

Icon Element

Drag the icon element to the canvas to display any one of the hundreds of icons available from Google Fonts or Font Awesome. Settings include the ability to set the color of the icon, have a different hover color, resize the icon using a pixel slider, link and save your icon as a Favorite.

Slide Show Element

Dragging the slide show element to a block inserts the element with three sample slides. Click on the slide element to display the Settings. You can click the "+ Add" button to add additional slides.

Click on one of the slides in the list to show the Settings for that slide. Use the Background drop down to select a transparent, colored, image or video for the background of the slide. The settings for transparent and colored backgrounds are easy to understand.

Image Backgrounds

You can upload a new image or select one from the image manager by clicking the Change Image icon. The Solid or gradient background? selections will apply a color or a gradient color to the spaces your image does not cover, or in areas where the image is transparent. If you select "Solid" and then "Transparent" for the slide background the block or column background will show through.

Sizing - choices are "100% width", "100% height", "Contain" and "Cover". Because ONTRAPORT pages are responsive and can be resized by the person viewing the page, the image is scaled as the resizing is happening.

100% width - width is maintained even if the top and bottom are cut off or filled with the background color.
100% height - maintains the image height even if the width is cropped or filled with the background color.
Contain - ensures the entire image can be seen in the slide, and can crop one side of the image to make the best fit.
Cover - stretches or shrink the image to fit the resized page and can change the aspect ratio, deforming the image. The deformation is minimized when you have the image starting out large in desktop mode, rather than stretching a smaller image.

This video shows how the image looks nearly identical in each slide when the ONTRApage is displayed full size, and how the four treatments look when it is resized for a tablet. "Cover" and "Contain" are often the best choices, but "100% Height" looks good with this image in both modes.

The Style tab in the Slide element editor allows you to control the height, slide indicators (the blue and light grey 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, select "Off" in the Time between slides (Seconds) drop down. The viewer will need to manually cycle through the slides using the slide indicators or slide arrows.

Form and Sales Elements

For more in-depth information on Form and Sales elements please see the Using Form and Sales Elements article. The Form and Sales elements available are:

Form Field - insert a single form field such as "First Name" where ever you want to place it on the page. Style the first field the way you'd like it. Then, when you insert other form fields, they will inherit the initial style you created.
Submit Button - position the submit button any where you like. Make sure you set your thank you page under Form Settings. Want special text or a check box immediately above the button? You can do that in ONTRAPORT Pages!
Billing Address - displays the full billing address fields; edit them as needed to match your design. See the special note for editing the drop down values for State and Country fields below.
Shipping Address - displays all the shipping address fields on the page for you to edit. State and Country field dropdown values can be edited as well; see the special note below.
Credit Card - show the Name on Card, Card Number, Expiration Month, Expiration Year and CVC fields.
PayPal Button - inserts a PayPal logo to set up payment by PayPal.
Order Summary - displays the "product grid" with the item, quantity, price and total fields. Settings allow showing or hiding the header, subtotal, and more. Coming soon: the ability to edit the field labels such as "Subtotal" and "Total".
Order Bump - inserts an "Order Bump" element to add on a product with the original sale. It includes a checkbox to activate the extra item on the order.
reCaptcha - drops the "I am not a robot" checkbox reCaptcha element onto your pages containing an opt in form to prevent bogus opt ins from automated "bots". Requires registration with Google for the service for your URL. Click the link in the Settings tab for instructions.
Upsell Buttons - Insert "Yes" and "No" buttons or links for an upsell offer.

How to Eliminate or Rearrange States, Countries or 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 radio 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

Countdown Timer

Set the deadline date and the countdown timer continuously updates until that date. Then, the page redirects to another URL, ONTRAPORT landing page, Tracked Link or downloads an ONTRAPORT hosted file.

Social Share

Drag and drop the Social Share 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 different icon sets. By default, the social share icons take the URL to your social media page or account. You can also create "share this page" style 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 - Drag and drop the element where you would like the Facebook Comments feed to appear. You have to create a Facebook App and obtain the App ID to configure this block. We recommend you create the page first and insert the App ID as the last step before publishing.

Configure the Facebook Comments Block

The only information you need from the Facebook app is the App ID number. Open the Page for editing and click on the Facebook Comments element to expose the Settings. Paste the App ID into the text block. Leave the Comment URL field blank to have ONTRAPORT complete the published URL when the page is published. On the Style tab you can set the color theme, number of comments to display and a sort order for the comments.

Custom HTML Element

The Custom HTML element allows you to add HTML, CSS or JavaScript code into the body of your Page. This is used when you have a JavaScript form to embed from a calendar application, or for any custom HTML content you want to display.

Note: Coding errors you introduce within the Custom HTML element can cause problems, with no recovery possible. Please use caution and consult with a qualified HTML programmer if you need assistance.

Larry Arone

Contents

Pages Elements - Overview