Email template editor

Select template to edit

First, when you are creating a campaign you can choose between selecting one of the templates offered by Acumbamail (from New Templates), reuse some of the ones you have already used (My Templates), or import your own template.

as a novelty since August 2021,now you can also start editing two templates from the editor completely adapted to your web design, with your logo and corporate colors. To generate them, simply access the templates overview and enter the URL of your website.

You can also modify a template from the Templates section within Newsletters, to use it later in a campaign.

If you want to use one of our templates, you can filter by theme to easily find the one that best suits the campaign you want to send.

Once selected, you will access the editor so you can customize it, modify its structure, or add blocks with different content. The editor consists of three parts:

• The template being edited, on the left
• The editor itself, divided into content, rows and settings
• The buttons at the top left of preview (display the template on different devices) and Show Structure (view the template by grids, which helps to design it more accurately), as well as the option to edit the template in desktop and mobile version on the fly,seeing at all times how one version and another looks. For more information about this function, go to the responsiveoptions section.

General editor commands

• To add a content block to the template, simply drag it to the place you want
• If you double click on the specific content block, you will be able to duplicate it, delete it or drag it to another place by clicking on the white crosshair

• Likewise, by double clicking on a specific content you will have access to its settings in the editor part, on the right

• Keep in mind that the content area is always included within a row , so if you want to modify an element that affects the entire row (for example, the background color), you will have to click on the specific row (the easiest way is to click from the sides)

When you double click on the specific row, you will be able to access the general settings of that row on the right.

• If you want to undo any changes, you will find on the left an undo button once you make changes to the template

If you click on the clock icon, you will see the last changes made:

Content

In the Content section you can add different blocks according to what you need. To add each type of content, you just have to drag each block inside the template, selecting the place where you want to include it. Each content block has its own characteristics, which are detailed below.

Title

To add a title block, you must drag the block corresponding to the place in the template to which you want to add it. The title block will help you hierarchize the content.

You can enter titles in your email template to rank the content you include, just like on a website or blog with a title 1, 2, and 3 (H1, H2, and H3).

When you drag the title block, you will find two text editing panels :

• On the right, we can change the hierarchy of the specific title (H1, H2 or H3), the font and its size, the color of the text and the links, the line spacing and the direction of the text:

• The other pane will appear when you click the text itself. In it we can:
  • change the font style (bold, italic, underline, strikethrough....)
  • insert special characters
  • change the color of the specific text and highlight it in different colors
  • add a link or link
  • The ability to add personalized content to customize your submissions with, for example, the name of your subscribers. In this article we explain this aspect.

Text

To add a text block, you must drag the corresponding block to the place in the template where you want to add it.

When you drag the text block, you will find two text editing panels:

• Content properties, right
• A gray editor over the text block

Content Properties

In the Content Propertiessection, you can make an adjustment of characteristics for that block, which are the following: text color, link color, line spacing,modify text spacing,top, bottom, right and left margins,and the option to hide this block in desktop or mobile view.

Editor on the content block

In the block itself, when selecting the text, an editor will appear with the options to change:

• The typeface, size, style (bold, italic, underlined, strikethrough ...) and the alignment of the text

• Insert special characters (in the omega icon) , superscripts or subscripts

• The option to maximize or minimize the editor while you are modifying a text

• Add numbered or bullet lists

• Change the color of the text and highlight it in different colors

• Add different types of links (URL, email, files, call and sms).

• We will also have access to special links (view in browser, unsubscribe, modify data and renew GDPR consent)and the possibility to add personalized content to personalize your submissions with, for example, the name of yoursubscribers. In this article we explain in detail how to use custom tags for each subscriber.

Also, if you copy and paste text that is italicized or bold, the text editor will keep both formats.

Fonts available

In most online text editors we tend to find the same set of fonts available. Why is it so limited and why can only these fonts be chosen? Because they are the ones that are usually installed on our devices. These are the sources that are usually known as secure sources, in English "web safe".

The set of fonts available on our computers is defined by the fonts that are included in our operating system, those added by the applications that we install on our devices and the fonts downloaded manually over time.

As you can imagine, the list of pre-installed fonts can vary greatly from device to device. However, there is a set of sources that are considered common, and therefore safe. We refer to those sources when we talk about secure web fonts. They are "safe" because they are available on almost all devices. and "web" because they are used when editing documents online.

In general, you'll find secure web fonts at the top of any editing tool. They are usually the following:

- Arial

-Georgia

-Helvetica

- Lucida Sans

- Tahoma

- Times New Roman

- Trebuchet MS

- Verdana

Now, the problem with these fonts is that they are only a handful and, therefore, a selection that limits the design and customization of an email marketing campaign.

One solution is to expand the set of fonts available by using web fonts.

What are web fonts for?

Web fonts are available online and are provided by services like Google Fonts. Your device downloads them only when it's really necessary without you having to download them one by one.

Web fonts exist to help us expand our text style options and go beyond standard web-safe (and limited) fonts. There are a multitude of websites that allow you to download fonts uploaded by designers and third parties,such as DaFont or MyFonts.

It seems like the perfect solution for a publisher like ours, but not all email clients support them, unfortunately.  Widely used and well-known mail clients such as Outlook, Gmail and Yahoo! do not support some web fonts and display text with its default font.

For this reason, in our tool we have created groups of equivalent fonts called " font stacks") using cascading style sheets that automatically tell any email program how to return to a secure font when that email client does not support it. These groups function as a descendant list of available options: that is, if the first one is not available, it moves on to the next one.

Booking sources in our tool

In our tool, fonts are grouped in this way to offer the best possible alternatives. This ensures that the design does not break when the selected font is not compatible with the receiving mail client.

The variables we consider when building these font stacks are the shape and size of the font.

Below, you can see the simplified list of the backup sources available in our editor:

Web Source > List of Secure Backup Options for the Web

Bitter > Georgia > Times > Times New Roman > serif

Serif Droid > Georgia > Times > Times New Roman> serif

Lato > Tahoma > Verdana > Segoe > sans-serif

Open Sans > Helvetica Neue > Helvetica > Arial > sans-serif

Roboto > Tahoma > Verdana > Segoe > sans-serif

Sans Pro > Tahoma fountain > Verdana > Segoe > sans-serif

Montserrat > Trebuchet MS > Lucida Grande > Lucida Sans Unicode > Lucida Sans > sans-serif

Ubuntu > Tahoma > Verdana > Segoe > sans-serif

Keep in mind that we have focused on the design of the typeface and that we have not added too sophisticated or complex fonts. For example, we have omitted the font "Lobster", which does not have a suitable and safe equivalent font.

Image

If you want to add an image, you will have to drag the Image block.

Content Properties

In the properties of this content you can choose some characteristics such as the size of the image, the alignment, the url of the image, the alternative text, add a link to which the image directs, define margins and hide in mobile or desktop view . In the option Change image you can replace it with another while maintaining these settings.

When you add one of these blocks, under Find Imageyou will have access to your multimedia library where you can access images that you have previously uploaded, upload a new image or use our free royalty-free image search engine.

We recommend that images be the same width as the content area, i.e. not exceed 600 pixels. In case you included a row with two columns with one image each, we recommend that the width also fit the content area.

If you want more information on how to optimize images for email marketing (formats, resolution and color mode), see our article.

Button

The editor also allows you to add buttons to highlight the most important links of your campaign.

Content Properties

In its properties you can select the URL you want to link, and the size and styles of the button so that you can easily integrate it with the rest of the email design. You can also write the text inside the button, and edit it like normal text.

This is the best way to link to your own URL or link a file, rather than attaching a document as a PDF. Email marketing platforms do not allow attachments directly in the email as they affect the deliverability of campaigns, greatly increasing the possibility of email systems detecting content as spam, so you can create a button, select the Link File option and upload the attachment to Acumbamail. The file will be available in an additional tab when you click the button.

This link or link can open a web page or document with a resulting URL, send an email, make a call, or send an SMS.

You can also link to a calendar event that your subscribers access through an iCalendar or ICS file. Simply create the ics file (there are many pages where you can create it for free, searching Google without problem), download the resulting file and add it in the Link File option in the same way that you would attach an attachment. Your subscribers will access the calendar event from its corresponding app (Google Calendar or similar) and can confirm its attendance.

If you want to send a survey in your email, you have two options:

• Create it with a free external tool like Google Forms or Typeform and send the link with a button in your email
• Keep track of clicks by creating, for example, two buttons with the A and B options. Learn more about campaign reports inthis article.

separator

Another content that you can include in your template is a separator, a line to differentiate the different blocks or sections of your email.

Content Properties

As in the previous cases, the separator is editable in style, color, and thickness.

Social

The Social block allows you to include buttons with links to your Social Media profiles.

Content Properties

In this block, you can select the collection of icons that you prefer, and link them to the profiles of your networks so that they are accessible to your subscribers.

But not only will you be able to link directly to your Social Media, but you'll also be able to encourage your email campaign to be shared in Social Media with a single click if you select the Social Engagement option when adding an icon.

Once you select the social engagement button, it will appear with the share tag in the editor. You can also add a text with which your publication is shared by default. Here's an example:

And this would look when a subscriber clicks the share button on Social Media:

If you want to change the link (so that it appears after the text), remember to put the text first and add the [ShareOn] tag at the end:

Finally, if you want to add a direct link to your Whatsapp Business, you can check the information in this article.

HTML

The HTML block will allow you to paste code into the template section. This option is only recommended for users who know how to use this language in an advanced way, since it could interfere with the correct HTML of the template, which is a factor in ending up in the SPAM folder.

Content Properties

You will simply have to paste your code in the box enabled for it.

HTML tags allowed

Our tool will automatically fix some errors,such as HTML tags that are left open and remove unusable code, such as Script or Iframe tags. These code tags are not supported by most email clients and can cause problems in the delivery of your campaign or security risks to the publisher and the applications that run it.

List of allowed tags:

a, abbr, acronym, address, area, bdo, large, blockquote, button, title, center, quote, code, colgroup, dd, of, dfn, dir, div, dl, dt, em, fieldset, source, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, tag, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, fort, sub, sup, table, tbody, td, textarea, tfoot, th , thead, u, tr, tt, u, ul, var

List of allowed attributes:

general attributes: style, id, class, data- *, title
a: href, name, target
img: align, alt, edge height, hspace, src, vspace, width, usemap
table: align, bgcolor, border, cellpadding, cellspacing, width
tbody: align, valign
td: align, bgcolor, colspan, height, rowspan, valign, width
tr: align, bgcolor, valign
tfoot: align, valign
th: align, bicolor, colspan, height, rowspan, valign, width
thead: align, align
li: type
map: name
area: alt, coords, href, shape, target

video

With the Video block you can link a YouTube or Vimeo video, so that a prominent image is displayed in the email that leads the user to this content.

Content Properties

You will have to paste the URL of the video, and a featured image will be automatically generated that will be linked to this URL. To modify the featured image, you will have to modify it over the original video hosted on Youtube or Vimeo.

We recommend that the width of the video be adjusted to the width of the content area, i.e. not to exceed 600 pixels. If you include columns, the video should fit the width of the column.

Icons

You can also add icons from images you've previously uploaded to Acumbamail or select one already available.

Content Properties

When you have dragged the icon block, click Add icon or Content Properties :

You can then select an icon that you've recently added to the Acumbamail gallery by clicking the blue Change Picturebutton.

Also, in the right panel you can change the size of the icon, its position and its alignment, among other aspects.

Menu

You can add a menu to make it easier to navigate the email template or highlight a specific aspect or link.

Content Properties

Once you have dragged the menu, in the Content Properties section on the right, you can start adding sections included in your menu or index by clicking Add element .

For each menu item you can modify:

• The text
• The type of link (open web page or link file, send email, make call or send SMS)
• The target , that is, if the link will open in a new or current tab

If you add different items to the menu, you can click on them to rearrange them:

Below you can change global menu items such as font, font color and links or if you want the menu to have a vertical or horizontal orientation.

Add a menu for mobile

To improve navigation and usability on mobile devices, you can also add what is known as a hamburger menu.

The name hamburger menu refers to the icon represented by three horizontal stripes that indicates a drop-down menu. This type of drop-down menu is mainly used on mobile versions of pages to save screen space.

To include a burger menu, you must activate it from content properties. Once activated, you can customize it however you want.

Countdown

We recently added the option to add a countdown for our users with PRO and Enterprise plans.

Once you drag the countdown block, you will access a pop-up window to configure your countdown:

• Timer type: to mark a certain date (you can select the time zone and date), start when you open the email or when the email starts campaign 
• Timer style: normal, circle-shaped or block-shaped
• Timer size and colors
• Language, you can select the one you want and the changes will be applied on the next time
• Text and digit font
• Background image
• The option to display an image when the date ends

Once you make all the relevant changes, you can hit Save & Close.

GIFs

As with the stickers, we also have a GIF search engine, or you can include them by uploading them from your computer as a normal image. If you upload your own GIFs, remember to optimize them correctly: the standard is usually about 600 pixels wide.

Content Properties

It also has editable properties like the rest of the images.

Stickers

You can also add animated Stickers that you can search directly in our search engine.

Content Properties

You can edit them like any other image, and include a linked URL in them.

Rows

In this section you will find different categories of rows that you can drag and include in your design.

Empty rows

This category includes rows without content, but with different layouts that will allow you to structure your content in blocks.  You can select a single row that occupies the entire width, two columns of equal size, two columns that each occupy a certain percentage, etc.

The maximum number of columns you can add is six. Keep in mind that the content you add will always be subject to the structure of the row in which it is included. This structure is responsive so the width will adapt to the display devices.

Predefined rows

If you have a paid plan, in the Rows tab you will find an additional drop-down with a series of categories.

You'll find predefined rows in the following categories:

• Header. Here you will find rows with useful content distribution for the header of your emails or landing pages.
• Content. Here you will find rows with distribution of useful content for the body or central part of your emails or landing pages.
• Footer. Here you will find rows with useful content distribution for the final part of your emails or landing pages.

You can take advantage of these predefined rows as a starting point (both structure and content), where you will only have to customize the colors, images, texts and links already located.

Save new custom row

Apart from the predefined rows, you have the possibility to create and save your own rows. Once you save a row, it will be reusable in the rest of your templates.

To save a row, you will only have to select it and hit the save button (the first of the three buttons in the upper right corner).

This will open a popup where you will have to choose the name of your row and decide under which category it will be saved. The categories available are: Header, Content, Footer and Others.

Once saved, if you select its category you can find it along with the rest of the predefined rows.

You should note that this feature is not available on the free plan. To pricing plans, depending on the specific plan you can save more or less rows. If you have reached your save row limit, the save action cannot be completed.

Update a saved row

Once you've saved a row, you can drag it to add it to any of your templates, as long as they're the same type. This means that the saved rows for the email templates will not appear to you in the landing page editor and vice versa.

Starting from a saved row, if you drag it to the editor and apply changes to it, you have two options:

• Save a new row with your changes. This way, you'll still have the original row (the first one you saved) and this new version available separately. To do this you will have to check "No" in the option of Overwrite existing row? (default option).
• Overwrite the original row with the changes. This way you can change the name of the row, move it from category or update its content. To do this you will have to check "Yes" in the option of Overwrite existing row?

Delete a saved row

You can delete rows that are no longer useful to you. To do this you have to click on the Delete button that appears in the lower right corner of each row. Once you have clicked and confirmed the action the row will be deleted.

Add a flat background or image to your template

If you want to add a specific background to your template , whether it's another flat color or a background image, keep in mind that you will have to modify the background for each row, since they work as independent blocks. The steps you have to follow are:

• Double click on a specific row (from the sides)
• If you want to change the current color to another, select it on the right, in Row background color in Row properties
• If you want to change the background to a specific image, activate the Row background image option . Then select the image with the Change image Button . In this option you can choose that the background image occupies the full width (recommended), appears repeated like a moisaic or is centered. If you want all the rows to have this specific background, you will have to repeat the process row by row.

Settings

In this section you can configure the general settings that affect the entire template.

You'll be able to set the maximum width of the content area, whether you want the content area to be left-aligned or centered, the background color, the color of the content area, the default font, and the color of the links. All these properties can be modified individually in each module, but the ones you select here will be the ones that appear by default.

Preview / Show structure

In this section, in the upper left margin of the editor, you can find two buttons:

If you select preview, you'll be able to see what your template will look like on desktop and mobile. This is a generic preview.

If you need to preview the template on different devices, browsers, or specific email clients, you can do so in step 5 of creating campaign. You'll also be able to make changes while viewing the desktop and mobile view in the option below.

If you select Show Structure,you'll be able to see the layout with all the blocks while editing the template.

Responsive template options for mobile devices

When we use the term "responsive" we refer to the adaptability of a design to be displayed correctly on different devices, from desktop computers to tablets and mobiles.

In addition to the option to show a preview adapted to different devices seen above, in the editor itself you have at your disposal specific tools to facilitate this adaptability:

• In addition to being able to access a preview of your template, you can see how it looks in both the desktop and mobile version on the go, while you're editing it.

• All content blocks have the option to hide in both the desktop and mobile version. You can use this option when clicking on a block of content, on the right side of Module Options.

This option gives us the possibility to duplicate our content and ensure that it is fully responsive. For example, if we see that a text is not adapting correctly to the mobile version we can always duplicate that text, and hide each one on a device, and adapt the one that will be taught in the mobile version to ensure its correct display.

• Option Do not stack on mobile for each row:

This option is available so that the columns are displayed the same on mobile devices as on the desktop version. It should be noted that the more columns our rows have, keeping the option "Do not stack on mobile" disabled, the more we will compromise the adaptability of our design , especially in modules that contain text.

That is why this option is always activated by default and our recommendation is that it remain that way . The best option is that, although we have made a specific design in the desktop version, the mobile version has a different design, in which all the content is stacked and comes out one after the other, without distinction between columns, to ensure a better visualization.

Good practices to avoid the SPAM folder

Both the HTML and the content you include in the email have a direct impact on the deliverability of your campaigns. Therefore, when you edit your template with the editor, you should keep these good practices in mind to avoid errors that could cause it to reach the spam folder.

HTML construction

Alt tags in images

All images must include their respective alt-"contenido_de_la_imagen. It is also very useful in email managers that do not show the images until the recipient indicates it, since you can include a text that will be seen from the beginning and that will be subsequently replaced by the image. But be careful, because including text that includes certain words, and which we list later, can cause your newsletter to go directly to SPAM.

Images too large or heavy

Make sure that the images of your newsletters do not exceed 500kb, for this, it is advisable to use formats such as .jpg or .png, the latter in the case of images that require transparency.

Even if your image is light, try not to have a very large dimensions. Images of large proportions earn negative points in your shipments. As a reference, do not exceed 600px x 400px, this being already a dangerous limit. In the case of requiring your image to have these dimensions, divide them into several "blocks" that make up the different parts of a puzzle made up of tables.

Image / text ratio

Including a larger spatial proportion of images than text is also a negative element. Make sure that the spatial amount of text always exceeds the spatial amount of images. Avoid using an excessively small font size.

In this case, the background color of a table or one of its components is not taken into account, so avoid using images if they are to fill a part of the table with a color.

HTML content

Writing the message

You should try to minimize capitalization in your submission, as well as repetitions in exclamation (!!!) and question marks (???). Try not to duplicate content within your shipment, or repeat phrases or words more than strictly necessary, especially if it is about amounts of money or currency symbols. Of course, no bad language or inappropriate words.

Try to avoid too commercial writing, a personal touch will always be a point in your favor. This can be achieved by using a personal email as the sender, adding a postscript (the most read part within an email) in your template and using a personalized greeting.

Finally, always check your template carefully to avoid any spelling errors in the wording.