In this article, we will introduce Ecomail template builder and explain some basic principles for working with templates.

In Ecomail, you have an option of using our ready-made templates, or you can create your own template from scratch. Are you too busy to create a template on your own? Don't hesitate to order a custom-made template created by our marketing specialists. For more information, contact us at support@ecomail.app.

In this article, you will find:

The basic components of our templates are blocks (structures) and a content. Each template consists of several blocks, and these blocks then contain an individual content.

The elemental difference between the types of blocks is in the number of columns they contain. A block can contain one, two, three or four columns. You can delete or add particular blocks by clicking on the "structure" tab and selecting the block type. To add a block, drag it anywhere to the template.

We recommend building a template using several structures, ie dividing the entire content of the template so that it is not only in one or two structures, since this type of layout could result in a faulty display of the newsletter, especially on a mobile device. The functioning of structures is similar to tables. If the content should be aligned, divide it into structures which will clearly declare which content belongs together and when viewed on a narrow display, the structures will be arranged below each other.

You can then insert content into the columns, such as a text, an image, a button, a space, social media icons, a video, products, a gif, a dynamic content, and even a code. Click on the "content" tab and then add chosen content to the template by dragging it to the selected column in the block.

You can also use premade blocks, thanks to which you can assemble the whole template faster. Of course, you can customize the block to suit the theme of the newsletter. You can arbitrarily move blocks as well as the content within your template.

You can also save blocks and then insert them in other templates. This will make it easier for you to work on creating the same parts and building a template faster.

Simply save the block by clicking on the first icon that appears after clicking on the block itself.

A window will pop up in which you will write the name for the saved block. When creating a campaign in the future, just drag the saved block into the template like any other content.

In the "Settings" tab you can set the color iof the background, buttons, blocks and links. Here you can also preset individual types of text such as 3 heading classes, plain text and button text (text color, size and font). As a final part of the settings, there are four text line spacing options.

If you click outside the content of the block, you will get to its editing. You can also move a block by dragging. By clicking on the two icons it is possible to duplicate or delete the block.

In the panel on the left you can then set:

Working with content sections is easy. Just click on the content block you want to edit. Most actions are performed either directly in the template or in the left panel in the content block editing.

Simply click directly on the text you wish to edit and type as you wish. You can make basic text edits in the toolbar (italics, bold, font size, font color, adding a link, bullets, etc.). If you jump to a new paragraph, use the Enter key; Enter. If you want to add a link to unsubscribe, a link for the online version or merge tags such as an address, simply copy the merge tag directly into the text box. The inserted text after the merge tag will have the same formatting as the merge tag formatting in the template.

In the left panel you can set basic text properties, such as font, color, top and bottom alignment, or column offset from the sides.

To insert an image into the template, move the image directly into the template and select "Upload new image" in the left panel. You can "edit" the image using our image editor. You can also set a link for clicking on the image, the width of the image, the size of the image, left, right or center alignment, as well as indentation. Do not forget to set the alternate text that appears if someone does not have automatic image loading enabled in their inbox.

Images can be uploaded in jpeg or png formats with a maximum size of 2MB and a maximum width of 600 pixels. Most email clients do not have space for email larger than 600 pixels. The width of the template is set so that the newsletter is displayed correctly on all devices.

If you want to use an image that you have already uploaded somewhere, for example on your website, you can insert a link to the image in the Source url / Dynamic image field. This can also be useful if you change it regularly, for example with the current date. You do not have to change every template, the dynamic link will do it for you.

To insert an animated gif image, search for the image you need from the Giphy service. You can embed a click-through gif link to webpages, alternate text, alignment, image size, and indentation.

A button can have its text, link, alignment, round or square borders, button color, text color, font size, and indent set.

Within this content block you will set icons for social networks. You choose which all social networks you want to have in the newsletter (Facebook, Twitter, Linkedin and others). You add icons using "Add another" and remove them by clicking on the "trash" next to the icon. In the "icon style" it is possible to select the appearance of the icon - square, round, etc. To add a link to each icon in the "Networks settings", click on the edit button and then insert the desired link.

The video feature allows you to insert a link to a video (such as from YouTube source or Vimeo) with automatic loading of the opening image of the video directly into the template. The video is not sent in the newsletter, the email would be too big. Only an image that looks like a click-to-video is uploaded to the webpage where the video is located. You can adjust the preview size and indent.

If you need content elements farther apart, you can insert a vertical spacer. The height of the spacer can also be adjusted. You can also insert a spacer in a block with multiple columns and move other content up or down.

It is a graphic element (line), which is used to separate the individual contents in the template. You can set the color, indent, thickness, style (solid, dashed, dotted), and height of the divider.

You can also insert your own HTML code into each template. However, we only recommend this to experts. Full functionality is not guaranteed after adding your own code. In particular, scripts will not work in client mailboxes, as they are often carriers of malicious content and have been generally banned. Therefore, we recommend you to not add your own scripts at all to avoid degrading your domain's reputation.

Product feeds can also be inserted into templates using an XML feed. XML feed is a data file that is used to export goods and all necessary accompanying information to price comparators (Heureka, Zbozi.cz, Google Merchants). In our case, thanks to the XML feed, you upload products to the Ecomail system, and then easily and quickly insert products into templates in an interactive editor.

At the moment, we are preparing a dynamic product block function for you, which will design products for your customers that they have been interested in in the past, or products similar to or related to these products.

You can use dynamic content if you have a data feed embedded in your account. For the content, you then select the given feed and set the identifier (in our case email) and the key - ie the content that will be inserted from the feed.

Here is an example where the identifier email and the key that will be copied into the template are recommendations. In the data feed below, you can see that the individual emails have a recommendation item with their own value, which is then overwritten for each email separately, as well as for personalization and merge tags.

With a carousel, you can insert a gallery of multiple images for your recipients to scroll through. You can add up to five images to the carousel.

The carousel will then appear in the recipient's mailbox as follows:

Similarly to the other blocks, the left menu contains carousel settings such as thumbnail visibility, style and size of arrows for scrolling between images, indentation, and appearance of images on mouseover.

⚠️ Arrows will not appear in mail clients that do not support the arrow feature in Carousel. You can still switch between images by selecting a certain image.

If you have any further questions regarding our template builder, you can contact us at support@ecomail.app

​