How do you create a beautiful newsletter using an interactive template editor that includes all its features?
Introducing the Topol email editor and explaining some basic principles for working with templates.
Structure and content of the template
The foundational elements of our templates are structures and content. Each template comprises several structures, with each structure holding a specific content type. The main distinction among structures is the number of columns they feature, which can range from one to four. To modify your template, simply click the "structure" tab, select your desired structure type, and then drag it into the template where you want it.
We suggest creating templates with multiple structures to organize the content better, preventing it from being confined to just one or two structures. This approach helps to maintain clarity, particularly in mobile responsive designs, and avoids content scattering within your chosen layout. Structures function similarly to tables; to align content vertically, organize it into structures, ensuring that text is neatly arranged beneath one another in narrower views.
It is possible to insert content such as text, images, buttons, dividers, spacers, social media, video, GIFs, 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
Utilize pre-built structures to create the template more quickly. Still, you can customize the structure to align with your theme. Feel free to move structures and content around within your template.
Basic template settings
In the Settings tab, you can customize the background color of the template, buttons, structures, and links.
You can also customize specific text types, including three title classes, standard text, and button text (which allows you to adjust text color, size, and font). At the end of the settings, there are four spacing options available.
Working with structures, width settings, or colour changes
Clicking outside the border of the structure allows you to edit it. You can also drag the structure to reposition it. By clicking on two icons, you can duplicate or remove the structure.
On the left panel, you can modify the following settings:
- Number of columns in the structure
- Background color (for narrow structures or when no background image is present)
- Structure width
- Border style and stroke for the structure
- Layout options (stretched to the edges or narrow)
- Top and bottom margins (to adjust structure height)
- Background image (replace the current image with your own, or opt for a background color)
- Properties of columns
Working with content
Editing content is straightforward. Simply click on the content structure you wish to modify. Most actions can be done either directly in the template or via the left-side panel where you edit the content structure.
Text structure
Click on the text you want to edit and type your content. Use the toolbar for basic formatting options (italics, bold, font size, font color, adding links, bullet points, etc.). To start a new paragraph, press the Enter key. To simply move to a new line, use Shift + Enter.
To include an opt-out link, an online version link, or greeting merge tags, simply copy the preferred merge tag into the text. Any text that follows the merge tag will adopt the merge tag’s formatting from the template. You can adjust basic text settings such as font, color, vertical alignment, and side margins via the left panel.
Picture
To add an image to the template, just drag it into the template area and select Upload new image from the left panel. You can edit the image using our image editor as required. By clicking on the image, you can also insert a link, change the image width, adjust its size, and set the alignment to left, right, or center, including margin settings. Don't forget to add alternative text for users without auto-upload enabled in their inbox.
Users can upload images in jpeg or png formats, limited to a maximum size of 2MB and a width of 600 pixels. This restriction exists since most email clients cannot accommodate widths exceeding 600 pixels. The template width is therefore adjusted to ensure the newsletter displays properly across all devices.
To use an image you've already uploaded to your website, you can paste its link into the Image Source / Dynamic Image field. This is especially helpful if you regularly update the image, such as with the current date. Instead of changing every template individually, a dynamic link can handle it for you.
GIF
To add an animated GIF, start by searching for the desired GIF image. You can then insert a link to the GIF, allowing users to click through to web pages. Additionally, you can set alternate text, alignment, image size, and margins.
Button
You have the ability to edit the text, links, alignment, margin, shape (round or square), colors, text color, font size, and button spacing.
Social networks
This content structure allows you to configure icons for social networks. You can select the social networks to include in your newsletter, such as Facebook, Twitter, LinkedIn, and others. To add icons, click "add more," and to remove them, simply click the "trash" icon next to the respective icon. In the "Icon Style" section, you can choose the shape of the icons, like square or round. To link each icon in the "Social Settings," click the edit button and enter the desired URL.
Video
The video function enables you to insert a video link (such as one from YouTube or Vimeo) into the template, automatically loading the video's opening image. The actual video is not included in the newsletter to avoid a large email size; instead, an image resembling a video links to the website where the video can be viewed. Additionally, you have the option to adjust the preview size.
Spacer
To separate content elements, you can add a vertical spacer, adjusting the gap's height as needed. Additionally, in a multi-column layout, you can create space to reposition other content either upward or downward.
Divider
This graphic element (line) serves to separate individual content within the template. You can customize the color, margin, thickness, style (solid, dashed, dotted), and height of the divider.
Custom code
You can insert your HTML code into each template. However, we advise this feature for experts only, as functionality isn't assured once you add your code. Specifically, scripts will not function in client mailboxes due to frequent security concerns and prohibitions on potentially harmful content. Thus, we strongly recommend against inserting any scripts, as it could harm your domain.
Anchor
To create an anchor in the template body, just insert the following HTML code into the template:
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.