Edit the Content of ONTRApages and ONTRAform Blocks

About Editing Blocks

Applies to: All ONTRAPORT accounts.

The click to edit interface is intuitive and most people can dive right in. These instructions give you detail on each type of block and how it is edited.

Edit Text

Click in the text block to edit text directly in the block.

Use the edit bar to change font style (Header 1, Header 2, Body, etc.), insert merge fields, text color, typographic emphasis (bold, italic, underline), alignment (right, center, left, justified) and add or remove hyperlinks.

Some text blocks contain multiple text elements and will require clicking on the text element you wish to edit from the Palette.

Insert Hyperlinks

Hyperlinks allow you to link to:

A specific URL
An ONTRAPORT Landing Page
A Tracked Link
A downloadable ONTRAPORT hosted file (e.g. pdf, doc, mp3)
An ONTRAform Lightbox

You can hyperlink text, images, and buttons. Highlight the text or element you wish to hyperlink and click the link icon in the edit bar. Choose the type of link you'd like and click the okay button.

To hyperlink a telephone number, select URL and type in Tel:

If you'd like to remove the link, click the remove link button.

insert hyperlink

Add Images

Add images by clicking on the image block or element. From the Palette, you can change, edit or hyperlink the image. The block must contain an image in order to put an insert an image. If the block does not contain an image, please select a block that contains one.

To change an image, click the change image button to upload a new image or select one from your image library.
For basic image editing, click the pencil icon for basic image editing such as cropping or resizing the image.
To hyperlink an image, click the link button. Enter the specific URL, select an ONTRApage, hosted file or ONTRAform.

The Image Editor

Now that the Image editor is visible. Let's walk through the features. Hover over the icons to reveal the edit section names.

Library

This is where you can upload or drag and drop your own pictures.

Transform

This is where you can crop, flip and rotate images. Use the "Common Crops" to speed up your workflow. Clicking on Transform also shows the original image size displayed at the bottom. This is handy for replacing template images with your own image of the same size.

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, contrast and 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. Also, change the font, color, background etc.

Frames

Use this feature to frame your photos, with the ability to adjust width and opacity.

Overlays

Add various layers on top of an image. Use the slider to adjust the level of effect.

Save your Settings!

Remember that in order for your changes to hold, you must click the Save button.

Add Videos

ONTRAPORT allows video embed code to be entered from many sources including but not limited to Youtube, Vimeo, Wistia or ONTRAPORT's video manager. You can find blocks that allow videos to be inserted in the Video and Smart Form blocks.

To use embed code from your own video host:

Copy the embed code from your video host
Add a video block in your ONTRApage
Edit the video element
Click the Embedded button in the palette
Paste the Embed code into the Embed Code text box

Wistia Video Embed Options

Display the video in your Wistia account, and choose "Embed and Share" in the Video Actions menu.

Select the Inline Embed tab
In the Video Size section select Fixed Size. The default size Wistia provides is fine; you can adjust it later.
For Embed Type choose Fallback.
Click Copy to copy the code to the clipboard.

Wistia video settings include inlilne embed, fixed size and fallback code

Use this code to paste into the Video Block's video element Embedded tab.

Wistia code block is inserted into the Embedded tab

Vimeo Video Code Embedding

Paste the code into the Embedded tab.
Edit the code so that only the content for the <iframe> is shown:

Autoplay Configurations

Vimeo video: configure the Vimeo + Show options settings. Use the SilentAutoPlay function (modern browsers will not autoplay videos with sound).
Wistia video: see the Wistia configuration options in the Timeline Actions section.

To autoplay an ONTRAPORT Hosted video:

Add a video block in your ONTRApage
Click the Hosted button in the palette
Use the dropdown to select your desired video
Autoplay by first selecting them in the Hosted drop down box, waiting until the video loads in the canvas, and clicking the Embedded tab. Add the words "autoplay muted" after "controls" at the beginning of the code as shown. Modern browsers will not autoplay the video with sound.

Add Social Icons

There are several blocks in which you can link social icons to your social sharing pages. A variety of icon styles are available to match any design you desire.

Too add social icons:

Insert a block that has social icons (header, footer, or social icons)
Click the social icon you'd like to update
Select the social sharing icon you'd like to use
Enter the URL of your social sharing page
Click the save button

Create "Share this page" links by:

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

Other Resources

ONTRAforms Basics

Selling Products and Leveraging Upsell Opportunities

Publishing Your ONTRAforms

Add an ONTRAform to a Website

Rochelle Yoshida

Contents