Creating an Email template with a Wizard

With the Designer you can design Email templates as well as PDF attachments. PDF attachments are designed in the Print context; see Print context.

It is strongly recommended to start creating an Email template with a Wizard, because designing HTML email that displays properly on a variety of devices and screen sizes is challenging. Email clients can, and will, interpret the same HTML and (inline) CSS in totally different ways (see Designing an Email template).

With an Email Template Wizard you can easily create an Email template that outputs emails that look good on virtually any email client, device and screen size.

After creating an Email template, the other contexts can be added to it, as well as other sections (see Context and Email templates).

To create an Email template with a Template Wizard:

  1. In the Welcome screen that appears after startup:

    1. Choose New at the left, then Email at the right.

    2. Select Blank template, Basic message (with a call-to-action button) or Invoice (with a detail table); or scroll down and select one of the Email templates from the online resources.

    Tip: Click the Home icon icon at the top right to reopen the Welcome screen.

    Alternatively, on the menu select File > New, and expand the Template folder.
    Now you can select Email Template; this starts the Basic Action Email wizard. Or scroll further down and expand the Basic Email templates folder, the Banded Email templates folder, or the Slate: Responsive Email Templates by Litmus folder, and select one of those templates.

    See Email Template Wizards for information about the various types of Template Wizards.

  2. Make adjustments to the initial (or last used) settings. The options for each type of template are listed below.
    Click Next to go to the next settings page if there is one.

  3. Click Finish to create the template.

The Wizard creates:

  • An Email context with one section in it. The section contains dummy text and one or more expressions for variable data, for example: "Hello {{first}}". You will want to replace those by the names of fields in your data. See Variable data in the text.

    The Invoice email template also contains a Dynamic Table; see Dynamic Table.
    Note that this table does not use one of the default table styles, and that the style sheet with the default table styles is not present in the template. To add that style sheet to the template, insert a table using the Dynamic Table wizard.

  • A style sheet, named context_htmlemail_styles.css, and another style sheet depending on which Template Wizard was used. The style sheets can be found in the Stylesheets folder on the Resources pane.

The Wizard opens the Email section, so that you can fill it with text and other elements; see Content elements, Email context, and Email templates.

Tip: Use the Outline pane at the left to see which elements are present in the template and to select an element.

Use the Attributes pane at the right to see the current element's ID, class and some other properties.

Use the Styles pane next to the Attributes pane to see which styles are applied to the currently selected element.

Note that the contents of the email are arranged in tables. The many tables in an Email template ensure that the email looks good on virtually any email client, device and screen size. As the tables have no borders, they are initially invisible.

Tip: Click the Edges button on the toolbar temporarily adds a frame to certain elements on the Design tab. These will not Print or output.

Email Template Wizards

There are Wizards for three kinds of Email templates: for Basic Email, for Banded Email, and Slate templates for responsive email designed by Litmus.

Slate: Responsive Email Templates by Litmus

Scroll past the Web Template Wizards to see the Slate: Responsive Email templates, created by Litmus (see https://litmus.com/resources/free-responsive-email-templates).

More than 50% of emails are opened on mobile. These five responsive HTML email templates are optimized for small screens and they look great in any inbox. They’ve been tested in Litmus and are completely bulletproof.

Tip: After creating the email template, click the Responsive Design View icon at the top of the workspace to see how the email looks on different screen sizes.

The only thing you can set in advance for a Slate template is the color of the call-to-action button. Click the small colored square, right next to the field that holds the default color value, to open the Color dialog and pick a color (see Color Picker).
The color can be changed later; see Colors.

Basic Email and Banded Email

The difference between Basic and Banded email is that the contents of a Basic email extend to the email's margin, rather than to the edge of the window in which it is read, as the contents of Banded emails do.
The Banded Email Action Template is a simple call-to-action email with a message, header and a button linking to a website, such as an informational or landing page.
The Banded Email Invoice Template is an invoice with an optional Welcome message and Pay Now button.

Settings

For a Blank email you can not specify any settings in the Wizard.

For an Action or Invoice email, the Email Template Wizard lets you choose:

  • The subject. You can change and personalize the subject later, see Email header settings.

  • The text for the header. The header is the colored part at the top. The text can be edited later.

  • The color of the header and the color of the button. Click the small colored square, right next to the field that holds the default color value, to open the Color dialog and pick a color (see Color Picker). The color can be changed later; see Colors.

  • A logo. Use the Browse button to select an image from disk, or enter a URL to use a remote image.

  • The web address where the recipient of the email will be taken after clicking the button in the email. Type the URL in the Link field.

In addition, for an Invoice email you can change the following content settings:

  • Show Welcome Message. Check this option to insert a salutation and one paragraph with dummy text in the email.

  • Detail Table Name. Type the name of a detail table to fill the lines of the invoice with data. In the Designer, a detail table is a field in the Data Model that contains a variable number of items (usually transactional data).