search
Partners Support Log In
Solutions
Ontraport’s solutions work together to give you everything you need to run your business in one centralized, easy-to-use platform.
Check Out Pricing
Give each customer a tailored experience to drive sales while eliminating busy work for your team.
Send emails that keep your customers engaged so your sales continue to grow with your list.
Land more leads and customers with web pages that promote your products and show off your brand.
Use visual analytics to make confident decisions for smarter marketing and more profits.
Create a custom subscription site and manage it from one place to earn recurring revenue with ease.
Optimize your entire sales process to generate more prospects, nurture your leads, and close more sales.
Online sales to seamlessly manage payments and subscriptions.
Personalize every customer interaction to generate more sales using all-inclusive customer data.
Automate your team’s most time-consuming, repetitive tasks to create more freedom in your business.
Drive and track revenue generated by referral partners who receive commissions for helping you grow.
Solutions
Resources
Find free content on the latest marketing strategies, using Ontraport in your business, and finding the right software solutions.
Visit the Blog
Marketing Strategies
Browse a collection of articles on marketing automation, email marketing, CRM, membership sites and more.
Implement proven marketing processes with our easy-to-follow worksheets and checklists
Download our best-practice guides, complete with data-driven insights and tactics to help you optimize your marketing.
Listen in as Ontraport CEO Landon Ray talks with with a star-studded cast of entrepreneurs, marketers and thought leaders.
Learn everything you need to know to develop fundamental marketing strategies with our digital handbooks.
Using Ontraport in Your Business
See if Ontraport is the right fit for you — compare the top marketing automation and CRM software on the market.
See exactly what you can do with Ontraport, and learn how you can personalize it to perform your specific needs.
View the most frequently asked questions about Ontraport so you can get clarity and feel confident in your buying decision.
Take a guided tour through the five phases of the customer lifecycle in a simulated business powered by Ontraport.
Get an honest estimate of the return you can expect from an investment in Ontraport's software.
Resources
Customers
Ontraport empowers businesses large and small, all over the globe, and in every industry, to succeed.
Read the Reviews
Hear From Our Customers
Don’t just take our word for it. See why businesses from every industry love Ontraport’s marketing automation and CRM software.
Find out how our users have created thriving businesses and transformed their lives with Ontraport.
Industries We Serve
Personal Services
Professional Services
Online Retail
Coaches & Speakers
Author & Bloggers
Brick & Mortal Retail
Technology
Manufacture & Wholesale
Your Unique Business
Your Unique Business
Customers
Chat With Us chat
Start Free Trial
menu
close
Why
Ontraport?
Solutions keyboard_arrow_down keyboard_arrow_up
Marketing Automation
CRM
Email Marketing
Landing Pages
Marketing Analytics
Sales Force Automation
Ecommerce
Business Process Automation
Membership Sites
Referral Programs
Resources keyboard_arrow_down keyboard_arrow_up
Ontraport Blog
Step-by-Step Templates
In-Depth Guides
Modern Ontrapreneur Podcast
Marketing Blueprints
Software Comparisons
Feature Use Cases
Get the Facts
Exploring Ontraport
Calculate Your ROI
Customers keyboard_arrow_down keyboard_arrow_up
Customer Reviews
Success Stories
Support Center
Partner With Ontraport
Chat With Us chat
Check Out Pricing
Frank Hagan
Updated

Contents

    Back to Top

    Editing Content in Legacy ONTRApages Blocks

    About Editing Blocks

    Note: This article covers our legacy ONTRApages builder. For details on our newest Page builder, see this article.

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

    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.

    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.

    1. Select the Inline Embed tab
    2. In the Video Size section select Fixed Size. The default size Wistia provides is fine; you can adjust it later.
    3. For Embed Type choose Fallback.
    4. 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:

      edit the Vimeo code so only the iframe code is showing

    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:

    1. Add a video block in your ONTRApage
    2. Click the Hosted button in the palette
    3. Use the dropdown to select your desired video
    4. 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 autoplay to an ONTRAPORT hosted video

    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:

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

    Create "Share this page" links by:

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

    Copy and paste the output

    Edit Mobile Fonts and Backgrounds

    The View Mobile Display feature allows you to view the ONTRApage on a simulated mobile device, and adjust font style (the font family, italic, and bold settings), font size and background image specifically for those devices.

    Mobile Display Settings Video

    Editing Mobile Font Styles

    Click the View Mobile Display button. The canvas will scale to 360px wide which is the average size of a small mobile device.

    Mobile preview

    The font styles button will change to Mobile Font Style. Click on the Mobile Font Style drop down to edit the mobile fonts.

    Mobile font style editor

    Edit the font face by selecting one of the options in the drop down, then adjust the font size, line height and weight (boldness) by using the sliders. You can also enter a desired pixel size manually for the font size and line height values. The choices presented are:

    • Any of the listed font families
    • Italic or normal
    • Font size: 6px to 180px
    • Line spacing: 6px to 180px
    • Font weight range: 100 to 900 (400 is "normal" and 700 is "bold")

    Click the Save button to accept the change.

    When you edit in Mobile Display View the changes are locked in for the mobile device. Changes to the font style and size will not propagate to the desktop view, and future changes to the font style and size in the desktop view will not change the mobile view.

    Note: Only font style and size are locked for the mobile display. All other elements, including font colors, backgrounds, text, adding or removing blocks, etc. remains synchronized between the mobile and desktop display.

    Background Images and Block Spacing

    Adjust the background image in mobile preview mode by adjusting the Mobile Block Spacing. Decrease or increase the top and bottom of the mobile block spacing to adjust how the image is cropped on the mobile preview.

    Adjust background image by adjusting the block spacing

    Page Width

    The page width setting for mobile is fixed at "Full" and cannot be changed, regardless of the desktop view page width.

    Other Resources

    ONTRApages Basics:

    Selling Products and Leveraging Upsell Opportunities

    Publishing Your ONTRApages

    Articles in this section

    See more
    Created - Updated
    Have more questions? Submit a request

    Comments