Getting Started with the Email Builder

We have a great selection of emails available to edit, geared for any and all internal communication needs. However, you may want to create an email from scratch with your own formatting, logos, colour scheme, etc. Luckily, this is quite easy with our email builder! Simply follow these tips, and feel free to contact your Account Manager for assistance. 

For further information, e.g. how to insert and edit specific types of content, please refer to the Email Builder section of this Help Center. 

Accessing the Email Builder

Gmail for Google Chrome

The email builder can be accessed in a few different ways.

Screen_Shot_2020-08-07_at_1.03.09_PM.png

  • Click "Templates" and then select "New Templates" from a new campaign message window

Screen_Shot_2020-08-07_at_1.05.41_PM.png

Once you are on your main templates web page, you can edit a previous template you created, duplicate a colleague's template, or create your own.

Click "Create Template" and "Start from Scratch" to open a blank template. 

Outlook Web-App

The Template Builder can be accessed in a few different ways.

    • Go to this link in your web browser: https://contactmonkey.com/templates
    • Open a new email in Outlook, click the three dots at the bottom of the draft, select ContactMonkey, and then click "New Template" in the sidebar

Screen_Shot_2020-08-25_at_8.56.16_AM.pngo365_sidebar.JPG

Once you are on your main templates web page, you can edit a previous template you created or create your own.

Click "Create Template" and "Start from Scratch" to open a blank template. 

Outlook Desktop: Office 365

The Template Builder can be accessed in a few different ways.

    • Go to this link in your web browser: https://contactmonkey.com/templates
    • Open a new email in Outlook, click the yellow "Mail Merge" button in the top right, and then click "New Template."

o365_sidebar.JPG

Once you are on your main templates web page, you can edit a previous template you created, duplicate a colleague's template, or create your own.

Click "Create Template" and "Start from Scratch" to open a blank template. 

Outlook Desktop: COM Add-in (Non-365)

The Template Builder can be accessed in a few different ways.

  • Go to this link in your web browser: https://contactmonkey.com/templates
  • Compose a tracked communication by clicking "Internal Communication," then "Mail Merge on Desktop." Then click the "Design HTML" button in the top left corner.

  

 Once you are on your main templates web page, you can edit a previous template you created, duplicate a colleague's template, or create your own.

Click "Create Template" and "Start from Scratch" to open a blank template. 

Basic Formatting: Settings

When you create a new template, the first thing to do is to give it a descriptive title that is easy to identify. Then, simply click the edit icon (pencil) next to "Unnamed Template" in the top left-hand corner of the window. 

Then, start building your template by going into "Settings."

Screen_Shot_2020-08-10_at_5.20.44_PM.png

Content area width dictates how much of your email screen is taken up by your newsletter when employees open it.

We recommend setting this to around 800px, which will leave some background / white space in your email whilst still being easy to read.leaving some background / white space in your email while

Background colour refers to the email background colour, whereas content area background colour refers to the template background colour. 

Example A: White background colour, blue content area background colour

Screen_Shot_2020-08-10_at_5.29.15_PM.png

Example B: Blue background colour, white content area background colour

Screen_Shot_2020-08-10_at_5.28.58_PM.png

Generally, we recommend setting the background colour to white and the content area background colour to transparent. 

Default font can be set according to your company style guide (if applicable). Note that you can change the font when you insert or edit text. 

Link colour can be customized so that any links inserted in the template show up as a colour of your choosing, as opposed to the default blue. 

After you have configured your settings, you have the option of adding Default Colors. The button to do this can be found in the ribbon at the top of the web page.

mceclip0.png

Simply input a hex code from your brand/style guide into the drop-down box. This will save the colour to show up as a custom option when editing content. 

mceclip1.png

Not sure what hex codes to use? Upload your company logo to https://html-color-codes.info/colors-from-image/ to find out your company colours.

 

Adding Rows

Pro Tip: You must always drag an empty row into your template before you add content.

Screen_Shot_2020-08-10_at_1.43.38_PM.png

This is one of the most important things to remember when designing a template. It helps ensure that your content does not overlap and that the coding between our template builder and your email remains consistent. We suggest spreading your content out over as many rows as possible. This will keep your newsletter organized and easy to read. 

You can choose rows that stretch across the whole page or break them into individual sections. If certain cells or entire rows are left blank, this will show up as background/white space in your email. 

Screen_Shot_2020-08-12_at_11.41.10_AM.png

To move rows around, hover your cursor over the background area on the left side of the row content panel. Then select the moving icon (the plus sign with arrows on all points) to drag the row up or down.

Screen_Shot_2020-08-12_at_11.49.17_AM.png

 

Adding Content

Once you have inserted a few rows, you can drag and drop content into the template. 

Screen_Shot_2020-08-12_at_11.57.26_AM.png

Click on the content to edit it and for content-specific properties to show up in the menu on the right.

Text

Screen_Shot_2020-08-12_at_11.59.28_AM.png

We recommend:

  • setting body text to at least 14px
  • setting line height to the furthest right option (double spacing)

Images

After you drag an image in as content, click "Browse," and you will see the option to upload an image, use an image you have uploaded in the past, or search for free photos.

Free photos are images that have Creative Commons Zero licenses, meaning the image owner/creator has waived all copyrights and made their images public domain. Simply search for a keyword related to images you are interested in, and import the photo of your choice. 

Screen_Shot_2020-08-12_at_1.35.07_PM.png    Screen_Shot_2020-08-12_at_1.40.22_PM.png

 

                             

Have more questions? Submit a request