There are three different editors you can use to build templates in Iterable: the WYSIWYG (What You See Is What You Get) editor, the Side-by-Side editor, and the Drag-and-Drop editor. Read on to find out which editor is right for you.
Just getting started with templates? See Introduction to Templates.
Table of contents
May 9, 2021 — Updated Drag-and-Drop editor!
All Iterable projects are now enrolled in the new version of the Drag-and-Drop editor. The updated Drag-and-Drop editor uses the latest version of BEE, which offers several improvements over the previous version:
- Faster load times
- Mobile design mode
- New drag-and-drop content tiles
- Reduced file sizes
- Simpler, cleaner HTML output
- Wider email client compatibility (including reduced Gmail clipping)
IMPORTANT: BEE has changed its HTML formatting from <div>
to <table>
to
reduce file sizes and improve code efficiency. This formatting change will apply
when you create or edit templates in the updated Drag-and-Drop editor (templates
you created prior to this update won't be affected until you save them). If you
have added custom HTML to your templates (for example, with snippets or HTML
blocks), we recommend running thorough end-to-end tests as you update to the new
version. You may need to edit your templates to make them compatible with the
new <table>
format.
To learn more about this update, see:
- Our Iterable Community post
- BEE's support documentation
The WYSIWYG (What You See Is What You Get) editor
Are you proficient in HTML and CSS, or does your team already have templates saved as HTML files? Then we recommend using the WYSIWYG editor.
You can add text, images, and videos to your templates using the WYSIWYG editor.
You can edit the template's HTML and CSS code by clicking the Source button in the upper left of the editor.
Turning the WYSIWYG editor on/off
You can turn the WYSIWYG editor on or off in your project settings.
Click the gear icon at the top of the page, then select Project settings.
Scroll down the page to Use WYSIWYG template editor and switch the toggle to the "on" or "off" position.
Then, scroll to the bottom of the page and click Save Project Settings.
NOTE
The WYSIWYG editor is the default editor for every new Iterable project. If you turn off the WYSIWYG editor in your project settings, the Side-by-Side Editor will become the default editor for all of the project's users.
The Side-by-Side editor
For teams with advanced HTML and CSS skills, we recommend using the Side-by-Side editor.
To use the Side-by-Side editor, turn off the WYSIWYG editor in your project settings.
Paste your HTML and CSS code into the left side of the Side-by-Side editor to see how your template will render.
Keep in mind that you can't upload images to the Side-by-Side editor. To add images to a template in the Side-by-Side editor, you'll need to host your images and reference them in the HTML code of your template with a tag.
NOTE
Once you create a template in the WYSIWYG or Side-by-Side editor, you won't be able to open that template 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 or WYSIWYG editor.
The Drag-and-Drop editor
Not comfortable with HTML or CSS? No problem! You can use the Drag-and-Drop editor to build beautiful templates with just a few clicks.
When you create a new template, you can either select a pre-built layout that you can customize, or choose a blank layout if you'd prefer to build your template from scratch.
Note
The Drag-and-Drop editor is easy to use, but you can't do much custom HTML or CSS with it. If you need to use a lot of custom HTML or CSS, we recommend using the WYSIWYG or Side-by-Side editor instead.
Adding content blocks
There are 13 content tiles you can drag onto the canvas:
Tile | Description |
---|---|
Title (New!) | Adds a title block to the template. |
Text | Adds a text block to the template. |
Paragraph (New!) | Adds a paragraph block to the template. |
Button | Adds a premade button to the template. |
List (New!) | Adds a bulleted list to the template. |
Menu | Adds a customizable menu (horizontal or vertical) to the template. |
Divider | Adds a horizontal divider line to the template. |
Spacer (New!) | Adds a block of white space to the template. |
HTML | Adds an HTML block to the template. |
Image | Adds an image block to the template. |
Video | Adds a video block to the template. |
Social | Adds social media icons (Facebook, Twitter, Instagram, LinkedIn) to the template. |
Icon | Adds an icon to the template. |
You can also add emojis to your templates! Add a text block to the template, then select the smiley-face icon in the text block settings menu.
Adding photos and videos
You can upload images and videos to the Drag-and-Drop editor using the file manager. (The maximum file size is 12 MB.) To learn more about adding images to the Drag-and-Drop editor, see BEE's support documentation.
Photo upload
Image content properties
After you add an image to your template, you will see the Content properties menu in the content tab.
Edit the properties to customize the image you just inserted in your template.
Content Properties | Description |
---|---|
Auto width | When toggled on, this automatically adjusts the width of your image to fit the screen. When auto width is off, you can set the image width manually. |
Align | Alignment for your image-left, center, or right alignment. |
Dynamic image | A dynamic image will change based on variables entered in the URL. See the Dynamic image section below for details and examples. |
Change image | Upload a different image from the file manager. |
Apply affects & more | Opens the image in a lightweight styler. Available tools include filters, resize, crop, transform, draw, text, shapes, stickers, frames, and corner style. |
Url | The URL for an image you'd like to show in the template. |
Alternate text | Alternate text on your image that will show if the user's browser fails to load the image, and to meet accessibility needs for low or no vision users. |
Image link | An image link that will open when a user clicks or taps the image. The URL must start with https to be accepted by all mail clients. |
Block options | Image padding, and options to hide the image on mobile or desktop. |
Dynamic image
If you would like to send a birthday card or countdown timer in your email, but need to customize the text that appears on the image, enable dynamic image in the content properties.
We recommend using a dynamic image service to generate your content, like Niftyimages, Fresh Relevance, or other services that offer dynamic content.
When you have the image URL you'd like to use, enter it in the dynamic image field in Iterable.
It will be formatted something like this. Note the variable at the end instead of a file type (like .png).
https://example.com/images/?imageBanner={{firstName}}
The resulting image in your template will use the first name of each recipient, providing a customized experience for each user!
Video upload
This 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.
Adding snippets
You can add snippets to the templates you build in the Drag-and-Drop editor. Add a Text, Paragraph, HTML, or Title tile to the template, and paste your snippet into it.
Keep in mind: the Drag-and-Drop editor contains default HTML styling that can affect how your snippets render in the final version of your message.
To learn how to make your snippets render correctly in the Drag-and-Drop editor, see Adding a Snippet to a Template.
Mobile design mode (New!)
Mobile design mode lets you build mobile-first messages right within the Drag-and-Drop editor. This new design mode provides several features that make it easier to optimize messages for different devices:
- Hide on mobile/Hide on desktop: Lets you hide a content block when the message is displayed on a certain device.
- Do not stack on mobile: When this is turned on, columns will not be stacked on mobile devices—the message will look the same as the desktop version.
- Reverse stacking on mobile: When this is turned on, columns will stack in reverse order (from right to left).
Click the mobile device icon in the top left of the editor to see how your template will look on a mobile device.
When you do this, the size of the design preview will shrink down to 320px.
Turning Visibility on/off
If you've set any content blocks to be hidden on mobile or desktop, you can show or hide these blocks in your design preview.
Click the eye icon in the top left of the editor to turn Visibility on or off.
When Visibility is on, hidden content blocks appear grayed-out to indicate that they would not be visible to recipients.
When Visibility is off, hidden content blocks do not appear in the message preview.
To learn more about mobile design mode, see BEE's support documentation.
Custom fonts
You can add custom fonts to templates you create in the Drag-and-Drop editor, allowing you to send campaigns styled to match your brand.
Custom fonts are generally supported in iOS Mail, Apple Mail, Outlook 2000, Thunderbird, and the default Android mail client (not Gmail). Not all email clients support custom fonts, so make sure to specify fallback fonts.
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).
You can only add a single variation of a font family—you can't upload multiple fonts from the same font family. Similarly, when you configure a custom font with a tool (like Google Fonts), you should only include a single variation/style.
To learn more, read BEE's documentation about custom fonts.
NOTES
- All three template editors are provided by third-party sources. Iterable has limited control over which features are available and how they work.
- Templates larger than 102 kb will be clipped by some clients. This includes the additional data generated from link rewriting and HTML generated by the editor.
Comments
0 comments
Please sign in to leave a comment.