Structure and content of the template
The fundamental components of our templates are structures and content. Each template includes multiple structures, and each structure holds a specific type of content.
The basic difference between each structure lies in the number of columns. Each structure can have one, two, three, or four columns. You can add or remove individual structures by clicking on the "structure" tab and selecting the desired structure type. To add the chosen structure, simply drag it to the template. We recommend creating a template that includes multiple structures to better organize the content, avoiding placement in just one or two structures. This approach helps prevent scattering your content in the chosen layout, especially in the mobile responsive view. The structures function similarly to tables. If you want to align content vertically, you can do so by dividing it into structures, which ensures that the text aligns below one another in a narrow view.
You can insert content like text, images, buttons, dividers, spacers, social links, videos, GIFs, dynamic content, and even code into structures. Click on the "Content" tab, and you can add content by dragging it to the selected column in the block.
Basic template settings
In the "Settings" tab, you can customize the background color for the template, buttons, structures, and links.
You can also set individual text types, including three classes of titles, normal text, and button text (text color, size, and font). The last part of the settings features 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 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-hand panel, where you edit the content structure.
Text structure
To edit the text, simply click directly on the part you wish to modify and write anything you like. Basic text editing options, such as italics, bold, font size, font color, adding a link, and bullet points, are available in the toolbar. To create a new paragraph, press the Enter key; if you want to start a new line without a paragraph break, use the Shift + Enter combination.
To add an opt-out link, an online version link, or greeting merge tags, simply copy the chosen merge tag directly into the text. The text that follows the merge tag will maintain the same formatting as the merge tag in the template. You can modify basic text settings, such as font, color, vertical alignment, and column margins, from the left panel.
Picture
To insert an image into the template, drag the image content directly into the template and select "upload new image" from the left panel. You can "edit" the image using our image editor. Additionally, you can insert a link by clicking on the image. This allows you to adjust the image width, size, alignment (left, right, or center), and margin. Remember that alternative text will appear 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. Most e-mail clients do not have room for more than 600 pixels, so 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've already uploaded to your website, for instance, you can paste a link to that image in the Image Source/Dynamic Image field. This can also be useful if you replace it regularly, such as with the current date. You don't need to change every template; a dynamic link will take care of that for you.
GIF
To insert an animated GIF, search for the GIF image you need. You can add a link to the GIF that directs to web pages, as well as include 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.
Social networks
In this content structure, you set up icons for social networks. You choose which social networks to include in your newsletter (Facebook, Twitter, LinkedIn, etc.). Add icons by clicking "add more," and remove them by clicking the "trash" icon next to each icon. In the "Icon Style" section, you can select the appearance of the icons, such as square or round. To add a link to each icon in the "Social Settings," click the edit button and insert the desired link.
Video
The video feature lets you embed a video link (for instance, from a YouTube feed or Vimeo) with automatic loading of the video thumbnail directly into the template. The video itself is not included in the newsletter, as the email would be too large. Instead, only the image resembling a video is linked to the webpage where the video can be found. You can adjust the preview size.
Spacer
If you need to separate the content elements, 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) used to separate the individual content in the template. You can adjust the color, margin, thickness, style (solid, dashed, dotted), and height of the divider.