Drag and Drop Editor

The Drag and Drop editor is one of the three editors Iterable provides for creating email and in-app templates.

Even if you have little or no HTML or CSS experience, you can still build beautiful templates—just select a blank or pre-built template, then drag and drop blocks of content into the design.

Check out this blog post on the Drag and Drop editor: Five Reasons Drag and Drop Editors Are Magic For Marketers.

# In this article

# Choosing the Drag and Drop editor

To choose the Drag and Drop editor for a template:

1. Create a new email or in-app template.

2. With the template open, click Edit design and select Drag and Drop.

   

   NOTE

   The WYSIWYG editor option only appears if the Use WYSIWYG Template Editor setting is enabled for your project. See Turning the WYSIWYG Editor On/Off to learn more about this setting.

3. Decide if you want to use a customizable pre-built template layout, or a blank template.

   

# Building content in the Drag and Drop editor

The Drag and Drop editor contains two functional areas:

• The design area, where you build your template design
• The sidebar, which has the available content blocks and options to customize them

To begin building a template, select a row or content block from the sidebar, or start with the settings tab to establish template-wide defaults.

# Settings, rows, and content blocks

To organize and design content in the Drag and Drop editor, use content blocks, rows, and settings.

Rows contain your content blocks. You can place content blocks side by side in a row as columns to create horizontal structure. In the row tab, you can choose a one-column row up to a six-column row. Rows are made up of twelve column units.

Content blocks represent the different types of content in your template. Each content block has its own specific settings, so you can customize the content to fit your needs.

Settings determines the defaults for the entire template. You can override template-wide settings by selecting the row or content and adjusting settings in the Row or Content tab.

# Settings tab

You can use the settings tab to set defaults for your entire template. These defaults apply to every row and content block, but you can change the settings for an individual row or content block to override the defaults.

These are the settings you can configure for your whole template:

• Content area width - Sets the maximum width that contains template content, for desktop or large width devices.
• Content area alignment - Determines how the content is aligned in every row.
• Background color - Sets the background color for every row.
• Content area background color - Sets the background for the content area, which is controlled by Content area width.
• Default font - Sets a default font for text content blocks.
• Link color - Determines the color used for links.

# Rows tab

To create horizontal structure within your template design, use the rows tab and add rows to your template. Once you add at least one row, you can customize its properties by selecting it and clicking the Rows tab.

On this tab, you can adjust:

• Background colors
• Corner radius
• Border width and color
• Row order as they appear on mobile devices
• Row background image
• Visibility of the row on mobile and desktop
• Number of columns and their properties

Once you've added a row element to your template and configured it to your liking, you can save it as a saved row and reuse it in your Drag and Drop templates. See Creating Reusable Template Content to learn more.

# Content tab

To add empty blocks of content to your template, use the Content tab. To configure the settings of a content block, drag one onto your template. Then, click the content block to activate its settings in the Content tab.

# Adding content blocks

To add content to your template, grab a content block from the sidebar and drag it into the editor. There are 15 content blocks you can choose from:

To include emojis in your templates, add a Text block to the template, then select the smiley-face icon in the Text block settings menu.

# Mobile design mode

Mobile design mode lets you build mobile-first messages in the Drag and Drop editor. This design mode makes 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 are not stacked on mobile devices.

• Reverse stacking on mobile - When this is turned on, columns stack in reverse order, from right to left. This means that an image on the left and text on the right would swap places, resulting in the text appearing above the image on mobile instead of below it.

Click the mobile device icon in the top left of the editor to see how your template looks on a mobile device, and format the settings of specific elements to optimize them for mobile.

# Optimizing your template design for mobile

In mobile design mode, you can adjust the padding, alignment, and font size for the following elements:

• Title
• Paragraph
• List
• Form
• Icons
• Menu
• Button

To edit the mobile properties of these elements, make sure mobile design mode is selected. Then, click a content block and go to the Content tab. Here, you can adjust the mobile-specific settings (designated by a Mobile pill button). This only adjusts the mobile version of the settings.

The blue Mobile button indicates that the mobile element has been edited. To revert the selected element back to desktop settings, click the X on the Mobile button.

# Turning Visibility on/off

If you've hidden any content blocks 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 show/hide content.

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 Beefree's support documentation.

# Dynamic content

To add dynamic content to your template, you can use any content block. If you have trouble getting dynamic content to work with a particular content block, try using an HTML block or a Text block.

# Handlebars

To add Handlebars to your template:

1. Drag a Text block into the editor.

2. Select the Text block and click Merge tags.

3. Click the merge tag you want to add to your template.

   

# Snippets

You can add snippets to the templates you build in the Drag and Drop editor. Add a text, paragraph, HTML, or title content block to the template, and paste your snippet into it.

Keep in mind: the Drag and Drop editor applies HTML styling that can affect how your snippets render in the final version of your message.

To add a snippet to your template using the HTML block:

1. Drag an HTML content block into the editor.
2. Select the HTML block and click Snippet in the lower navigation bar.
3. Copy the snippet and paste it into the HTML editor in the Content tab.

You can also paste snippets directly into a Text block, but the snippets in text blocks are placed inside a <p> tag. Snippets pasted into the HTML block are surrounded by <div> tags inside a table.

To learn how to make your snippets render correctly in the Drag and Drop editor, see Adding a Snippet to a Template.

# Dynamic images

To add dynamic text to images in your template, like a birthday card image customized with the recipient's name, turn on the Dynamic image toggle and enter a dynamic URL.

You can also use dynamic text overlay on images to create a countdown timer in your emails.

To add an image with dynamic text to your template:

1. Generate the image using a dynamic image service like NiftyImages or Fresh Relevance.

2. Drag an image content block into the template editor.

3. Select the image block.

4. In the content properties, enable Dynamic image.

5. In the Dynamic URL field, paste the image URL you created in the dynamic image service.

   It will be formatted something like this (note the Handlebars expression at the end):

   https://example.com/images/?imageBanner={{firstName}}
   

The resulting image in your template uses the first name of each recipient, providing a customized experience.

# Using a snippet to generate dynamic images

To use a dynamic image in an image block, paste a snippet containing an image URL into the Dynamic URL field within an image block's content properties. This is useful for images like logos, and promotional header or footer images that might change in the future.

For this to work, make sure the following is true:

• The snippet contains only the image URL, and no HTML code. The snippet code should look like this: https://www.example.com/image.png, not <img src="https://www.example.com/image.png>.
• The snippet is created and maintained using the Side by Side editor. The WYSIWYG editor adds tags around plain text, which breaks the snippet.
• The snippet name in the Dynamic URL field is surrounded by single quotes, not double quotes.

To include a dynamic image in your template:

1. Drag an image content block into the template.
2. Select the image block.
3. In the content properties, toggle on Dynamic image.
4. In the bottom navigation, click Snippet. Find your snippet and click Copy.
5. Paste the snippet into the Dynamic URL field. Replace the double quotes around the snippet name with single quotes, if they exist:

   {{snippet 'Calvin and Maya Logo' }}

# Using HTML in the Drag and Drop editor

To use HTML in Drag and Drop templates, drag an HTML block into the editor. Within the HTML block, you can add custom HTML and style it with CSS attributes, add Handlebars and snippets to personalize your message, and include content like HTML5 videos and anchor links.

The following tags and attributes are supported in the HTML block.

# Supported tags and attributes

• General attributes- style, id, class, data, title
• a - href, name, target
• abbr
• acronym
• address
• area - alt, coords, href, shape, target
• b
• bdo
• big
• blockquote
• button
• caption
• center
• cite
• code
• colgroup
• dd
• del
• dfn
• dir
• div
• dl
• dt
• em
• fieldset
• font
• form
• h1
• h2
• h3
• h4
• h5
• h6
• i
• img - align, alt, border height, hspace, src, vspace, width, usemap
• ins
• kbd
• label
• legend
• li - type
• map - name
• menu
• ol
• optgroup
• option
• p
• pre
• q
• s
• samp
• select
• small
• span
• strike
• strong
• sub
• sup
• table - align, bgcolor, border, cellpadding, cellspacing, width
• tbody - align, valign
• td - align, bgcolor, colspan, height, rowspan, valign, width
• textarea
• tfoot - align, valign
• th - align, bicolor, colspan, height, rowspan, valign, width
• thead - align, valign
• u
• tr - align, bgcolor, valign
• tt
• u
• ul
• var

# Managing your image files

To manage your media files in the Drag and Drop editor, use the file manager. The maximum upload size for a media file is 20 MB.

With the file manager, you can:

• Import image files and insert them into your templates.
• Replace existing image files in a template.
• Browse, search, and sort image files.
• Organize image files into folders.

To access the file manager:

1. Drop an image content block into a template, then click the Browse button.

2. On an existing image, click the Change image button from the image properties tab.

3. In an image content block, click Link file in the Action area of the content tab.

# Inserting media

To insert an image or embed a video, click the Content tab and add an Image or Video block.

Inserting an image:

To insert an image from the file manager, click Browse, select a file, and click Insert to add it to the template.

Embedding a video:

To embed a video, click Add a Video URL and enter a link to a video hosted on YouTube or Vimeo. This field also supports YouTube Shorts.

# Setting an image as the background of a row

With the Drag and Drop editor, you can set an image as the background of your template. This is useful when you want to overlay the text of your template on top of an image.

To set a row background image:

1. Drag a row into your template.
2. Click the row to select it, and make sure the Rows tab is active.
3. Scroll down, and enable Row background image.
4. Click Change image and insert your image, or paste an image URL.

# Image content properties

After you add an image to your template, you can customize its properties (found in the Content properties menu, in the Content tab).

# Custom fonts

You can add your custom fonts and use them in templates designed in the Drag and Drop editor. You might want to create a new font if:

• You need a font that's specific to your brand.
• You want to try out a new font.
• You need a font that isn't available in the Drag and Drop editor.

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 comma-separated fallback fonts in the Font family field.

# Adding a custom font

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

To add a custom font:

1. Open a template that uses the Drag and Drop editor.

2. Click Edit design.

3. Click Preferences at the bottom.

4. Click Add custom font and fill in the fields.

   

   • Font name: The name for your custom font. This typically matches the font name, but you can also customize it.

   • Font family: The font family that is applied to the text. This should correspond with the style applied in your CSS, if you're using one. This is where fallback fonts are defined.

   • Font URL: The file path for the CSS document or font file. This URL must use HTTPS protocol with a valid SSL certificate. To allow Iterable to access the custom font file, the host must have cross-origin resource sharing (CORS) enabled.

5. Click Save font.

Your font is ready to use in templates.

• In a Text block, highlight your text and select the font from the dropdown.
• In a Paragraph block, use the Content tab to choose a new font family.

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

# Frequently asked questions

Do you have questions about the Drag and Drop editor? Check this section out for answers!

# Can I configure AMP for email in the Drag and Drop editor?

The Drag and Drop editor does not support the custom HTML tags required to create AMP emails. Try the WYSIWYG or Side by Side editors, which offer flexible HTML source code editing.

# How do I define a fallback font?

To define a fallback font for your Drag and Drop templates:

1. Open the template in design mode.
2. Go to Preferences > Edit font for existing fonts, or Add custom font for new fonts.
3. In the Font family field, enter a fallback font, separating each entry with a comma. In this example, Georgia, Times, and serif are the fallback fonts.