Create an Email Template

Follow

Email Design Templates simplify the email creation process and provide consistency for the emails sent out from your community.

TABLE OF CONTENTS

Creating an Email Design Template

When creating an Email Design Template it is best if you plan in advance how you want your email to look, and then choose the most appropriate layout and template to give you a starting point for what you want to create.
The Email Design Template you create will be available on the Choose Template step of the Email Builder process.  Your template will be available to view and edit in the Design Templates area of the Email home page. 

We recommend using the Mobile-Ready templates where possible, to take advantage of iModules’ built-in CSS classes that render the email appropriately for mobile devices. It is also possible to upload pre-built HTML emails either as a template or as a Single Column email (which would require uploading new HTML for each new email).


1.  Choose Template

  • Select Layout: Select a Layout to use as a starting point (such as 2 Column with Header) or select Single Column (such as Mobile Ready Single Column) to start from scratch.
  • Select Design Template: Select a Design Template to work with or select Create New Template.
NOTE:  Using Tables in your Email Design Template - Tables tend to display differently in different email clients. (Gmail in particular has difficulty displaying tables.)  Skin Builder can’t apply its settings within a table, so it generally works best to choose the layout and template that give you the best starting point for what you want to create.  The Skin Builder settings will take care of most of the issues that occur with tables. So, instead of creating an e-mail with a two-column table, you can use the 2 Column Layout/Design Template and then insert multiple Content Blocks (using Custom and/or Community Content), so that the content is separated and not just one big Content Block.

Click Next.  A window will open up showing the layout and template you selected.

2.  Build Content

  • Select Launch Skin Builder to customize your design.  Click here for more information on using Skin Builder.
  • Drag and drop Custom Content and/or Community Content into your email.
  • Click Save & Continue.


3.  Send Preview: You have the option to send a preview of your email. Click Send. Click Save & Continue.

  • Template Name: Enter a name for your template

Click Save & Continue or Done to save your template.

When creating an email you will select the template on the Choose Template step of the Email Builder process.  Your template will be available to view and edit in the Design Templates area of the Email home page. 

NOTE: Refer to Create Custom Email for more detailed help in completing your custom email.

Using Tables in your Email Design Template

In order to achieve a more consistent outcome with your emails a tabled structure is the way to go. Understanding tables and how to structure your content will take time and practice to learn.

Here are some things to consider when adding in table structures to your emails.

  • Skin Builder styles for fonts do not apply to table structures added within content blocks. This means that each table cell (<td>) will need to have inline styles added for font family, color and font size.
  • While tables are discouraged for responsive websites they are a must for email due to support for responsive website techniques in email being very poor.
  • Yes, tables can be responsive. However, they are complicated and restrictive when it comes to responsive so there is more thought and planning that should take place.

At a bare minimum if you want a 2 column structure then your table should look like:

<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">

    <tr>

        <td width="400" align="left" style="padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;">Left Column</td>

    </tr>

    <tr>

        <td width="200" align="left" style="padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;">Right Column</td>

    </tr>

</table>

Using Custom CSS

The mobile friendly Custom CSS can be edited or added to, and will be placed in a style block in the body of your email.  NOTE: This feature is not supported by Gmail.

The use the following classes to add different functionality on mobile devices:

  • This class will force tables to be full width, applied to the table and table cells

class="mWidth"

  • This class will force images to fill the width of its containing cell making it responsive

class="mFullImage"

  • You can use this class to center smaller images or tables that don’t need to be full width

class="mCenter"

  • This class will hide elements on mobile devices only

class="mHide"

You will need to add the class definition in the HTML of your email for images.

The following CSS can be added to the Custom CSS and will adjust the colors and placement of the “view in browser” text:

#divHostedEmailLink {margin-bottom:10px; text-align:center; font-family:Arial, Helvetica; font-size: 12px;}

 

            #divHostedEmailLink a {color:#881111}

The following CSS can be added to the Custom CSS and will adjust the color for the unsubscribe “click here” text (NOTE: iModules will need to add the class to the system email footer before the class will affect styles):

.footer {color:#888888}
.footer a {color:#555555}


Using Legacy & Custom Templates to Create a Custom Email Design Template

When using these legacy tools you will not have access to edit the template and you will NOT have access to Skin Builder which resolves most email display issues. And you will not have access to edit the template.

For example, tables tend to display differently in different email clients. (Gmail in particular has difficulty displaying tables.) instead of creating an e-mail with a two-column table, you can use the new Email tools and select the 2 Column Layout/Design Template and then insert multiple Content Blocks (using Custom and/or Community Content), so that the content is separated and not just one big Content Block.

1. Create your email message using the Create Custom Email process and select Choose Template.

2. Select Layout: Select the Legacy and Custom Templates layout.

3. Select Design Template: Select Create Custom Template.

4. Click Next. A blank content editor window will open up. You can enter text and also paste HTML into the editor. Select HTML mode (at the bottom of the editor window) and paste in the HTML.

5.  In the legacy tool, you can create a consistent look for your e-Newsletter by using a table. Click  to put a table into your template. Set the size and shape of your table by highlighting the desired number of squares. The example we will use in this document is a 9-cell table (3 rows and 3 columns).

NOTE:  Using Tables in your Email Design Template - Tables tend to display differently in different email clients. (Gmail in particular has difficulty displaying tables.)  When using the legacy tools you will not have access to Skin Builder which resolves most of these issues. So, instead of creating an e-mail with a two-column table, you can use the new Email tools and select the 2 Column Layout/Design Template and then insert multiple Content Blocks (using Custom and/or Community Content), so that the content is separated and not just one big Content Block.

Also, please note that tables are not responsive and will not display properly on mobile devices.

6. Once you have created your table, the content editor will display the following:

 

7. Banner image:  Now we will merge the top row of cells in our table so that a banner image can be inserted.

  • Click the top left cell of the table so your cursor is located there. Right click your mouse and choose Merge Cells Horizontally.
  • The cells are merged one at a time, so you will repeat the steps as many times as needed in order for the entire row to be one large cell. Follow the same steps to merge other cells in the table as well. You can also choose to Merge Cells Vertically.
  • The top row is now ready for a banner image. Click the top cell, then Click   (Image Manager) in the tool bar. Use the Image Manager to upload and insert an image into your email.

8. Table and Cell properties: Select the table (it is selected when it has four white square “handles”). Right click the table and select Set Table Properties from the menu that appears.

  • On the Table Properties  tab, you will be able to:    
    • Set border colors - To set border colors, you will work in the Border area.
    • Set the width of the table -  Set a border width using the +. The box to the left of the border width allows you to access border colors by clicking on the dropdown arrow.
      Tip:  It is recommended that the width of the table be set to the pixel width of the banner image you inserted earlier.
    • Add background colors
  • Choose the Cell Properties tab to select each of the cells and set the width for each one. Two different methods can be used to space the cells evenly across the width of the banner.
    • Use the pixel width of the banner image divided by the number of cells so it is divided evenly.
    • Set percentages for each cell. 
    • For example, the image used in this example is 610 pixels wide. The cells that do not contain the image would be set to 33%, 33%, and 34% - OR 203 pixels, 203 pixels, and 204 pixels. Either method will serve the same purpose.

9. Token List:  Select tokens to personalize your email if desired.

10. Click Next.

11. Define the Layout:  Click a content area to toggle its status between "Editable" and "Not Editable." Each content area defaults to Not Editable.

  • The cell with the image is left as Not Editable to keep people locked out of that cell so the image cannot be changed or replaced.
  • You will want to make most other areas Editable in order for admins to be able change the content as needed. To change from Not Editable to Editable, click on the cell.

12. Click Next.

13.  Now you can drag and drop content into the template to create your email.

14. Click Next.

15. On the next screen, there are options for Saved Content.

  • Do not save Content for reuse
  • Save Content for reuse

Saved Content is a location where you can save your content to reuse it in the future. You can find Saved Content items in the following areas:

  • Saved Content Editable:  Users can make changes to Editable content after it is placed into a message. Examples: greeting or message body.
  • Saved Content NOT Editable:  Users cannot make changes to Not Editable content after it is placed into a message. Example: branded logos with special font and/or formatting.

16. Click Save Changes and Load Content.

17. Choose Recipients: Choose the recipients for your Email. Click Save & Continue.

18. Send Preview: Send a preview of your email. Click Send Preview. Click Save & Continue.

19. Schedule Email: Enter the date and time to send your email. Click Save & Continue.

20. Release Email: Verify the details of your email.

21. Add this email to Design Templates: Select this option to save the layout you just created. If you save the layout, you will be able to use it as a template for future emails. You will simply select it from the list of Design Templates when you create a Custom Email.

22. Click Save & Continue or Done to release your email and save it as a template.

NOTE : Refer to Create Custom Email for more detailed help in completing your custom email. Or see https://www.campaignmonitor.com/resources/will-it-work/guidelines/ for more information on HTML email design.


Video Tutorials
Have more questions? Submit a request