Company Blog Support
Frank Hagan


    Back to Top



    ONTRAmail lets you create beautiful, responsive email templates either from scratch or using an impressive library of professionally designed templates. Fully mobile responsive and adhering to the requirements of hundreds of different email clients, ONTRAmail offers unparalleled design flexibility with thousands of options for creating unique email messages for any purpose that look amazing on any device.


    Quick Start

    Want to jump right in and create ONTRAmail message in your ONTRAPORT account? Make sure you are logged in on another tab in this browser and click this link: Create an ONTRAmail Message.

    This opens an ONTRAPORT Project within your account. ONTRAPORT Projects are step-by-step in-app instructions with a checklist to track your progress. You can stop and resume the Project at any time. 


    Getting Started with ONTRAmail

    After you load an ONTRAmail template, the edit screen is divided into two sections. On the left is the palette, where most editing actually occurs. On the right is the canvas where changes appear in true "what you see is what you get" visual mode.  Show me



    Here's how to get started:

    1. Mouse over the Contacts collection and click on Messages. Click New Message.

    2. Click Create New in the ONTRAmail icon.

    3. Select an email template for editing, or select Start From Scratch for a blank template.  Show me

      ONTRAmail Template Designs
    4. Hover over a block to reveal the editing controls. You can scroll through different block layouts, add a block above or below, style the block and edit the block. Show me

      Hover Over Block to Edit
    5. The three icons in the top right when you hover over a Block allow you to edit the style of the Block (pencil icon), create a copy of the Block on the same page (plus sign) or remove the Block from the page (trash can icon). Show me

      Edit, copy or delete the Block



    Adding and Using Blocks

    1. Templates are created using Blocks, horizontal slices of the page you can rearrange or replace to perfect your design. Changes are made in the ONTRAmail editor in true visual mode, showing you the new content immediately.

    2. Hover over the Block and click the + Add Block icon to add a new Block above or below. The Palette will list the Block categories. Show me

      Palette View of Block Categories
    3. Select a Block Category in the Palette to narrow the choices by type of Block. Select the design. You will be returned to the Blocks on This Email view.


    Style: Colors and Fonts

    ONTRAmail uses the colors, fonts and page styling of material design, tested and proven to increase engagement and present content in the most readable and responsive manner.

    The nomenclature in the editor is shared between ONTRAforms, ONTRApages and ONTRAmail. For ONTRAmail, "Page" refers to the entire email as shown in this section. The overall page (email) design can be modified by selecting the element on the top styling bar on the Canvas (it is visible when the Palette is in the "Blocks on This From" view):

    top styling bar

    No customization is necessary to create pleasing layouts, and we encourage you to try the pre-formatted font packs and color palettes without extensive modification to maintain the material design standards. This will give you time to fine tune your content and focus on growing your business. But for those who need to modify fonts and colors, we have extensive customization options:

    Page Fonts

    A selection of 39 Page Font collections provide a set of fonts for 8 different text elements in your ONTRAmail: Header 1, Header 2, Header 3, Label, Button, Large Body Text, Body Text, and Quote. You can edit each one for font family, font size, font face, line height and font weight, and can toggle it to italics as well. The changes you make to a font here cascade throughout the page.

    edit page font

    Click Font Suggestions at the bottom to display all 39 Page Font sets in the Palette. As you hover over the suggested font sets in the Palette the display in the Canvas shows the fonts. 


    39 color palettes use five related color elements, Primary, Complementary, Dark, Light, and White. Click the color icon to display the selected colors. Click on the color element name to reveal the color editing functions. Type in the color hex value or choose a color from the color picker. The color picker has two modes, the default 256 web-safe color tile mode and, by clicking the artist's palette icon at the bottom, an infinite slider color picker.

    edit page colors

    Click the Color Suggestions link to see all 39 color palettes in the Palette on the left. As your mouse hovers over a color palette the Canvas previews the new colors.

    Changes you make to the page style apply only to the current email, and do not get saved with the color palette for use in other email. To re-use your color and font choices use the Copy from email function when creating a new email or the Renaming and Saving Blocks function for individual Blocks. 

    Editing Content in Blocks

    • The palette will show the Blocks on This Email view. Show me

      Blocks On This Email
    • Click and drag on the block names in the palette to rearrange them.

    • The Visibility Toggle appears when you hover over an element to allow you to hide or show that element. It turns from green to red when it is hidden. Show me

    • To edit a block, click the block name in the palette or hover over the block on the canvas and select the Edit link.

    • The palette will display the block's individual elements for editing. Click on the element name in the palette to edit it. Editing options after clicking are dependent on the type of content you are editing:

      1. Social Icons: A variety of icon styles are available to match your design. Show me

        1. Create "Follow me on" social icons by entering you social media page URL. Your contacts can click the icon to visit your page.

        2. Create "Share this page" links by:

          1. Visit going to Share Link Generator

          2. Add the URL of the page you want your readers to share (i.e, your Facebook page, your Twitter feed, etc.)

          3. Click Create the Link

          4. Copy the output and paste it into the icon URL field in ONTRAPORT  Show me

        3. The Skype icon allows your visitor to initiate a Skype call or chat with you. In the URL field use skype:john.locke?call where john.locke is your full Skype ID. Use skype:john.locke?chat to initiate a chat when they click the icon.

      2. Images: Change an image by uploading your own or selecting from your image library. Show me

        1. The Photo Editor may prompt you to crop the image to the right dimensions. Click Apply when finished.  Show me

        2. Use the Photo Editor's tools to fine tune your image, then click Save.  Show me

        3. To open the Photo Editor for the current image, hover over the image in the palette and click the paint brush icon.  Show me

      3. Text: Edit most text directly in the block. ONTRAPORT merge fields are available by clicking the Merge Fields button. 

        Merge fields can be inserted into your email messages to personalize them. Nearly every field in the Contact Record is available as a merge field, including the contact's name, address, the last invoice amount, etc. In addition, all of the ONTRApages and legacy Landing Pages are listed to be included as personalized URLS, or PURLS.

        See our article Formatting Merge Fields for information on formatting options and the default value you can display if the Contact Record field is empty.

        Note: Do not copy merge fields from another email template or document type such as Word or Google Docs. Use the drop down Merge Field selector only to insert merge fields. If you do copy from another document or email delete the merge fields and replace them using the drop down selector. "Hidden" HTML or editor formatting codes will break the merge field and cause it to be sent as "plain text" in your email.

        Use the merge field selector drop down to insert merge fields

      4. Hyperlinks: Select the text to hyperlink and click the link icon in the edit bar.


        To hyperlink a telephone number, select URL and type in Tel: and enter the phone number. You can also link to an ONTRAPORT Landing Page, Tracked Link, file hosted in the File Manager, or an ONTRAform lightbox form. 

      5. Video: Video blocks use a static image you hyperlink to the video itself. 

    Edit Mobile Fonts and Backgrounds

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

    The View Mobile Display rendering is accurate for most of the mobile email clients, including iPhone, iPad and Android clients. As of November 2016, 55% of all email was opened on mobile devices, with 33% on iPhone, 13% on iPad and 9% on Android. The three mobile clients we know do not support the feature are Yahoo! Mail App on Android, Universal Outlook App on Windows Phone, and AOL Alto App on both Android and iOS. 

    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 font sizes and style in View Mobile Display mode 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, size and Mobile Block Spacing for backgrounds are locked for the mobile display. All other elements, including font colors, background colors or images, text, adding or removing blocks, etc. remains synchronized between the mobile and desktop display.

    Background Images in Mobile Block Spacing

    Background images in email are cropped, but you can adjust how the background is displayed to a large degree by adjusting the Mobile Block Spacing. Select the block to edit, then use the Mobile Block Spacing drop down to increase or decrease the top and bottom space. The spacing will be locked for the View Mobile Display view, and not affect the desktop view. 

    Adjust the mobile block background spacing to fine tune the background image

    Note: The text in blocks is still synchronized between the View Mobile Display and desktop versions of the block so remember to come back to the View Mobile Display view to see if changes to the text require tweaking the Mobile Block Spacing settings.

    Page Width

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

    Rename and Copy Blocks

    Blocks can be renamed and reused in other ONTRAmail messages by selecting them from the Add Block page. This allows you to configure a block and reuse it in different ONTRAmail messages without having to configure it again.

    • Rename a Block: Click on the block to edit it, then click the pencil icon next to the name of the block. Give the block a descriptive name. Remember to click on the check mark icon to save the new name!

    • Re-use your configured blocks by clicking the + Add Block button and selecting it from the Copy From Existing Message dialog box.  Show me


    Selecting Settings for ONTRAmail

    1. Click the Settings tab to configure your email from address, subject line, etc. Show me

    2. Set your Send from (default) email address. This email address will appear as the "From" email address in the message.

    3. Set your Email from (default) email address. This is the reply-to email address.

    4. Enter the Subject line of your message.

    5. Enter the Header Title. This information shows after the subject line in many email clients, and is used as the page title that appears on the browser tab when the email is viewed as a web page.

    6. Click the Copy from HTML button to create a text only version of the email. ONTRAPORT sends this version along with your HTML email to make sure your customer can see the email even if they have HTML turned off.

    7. The Spam Score information can be accessed by clicking the numeric spam score (if present). The spam score is provided by the open source application SpamAssassin.  Show me



    Sending ONTRAmail

    After saving, ONTRAmail can be sent using any of the regular methods in ONTRAPORT:

    • From the Contact Record: Select the Contacts or Group to receive the email and click Send Email from the Actions menu.

    • Send the email using an Email step in a Step or Date Sequence.

    • Send the email as the action of a global Rule.

    • Use a Rule on a Smart or Order Form to send the email to the person filling out the form.




    Q. Can I create my own blocks?

    A.  No, our designers have to make sure the entire block is fully mobile responsive and compatible with dozens of email readers, so only blocks we have created can be used. If you have an example you would like us to create, click the Don't See Anything You Like? link at the bottom of the ONTRAmail > Create New page.

    Q. I want to combine two blocks into one. Can I do this?

    A.  No, because the templates have to be compatible with dozens of email readers and on many different devices, only blocks designed by ONTRAPORT can be used. If you have an example you would like us to create, click the Don't See Anything You Like? link at the bottom of the ONTRAmail > Create New page.


    Q. I added a "Spouse Email" field to the contact records. How can I use an ONTRAmail and email to this address?

    A. See this Community Q&A answer.


    Other Resources

    ONTRAPORT Answers is our peer-to-peer support site with answers to your questions 24/7. Answers are provided by our Certified Consultants, support staff and your fellow entrepreneurs.



    Articles in this section

    Created - Updated
    Have more questions? Submit a request


    Powered by Zendesk