Template editor

Acumbamail's template editor allows you to design emails in a simple and intuitive way using a drag & drop system that offers many possibilities for you to create your design from scratch, or adapt one of our free templates. In this article you will be able to learn in detail about all the possibilities that the editor offers you.

Select template to edit

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

You also have the possibility of starting to edit two templates from the editor completely adapted to your web design, with your logo and corporate colors. To generate them, you just have to access the template overview and enter the URL of your website.

On the other hand, at any time you can create or 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 for Preview (view the template on different devices) and Show structure (view the template in grids, which helps design it more accurately), as well as the option to edit the template in the desktop version ( desktop) and mobile on the go , seeing at all times how one version looks over another. For more information about this feature, go to the responsive options section .

General editor commands

These are the basic actions required to start using the editor:

• To add a content block to the template, simply drag it to the location 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 an undo button on the left once you make changes to the template. If you click on the clock icon, you will be able to 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 corresponding block to the place in the template where you want to add it. The title block will help you rank 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).

Content properties

In this section you can configure the following:

• Automatic text generation based on AI (only accessible for Pro and Enterprise plans ).
• change the hierarchy of the specific title (H1, H2 or H3), the font and its size, the color of the text and links, the line spacing and the direction of the text.

Popup toolbar

When you click on the text itself, a menu or pop-up bar appears from where you can:

• Change the typography style (bold, italic, underlined, strikethrough….)
• Insert special characters
• Change the color of specific text and highlight it in different colors
• Add a link or link
• Add personalized content to customize your shipments with, for example, the name of your subscribers. In this article we explain this aspect to you.

Text (obsolete)

⚠️ This block allowed text to be entered into the design. However, it has been obsolete in favor of the new paragraph and list type blocks.

If you have a block of this type already included in your designs, you can continue editing it normally as described in this section. However, to incorporate new texts into your templates we recommend that you use the new paragraph and list elements.

Content properties

In this section you can carry out a characteristic adjustment for said block, which are the following:

• Text color, link color
• Line spacing, modify text spacing, top, bottom, right and left margins
• Option to hide this block in desktop or mobile view

Popup toolbar

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.

Paragraph

This block allows you to enter text into the design.

Paragraph vs Text

This block is similar to its predecessor Text block, but has some differences:

• Some formatting options have been moved from the toolbar that appears above the text block itself to the side menu (in the "Content Properties" section). In this way the toolbar is more compact and less saturated with options. These options are:
  • Source (family)
  • Letter size
  • Text alignment
  • Text direction
  • Insert lists (this is now handled with the new List element).
• In the toolbar, we have added:
  • A new button next to the emoticons button, which allows you to enter a " non-breaking space ". This type of space (   ) between two words indicates that they are two words that cannot be separated with a line break.
• In the "Content Properties" section, you can now also configure the following:
  • Font Weight: Allows you to select between normal or bold font variants.
  • Paragraph Spacing: Provides control over the spacing between the carriage return and line feed. This option thus allows you to increase or reduce the space between paragraphs.
• Unlike the Text block, this element allows automatic text generation using artificial intelligence .

Content properties

You can adjust the following features:

• Automatic text generation based on AI (only accessible for Pro and Enterprise plans ).
• Font setting: family, thickness and size.
• Color adjustment: text color and link color.
• Spacing: line spacing, text spacing, paragraph spacing, margins (top, bottom, right and left).
• Text direction and alignment
• Be able to hide this block in desktop or mobile view.

Popup toolbar

In the editor itself, when you click on the paragraph text, a toolbar appears with the following configuration options:

• The style of the text (bold, italic, underlined, strikethrough, color options, etc.)
• Insert superscripts, subscripts, emoticons, non-breaking spaces and special characters (Omega icon).
• The option to maximize or minimize the editor while you are modifying a text
• Add different types of links (URL, email, files, call and sms).
• Access to special links (view in browser, unsubscribe, modify data and renew GDPR consent )
• Access to personalized content to personalize your shipments with, for example, the name of your subscribers . In this article we explain in detail how to use custom labels for each subscriber.

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 typically known as web safe sources .

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 manually downloaded sources over time.

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

Generally, you'll find secure web fonts at the top of any editing tool. They are usually as follows:

• 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 personalization of an email marketing campaign. One solution is to expand the set of available fonts by using web fonts.

What are web fonts for?

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

Web fonts exist to help us expand our text styling options and go beyond standard (and limited) web-safe 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 an editor like ours, but not all email clients support them, unfortunately. Widely used and well-known email clients, such as Outlook, Gmail and Yahoo! They do not support some web fonts and display text in their default font.

For this reason, in our tool we have created groups of equivalent fonts called Reserve Fonts (in English, called "font stacks", or literally translated "font stacks") using cascading style sheets that automatically tell any program email how to return to a secure source when that email client doesn't support it. These groups function as a descending list of available options: that is, if the first one is not available, it moves to the next one .

Reservation sources in our tool

In our tool, fonts are grouped in this way to offer the best possible alternatives. This ensures that the layout does not break when the selected font is not compatible with the recipient 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 reserve sources available in our editor

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.

List

The list block complements the Paragraph block, since it also allows you to enter text but with the specific list format. That is why they share configuration options.

The specific options for this block are mentioned below.

Content properties

For the list type block it is possible to configure the following:

• List Type: Allows you to choose an ordered or unordered list.
• List Style: Allows you to select some basic style options for the list.
• Start list from: This is an option accessible if you choose an ordered list. It allows you to indicate from which number the numbering begins. It is useful, for example, in case different blocks are used to represent the same list.
• List Item Spacing
• Indentation of list items
• Automatic text generation based on AI (only accessible for Pro and Enterprise plans ).

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 Change image option you can replace it with another one while maintaining these settings.

When you add one of these blocks, in Search Image you will have access to your multimedia library where you can access images that you have previously uploaded, upload a new image or use our search engine for free copyright-free images .

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 in 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.

This element also allows automatic AI-based text generation (only accessible for Pro and Enterprise plans ).

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.

Space

This block allows you to add separator space in the template. Although this can also be achieved with the Separator block (making the line transparent), this specific block allows you to proceed more quickly.

Content properties

The configuration of this block is very simple. You just have to enter the pixels that will occupy the height of the block.

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 can you link directly to your social media, but you can also encourage your email campaigns to be shared on social media with a single click if you select the Social Participation 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 is what it would look like when a subscriber clicks the social media share button:

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 HTML code into the template section. This option is only recommended for advanced 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.

Allowed HTML tags

Our tool will automatically fix some bugs, such as HTML tags that are left open, and remove code that can't be used, such as Script or Iframe tags. These code tags are not supported by most email clients and can cause issues in your campaign's deliverability or security risks for the publisher and the applications running it.

List of allowed tags

a, abbr, acronym, address, area, b, bdo, large, blockquote, button, title, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, 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, img target: align, alt, border-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: map type: area name: alt, coords, href, shape, target.

Video

With the Video block you can link a YouTube or Vimeo video , so that a featured image is displayed in the email that takes 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

Once you've dragged the icon block, click Add Icon in 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

For our users with PRO and Enterprise plans there is the option to add a countdown.

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), which starts when you open the email or when the campaigns start to be sent 
• 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 click Save and close .

GIFs

You can include GIFs by uploading them from your computer like a normal image. If you upload your own GIFs, remember to optimize them correctly: the standard is usually around 600 pixels wide. We also have a GIF search engine.

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.

Additionally, you must decide whether you want this row to be synchronized or not. What does it mean for a row to be synchronized? It means that if once the row is saved, you add it to x different email template designs, when you edit the content of the row and save it (in any of those templates), the changes will be propagated to the rest of the email templates where the row is saved. row is included.

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 in the free plan. For pricing plans, depending on the specific plan you can save a certain number of rows. If you've reached your save row limit, the save action can't 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 are the same type. This means that rows saved for email templates will not appear in the website page editor and vice versa.

Here are two possible scenarios:

• That the queue is a normal queue (not synchronized), or
• Let the row be a synchronized row

In the case of a normal reusable row, 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?

In the case of a synchronized reusable row, starting from a saved row, if you drag it to the editor and try to edit it, you will see that it will not let you do so, since the elements that make it up seem to be locked. You must click on the general area of the row and click on the edit row button (pencil) or the " Edit synchronized row " button in the options on the right.

This will open a popup with two options:

• You can choose to edit the synchronized row so that, effectively, when you update it and save the changes, they are propagated to the rest of the templates where the row is present. To do this, choose the " Edit row synchronizing changes " option.
• You may need to apply the changes only to this specific template and not to the other templates where the row is present. In that case you can choose to unlink this row from the rest. To do this, choose the " Unlink row " option.

In case you edit the row using sync, you will see the editor reload to show only the content of the row you want to edit. In this mode, you can apply all the changes you consider and click the " Save row " button.

Each time you save the row, it will allow you to update the name assigned to the row, as well as the category in which it is included.

Once you have finished applying the changes, you can click the "Return to design" button to recover the previous context and continue editing the content of your email design.

You will be able to verify that the changes applied to the edited row are reflected in the initial email template and, when you open any other email template that also contains this row, the changes will also be present.

⚠️ IMPORTANT: This saving action involves a row synchronization process in all email templates where it is present. If there are many templates, even if you see the save action confirmed, keep in mind that it may take a few minutes to apply the synchronization to all the templates.

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.

If you delete a synchronized row that is included in one or more templates, this will break the synchronization process.

Add background color 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:

Preview

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 campaign creation.

You can also make changes while viewing the desktop and mobile view in the option below.

Show structure

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

Responsive 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 of showing a preview adapted to different devices seen above, in the editor itself you have specific tools at your disposal to facilitate this adaptability.

See desktop and mobile version

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.

Hide on desktop or mobile

All content blocks have the option to be hidden in both the desktop and mobile versions . You can use this option by clicking on a content block, in the lower 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.

To stack or not on mobile

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 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" tag. 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 later be replaced by the image. But be careful, as including a text that includes certain words, and which we list below, can make your newsletter go directly to SPAM.

Images too large or heavy

Try 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 mistakes in the writing.

Text generation with artificial intelligence

In some blocks it is possible to automatically generate texts with the help of artificial intelligence. This is available only for Pro and Enterprise users and in the following blocks:

• Title
• Paragraph
• List
• Button

To generate the text, just go to the "Content Properties" of the block and click the " Write with AI " button.

This opens a new view with a text box, where you can enter a request, following which the text will be generated (by clicking the " Generate " button).

It must be taken into account that all generations take as reference the previous requests that have been made. To reset the history, you can click on " Restart with a new theme ".