The Side by Side editor is one of the three editors Iterable provides for creating email and in-app templates.
The Side by Side editor is intended for users with advanced HTML and CSS skills. It allows you to edit a template's source code and view the resulting design.
To add HTML to the Side by Side editor, you can enter it manually, paste it in from another source, or import a file.
In this article
Choosing the Side by Side editor
To choose the Side by Side editor for a template:
- Create a new email or in-app template.
- With the template open, click Edit design and select Side by Side.
Adding content and images
Enter HTML and CSS directly into the code editor, or paste in HTML and CSS code to begin creating your template.
To add an image to a template in the Side by Side editor, click the Images button and select an image.
To edit or replace an image, double-click the image URL in the HTML. Then hover over the image in the Edit Image panel and click Change Image.
To learn more about adding images to templates, see Uploading Images to Iterable.
Once you create a template in the Side by Side editor, you won't be able to open it in the Drag and Drop editor. The same is true for the Drag and Drop editor — once you've created a template in the Drag and Drop editor, you won't be able to open it in the Side by Side editor.
Switching to the WYSIWYG editor
To switch your editor from Side by Side to WYSIWYG, open the template and click Edit design. Then, click Preferences.
The WYSIWYG editor does not allow invalid HTML. If you open a Side by Side template in the WYSIWYG editor, it may affect your template's custom code. If the editor detects invalid HTML, it automatically closes open tags and removes unexpected tags. These changes occur any time you create or edit a template in the new WYSIWYG editor.