Basic work with the interactive template editor
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?

Introducing Topol email editor and explaining 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 crucial difference between each structure is the number of columns in each of them. 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 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.

It is possible to 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.

Pre-made Structure

Use pre-built structures to build the template faster. However, you can still customize the structure to fit your theme. Move structures and content freely within your template.

Basic template settings

In the "Settings" tab you can set the background colour 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 colour, size, and font). In the last part of the settings are four types of spacing options.

Working with structures, width settings, or colour 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.

Sn_mek_obrazovky_2019-08-07_v_11.36.26.png

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

  • Number of columns in a structure

  • Background colour (in case the structure is narrow or if there is no background image)

  • Structure width

  • Structure border and its stroke style

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

  • Top and bottom margin (structure height adjustment)

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

  • Column's properties

Working with content

Working with content 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

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 colour, adding a link, bullet points, etc.). When you want to create a new paragraph, use the Enter key. Or 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, colour, top, and bottom alignment, or margin of the columns from the sides, in the left panel.


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.

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, colour, text colour, font size, and spacing of the button.

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.

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.

Custom code

Into each template, it is possible to insert your HTML code. However, we recommend this feature only to experts. The functionality is not guaranteed after adding your code. Especially, the scripts will not work in client mailboxes, as they often carry malicious content and have been banned. Therefore, we recommend you, do not insert scripts at all. Your domain might get impaired.

Anchor

To create an anchor in the template body, just insert the following HTML code into the template:

Sn_mek_obrazovky_2019-08-07_v_12.23.02.png

In the template, you just insert a link to the text, where you select "Anchor in this page" as the link type and select the "Anchor name" anchor.

Did this answer your question?