How to build a simple, flexible email template in Sitecore EXM 3.4

I tried to follow the instructions that Sitecore posted, Walkthrough: Building a custom message template – and while they are well written instructions, I kept running into issues and couldn’t understand where I went wrong. So I decided to find a way to hack together a template that was quick to duplicate, yet flexible enough to reuse.

  1. Open Content Editor.
  2. Right-click on Email Campaigns, under Templates > Branches.
  3. Click Insert.
  4. Select Branch Folder.
  5. Type Custom Templates (or whatever you want to name the folder) in the Enter a name for the new item field.
  6. Click OK.
  7. Right-click on One-column message under Templates > Branches > Email Campaign > Messages.

  8. Click Copying.
  9. Select Copy To.
  10. Select the folder you created in step 5, in this case, Custom Templates.
  11. Click Copy.
  12. Right-click on the newly created One-column message.
  13. Select Rename.
  14. Type Wicked Easy EXM Template (or whatever you want to name the template) in the Enter a name for the new item field.
  15. Click OK.
    Note: You will notice that Item Name changed, but the Display Name continues to show as One-column message.

  16. Select Display name under the Rename area on the Home tab.
  17. Type Wicked Easy EXM Template (or whatever you want to name the template) in the Enter a name for the new item field.
  18. Click OK.
    Note: You will see the item show the same name for both the item and the display name.

  19. Expand your Wicked Easy EXM Template.
  20. Select $name.
  21. Click the Content tab.
  22. Change the Body field from sitecore/templates/Branches/Email Campaign/Messages/One-Column Message/$name/Message Root to point to sitecore/templates/Branches/Email Campaign/Messages/Custom Templates/Wicked Easy EXM Template/$name/Message Root by selecting it from the drop-down menu.
  23. Select Message Root.
  24. Click Details, in the Layout section, on the Presentation tab.
  25. Click Display Body, in the Default Controls area.
  26. Change the Data Source field from sitecore/templates/Branches/Email Campaign/Messages/One-Column Message/$name/Message Root to point to sitecore/templates/Branches/Email Campaign/Messages/Custom Templates/Wicked Easy EXM Template/$name/Message Root by selecting it from the drop-down menu.
  27. Click OK.
  28. Click Display Footer, in the Default Controls area.
  29. Change the Data Source field from sitecore/templates/Branches/Email Campaign/Messages/One-Column Message/$name/Message Root to point to sitecore/templates/Branches/Email Campaign/Messages/Custom Templates/Wicked Easy EXM Template/$name/Message Root by selecting it from the drop-down menu.
  30. Click OK.
  31. Select Content.

  32. Click Edit HTML under the Body section.
  33. Copy and paste the following code into the HTML editor:
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
    <tr>
    <td style="background-color: #ffffff;">
    <!-- Header -->
    <table border="0" align="center" cellpadding="0" cellspacing="0" width="600">
    <tbody>
    <tr>
    <td align="left" style="width: 50%;">
    <!-- Logo -->
    <a href="" target="_blank"><img alt="Logo" src="https://placehold.it/155x75" width="155" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-size: 16px; border-width: 0px; border-style: solid;"></a>
    </td>
    <td align="right" valign="middle" style="width: 50%;">
    <a href="http://www.facebook.com"><img src="https://mikegoracke.com/media/1044/fb-icon.png" alt="Facebook" width="23" height="23" style="max-width: 25px;"></a>
    <a href="http://www.twitter.com"><img src="https://mikegoracke.com/media/1047/tw-icon.png" alt="Twitter" width="23" height="23" style="max-width: 23px;"></a>
    <a href="http://www.instagram.com"><img src="https://mikegoracke.com/media/1045/igm-icon.png" alt="Instagram" width="23" height="23" style="max-width: 23px;"></a>
    <a href="http://www.linkedin.com"><img src="https://mikegoracke.com/media/1046/li-icon.png" alt="Linkedin" width="23" height="23" style="max-width: 23px;"></a>
    </td>
    </tr>
    </tbody>
    </table>
    <!-- Hero Banner -->
    <table style="width: 600px; padding-top:15px;" border="0" align="center" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; text-align: center; min-height: 100px;" valign="top">
    <p>[HERO IMAGE]</p>
    </td>
    </tr>
    </tbody>
    </table>
    <!-- Email Body -->
    <table style="width: 600px; background-color: #ffffff;" border="0" align="center" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td align="center" valign="top" style="color: #303030; font-family: Arial, Helvetica, sans-serif; font-size: 30px; line-height: 34px; padding: 30px 50px 15px; text-transform: uppercase;"><strong>[Heading Text]</strong></td>
    </tr>
    <tr>
    <td align="center" valign="top" style="color: #353535; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 20px; padding: 10px 50px 0px;">[Body Text]</td>
    </tr>
    <tr>
    <td style="padding: 50px 0px; text-align: center; color: #353535; font-family: Arial, Helvetica, sans-serif; font-size: 15px;" align="center" valign="top">
    <table width="600" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td> </td>
    <td>
    <table border="0" align="center" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td>
    <table border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td align="center" style="border-radius: 3px; background-color: #ce2036;"><a href="" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; padding: 12px 18px; border: 1px solid #ce2036; display: inline-block;"><strong>[CALL TO ACTION]</strong></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    <td> </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <table align="center" width="600" border="0" cellpadding="0" cellspacing="0" style="background-color: #303030;">
    <tbody>
    <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; padding: 20px 0px 15px;" align="center" valign="top"><img alt="" width="75" src="https://placehold.it/75x75"></td>
    </tr>
    <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; line-height: 16px; padding-left: 38px; padding-right: 38px;" align="left" valign="top">&copy;2016 [Company Name]<br>
    This email was sent to $email$ by [Company Name]<br>
    [Company Address]
    <br>
    <a href="" target="_blank" style="color: #666666; text-decoration: none;">Unsubscribe</a>
    <span style="font-size: 12px; font-family: Arial, sans-serif; color: #444444;"> | </span>
    <a href="" target="_blank" style="color: #666666; text-decoration: none;">View this email in your browser</a></td>
    </tr>
    <tr>
    <td align="left" valign="top" class="m_9070074211724090905footer" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; line-height: 1.2em; padding-left: 20px; padding-right: 30px; height: 50px;"> </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    Note: You can also download a fancy responsive email template from Litmus, edited it appropriately and use it instead of my example above.

  34. Edit the HTML to include your company logos and adjust the social media links and company name/address information, as well as the color theme, accordingly.
  35. Click Accept.
  36. Click Save.
  37. (Optional as you can include the footer in the Content section.) Select Footer.
  38. Click Edit HTML under the Footer section.
    Note: If you choose to include your footer in the Content section, delete the contents of this field.
  39. (Optional as you can include the footer in the Content section.) Copy and paste your footer HTML code into the HTML editor.
  40. Click Accept.
  41. Click Save.
  42. Select Default under sitecore > Content > Email Campaigns (or your default EXM root) > Message Types > One Time Messages.
  43. Click Assign, in the Insert Options section, on the Configure tab.
  44. Select Wicked Easy EXM Template (or whatever you named the template) under Templates > Branches > Email campaign > Messages > Custom Templates.
  45. Click the right arrow to move your new template into the Selected area.
  46. Click OK.
  47. Open Email Experience Manager.
  48. Click Create.

  49. Select Regular email campaign.
  50. Select your newly created template from the Templates list.
  51. Enter a name for the email campaign in the Name field.
  52. Click Create.
  53. Select the Message tab from the EXM workflow.
  54. Click the Body of the email to edit it.
  55. Edit the HERO IMAGE, HEADING TEXT, Body Text, and CALL TO ACTION as you see fit for the particular campaign using the rich text editor. 

And *BOOM* goes the dynamite

This is by no means a perfect template, but it gives you the flexibility to quickly add banner images and basic text in an attempt to get your recipient to take action... with the call to action. I will be writing a blog soon regarding inserting tables into email templates, which will further build out the flexibility of this type of template. 

About the author

I am a Digital Marketing Strategist at RBA, Inc. This blog does not represent the thoughts, intentions, plans or strategies of my employer. It is solely my opinion.

Also, I'm a digital strategist, not a developer - so when you see code on here, do not assume that it follows any best practices, because I'm simply trying to create actionable, measurable, marketing strategies as quickly as possible so that I can test and pivot accordingly.

comments powered by Disqus