Migrating from the Legacy Newsletter? Here are some valuable resources to help get you started.

The Drag & Drop editor helps you swiftly build your campaign with predefined content modules. Easily edit individual modules in the sidebar, and reorder modules with a simple drag of your mouse.



Getting Started

To get started, click on the Drag & Drop toggle in the Settings tab, located below the campaign name field. A modal will display asking if you’re sure you want to change editor modes. Clicking “continue” will turn on the Drag & Drop Editor, which will wrap any existing content with HTML needed for the new editor features to work.

For information on how to convert your existing template content for compatibility with corresponding Drag & Drop modules, see the section HTML Markup for Modules below. Any content that is not converted for use in the Drag & Drop Editor will be grouped together inside a WYSIWYG module.

Turning on the Drag & Drop Editor will also open a new tab called “Build” which contains the available modules and style groups.

The “Global Styles” group has two subgroups: “Email Body,” with style options for background color, text, and link color and font family and size, and “Content Container” with style options for width, background color, and padding.

The “Module Styles” group is where unique styling options exist for the modules used in building your campaign. Dragging and dropping a module into the editor, or selecting an existing one, will reveal the styling options for that module.

You can duplicate a module by clicking the Duplicate Module icon in the upper right corner of the currently selected module. The duplicate will be placed directly beneath the original module.

Available Modules

We populate every campaign with footer modules.

Footer modules are locked modules and cannot be removed.

Footers are important pieces of any email campaign, where information like sender details and unsubscribe links are included. Individual settings for these include background color and padding or margin spacing.

Module Type Description Unique Style Options
Text A module for text background color, padding
Image A module to house a single image image background, image margin
Image & Text A module allowing for an image to be aligned to the left or right of text image position, image background, image margin, text background, text margin
Columns A module with multiple drop zones for other non-column modules container background, container padding, cell padding, columns
Button An external link button color, border color, Font color, width, height, padding, border radius, font size, button text, button URL, alignment,container background, container padding
Spacer Extra spacing between modules background color, spacing (padding-bottom)
WYSIWYG “What You See Is What You Get” – an all-purpose module that can contain text and images background color, padding
Divider A visual divider, or horizontal rule, between modules background color, line color, height, padding
Social Icons that allow for social media integration within your campaigns. icon (Facebook, Twitter, Instagram, Google+, and Pinterest), size, border radius

Dragging and dropping a module, or selecting an existing one in the editor or from the sidebar, will reveal that module’s unique style options and highlights the module so you know precisely which one is being worked on.

HTML Markup for Modules

To build a module from scratch in the code editor, or to convert existing html elements into Drag and Drop modules, there are simple templates to follow.

HTML For Drag & Drop

To start, you will first need to add an attribute to your opening <html> tag: data-dnd="true". This will turn on the Drag & Drop editor mode (and flip the toggle in the Settings tab to “On”).

The generic template for all Drag & Drop modules is a table whose data-type varies per the type of module you are using. Some modules may have content that can be placed in the table’s column (like text for a Text module) while others may have none (such as a Spacer module).

Generic Drag & Drop Module Example

1
2
3
4
5
6
7
<table role="module" data-type=[MODULE TYPE]>
  <tr>
    <td role="module-content">
[MODULE CONTENT]
    </td>
  </tr>
</table>

Button

The button module is built using a multitude of unique attributes. Because of this, though the template for the button is very simple, assigning attributes like a URL or button text is designed to be built in the Style sidebar.

If you are converting HTML to use our Drag and Drop modules, we suggest replacing any button instances with the following template, then switching to the Style tab to populate the text and URL fields, as well as the button’s CSS.

Button example:

1
<table role="module" data-type="button"></table>

Spacer

The spacer module contains no content, only background color and spacing attributes that can be edited in the Style sidebar. Thus, the template is also very simple:

Spacer example:

1
<table role="module" data-type=”spacer”></table>

Text

The text module follows the generic template. You can leave the section marked [MODULE CONTENT] blank and switch from the code editor to the visual editor to see the how it will look with the default attributes. Or, you can replace it with any valid HTML text:

1
<div>This is an example of normal text content in a text module.</div>

Text example:

1
2
3
4
5
6
7
<table role="module" data-type=”text”>
  <tr>
    <td role="module-content">
[MODULE CONTENT]
    </td>
  </tr>
</table>

Image

Once again you can leave the variables blank and switch views to get a placeholder image icon, using the image library to populate, or you can immediately use your own image by:

Replacing [DATA ATTRS] with

1
  data-attributes=' { "width": X, "height": Y, "url": "an_image_url", "alt_text": "TEXT", "link": "valid_url" } '

Replacing [MODULE CONTENT] with

1
  <a href="valid_url" target="_blank"><img width="X" height="Y" src="an_image_url" alt="TEXT" />

Image example:

1
2
3
4
5
6
7
<table role="module" data-type="image" [DATA ATTRS]>
  <tr>
    <td role="module-content">
      [MODULE CONTENT]
    </td>
  </tr>
</table>

Image & Text

As the name implies, this module has nested within it two individual image and text modules. The template is thus a bit larger, but the convention is the same (you can leave the template blank and switch views to see the default attributes and build from there, or put content in following the corresponding template descriptions above).

Image and Text Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table role="module" data-type="imagetext">
  <tr>
    <td>
      <table>
        <tr role="module-content">
          <td class="templateColumnContainer" >
            <table>
              <tr>
                <td class="leftColumnContent" role="column-one">
                  <table role="module" data-type="image">
                    <tr>
                      <td role="module-content">
                        [MODULE CONTENT]
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td class="templateColumnContainer" >
            <table>
              <tr>
                <td class="rightColumnContent" role="column-two">
                  <table role="module" data-type="text">
                    <tr>
                      <td role="module-content">
                        [MODULE CONTENT]
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Columns

The Columns module acts as a container, with between 1 - 4 column drop zones for you to drag and drop other modules into.

A column module cannot be dropped inside another column module.

By default, a column module has 2 column drop zones. As with other templates, you can leave the section of the template marked [MODULE] empty to render the default empty columns, or you may replace it below with any valid module HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table role="module" data-type="columns">
  <tr>
    <td>
      <table class="columns--container-table">
        <tr role="module-content">
          <td role="column-0">
            [MODULE]
          </td>
          <td role="column-1">
            [MODULE]
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Divider

The divider module contains no content and functions only as a static design element. Much like a horizontal rule, the divider provides visual separation between other modules in your template. The divider module possesses background color, line color, line height, and padding attributes, which you can set.

As with the other modules, you can leave the section marked [MODULE CONTENT] blank and switch from the code editor to the visual editor to see how it will look with the default attributes.

Divider example:

1
2
3
4
5
6
7
<table class="module" role="module" data-type="divider">
  <tr>
    <td role="module-content">
      [MODULE CONTENT]
    </td>
  </tr>
</table>

WYSIWYG

The “What You See Is What You Get” (/ˈwɪziwɪɡ/ WIZ-ee-wig) module is effectively a full editor made available in one moveable container. Use this module if you wish to import existing HTML content as a whole instead of converting pieces to individual modules.

The WYSIWYG module follows the generic template. You can leave the section marked [MODULE CONTENT] blank and switch from the code editor to the visual editor to see the how it will look with the default attributes. Or, you can replace it with any valid HTML:

WYSIWYG example:

1
2
3
4
5
6
7
<table role="module" data-type=wysiwyg>
  <tr>
    <td role="module-content">
[MODULE CONTENT]
    </td>
  </tr>
</table>

Social

The social icons module allows for simple social media integration when creating or editing templates or campaigns. The module offers five different social media icon options (Facebook, Twitter, Instagram, Google+, and Pinterest) all of which can be toggled on or off as well as fully customized to match individual branding and design standards. The module displays when an icon link has been updated to point to a social media destination, providing a visual indicator that links have been properly configured.

To turn a social media option on or off, simply check or uncheck its corresponding checkbox. Once you have selected your desired icons, you can adjust the size, color, and border radius of the icons to match a template or campaign theme.

If you are converting HTML to use our Drag & Drop modules, please add the following code snippet to your template. Once pasted in the code view, switch back to the design editor, select the new social icons module and then modify the social icon styles in the module styles panel on the left side of the screen.

Social example:

1
2
3
4
5
6
<table class=“module” role="module" data-type="social">
  <tr>
    <td role=“module-content”>
    </td>
  </tr>
</table>