Template Editors

This article illustrates the differences between template editors available in Iterable. For more information on templates and the configuration options available across editors (eg. message type, sender and subject line), see our Templates Overview.

# Table of contents

# Editor comparison

Iterable provides three different types of editors to use when building templates: the WYSIWYG Editor, the Drag-and-Drop Editor, and the Side-by-Side Editor. The following chart describes the pros and cons of each:

# WYSIWYG Editor

For users who are slightly proficient in HTML and CSS or teams who already have templates saved as HTML files, we recommend using the WYSIWYG editor.

Iterable's WYSIWYG (what-you-see-is-what-you-get) editor is set as the default editor for any new project. When you import a new template, the template editor that populates is the WYSIWYG.

Within the WYSIWYG Editor, you can make copy and content changes and upload images to your template.

You can also update the HTML and CSS code for the template by clicking on Source.

# Drag-and-Drop Editor

The Drag-and-Drop Editor allows users with no HTML and CSS experience to create email templates by dragging structural or content components into the editor and arranging them as needed. Users can use a pre-built template template or create an entirely new template.

Users can also upload images and videos to the Drag-and-Drop Editor through its file manager. Image sizes are limited to 12 MB. For more information, read BEE's Using the file manager document.

The above will display a preview of the video and link users to the video on YouTube or Vimeo. Another option is to embed the video into your email.

Although the Drag-and-Drop Editor is easy to use, it does not allow for much HTML or CSS customization beyond the use of an HTML block.

# Custom fonts in the Drag-and-Drop Editor

The Drag-and-Drop Editor supports custom fonts, which allow you to send campaigns styled to match your brand.

# Adding custom fonts

To add a custom font to the Drag-and-Drop Editor:

1. When you're editing a template with the Drag-and-Drop Editor, click Add Custom Font:

   

   This brings up the Add Custom Font window:

   

2. Specify a Font Name. This is the name of the custom font, as it will appear in the Drag-and-Drop Editor's font selector. For example, you might want to use a custom font called Work Sans.

3. Provide a Font Stack, which is the value to use for your template's font-family CSS attribute. It should specify the custom font name, and can also include fallback fonts and font types.

   For example, for a custom font from family Work Sans, you might use the following font stack: 'Work Sans', Arial, sans-serif. This font stack attempts to use Work Sans, and then falls back to Arial or sans serif fonts as necessary.

   TIP

   For a fallback font, do not use a custom font. Instead, use a web-safe font such as Arial, Courier, Georgia, Helvetica, Lucida Sans, Tahoma, Times New Roman, Trebuchet MS or Verdana.

4. Enter a Font CSS URL. This URL should point to a CSS file that specifies details about the custom font.

   This must be an HTTPS URL, and the file it references should reside on a CORS-enabled server (also see the W3C documentation about CORS and web fonts).

   A font CSS file can be hosted by a tool such as Google Fonts or on your own servers. For example, Google Fonts provides the following link to a CSS file for the Work Sans font (in this example, only the Thin 100 style has been selected for the font):

   https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap

   To get this URL from Google Fonts: select a font, choose the styles you need, open the Embed tab, and select the value of the href attribute in the provided <link>. For example:

   

   TIP

   BEE recommends that "It's a best practice to use a dedicated CSS sheet, because if the CSS contained additional styles, those styles may be inherited by the application and cause problems in the BEE Pro user interface."

5. Click Add Font.

You can now select the custom font from the drop-down menu in the Drag-and-Drop Editor.

# Deleting custom fonts

To delete a custom font, click the Manage Fonts button, which brings up the Manage Custom Fonts window:

To delete the font, click the Delete Font link. Then, confirm the deletion.

When you delete a custom font, templates that rely on it will continue to render the font as expected. However, you'll no longer be able to select the font from the drop-down menu to apply it in new places.

# Side-by-Side Editor

For users or teams who are highly skilled in HTML and CSS, we recommend using the Side-by-Side Editor.

Enable the Side by Side editor in Settings > Project Settings.

Disabling the WYSIWYG Editor and enabling the Side-by-Side Editor is done on a per-project basis. Making this change impacts all of the project's users, who will see the Side-by-Side Editor as their main template editor interface.

After you save this change on the Settings > Project Settings page, the Side by Side Editor will appear as the template editor interface when you choose to import a HTML file or create a new template using the WYSIWYG editor.

You can copy and paste your HTML and CSS code into the Side-by-Side Editor to see how your template appears.

Once you create a template in the WYSIWYG or Side-by-Side Editor, you will not be able to open this template in the Drag-and-Drop Editor. The same applies for the Drag-and-Drop Editor: once a template is created in the Drag-and-Drop Editor, you will not be able to open it in the Side-by-Side or WYSIWYG editors.

To learn more about managing base templates, read Managing Base Templates.

# Shortcuts

In the template editor view, you can view a list of shortcuts and helpers at any time by hitting ?.