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 Template Overview.
Within Iterable, there are three different types of editors that you can use to build out your templates.
Here's a quick breakdown of the pros and cons for each editor:
Note: All three editors come courtesy of third-party sources. Feature and future roadmaps are not dictated by Iterable and are subject to change. Also note that templates above 102kb will be clipped by some clients, this includes the additional data generated from link rewriting and html generated by the editor such as the drag & drop
For users who are slightly proficient in HTML and CSS or teams who have templates already 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, 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 simply 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 the editor's file manager. Image sizes are limited to 12 MB. You can find more info here.
The above will display a preview of the video and direct users to the video on YouTube or Vimeo when clicked on. 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 its features and the use of an html block
Note: Since the drag and drop editor comes courtesy of a third party source called Bee editor, its features and future roadmap are not set by Iterable and are subject to change. You can find more information on the drag & drop editor and functionality here.
Side by Side Editor
For users or teams who are highly skilled in HTML and CSS, we recommend using the side by side editor.
The side by side editor can be enabled through the Settings > Project page.
Note: In order to enable the side by side editor, you will need to disable the WYSIWYG editor. You cannot utilize the side by side editor and the WYSIWYG editor at the same time.
Disabling the WYSIWYG editor and enabling the side by side editor is done on a project basis. Once this change has been made, all users in a project will be impacted by this action. They will see the side by side editor as their main template editor interface.
After you save this change in the Settings > Project 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 <img> 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 interface. 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 this template in the side by side or WYSIWYG interfaces.
To learn more about managing templates, click here.