This article is for Emma HQ account holders and provides instruction on using the Template Builder — which is a tool that is only available in Emma HQ.
With an Emma HQ account, you have access to a suite of extra assets that have been turned on for your account including the Template Builder, image sharing, document sharing, and campaign sharing. If you don't have access to Emma HQ and would like to, contact our Support Teamcontact our Support Team.
Let's talk about the Template Builder, which lets you easily customize a template gallery template's components — like the header, background colors, or the footer — using the controls you're used to seeing in the drag and drop editor and then lets you share that framework with the subaccounts of your choice, so they can build their email with it.
Watch a quick video tutorial on template building and locking in your HQ account
When using the Template Builder in Emma HQ, it's helpful to think of any campaign or mailing you create as content that you're placing on top of your template, like when you write on a piece of stationery. Afterward, you can find any templates you create with the Template Builder in the My Templates section of your subaccount's Template Gallery, and any campaigns or mailings you create with Campaign Builder can be found in the Shared tab of your subaccount's Campaigns page.
How to create a 'drag and drop template' using Template Builder in Emma HQ
- Go to Assets in the top left navigation menu of your account and you'll see tabs for Templates, Campaigns, Images, and Documents.
- Click the Templates tab, and select to Create a new template.
- Here, you'll be able to use the drag and drop editor you're familiar with, by selecting either a blank, code your own, or gallery template (more on code your own below).
- If you select either a blank or gallery template, you'll be able to see the menu of template features that are editable at the Assets level, i.e. background color (note the blue lock at the top right of the screen). By default, all elements of the templates created in Assets are unlocked, but you can lock them if you don't want your subaccounts to be able to edit them.
- In the examples above and below, the background color has been changed and a sidebar was added to the template at the Assets level.
- When a subaccount opens this template to build a mailing, they don't see the options along the top of the editor to edit those template features. Instead, the subaccount will 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 subaccounts 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.
- You can also switch to code view for any template created using the drag and drop editor, if needed.
- Once you have your template looking as you'd like it to, click the arrow next to the Save button and choose Save & share.
- Doing so brings you to this page, where you'll select to share the template with all current and future subaccounts or select from your list of subaccounts who should have the template as an option when building a campaign.
- 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 come back to edit any of your mailings and change which accounts they are shared with by clicking the downward-pointing arrow to the right of the mailing. Once you've shared the template with the subaccounts of your choice, Edit this campaign will appear as an option when they click to create a new email and scroll down into their My Templates section.
- One thing to remember about working at the Emma HQ level is that you can upload images and documents to Assets and then share them with your designated subaccounts. This means when you upload a document to your Assets document library, you can choose which subaccounts should see the documents in their library, or you can also link to a document in a shared campaign or template without adding that document to the subaccount library.
How to create a 'Code your own template' using Template Builder in Emma HQ
Please note: This next guide is geared toward those who are already HTML and CSS savvy and is not intended for a beginner coder. Additionally, because the Template Builder is a self-service tool, it’s up to you to both create and troubleshoot the code you use for your template. We cannot offer support for templates that we did not create.
- If you prefer to code your own template instead of using the drag and drop editor to build it, just select the Code your own template option from the Create a new template button.
- You still have access to the full template code here, and you can easily preview the HTML version of the template by selecting the Preview tab rather than jumping into the subaccount level to see the template.
- The default template code can be looked at as two major components: CSS Styling and Template Markup.
- The CSS used in this template example is grouped into two sections: The standard CSS template styling and the mobile CSS, which is essentially a media query that modifies content arrangement and styles for mobile devices.
Standard CSS Code Descriptions
|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.
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.
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.
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.
This is padding for the footer table holding the address and subscription information.
Styling is inlined for the [% RSVP %] footer tag, which pulls address information from the account settings.
Our default mobile breakpoint is set at 480px. This is standard but it can be changed to suit your preferences. Another media query may be added to create alternate versions for desktop, tablet, and mobile separately.
Please note: 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.
Mobile CSS Code Descriptions
|Class / ID||Line||Description|
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.
Font-size controlling for the contact information is held in the footer table.
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.|
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.|
Placed in either the containing cell or an image tag, this center-aligns text and images.
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.|
Additional template markup notes
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 footer where contact and subscription information is generally placed. The following breaks these sections down into greater detail.
Please note: Some of the above CSS is already used in this default template for both function and example.
The body, 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 preset) in order to make selecting those colors simple for the end-user in the editor.
The 3 primary sections within the wrapping 100% table:
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.)
Template containerThe 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.
There are five default flexible region content layout IDs 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 %]
Drag and Drop Editor Default Content Layouts
|ID||Flexible layout arrangement|
|3||Sidebar on left|
|4||Sidebar on right|
3. Footer 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:
- A physical postal address
- A clear opt-out link (which we provide through the [% unsubscribe %] tag and the TrueRemove® service)
Common Emma Template Markups
|[% date:weekday %]||Inserts the current weekday at time of mailing|
|[% date:month %]||Inserts the current month at time of mailing|
|[% date:day %]1||Inserts the current day at time of mailing|
|[% date:year %]||Inserts the current year at time of mailing|
|[% account_phone %]||Inserts the phone number stored in your 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 arrangement, timezone="Australia/Sydney”. For example, [% date:day timezone="Australia/Sydney" %] will populate the current date in Sydney at the time of send. This arrangement 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>.