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:
NOTE
- All three editors come courtesy of third-party sources. Feature and future roadmaps are not dictated by Iterable and are subject to change.
- Templates above 102kb will be clipped by some clients. This includes the additional data generated from link rewriting and HTML generated by the editor.
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.
NOTE
The Drag and Drop editor is a third-party editor called BEE Editor. Its features and future roadmap are not set by Iterable and are subject to change.
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.
NOTES
- Not all email clients support custom fonts. Because of this, be sure to specify fallback fonts. BEE's documentation indicates that custom fonts are generally supported by iOS Mail, Apple Mail, Android's default mail client (not Gmail), Outlook 2000, Outlook.com, and Thunderbird.
- When you add a custom font, it's available to all templates in the same Iterable project, as long as they use the Drag and Drop editor.
- As mentioned in BEE's documentation, you can only add a single variation of any given font family. You cannot upload multiple fonts from the same font family. Similarly, when configuring a custom font on a tool such as Google Fonts, you should only include a single variation/style.
- To learn more, read BEE's documentation about custom fonts.
Adding custom fonts
To add a custom font to the Drag and Drop editor:
-
When you're editing a template with the Drag and Drop editor, click Add Custom Font:
This brings up the Add Custom Font window:
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
.-
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.
-
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."
Click Add Font.
You can now select the custom font from the drop-down menu in the Drag and Drop editor.
WARNING
If you break a custom font you've set up in Iterable by removing its CSS file or the font files referenced by that CSS, your templates will render fallback fonts instead. If your browser has the font CSS file or font files cached, Iterable may still render the custom font.
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.
NOTE
In order to enable the Side by Side editor, you will need to disable the WYSIWYG editor. You cannot use both at the same time.
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.
NOTE
You cannot upload images into the Side by Side editor. If you are using the Side by Side editor, you will need to host your own images and reference them in the HTML code of your template using an tag.
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 ?
.
Comments
0 comments
Please sign in to leave a comment.