Template Editors

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

# 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.

# 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.

# 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.

# Adding content blocks

There are 13 content tiles you can drag onto the canvas:

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.

# 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.