How to create email templates in the content designer

You can switch to the Content Designer by clicking the [Edit] button on the bulk email page or on the email template page. Read more in the “Content Designer” article.

Perform the following actions to create an email template using the content designer:

• Specify the template properties. Read more >>>

• Set up the pre-header (available only in bpm’online marketing and CRM-bundle). Read more >>> 

• Add and set up content blocks. Read more >>> 

• Edit the content elements. Read more >>> 

• Add tabs with localized templates if needed Read more >>> 

• Use the preview area to see how your template looks. Read more >>> 

Note

You can perform these actions in any order. For example, you can modify the width of the template page after the content is completed.

How to set up email template properties

You can set the width of a template, its location on the page and the background color using the Content Designer.

To do this, use the  button menu located in the top right corner of the working area.

To set the background color of the template, click  and select the necessary shade on the diagram. You can also specify the exact code (Fig. 1).

Fig. 1 Setting the email template color

 

To set the width of the template, enter the width value in pixels in the [Width] field.

To select the template location on the page, use the corresponding buttons.

How to set up pre-headers for bulk and trigger emails

The functionality is available in bpm’online marketing and CRM-bundles.

You can specify custom preview text (a.k.a. “pre-header”) for your bulk and trigger emails. The pre-header is displayed in most email clients and services after the email subject. Usually, it represents an extract of the first few words from the email body.

To customize email pre-header, simply enter the text that will be displayed as email preview in the [Pre-header] field of the content designer (Fig. 2).

Fig. 2  Specifying bulk email pre-header text

 

Use the button to add macros, such as recipient’s name.

Note

More information on email pre-headers is available in the “Bulk email guidelines” article.

How to manage email template blocks

You can search the needed block in the library by name. For example, if you enter “text” in the search string, the library will display all available text content blocks. The most recently created or edited content blocks are displayed at the top of the list.

To add a content block to an email template, select the block from the library and then drag it into the working area of the Content Designer with the left mouse button (Fig. 3).

Fig. 3 Adding a block to the email template

 

As a result a new block will be added to the email template.

To copy a block that has already been added to a template, click on the block and then click the  button in the element manager menu that appears.

To modify the position of a block on the template page:

1.Click the block in the working area of the designer.

2.In the element manager menu on the right of the block, click the  button and then drag it to the position you need on the template page by pressing and holding the left mouse button.

As a result, the block will be placed in the required position.

To edit the set of elements and their proportions in the block:

1.Click the block in the working area of the designer.

2.In the block manager menu on the right of the block, click .

As a result, the block designer will open. In the block designer, you can arrange and group the block elements, as well as add or delete some of the elements. All the entered changes will be valid only for the current template. To apply the changes on the library level, edit the block in the [Content blocks library] lookup. More information on the topic is available in the “How to create and set up content blocks” article.

To delete a block from a template page:

1.Click the block in the working area of the designer.

2.In the block manager menu on the right of the block, click .

As a result, the block will be deleted from the template page.

How to manage the base element content

Each Content Designer element has a toolbar that helps manage its content. To display the toolbar, select an element in the working area.

How to edit text

Use the toolbar of the element (Fig. 4) to format the text, for example, change the font size or color, apply font styles (“bold”, “italic”, “underline”), configure line and character spacing, insert a hyperlink etc.

Fig. 4 Text element toolbar

 

Use the advanced edit mode to work with the text HTML code, if needed.

How to add macros

Macros are added directly to the email text and enable personalizing.

Note

In emails with localized templates, macros take the recipient’s preferred language into account.

You can add any of the basic macros, such as contact's title or owner’s job title. To do this:

1.Click and choose the [Basic macro] command.

2.In the opened window, select a macro to add.

You can also add a custom macro to the email template. To do this:

1.On the template page, select an object in the [Macro source] field, then click the [Edit] button to open the Content Designer.

2.In the button menu, select the [Basic macro] command.

3.In the opened window, select the needed column of the bpm’online object, specified in the [Macro source] field.

Note

If no object was specified in the [Macro source] field, bpm’online will notify you that you need to specify an object after you select the [Custom macro] command.

How to work with images

To add a new image:

1.Highlight the corresponding element in the working area of the Content Designer.

2.In the opened image setup area (Fig. 5):

• to upload image from your computer, click ;

• to upload image from the Internet, delete the embedded image by clicking the  button that appears to the right of the field when you hover your mouse over it, then specify the image URL and press ENTER.

Fig. 5 Image setup area

 

As a result, the image will be uploaded to the template. The image dimensions are automatically scaled depending on the content block dimensions. You can change the image dimensions, if necessary. For this, in the [Width] and [Height] fields of the image setup area, specify the needed dimensions in pixels. Please note that if you apply these settings, the image can shrink or expand disproportionally. To revert to automatic scaling, delete the values form the [Width] and [Height] fields and press ENTER.

In some email clients, a specific setting might disable images in the incoming emails. Populate the [Alternative text] field with a description of the image. Your recipients  who have disabled images in their email clients will see the “alternative text” in place of the images, which would motivate them to download and view the actual image.

You can set up different images for desktop and mobile devices. For this, select the [Use other image on mobile] checkbox and upload a new image in the appeared field (Fig. 6).

Fig. 6 Specifying a separate image to use on mobile devices

 

If you want to redirect users to a particular page (e.g., if the image is a promo banner), specify the URL of the required page in the [Link to open] field of the image setup area.

Note

In bpm’online marketing and CRM bundles, you can set up automatic completion of web forms that your recipients can open by clicking a link in a bulk or trigger email. For example, you can automatically populate the opened web forms with the user’s name, email, phone number, if this information is available in bpm’online. This is done by passing the corresponding values in the link to the web form via macros. This will simplify the registration process for your recipients and will help avoid errors when filling out the web forms manually, as well as prevent creation of duplicate lead or contact records. Learn more in the “How to set up the autofill function for landing page fields” article.

How to work with the HTML elements

You can add the content of an element from an HTML file that has been prepared in advance. To do this, click the  button of the toolbar and select the required HTML file. As a result, the HTML element will display the added web page. To ensure the correct displaying of custom web pages, we recommend adding the whole code in one html element.

To edit the content of an HTML element directly in the working area of the designer, click the  button on the element toolbar and edit the required changes in the opened window.

To clear the content of an HTML element, select the required html element and click the  button in the toolbar that opens.

Note

Please follow the adaptive layout recommendations when using html elements in email templates. It will ensure the correct displaying of your created email message in different email clients on different devices.

Note

The [HTML element] block is a means of implementing custom HTML code in your templates. It is intended for use by HTML-savvy users who are familiar with web design and can code their custom designs in HTML. Please note, that your custom code will be directly added to the template (without any automatic debugging, warnings etc). When using the [HTML element] block, please make sure that you test results outside the content designer preview, for example, by sending a test email. If you are unfamiliar with HTML formatting, please use ready-made blocks for best results.

How to add localizations to email templates

You can “localize” an email template by adding its versions in different languages. Each localized version is added as a new tab. To add a localization tab:

1.Click  on the right side of the Content Designer working area. A menu with a list of languages will open. Select a template language you want to add.

The list of email template languages is stored in the [Customer languages] lookup. The menu displays active languages only (the ones, where the [Is used] checkbox is selected in the lookup). If there are no active languages in bpm’online yet or you want to add a tab with the language that has not been activated, select the [Add language] menu option (Fig. 7), then select a new language from the lookup. The [Is used] checkbox for this language will be selected automatically.

Fig. 7 Adding languages to the template

 

2.After you select a language, bpm’online will prompt you to copy the content of an existing template to the new tab. Copying existing template will help you save time on creating the layout of the localized template. As a result, a new tab will appear in the content designer working area.

If you need to add several languages to a template, repeat steps 1 and 2 for each language. As a result, several tabs for creating emails in the selected languages will be displayed on the template page.

3.Use the content designer to add or modify the localized content on each new tab.

4.Save the changes.

How to preview an email template

To preview how your email will actually look for the recipients, use the preview mode in the Content Designer. To preview an email template:

• In bulk email template, click the [Preview] button.

• In an email template, click the  button in the right top corner of the working area.

You can switch between desktop and mobile device view (Fig. 8). By default, the template is opened for preview in the current browser window.

To return to editing the template, click the [Content Designer] button.

Fig. 8 Email template preview

 

See also

•Setting up sending localized emails

•The [Email templates] lookup

Recommendations for adaptive email message layout

There are a few rules to keep in mind to ensure that your content is displayed properly in all email clients. Below are some of the nuances that affect the correct display of email messages in the recipient email client.

Contents

•Features of email messages layout for MS Outlook users

•Features of Gmail email messages layout

•Specifics of email message layout for mobile devices

Features of email messages layout for MS Outlook users

When sending emails to customers, Microsoft Outlook users should take into account that when viewing emails in MS Outlook some elements, such as buttons, may be displayed differently than in the template. In addition, for security reasons MS Outlook blocks the downloading of images in emails by default.

How to ensure a consistent button display in the MS Outlook email message templates?

In the bpm’online email templates, the “Call to action button” element is often used. The standard button has rounded edges (Fig. 1), while in MS Outlook this button is displayed as a rectangular (Fig. 2).

Fig. 1 — Buttons in bpm'online

 

Fig. 2 — Buttons display in MS Outlook

 

For the button to be displayed correctly in MS Outlook, you must edit its HTML code in the email message template.

1.Since the code for rounded buttons is not universal and depends on how the button is laid out, ask the bpm’online technical support team for it — support@bpmonline.com.

2.On the email template page, click the [Edit] button to open the content designer.

3.In the content designer workspace, go to the edit mode by clicking the button.

4.In the opened window with the HTML code, add the code provided by technical support in any place.

5.Add the code to the HTML markup for each button used in the email message template.

6.Save the changes.

As a result, the call-to-action buttons will look identical to the original ones when viewing the message in MS Outlook.

How to customize the display of images used in the email in MS Outlook?

Recipients of messages can control automatic downloading of images in MS Outlook using:

Options —> Trust Center> Trust center settings, and then disable or enable the ”Don't download pictures automatically in HTML email messages or RSS items” option.

Attention

Before you make a decision about disabling automatic blocking of images, consider that it allows avoiding the view of potentially offensive content as well as preventing data corruption on the computer with malicious code and allows faster loading of the message contents when connecting with a low data transfer rate.

Features of Gmail email messages layout

If you are aware that the majority of recipients of your message use Gmail for email service, we recommend using only the two column content items (Fig. 3).

Fig. 3 An example content item that consists of two columns

 

Due to the limited size of the working window, messages consisting of more than two columns are displayed incorrectly in Gmail. For example, if your message consists of three vertical content blocks, the last block will be shifted under the first two.

Specifics of email message layout for mobile devices

If a significant part of your bulk email audience are mobile device users, consider using templates that consist of only one column with dimensions of 500-600 pixel width. Otherwise, the message may not be displayed correctly. For example, parts of tables or images can exceed the size of the recipient’s mobile device screen, which will automatically reduce the font size to the point when it becomes unreadable (Fig. 4).

Fig. 4 An example of message not adapted for viewing on mobile devices

 

To configure the message width:

1.On the email template page, click the [Edit] button.

2.Click the  button in the upper left part of the content designer workspace. In the field that appears, set the template width to 600 pixels.

3.In the template text field, increase the font proportionally to the template width.

4.Save the changes.

Note

When working with an email template, remember that the preview of the generated message in the content designer does not guarantee that the email recipient will see the same thing. This is due to the settings and features of different email clients.

Note

Before you start sending bulk email (in bpm’online marketing and CRM bundles), we recommend testing the created and adapted message by sending it to addresses registered on different email services. Send a test letter.

See also

•How to create email templates in the content designer

•How to create and set up content blocks