Drag & Drop Email

Create a Drag & Drop Email

1. Click on Emails on the left-side menu.
2. Email email name in the Create New Email field.
3. Select Drag & Drop Email from the Content Type drop down menu.
4. Click Create.
5. Select a prebuilt layout from one of the five available options:
   1. Blank
   2. One column
   3. Standard
   4. Newsletter
   5. E-commerce
6. Click Continue to move to the Properties step.
7. Fill out the required Properties fields and any optional fields.
8. Click Continue to move to the Content step.
9. Drag rows and content blocks from the editor to your workspace to build your creative.
10. To save your progress, click on Save. This will allow you to leave the email without losing any work. The email with remain in the Draft status when saved.
11. To validate your email's content and update the status to Ready, click Continue to move to the Preview tab.

Drag & Drop Editor Workspace

The workspace is separated into three sections:

• Settings: apply general customization options to the entire email.
• Rows: store multiple types of content within a single section of an email.
• Content: the building blocks of your email.

The workspace can also be easily toggled between Desktop and Mobile view to better optimize your designs for mobile devices.

Settings

The Settings tab in the editor provides a centralized location for setting up configurations that apply across your entire design (expect where a custom setting is applied to a row). This is very useful to help build a coherent message very quickly.

• Content area width: Sets the maximum width of the content area on larger screens. It is ignored on smaller devices.
• Content area alignment: Define the default alignment for content areas. This is set to Center, by default.
• Background color: The default background color for the message. This can be overridden at the row, column, and content block level when setting properties for those elements.
• Content area background color: The default background color for the content area. This can be overridden at the content block level.
• Background image: Set a background image for the entire email. 
• Default font: The default font family that all content elements in the message will inherit. This can be overridden at the content block level.
• Link color: The default link color that all links will inherit. This can be overridden at the content block level.

There are two optional properties that can be configured, but are not required.

• Title:  Sets the title in the HTML code.
• Language: Use this setting to declare an HTML language attribute within the email.

Rows

Rows organize content blocks and define the horizontal composition of a section in the email. Each row has its own setting and can be customized to fit your content needs.

The following options are available for each row:

• Row background color: set the background color for the entire row.
• Content area background color: specify the background color for just the content area within the row.
• Row background image
• Content area borders: set a border around the content area with customizable color, width, and style.
• Content area rounded corners: Add rounded corners to the content area.
• Vertical align: choose the vertical alignment for the content block(s) within the row. 

Column Structure

Each row can be separated into columns, allowing you to put different content elements side by side. A row has a maximum of 12 columns and a minimum column width of 1.

• To add a new column, click on + Add new. The new column will be added to the far right side of the row, with a width of 1, and the nearest column on the left will be reduced accordingly.

• The column widths can be adjusted by clicking the center space between two columns and sliding it left or right.

• When clicking on an individual column, the following options can be customized:
  • Column background color
  • Padding
  • Border

Stack on Mobile

Vertical stacking is supported by the most popular mobile email clients. In some cases, the desktop version will be displayed which happens when a client lacks support for standard CSS.

The best practices of email design suggest a careful use of this display setting, as keeping a user-friendly vertical layout on a mobile makes sense in most cases.

As always, it is up to you and your creativity when and how to use this option.

When stack on mobile is off:

• The content within the row is prevented from stacking vertically on mobile devices.

When stack on mobile is on:

• The content within the row is stacked vertically on mobile devices.

Stack order on mobile:

• Define stacking order of content blocks when this option is enabled.

Hide on Mobile

Mobile design is not only about the layout responsiveness, but also about having the appropriate content in the right context. An email that may yield excellent results on desktop screens may not work as well when the user needs to scroll on his mobile device to reach the call to action.

The best way to solve this challenge is to hide unnecessary design and/or content elements when the message displays on mobile devices.

All content blocks in the Drag and Drop editor will include a "Hide on mobile" setting in the property panel.

Content

This section includes a series of tiles that represent the different kinds of content you can drag and drop into a row or column.

Content Type	Description
Title	Specify heading tags (H1-H3) in your email design.
Paragraph	The Paragraph content block is similar to the Text content block but includes additional formatting options such as Font Weight and Paragraph Spacing.
List	Create numbered or bulleted lists. It also provides more granular control over formatting than using the list option in a Text Block.
Image	Browse or search existing files from your Assets Library, import new files, create folders, and preview and insert images into your email.
Button	Add a customizable button to your email.
Divider	Create visual separation between content blocks with a horizontal line.
Spacer	Add additional space to your email design or use it when you need precise control over spacing, such as when working with background images or images with varying aspect ratios.
Social Icons	Choose from a selection of social icons to use within your email.
HTML*	The Custom HTML content block allows you to easily add your own HTML code to an email message that you are designing.
Video	Add a YouTube or Vimeo URL to share a video and its thumbnail in your email.
Icons	Combine small images and text in a single, flexible unit without the constraints of row structures.
Menu	Add a simple, text-based navigation element in your email. The properties can be set for each item and the items can be displayed horizontally or vertically by changing the layout.

Every content block has it owns settings, such as granular control on padding and alignment. The right-side panel automatically will switch to the property panel for the selected element. You can either set padding or borders around a content element for all sides at once, or individually for each side.

Custom Attributes

With Custom Attributes, you can easily append additional information to the HTML tags in your email. These attributes can be applied to images and links, both in text blocks and buttons.

For images and buttons, these attributes will be visible in the editor sidebar, under the Attributes section.

For links in text blocks, attributes can be configured in the dialog window when creating a link.

HTML Block

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   

Mobile Design Mode

Easily toggle between Desktop and Mobile View from the editor. When switched to Mobile View, the editor content area will reduce to 320px. While in Mobile View, you can continue to edit to customize your email design.

If you're using the "hide on mobile/desktop" feature on any content block(s) within the email, you will see another icon render next to the design mode toggle. This icon determines whether or not your want content blocks that are hidden on mobile to populate in the editor. 

Plain Text version

Click Plain text to create a text version of your email. You can drag and drop your text file into the workspace or auto-generate text based on your email content by selecting Autogenerate Text from the Content menu.

Spell Check

This feature will identify words in your Plain Text document that are misspelled. Click on the highlighted word for a list of correctly spelled words to replace it with. Click Save Changes when done.