Template Editors Overview

Are you ready to start crafting email and in-app templates in Iterable? First, select one of three available template editors where you create the design and layout of your template, and add content like text, links, and media. Or, bring your own HTML and import everything in one easy step.

Need a refresher on templates as a concept? See Templates Overview.

# In this article

# Choosing an editor

For email and in-app messages, Iterable provides three template editors to choose from:

• The Drag and Drop editor.
• The WYSIWYG editor.
• The Side by Side editor.

Each editor provides a different interface and experience.

# Editors compared

To help you decide which editor to choose, consider their similarities and differences:

# The Drag and Drop editor

For beginner HTML users

No HTML experience? No problem. The Drag and Drop editor provides a user-friendly interface, and handles all of the HTML for you under the hood. All you have to decide is how to structure and style your content by dragging and dropping the provided content blocks onto a blank or pre-built template. Then, fill the block's content to generate your template. This editor is not interchangeable with the other editors once a template has been created.

To learn more, check out The Drag and Drop editor.

If your templates require lots of complex or customized HTML, consider the WYSIWYG or Side by Side editor instead.

# The WYSIWYG editor

For intermediate HTML users

The WYSIWYG is a great option if you are proficient in HTML and CSS or if you're importing templates you have saved as HTML files.

This editor combines the flexibility of source code editing with a what-you-see-is-what-you-get interface. This means you can create and edit your design in the rich text editor, or switch to the source code and make changes there.

This editor supports secure, standardized formatting for rich text editing and follows HTML5 best practices and code structure.

To learn more, check out The WYSIWYG editor.

# The Side by Side editor

For advanced HTML users

The Side by Side editor works best if you are fluent in HTML and CSS, building templates with lots of custom HTML, or using your own fully built template and just want to paste the HTML into an editor.

This is a source code editor, so you can edit the template HTML and see the resulting design in a view-only pane. The Side by Side editor is not a rich text editor.

To learn more, check out The Side by Side editor.

# Selecting an editor

To select a template editor, create an in-app or email template and click Edit in the design area. The editor options here depend on the Enable WYSIWYG Editor project setting (see Turning the WYSIWYG editor on and off).

This example is from a project with the WYSIWYG editor turned on.

# Template editor preferences

Regardless of which template editor you choose, you can set preferences for the template editor in Design > Preferences.

Preferences vary depending on the editor you select. When you make changes to the preferences, they apply to the template you're currently editing. They do not apply to all templates.

To make changes to a template editor's preferences:

1. Open a template in the editor you want to change.
2. Click the Edit Design button in the design area of the template.
3. Click the Preferences button at the bottom left.
4. Change the settings as needed. Some preferences are only available in certain editors.
   • Custom Fonts: Drag and Drop editor only
   • Styling: Settings in this section include:
     • Convert CSS to line styling: All editors.
     • HTML editor theme: Side by Side editor only
     • Content editor: WYSIWYG and Side by Side editors
5. Close the preferences menu, then click Save Design.

# Custom fonts

This setting is only available in the Drag and Drop editor.

To learn how to add a custom font to your Drag and Drop template, check out Adding a custom font.

# Convert CSS to line styling

This setting is available for all editors.

The Convert CSS to line styling setting moves CSS styles found in a template's <head> tag into inline styles.

By default, this setting is enabled for all templates.

There are times when you may want to disable this setting:

• If you want to keep the CSS in the <head> tag.
• If you want to use a custom CSS file in your template. For more information, see Reference a CSS file.

# HTML editor theme

This setting is only available in the Side by Side editor.

When you choose the Side by Side editor, you can select a theme for the HTML editor. This changes the colors used to style the HTML code and code elements for better accessibility and readability. The default theme is Chrome.

The theme you select applies to the HTML editor only, not the design area.

# Content editor

This setting is only available in the WYSIWYG and Side by Side editors.

When you choose a template editor, you can switch between the WYSIWYG and Side by Side editors at any time. The Drag and Drop editor is not interchangeable with the other editors once a template has been created.

# Switching between the WYSIWYG and Side by Side editors

To switch between using the WYSIWYG and Side by Side editors:

1. Open a template that uses the WYSIWYG or Side by Side editor.
2. click the Edit Design button in the design area of the template.
3. Find the Preferences button at the bottom left.
4. For the Content Editor setting, select either WYSIWYG or Side by Side.
5. Click Save.

This change does not affect all templates, only the template you're actively editing.

# Using a custom font in the Side by Side and WYSIWYG editors

There are three ways to use a custom font in the WYSIWYG and Side by Side editors:

• Reference the font using a self-hosted CSS.
• Add the font with the @import method.
• Add a @font-face rule to the template HTML.

Because you're altering the HTML of a single template, the custom font does not apply to all templates. You must add custom font code to each template HTML.

# Reference a CSS file

To reference a custom font in a CSS file:

1. Add the font to a CSS file you're hosting.
2. Add a link to the hosted CSS file in the <head> of the template HTML:

  <head>
   <link rel="stylesheet" href="./index.css">
  </head>

3. To use your font, add a code block in the <head>, within the <style> tag. The code block should reference a font family stored in your CSS, and define which tags use the font:

  <style>
   p, h1, h2, h3, h4, ol, li, ul 
    { font-family: Alkatra, Verdana, sans-serif; font-weight: 400; 
   }
  </style>

4. Or, use CSS inline styles within the <body> of the HTML, if you only want the font to apply to specified tags:

   <body>
    <h2 style="font-family: Alkatra">Fun with inline styles!</h2>
  </body>

# @import method

To add a font to your template HTML using the @import method:

1. Copy and save the URL of the custom font. To find the custom font URL in Google fonts, open Google font, then click the @import radio button and copy the URL inside the parentheses.

   For example: 'https://fonts.googleapis.com/css2?family=Alkatra&display=swap'.

2. Open a template in the WYSIWYG or Side by Side editor, and access the HTML source.

3. Add this code block in the <head>, modifying as needed. The font only applies to the specific tags defined here (like <p> and <ol>):

    <style type="text/css">
    @import url('font_url');
    p, div, h1, h2, h3, h4, ol, li, ul { font-family: font_family, fallback_font,
    sans-serif; }
    </style> 
   

   Make sure to replace the placeholder values in the code!

   Your code block should look something like this:

   <style type="text/css">
   @import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
   p, div, h1, h2, h3, h4, ol, li, ul { font-family: Alkatra, Arial, sans-serif; }
   </style>
   

# @font-face rule

To add a custom font using the @font-face rule:

1. Find the @font-face code for your custom font. In Google fonts, click the link radio button on your desired font and copy the URL inside the parentheses.

2. Paste this URL into the search bar of your browser.

3. In the page that opens, scroll to the bottom and copy the code under latin. For example:

    @font-face {
      font-family: 'Alkatra';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/alkatra/v3/r05EGLZA5qhCYsyJbuChFuK48Medzngmu4cIptH3f3xFYgQ.woff2) format('woff2');
      }
   

4. Paste the copied @font-face code into the <head> of your template HTML, in the <style> tag.

5. To use the font, add CSS inline styles to your HTML tags. To apply this font to all of the text in your email, add it to the <body>:

   <head>
    <style>
    @font-face {
      font-family: 'Alkatra';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/alkatra/v3/r05EGLZA5qhCYsyJbuChFuK48Medzngmu4cIptH3f3xFYgQ.woff2) format('woff2');
      }   
      </style>
      <body style="font-family: Alkatra;">
        <h1>Styling emails with fonts!</h1>
      </body>
   

# Why can't Iterable access my self-hosted custom fonts?

To use custom fonts that you're hosting on an internal server, you must enable cross-origin resource sharing (CORS) and add https://app.iterable.com or https://app.eu.iterable.com to the CORS policy. You can accomplish this by using an HTTP response header like Access-Control-Allow-Origin at the server level or web application level.

See Mozilla's documentation on Cross-Origin Resource Sharing for more details.

If you need help with this, reach out to the server or web manager at your organization.

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('https://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('https://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('https://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('https://www.example.com/css/fonts/League_Gothic.svg')
}