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 Contexts and Email templates).

To create an Email template with a Template Wizard:

1. • In the Welcome screen that appears after startup, choose Browse Template Wizards.
     Scroll down until you see the Email Template Wizards. There are three types of Email Template Wizards:
     • Basic Email templates
     • Banded Email templates
     • Slate: Responsive Email templates by Litmus.
   • Alternatively, on the File menu, click New, expand the Template folder, and then expand the Basic Email templates folder, the Banded Email templates folder, or the Slate: Responsive Email Templates by Litmus folder.

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

2. Select a template and click Next. If you don't know what template to choose, see below; the characteristics of each kind of template are described further down in this topic.
3. Make adjustments to the initial settings (the options for each type of template are listed below). Click Next to go to the next settings page if there is one.
4. 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 selectors for variable data, for example: "Hello @first@". You will want to replace those by the names of fields in your data. See Variable Data.
  The Invoice email template also contains a Dynamic Table; see Dynamic table.
• One script, named "To". Double-click that script on the Scripts pane to open it. This script ensures that the email is sent to an email address that is specified in a data field called "email-to". After loading data, you can change the script so that it uses the actual field in your data that holds the customer's email address. See Email header settings
• 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.

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.

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.

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. Enter a hexadecimal color code. The color value must be a valid HTML Color Name, or a valid hexadecimal color code. To get a hexadecimal color code, you could use an online color picker tool (such as w3schools' 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. The color value must be a valid HTML Color Name, or a valid hexadecimal color code. To get a hexadecimal color code, you could use an online color picker tool (such as W3Schools' Color Picker). The color can be changed later; see Colors.
• 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).