All Collections
TOPOL Free version
How to create a template in Topol FREE email builder
How to create a template in Topol FREE email builder

Learn how to create an email template

Tomas Sek avatar
Written by Tomas Sek
Updated over a week ago

How to create a beautiful newsletter in interactive template editor including all its features.

In this article, we introduce the TOPOL email editor and explain some of the basic principles of how to work with templates.

Structure and content of the template

The basic building blocks of our templates are structures and content. Each template consists of several structures, and each structure contains an individual type of content.

The basic difference between each structure is the number of columns in each structure. It can be a structure with one, two, three, or four columns. You can remove or add individual structures by clicking on the "structure" tab and selecting the structure type. Add chosen structure by dragging it somewhere to the template.

We recommend you, to create a template that will consist of multiple structures, in order to divide the entire content of the template, so that it is not positioned just in one or two structures. This way, you will avoid scattering of your content in the chosen layout, especially in the mobile responsive view. The structures work in a very similar way to tables. If you want to align the content underneath each other, you can achieve it, by dividing it into structures which will mean that in the template, the text is aligned below each other in a narrow view.

Screenshot_2020-12-23_at_15.05.40.png

You can then insert content such as text, image, button, divider, spacer, social, video, gif, dynamic content, and even code into structures. Click on the "Content" tab and then you can add content by dragging it to the selected column in the block.

Screenshot_2020-12-23_at_15.05.58.png

Basic template settings

In the tab "Settings" you can set the background color of the template, buttons, structures, and links.

You can also preset individual text types such as 3 classes of titles, normal text and button text (text color, size, and font). In the last part of the settings are four types of spacing options.

Screenshot_2020-12-23_at_15.06.46.png

Working with structures, width settings, or color changes

If you click outside the border of the structure, you will be able to edit it. You can also drag the structure in order to move it. By clicking on two icons you can duplicate or delete the structure.

Screenshot_2020-12-23_at_15.07.39.png

At the panel on the left side, you can edit:

  • number of columns in a structure

  • layout (stretched block over the edges or narrow structure)

  • Top and bottom margin (structure height adjustment)

  • background-color (you can find it in the case the structure is narrow or if there is no background image)

  • background image (you can delete the image and replace it with your own or just use a background color)

Screenshot_2020-12-23_at_15.09.13.png

Working with content

Working with content parts is simple. Just click on the content structure you want to edit. Most actions are performed either directly in the template or on the left side panel of the where you edit the content structure.

Text structure

Simply click directly into the text you wish to edit and write anything you like. Basic text editing can be done in the toolbar (italics, bold, font size, font color, adding a link, bullet points, etc.). When you want to create a new paragraph, use the Enter key, if you just want to jump to a new line use the combination of Shift + Enter.

To add an opt-out link, an online version link, or greetings merge tags, simply copy chosen merge tag directly into the text. The pasted text after the merge tag will have the same formatting as the merge tag formatting in the template.

You can edit the basic text settings, such as font, color, top, and bottom alignment, or margin of the columns from the sides, in the left panel.

Screenshot_2020-12-23_at_15.11.08.png

Picture

To insert an image into the template, drag the image content 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 insert a link if you click on the image you can edit the image width, image size, left, right, or center alignment, as well as margin. Keep in mind the alternative text that appears if someone doesn’t have auto-upload 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. It is because most e-mail clients do not have room for more than 600 pixels. The width of the template is set accordingly, to display the newsletter correctly on all devices.

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

Screenshot_2020-12-23_at_15.11.34.png

GIF

To insert an animated gif, search for the gif image you need. You can insert a link on the gif, to click through to web pages, alternate text, alignment, image size, and margin.

Button

You can edit text, link, alignment, round or square margins, color, text color, font size, and spacing of the button.

Screenshot_2020-12-23_at_15.11.53.png

Social networks

In this content structure, you set up icons for social networks. You choose what social networks you want in your newsletter (Facebook, Twitter, Linkedin, and more). Add icons by "add more" and remove them by clicking on "trash" next to the icon. In the "Icon Style," you can select the icon appearance - square, round, etc. To add a link to each icon in the "Social Settings", click the edit button and then insert the desired link.

Video

The video feature allows you to embed a video link (for example, from a YouTube feed or Vimeo) with automatic loading of the video opening image, directly into the template. The video is not sent in the newsletter, the email would be too large. Only the image that looks like a video is linked to the webpage where the video is located. You can edit the preview size.

Screenshot_2020-12-23_at_15.12.23.png

Spacer

If you need the elements of the content apart, you can insert a vertical spacer. The height of the gap can be adjusted. You can also insert a space in a multi-column structure to move other content up or down.

Divider

It is a graphic element (line) that is being used to separate the individual content in the template. You can set the color, margin, thickness, style (solid, dashed, dotted), and divider height.


Did this answer your question?