Simple Email Marketing
Home > Resource Center > Account how-to > Using template builder

Using template builder

If you have an enterprise account, you have access to certain assets that have been turned on for your account: Template Builder, image sharing, document sharing and campaign sharing. (Give us a shout if you don't have access and would like to.) Let's talk about Template Builder, which lets you easily customize a template gallery template's components -- like header, background colors or footer -- using the controls you're used to seeing in the drag & drop editor and then share that framework with the sub-accounts of your choice, so they can build their email with it.

 

Template Builder is available only to Emma Enterprise customers. 

 

(Think of a campaign or mailing as the content you're placing on top your template, like when you write atop stationery. The template you create with Template Builder is placed in the My Templates section of your sub-account's Template Gallery, and the campaign or mailing you create with Campaign Builder appears in a Shared tab of your sub-account's Campaigns page.)

Go to Menu at the top-right of your account, and choose Assets. Here, you'll see a Templates and Campaigns tab as well as Images and Documents buttons. You can upload images and documents here at the parent level and then share with designated sub-accounts. If you upload a document to the parent-level document library, you can choose which sub-accounts should see the documents in their library. You can link to a parent-level document in a shared campaign or template without adding that document to the sub-account library.

1 - main template builder grid.png

Using the drag & drop editor

Click the Templates tab, and click Create a new template. Here, you can get started with the drag & drop editor you're familiar with, using either a blank, code your own or gallery template (more on code your own later).

screenshot.png

All elements of the templates created at the parent level are unlocked by default, but you can lock them if you don't want your sub-accounts to be able to edit them. Here you can see the menu of template features that are editable at the parent level, i.e, background color (note the lock at the top of the screen).

5 - template customization controls and lock icon.png

Here you can see that color has been changed and a sidebar was added to the template at the parent level.

6 - shows that template colors were customized.pngWhen a sub-account opens this template to build a mailing, they don't see the options along the top of the editor to edit those template features. The sub-account will also see that all existing content blocks in the template are locked. They will be able to drag in and edit new content blocks but will not have access to edit the blocks added in assets before the template was locked. This is a great way to provide your sub-accounts with a template that has some pre-loaded content to use as a starting point, allowing them to further customize each mailing using that template.

7 - what sub sees on locked template - no controls.png

You can switch to code view for any template created using the drag & drop editor if needed.

code view of HTML template.png

Once you have your template looking as you'd like it to, click the arrow next to the Save button and choose Save & share.

Screen Shot 2015-07-01 at 11.29.19 AM.png

On this page, you'll select to share the template with all current and future sub-accounts or select from your list of sub-accounts who should have this template as an option when building a mailing.

Screen Shot 2015-07-01 at 11.15.57 AM.png

Click Save at the top-right when your selections are made. This jumps you back to the Templates tab of your Assets page.

You can easily jump in to edit a template and change with which accounts it's shared by clicking the downward-pointing arrow to the right of the mailing.

Screen Shot 2015-07-01 at 11.28.20 AM.png

Once you've shared the template with a sub-account, it will appear as an option when they click to create a new email and scroll down into their My Templates section.

Looking at the Templates tab of your Assets page, you can see which templates are shared with which sub-accounts and have been used in how many mailings.

Screen Shot 2015-07-01 at 11.38.10 AM.png

 

Coding your own template

If you prefer to code your own template instead of using the drag & drop editor to build it, just select the Code your own option from the Create a new template button.

You still have access to the full template code here, but you can easily preview the HTML version of the template by selecting the Preview tab rather than jumping into the sub-account level to see the template. 

Fair warning: This guide is geared toward those who are already HTML- and CSS-savvy and is not intended for a beginner coder. Template Builder is a self-service tool, and so it’s up to you to create and troubleshoot your code.

Though the default template code in Template Builder is quite under-styled in this iteration, it is completely functional. Overall, it can be looked at as two major components: CSS Styling and Template Markup. Our editor will process the CSS in various fashions, so keep in mind that some elements shouldn’t be omitted (as will be detailed in the following documentation).

Click here to watch tutorial videos.

CSS

The CSS used in this mobile template is grouped in two sections: The standard template styling and the media query, which modifies content arrangement and styles for mobile devices.

Standard CSS

Class / ID Line Description
h1 - h4 2 - 33

Each heading setting correlates to selectable Header styles in the text editing toolbar in the editor. There are no headline options available beyond H4.

.e2ma- 34

The e2ma- prefix classes relate to the block elements inside the flexible drag and drop region. For function, we don't recommend you alter any of these class names. The attributes of these classes control the Font Styling of paragraph text in these elements.

#template_container 39

This ID and the subsequent .link are the hyperlink styling controls for the flexible region. For consistent delivery, it’s still recommended that all hardcoded links be styled inline.

blockquote 43 - 49

Blockquote and blockquote p are the bordering and text styling of the selectable blockquote text editor feature, respectively.

.editable-image 53

Assigned in the TD style attributes of the cell containing an editable image spot, it applies a border of 0 and displays the image in block.

.e2ma-unsubscribe 57

This is padding for the footer table holding the address and subscription information.

.business_rsvp 60

Styling is inlined for the [% RSVP %] footer tag, which pulls address information from the account settings.
Note: Per the federal CAN-SPAM Act, this cannot be used to hide address information, i.e. white text on white background.

 

Mobile CSS

Our default mobile breakpoint is set at 480px. This is standard but can be changed to suit your preferences. Another media query may be added to create alternate versions for desktop, tablet and mobile separately.

Note that the precursor *[class] has been added to prevent Yahoo webmail from applying all mobile styles to desktop renderings. For the purposes of this documentation, it will be omitted in descriptions.

Class / ID Line Description
html 68

This prevents iOs from using -webkit to adjust font-sizing erroneously.

.e2ma- 71 - 87

The prefix e2ma- controls the styling of block elements in the flexible region of a template. It's recommended that you not modify these classes.

Note: Line 72 controls the font-size that your text will be in mobile view and is preset at 15px, though you can change this if needed.

.business_rsvp 88

Font-size controlling for the contact information is held in the footer table.

.social-sharing 91

This is padding and alignment for the [% social %] tag in the header of the template, which contains our social sharing feature.

.footer-social 100 This class resizes the social images in the [% socialShare %] code that is inlined on send of the email.
.mobile-width 112

Any statically defined width in the template markup greater than the breakpoint (and in some cases, the portrait width of the mobile device) will prevent the mobile rendering from sizing correctly. This redefines that width as 100% with horizontal padding. Alternatively, mobile-width-nopad adds no padding.

.stack 120 When applied to each cell in a table row, this will stack the cells from left to right and define them as 100% in width. Adding .mobile-width to a cell with .mobile-stack is not necessary.
.hide 124 This can be applied to any markup that accepts style attributes, omitting them from the mobile rendering.
.center 127

Placed in either the containing cell or an image tag, this center-aligns text and images.

.scale 131

As with tables and cells defined with set widths, this sets an image's width as 100%. If editable_image has been applied to an image block, .scale is not needed.

.addpad, .addpad-top, .sanpad, .sanborder 136 These are common utility classes used to style your mobile view and either add or remove elements as shown.

 

Template markup

Construction

Though the template is wrapped in a 100% div (and intentionally redundant 100% table), the basic construction of the default template has three major rowed components: A heading bar, the main design container and a footing where contact and subscription information is generally placed. The following breaks these sections down into greater detail. Some of the above CSS is already used in this default template for both function and example.

Default template

The body and wrapping div and table hold the master background color and allow for a background image to be used. If not using a background image, you should clear the background-image CSS from the inline styling of these elements.

Also, the data-e2ma-name and data-e2ma-styles attributes correlate to the capacity to alter the background color of a template from within the editor. If you wish to remove this ability for the user, these attributes may simply be removed.

The data-e2ma-color attribute in the master table wrapper correlates to the maximum of five pre-defined color swatches in the editor and text-formatting toolbar. You may insert six-digit hex color codes after the data-e2ma-color attribute (there are two pre-set) in order to make selecting those colors simple for the end-user in the editor.

 

Here are the three primary sections within the wrapping 100% table:

  1. Heading bar

    The previous heading bar content has been moved to the footer. In its place is an example of where the table structure best supports 100% rows. In these, you can nest tables for logos and navigation and host color bands that scale the entire document's width. (The updated footer is also an example of this.)

  2. Template container
    The centered table in this section will likely constitute the majority of your design. By default, it has space for your header, content and footer. More complex layouts will need to have tables nested into the rows. You may place only one flexible drag and drop region in a template. The JSON markup to define the default flexible region is already installed in the default template markup.

    Note: Flexible region layout ID

            There are five default content layouts built for the flexible drag and drop region. You define this in the ID of the layout attribute:

            [% layout id="2" %][% flexible name="Primary" %]
            [%/ flexible %][%/ layout %]
     

    ID Flexible layout arrangement
    2 One column
    3 Sidebar on left
    4 Sidebar on right
    5 Three column
    6 Two column
  3. Footing row

    In the contained table, there are three stacked divs with [% tag %] calls to the account information. You are free to format and edit this as you see fit, however you are still legally required to adhere to the CAN-SPAM Act regarding email marketing. Specifically, there are two items that we require in your template code in order for you to send:     

            1. A physical postal address
            2. A clear opt-out link (which we provide though the [% unsubscribe %] tag and the TrueRemove® service)

         A CAN-SPAM compliance guide is available here.
     

Emma templating markup

There are various elements you can hardcode into a template to aid in your design. Though you will need no actual knowledge of Javascript or JSON, they are called for using a syntax unfamiliar to (though evident in) the HTML and CSS typically used in templating markup. A list of the most common is below.

Tag Function
[% date:weekday %] Inserts weekday at time of mailing
[% date:month %] Inserts month at time of mailing
[% date:day %]1 Inserts day at time of mailing
[% date:year %] Inserts year at time of mailing
[% account_phone %] Inserts phone number stored in account settings
[% share:email url_only="true" %]2 Placed as the href in an <a> tag for custom social sharing. 'email' may be replaced with 'twitter', 'facebook' or 'linkedin'
[% webview_url %] Placed as the href in an <a> tag when building custom webview copy
[% unsub_url %]3 Placed as the href in an <a> tag when building custom unsubscribe copy4
[% manage_url %] Placed as the href in an <a> tag when building custom contact list management copy
[% signup_url %] Placed as the href in an <a> tag when building custom signup link copy
[% image name="_" url="_" width="_" %][%/ image %] An editable image tag for hardcoded images outside of the flexible region. Name is an individual ID per use and cannot be repeated, url is the location of the image file, and width defines a maximum width for the image
[% text name="_" default="_" %][%/ text %] An editable text tag for hardcoded text outside of the flexible region. Name is an individual ID per use and cannot be repeated, and default is for pre-populating copy in the text field
[% bug %] This tag inserts our tracking pixel into your mailing which allows us to track opens.


1 The date defaults to central time, but any timezone from account settings can be added using this argument, timezone="Australia/Sydney”. For example, [% date:day timezone="Australia/Sydney" %] will populate the current date in Sydney at the time of send. This argument can be applied to any of the default date: type tags, and any timezone in account settings is supported.  

2 Custom share tags are used in single quotes rather than double quotes. Example: <a href='[% share:email url_only="true" %]'>

3 The default [% unsubscribe %] is a required tag, though the [% unsub_url %] tag may be substituted for custom unsubscribe copy.

4 Example: Click here to <a href="[% unsub_url %]">unsubscribe</a>.

You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.