How to create a beautiful newsletter in interactive template editor including all its features.
In this article, we introduce the TOPOL.io 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 which 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 like 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.
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.
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.
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.
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)
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.
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.
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.
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.
You can edit text, link, alignment, round or square margins, color, text color, font size, and spacing of the button.
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.
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 preview size.
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.
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.