Email templates: Creating emails

General

 

The Email Templates module of CRM’s new user interface has a built-in editor for creating emails. The editor works easily and visually on the drag-and-drop principle, so creating an email does not require HTML knowledge. In addition to this, the editor automatically takes care of how the e-mail works on different end devices, and with the help of preview functions, you can check in advance how the e-mail looks on, for example, mobile devices.

Unlike in the mass mail portal, the email templates and the actual emails intended to be sent are built and stored in the same module; in practice, the type of e-mail determines whether it is a basic or ready-to-send e-mail.

The instructions below discuss creating a new e-mail template, but the editor works in a completely similar way for e-mails as well. The completed email template can be copied as the email template by clicking  the Actions button in the email template and selecting the Copy to email.

 

Creating a new email template

You can start creating a new email template completely in the Email Templates module by clicking the  New button. The following information must be defined for the new email template:

• Name – Only displayed in CRM. It is therefore not a subject of the e-mail that is visible to the e-mail recipients.
• Email template number – The number is automatically generated when saving, so you don’t need to fill it in yourself.
• Active
• Responsibility
• Description

Special attention should be paid to the following fields:

• Subject – Presented to email recipients as the subject of the email.
• Reply address – If the recipient replies to the email directly, the replies will be forwarded to this email address.
• Sender name – Presented to the recipient of the message as the name of the sender of the email.

The technical field information of the e-mail (if visible) does not require action; the fields are filled in automatically when the e-mail content is created in CRM’s own editor.

Editing content with the editor

The actual structure and content of the e-mail template/e-mail is created using the e-mail editor. The editor can be opened by clicking the  Actions button and selecting Edit content.

The editor tools have three tabs: Content, Lines and Settings. Find out more about these possibilities below.

General functions in the editor

In the lower left corner of the e-mail editor, there are buttons for the editing history and for the previous and next action. With these, it is possible to undo and redo the most recent changes made to the e-mail, or jump back to a certain point in the change history.

In the upper left corner, on the other hand, there are functions for previewing the email in desktop and mobile views and for detailing the structure of the email.

 

Settings

On the Settings tab, you can find the general settings of the email template, such as the width of the content area, alignment of the content, and the background colors of the entire email and the insert area. In the settings, you can also define the default font and the default color of the links.

Rows

The e-mail template is built line by line in the editor and adding new lines to the e-mail is done by dragging the appropriate line option from the Lines tab to the e-mail. Line options have ready-made lines divided into different columns; with the help of columns, it is therefore possible to place different elements, such as an image and text, next to each other on the same line in the email.

After adding a row, clicking on the row to the right displays the Properties of the row (see image below), which has the following setting options:

• Row Background Color – The background color of the entire row.
• Line background image – The image displayed in the background of the entire line (Note! Not all e-mail programs support background images; in this case, the background color of the line is displayed instead of the image).
• Content background color – The background color of the content area.
• Customize columns – New columns can be added to the row with the Add new button and the size of the columns can be modified by dragging. You can also Post an unnecessary row by first clicking on the column and then the Delete button.

• Padding – Padding allows you to add more space to the column. Air can be added simultaneously in all directions, or by clicking the Add options function, the additional space can be defined separately for each page.
• Border – With the border, you can add edges to the column in the desired color. The border can be set for all pages at once, like filling, or separately for each page if necessary.

 

Contents

Elements for the actual content can be dragged from the Content tab to the rows and their columns in the e-mail (see image below).

After adding an element, by clicking on the element, the Content properties appear on the right side, with which the element can be modified as desired. More about the properties of each element below.

Text

• Text color
• Link color
• Row height
• Letter spacing
• Padding – Padding allows you to add more space to each side of the text. Air can be added simultaneously in all directions, or by clicking the Add options function, the additional space can be defined separately for each page.

A text editor is also used for the text element (see image below), which appears above the text element during the writing phase.

Picture

• Image size adjustment – ​​The image size can be set to be determined automatically, whereby the editor sets the image size to fit the area. If necessary, the automation can be turned off, in which case the image can also be made smaller.
• Trim
• Picture link – The web page or function that opens when you click on the picture.
• Padding – Padding allows you to add more space to each side of the image (this potentially reduces the size of the image). Air can be added simultaneously in all directions, or by clicking the Add options function, the additional space can be defined separately for each page.

 

Button

• Type of link – The web page or function that opens when the button is clicked.
• Width – The width of the button can be set to be determined automatically, in which case the editor will estimate the appropriate width for the button. If necessary, the automation can be turned off, in which case the button can also be made narrower or wider.
• Background color
• Text color
• Trim
• Row height
• Letter spacing
• Border Radius – Corner rounding.
• Content padding – Padding allows you to add air between the text and the borders, i.e. practically increase the size of the button. The filling can be added simultaneously in all directions, or by clicking the Add options function, additional space can be defined separately for each page.
• Border – Border allows you to add borders to the button in the desired color. As with filling, the border can be set for all pages at once or, if necessary, for each page separately.
• Inflation – The block settings can be used to add air around the button. The filling can be added simultaneously in all directions, or by clicking the Add options function, additional space can be defined separately for each page.

Divider

With the divider, you can divide the page into parts and thus make reading easier.

• Line – Line style, thickness and color.
• Width
• Align
• Padding – Padding allows space to be added around the divider. Padding can be added simultaneously in all directions, or by clicking more options, additional space can be defined separately for each page.

 

Social

The social element contains a collection of social media buttons. By default, the function displays certain icons, but it is possible to remove unnecessary icons and add new ones with the Add new icon function.

• Style of icons
• Icon URL – The web page or function that opens when the icon is clicked.
• Icon title and alt text – Can be displayed with the More options function.
• Trim
• Icon spacing
• Padding – With padding, space can be added around the row of images. Padding can be added simultaneously in all directions, or by clicking the more options function, additional space can be defined separately for each page.

 

Icons

The icons work with the same idea as the icons of the Social element, but instead of the ready-made list, it is possible to add completely freely defined images as icons, and text can be defined next to the icon if desired.

• Icon – An image that is represented as an icon.
• Icon URL – The web page or function that opens when the icon is clicked. Possible to display with More options.
• Icon title and alt text – Can be displayed with the More options function.
• Icon text – The text displayed next to the icon. Possible to display with More options.
• Font and font size
• Text color
• Align
• Spacing
• Padding – By filling the block settings, it is possible to add air around the icon/row of icons. Filling can be added simultaneously in all directions, or by clicking the Add options function, additional space can be defined separately for e