Drag & Drop Editor

From Enterprise Help
This is the approved revision of this page, as well as being the most recent.
Jump to: navigation, search

Our drag & drop email editor makes it easy to create beautiful messages that can be used to send all sorts of email campaigns. It combines ease of use with features that give you full control of the design of your mailings. Its drag-and-drop interface enables you to design a mailing without any knowledge of HTML, and produces code that adapts automatically to the smaller screens of mobile devices.

Creating a Mailing With the Drag & Drop Editor

To start your mailing using the drag & drop editor, select Create a Mailing in the Mailings dropdown and select the Drag & Drop option if you wish to use a generic template (you will pick a generic template on Step 3), or select any custom template that has the RTENOTITLE icon next to the template name in the dropdown menu, indicating it is a drag & drop template.  When you get to Step 3 of the workflow, you will see the drag & drop editor.  If you did not pick a specific template to start with, you will see the default starter template, which is a Fishbowl branded template.  Using the tabs on the right and the inline controls on the staging area on the left you can fully customize your mailing.

HTML, Text & Online Versions & Syncing

The drag & drop editor will automatically keep your HTML, Text and Online versions synced with the same content as you are building your mailing. If you need to change something in one version but not the others we recommend that you unsync versions as your last step in editing, then make edits to one or more of the versions independently.  Doing this as a last step helps ensure that you are making minimal edits to the different versions, keeping as much content as you need to the same across all three versions.

A few common reasons for needing to edit one or more of the versions are:

  • Editing the online version to remove the Problem Viewing link to the online version.
  • Removing specific merge codes like ##FirstName## from the online version.
  • Removing unsubscribe or other unsupported merge codes from the online version.
  • Removing language from the online version that only makes sense in the HTML version.

To Unsync the versions simply uncheck the "Versions Synced" option above the Content panel.

Sync.PNG

Message Editing Stage & Properties Panel

The editor is divided into two main areas: the editing stage on the left, and the properties panel on the right. In general, you will be dragging and dropping content elements onto the stage and then editing their properties. This is true for entire structures (e.g. a single-column row) and individual content blocks (e.g. a text content block).

When it comes to images, you can drag & drop image files directly from your desktop onto an image content block. You can also upload them using the File Manager or use the URL of remotely hosted images.

The properties panel is divided into three sections:

  • Content
    This is where you will choose and edit the specific content elements that make up your mailing: buttons, images, text blocks, etc.
  • Rows
    Here you can select different structural elements (e.g. a single-column vs. three-column row) to organize your content.
  • Settings
    Here is where you will define some overall settings that affect the entire mailing. For example, a default font family.

Content

The Content tab allows you to choose a new content element and add it to your mailing. Just drag and drop a content element (a button, an image, a text block, a transparent or solid divider, social media sharing, etc.) in the message area on the left.

Content.PNG

Content properties

Clicking on a content element in the editing stage on the left (i.e. an image or text area) will make the content panel switch to content properties mode, so you can change the settings of that particular content block. If you click outside of a content element, instead, the row in which the content element is located will be selected and its properties will be available (more on this under rows below).

The content properties area changes depending on the content element that has been selected.

If you select a button, for example, you will see a number of tools to help you style the button and link it to your desired action (open a web page, send an email, make a phone call from a mobile device, etc.). In the example shown below, for instance, the “Learn more” button has been selected.

Content2.PNG

The properties panel switches to button mode and allows you to set the button’s width, background color, text color, alignment, the roundness of the corners, padding around the text, etc. When the properties panel is longer than the height of the screen, a scroll bar appears on the right side.

With buttons as well as many other content items, the editor gives you great control of the design of your mailings. Some of the controls, including content padding and borders, have both a simple editing mode – where only one setting is shown – and an advanced editing mode, where more control is provided (e.g. specifying padding for the four sides of the object independently of each other).

The properties panel displays different controls depending on which content element you selected. Here is a description of some of the most frequently used ones.

  • Padding: Padding settings can be configured both for all sides of the selected element or separately for each side.
  • Borders: Border settings can be configured both for all sides of the selected element or separately for each side of a button, column, etc.
  • Dividers: Dividers help create a visual separation between design elements. They can be transparent or visible. Here too, granular control on padding provides great design flexibility.

Color memory

As you pick colors for fonts, background colors, etc., the editor will learn and remember them, making them quickly accessible to style future content elements.

Colormemory.PNG

Text editing

If you click inside a text content block, the text editor toolbar will appear directly on the editing stage. It gives you access to a number of text editing tools: font family, font size, basic formatting, text alignment, numbered and non-numbered bullets, font color, links, etc. The More drop-down allows you to insert Predefined Links as well as other Merge Tags, which includes Mailing Properties, Profile_Fields Joined Data Fields and Global Variables.

Text.PNG

Note that if you set the font family to Global Font, it will inherit the font family selected under the Settings tab. This allows you to change the font family for multiple elements at once just by changing that property in the Settings tab.

Images

You can add images to your mailing using the file manager, and either inserting images that you have already added to Enterprise or by uploading new images using the file manager and inserting the new images.  The drag & drop editor allows you to edit the width of your image, link the image, and change other properties in the Content Properties.

The file manager 

What it does

The editor includes a built-in file manager. The file manager is the component that you will use to browse, search, and select the images and documents that you wish to use in your email message.

With the handy file manager you can:

  • Browse, search, and sort existing files
  • Switch between list and grid view
  • Import new files
  • Create new folders
  • Preview and insert images into your message

How it looks

The file manager will open over the editor, covering the entire working area. This allows you to browse your files without worrying about your screen size or resolution. 

You will find a top section with actions and navigation helpers, with most of the space used to list your files and the information you need to work with them. By default, folders and images are shown in Grid view.

How you access it

The file manager will load in several scenarios.

a. When you click on the Browse button in an image placeholder, which is displayed when you drag and drop an image content block into a message.

b. When you click the Change image button in the image properties panel:

c. When you click on Link file when working with images and buttons:

How to upload files

The quickest way to upload a file into the file manager is to drag it from your computer to the file manager window, dropping it anywhere on the page.

You can also browse and upload from your computer using the Upload button.

  • Note that there is an upload limit: the maximum allowed file size is 5MB.

How to browse or search files

To locate your desired image or document, browse your folders and order their content by name, datesize or type by clicking on the sort labels on top of the list.

An arrow icon next to this labels means that this is the current filter, and its orientation will tell you the order, ascending or descending.

Too many files in the selected folder? Click on the lens icon to run a search. Results will be filtered on the fly. Mind that this search is performed only in the current folder, and not in your entire repository.

How to use files

When you move your cursor over a file or folder, that row will be highlighted and the available action icons will be shown on the right side:

  • Preview for files
  • Delete for both files and folders

If an action is momentarily not available, you will be notified by the tooltip text of the icon, such as when you try to delete a folder that contains files, because only empty folders can be deleted.

If you want to delete multiple files or folders, use the check-boxes to select them, the delete action will be shown on top of the list. Only elements that can be deleted will have a selectable check-box.

How to organize folders

You can create the folder structure you prefer to organize your files. To add new folders, use the Add folder icon.

For your folder names, you can use letters (upper and lower case), numbers, spaces, periods (.), hyphens (-), or underscores (_).

Other content modules

Promotions Manager barcodes

Clients who are using Fishbowl's Promotions Manager will be able to easily add Promotions Manager barcodes to a mailing using the drag & drop editor. Barcodes can be adding in one of two ways:

  1. Select the Promotions Manager content block and drag onto the editing stage where you want the barcode to appear.  You will be prompted to select the specific promotion and barcode type to use.
  2. Add a Promotions Manager Row.  The Promotions Managers, like Default Rows, contain layouts with content blocks already added and can make designing your mailing layout faster.  If you select one of the Promotion Manager rows, you will be prompted to select the promotion and the barcode type to use.

If you are an advanced user and need to edit advanced parameters of the barcode, like utm_source, for example, you can edit the query string parameters on the URL of the barcode image, which you can find in the Content Properties when you click on the barcode image. 

Custom HTML

The Custom HTML content block allows you to add your own HTML code to your mailing that you are designing with the editor. It’s as simple to use as a text block.

Adding live content from external providers

Product recommendations, dynamic ads, personalized maps, countdown timers...all of this advanced content can be easily included in a message created with the editor.  Just copy and paste the code provided to you by the vendor that you are working with.

How do I add my HTML code?

To add your code just drag an HTML content element into your editing stage. It can be positioned alone, with other HTML content items, or mixed with other types of content.

The newly inserted content block will show some default placeholder text. Click on it and the right-side property panel will display the HTML code editing pane. You will find some placeholder code inside the editing area:

Paste your own HTML code or write it directly in the editing area. The system will highlight your syntax and indent your code to make it more readable.

Which HTML tags are allowed?

The HTML content will automatically correct some issues like HTML tags that are left open, and strip out code that cannot be used, such as script tags or iframe tags (these tags are not allowed by the major part of email clients and using them can cause deliverability problems or security risks).

Allowed tags list:

a, abbr, acronym, address, area, 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, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

Allowed attributes list:

general attributes: style, id, class, data-*, title

a: href, name, target

img: align, alt, border height, hspace, src, vspace, width, usemap

table: align, bgcolor, border, cellpadding, cellspacing, width

tbody: align, valign

td: align, bgcolor, colspan, height, rowspan, valign, width

tr: align, bgcolor, valign

tfoot: align, valign

th: align, bicolor, colspan, height, rowspan, valign, width

thead: align, valign

li: type

map: name

area: alt, coords, href, shape, target

Video

The video content block allows you to share your video content easily in your mailings. You only need to copy and paste the URL of your video from YouTube or Vimeo and the editor will do the rest: it will automatically grab the cover image for the video, overlay a Play icon on top of it, and link it to the video content.

The content properties section will ask you to provide a video URL from YouTube or Vimeo, the popular video hosting services that we currently support. Once you insert a valid URL the content block in the editing stage will display the cover image for the video with a Play icon overlaid on top of it. You can edit the type, color, and size of the Play icon to change the way it looks. Note that the editor can't access password-protected videos to get the cover image.

Additional notes about embedding video in email:

  • This feature does not embed the actual video in the email but rather links to it in a smart way.
  • The reason why the actual video content is not embedded into the message is that, unfortunately, it doesn't work very well. Many email clients do not support video.
  • Additionally, many emails are opened on mobile devices and viewing videos on a mobile device can cause substantial data usage in addition to a poor user experience due to the quality of the data connection.

Undo, redo & history

Our drag & drop editor allows you to rewind and fast-forward to any point in your recent edit history. As soon as a change in the message is detected, a compact Undo widget displays in the bottom left corner of the editor.

The widget displays 3 items that correspond to these 3 actions:

  • Undo & Redo arrows that offer the classic pattern to move back and forth between changes.
  • A history icon that expands a timeline of the latest changes, as shown below.
  • The history timeline allows you to browse back and forth through the most recent changes.

Undo.PNG

For each event in the timeline you will see:

  • An icon to identify the type of content that was changed (an image, a text, etc.)
  • A description of what changed, including the new value assigned to the element, if any
  • The exact time the change occurred

All these details provide information about what kind of edit was applied and when giving you the ability to go back to a previous state with a high degree of precision. When you select a previous step in the timeline, the content or row that was edited displays as the selected item, providing further context.

Note that when you go back in time, the timeline for more recent changes remains available, allowing you to move forward again, without losing any of the edits.

The Undo widget currently remembers the 15 most recent changes in the current browser session (it does not remember changes that happened during a different session), but you can always rewind to the "Message opened" step to go all the way back to the beginning.

Rows

The Rows panel includes different types of structural elements for your mailing. They allow you to create different sections of the mailing. Rows with different structures allow you to organize content in a way that is different from the preceding and following rows.

Rows1.png

For instance, you may need…

  • a single-column row with a hero image to introduce your online store’s new promotion
  • a two-column row below it to display some of the store’s best-selling products
  • a two-column row with images and text for each image

There are three different types of rows that you can add from the Rows tab:

  • Default Rows - these rows contain common combinations of content (images, placeholder text, dividers) inside of rows to make mailing creation easier
  • Empty Rows - these rows only contain the row and column structure that you can use to add content blocks to as needed
  • Promotion Manager - if you are using Fishbowl's Promotion Manager you will see these rows, which are a combination of a Promotions manager barcode plus other content blocks, inside rows and columns.  These are very much like the Default rows but they all include a Promotions Manager barcode.  When you select a Promotions Manager row you will be prompted to select which promotion and barcode type you wish to use.

To make mailing creation even easier and faster, you can clone entire Rows (for example, a picture, a button, and a text block) with all of their settings and blocks. This allows what email designers call modular design: you create a module and then replicate it times in a mailing.

Columns within rows

Settings at the column level within a row allow control on the background color, padding, and borders for the selected column.

Selecting rows and content

When you mouse over the mailing in the editing stage, the following happens...

1. You mouse over a block of content (a button in the example below): the editor shows you an icon on the right side that allows you to drag that block of content elsewhere.

Rows2.png

2. You click on a block of content, and the editor will:


  • Show you two icons on the stage, which allow you to remove or clone that block of content.
  • Change the properties section on the right side of the editor to display a series of properties that you can set for that block of content.

3. You mouse over an area that is free of content, i.e. the row in which the content is located. The editor will highlight it and show you an icon that allows you to drag that entire row elsewhere on the stage.


Rows3.png


4. You click on a row, and the editor will:

  • Deselect any block of content that had been previously selected.
  • Select the row, and show you two icons that allow you to remove or clone the entire row and all its content.
  • Change the properties section on the right side of the editor to display a series of properties that apply to that column within the row. A row can contain more than one column.

Rows4.png

Mailing Footer

The drag & drop editor automatically contains a Mailing Footer with necessary CAN-SPAM compliance language and links for your guests to visit you online, find a location, and language asking them to add your domain to their address book to help ensure delivery to their inbox.  The footer has slight variations for the different versions (for instance, the online version does not include an unsubscribe link), and is the standard footer that is used in most templates in Enterprise today.  If for any reason you wish to make changes to what your brand's footer contains, please contact Client Support.

Settings

From this tab you can modify general settings that apply to the entire mailing:

  • Content area width: this is the width of the area where content blocks are dropped. According to email marketing best practices, it should typically be set to 600px or less. Please note that this is the maximum width that will be used on larger devices. When the device’s screen is smaller, the message will adjust automatically to it.
  • Background color: it's the mailing background color. This setting is effective only for rows (and columns) where a color has not been specified. Otherwise, the background color specified for that content structure will be used.
  • Content area background color: it's the background color for the content area. This setting is effective only for rows and columns where a color has not been specified.
  • Default font: it's the default font that will be used when another font family has not been specified. This setting affects all text set to use the global font.
  • Link color: it's the link color. As above, this setting affects all text links set to use the default color.

Settings.png

Converting to HTML

There are times when the drag & drop editor might not support the design flexibility that is needed or there may be a need for advanced merge codes that the drag & drop cannot support, for instance, nested merge codes.  In these cases, you may wish to start your mailing using the drag & drop editor.  Once you have your mailing as far as you think you can take it using drag & drop, you can click "Convert to HTML".  This action will convert the content to raw HTML, allowing you full flexibility in editing.  You will have access to rich text editing, but you are converting your mailing from the ease of drag and drop to HTML, the equivalent of creating a mailing without a template, something only email HTML experts normally mess with.  

Converting a drag & drop mailing to HTML cannot be undone, so proceed with caution.  If you want to explore this functionality, we recommend making a copy of a drag & drop mailing and using the copy to experiment.