Articles in this section

See more

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 Introduction to Templates.

In this article

Deciding on an editor

Iterable provides three template editors to choose from:

Each editor provides a different interface and experience. To help you decide which editor to choose, consider their similarities and differences:

Editor type Benefits Limitations
Drag and Drop editor
  • No HTML or CSS experience required.
  • Supports uploading images and has an image library (that can only be accessed in the Drag and Drop editor).
  • Built-in mobile responsiveness, so messages scale based on device size.
  • Limited HTML and CSS customization.
  • Does not support AMP emails.
  • No HTML source code editor.
WYSIWYG editor
  • Allows for quick copy and content edits.
  • Supports uploading images (which can be used in templates built in the WYSIWYG and Side by Side editor).
  • Offers direct editing of the HTML source code.
  • Some HTML and CSS experience is required.
  • Any unsupported tags and attributes are removed.
  • Any plain text entered in the HTML source is automatically formatted with an opening and closing tag when saved.
Side by Side editor
  • Does not alter imported HTML files.
  • Supports uploading images (which can be used in templates built in the WYSIWYG and Side by Side editor).
  • You can view the template's layout while you're building the HTML/CSS in the source code editor.
  • Requires HTML and CSS proficiency.

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.

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.

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 are clipped by some clients. This includes the additional data generated from link rewriting and HTML generated by the editor.

Selecting an editor and switching editors

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 Use WYSIWYG template editor project setting (see Turning the WYSIWYG editor on and off).

Selecting a template editor

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

After you select a template editor for in-app or email templates, you can switch between Side by Side or WYSIWYG in Design > Preferences. This does not affect all templates, only the template you're actively editing.

Switching template editors

Frequently asked questions

Can I use a custom font in my templates?

Yes, you can! To use a custom font in the Drag and Drop editor, check out Adding a custom font.

To use a custom font in the WYSIWYG and Side by Side editors, here are three methods:

  • 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>
  1. 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>
  1. 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.

IMPORTANT

Your remote CSS file must reference the absolute URL of the font file in the @font-face rule, and the protocol must be HTTPS. For example:

@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')
}

Related articles

Comments

0 comments

Please sign in to leave a comment.