<commit_before>---
layout: page
weight: 45
title: Drag & Drop
navigation:
  show: true
seo:
  title: Drag and Drop Template Editor
  override: true
  description: Use our Drag and Drop editor to swiftly build out your campaign content with predefined modules. Edit individual modules easily in the style sidebar, and reorder modules with a simple drag of your mouse.
---

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.

![]({{root_url}}/images/DnD_toggle_off.png) <br />
![]({{root_url}}/images/DnD_toggle_on.png) <br />
![]({{root_url}}/images/module_options_thumb.png)

{% anchor h2 %}
Getting Started
{% endanchor %}

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.

{% info %}
For information on how to convert your existing template content for compatibility with corresponding Drag & Drop modules, see the section [HTML Markup](#-HTML-Markup-for-Modules) for Modules below. Any content that is not converted for use in the Drag & Drop Editor will be grouped together inside a WYSIWYG module.
{% endinfo %}

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.


{% anchor h2 %}
Available Modules
{% endanchor %}

{% info %}
We populate every campaign with both pre-header and footer modules.
{% endinfo %}

{% warning %}
<strong>Pre-header</strong> and <strong>footer</strong> modules are locked modules and cannot be removed.
{% endwarning %}

Pre-header and footer 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.

<table id="dragdrop-modules" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th><strong>Module Type</strong></th>
      <th><strong>Description</strong></th>
      <th><strong>Unique Style Options</strong></th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Text</td>
      <td>A module for text</td>
      <td>background color, padding</td>
    </tr>

    <tr>
      <td>Image</td>
      <td>A module to house a single image</td>
      <td>image background, image margin</td>
    </tr>

    <tr>
      <td> Image & Text </td>
      <td>A module allowing for an image to be aligned to the left or right of text</td>
      <td>image position, image background, image margin, text background, text margin</td>
    </tr>

    <tr>
      <td>Columns</td>
      <td>A module with multiple drop zones for other non-column modules</td>
      <td>container background, container padding, cell padding, columns</td>
    </tr>

    <tr>
      <td>Button</td>
      <td>An external link</td>
      <td>button color, border color, Font color, width, height, padding, border radius, font size, button text, button URL, alignment,container background, container padding</td>
    </tr>

    <tr>
      <td>Spacer</td>
      <td>Extra spacing between modules</td>
      <td>background color, spacing (padding-bottom)</td>
    </tr>

    <tr>
      <td>WYSIWYG</td>
      <td>"What You See Is What You Get" – an all-purpose module that can contain text and images</td>
      <td>background color, padding</td>
    </tr>
</tbody></table>

![]({{root_url}}/images/drag_drop_button_short.gif)

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.

{% anchor h2 %}
HTML Markup for Modules
{% endanchor %}

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.

{% anchor h3 %}
HTML For Drag & Drop
{% endanchor %}

To start, you will first need to add an attribute to your opening &lt;html&gt; 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).

<strong>Generic Drag & Drop Module Example</strong>

{% codeblock lang:html %}<commit_msg>added divider module to list of available modules, added note about duplicating modules<commit_after>---
layout: page
weight: 45
title: Drag & Drop
navigation:
  show: true
seo:
  title: Drag and Drop Template Editor
  override: true
  description: Use our Drag and Drop editor to swiftly build out your campaign content with predefined modules. Edit individual modules easily in the style sidebar, and reorder modules with a simple drag of your mouse.
---

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.

![]({{root_url}}/images/DnD_toggle_off.png) <br />
![]({{root_url}}/images/DnD_toggle_on.png) <br />
![]({{root_url}}/images/module_options_thumb.png)

{% anchor h2 %}
Getting Started
{% endanchor %}

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.

{% info %}
For information on how to convert your existing template content for compatibility with corresponding Drag & Drop modules, see the section [HTML Markup](#-HTML-Markup-for-Modules) for Modules below. Any content that is not converted for use in the Drag & Drop Editor will be grouped together inside a WYSIWYG module.
{% endinfo %}

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.


{% anchor h2 %}
Available Modules
{% endanchor %}

{% info %}
We populate every campaign with both pre-header and footer modules.
{% endinfo %}

{% warning %}
<strong>Pre-header</strong> and <strong>footer</strong> modules are locked modules and cannot be removed.
{% endwarning %}

Pre-header and footer 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.

<table id="dragdrop-modules" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th><strong>Module Type</strong></th>
      <th><strong>Description</strong></th>
      <th><strong>Unique Style Options</strong></th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Text</td>
      <td>A module for text</td>
      <td>background color, padding</td>
    </tr>

    <tr>
      <td>Image</td>
      <td>A module to house a single image</td>
      <td>image background, image margin</td>
    </tr>

    <tr>
      <td> Image & Text </td>
      <td>A module allowing for an image to be aligned to the left or right of text</td>
      <td>image position, image background, image margin, text background, text margin</td>
    </tr>

    <tr>
      <td>Columns</td>
      <td>A module with multiple drop zones for other non-column modules</td>
      <td>container background, container padding, cell padding, columns</td>
    </tr>

    <tr>
      <td>Button</td>
      <td>An external link</td>
      <td>button color, border color, Font color, width, height, padding, border radius, font size, button text, button URL, alignment,container background, container padding</td>
    </tr>

    <tr>
      <td>Spacer</td>
      <td>Extra spacing between modules</td>
      <td>background color, spacing (padding-bottom)</td>
    </tr>

    <tr>
      <td>WYSIWYG</td>
      <td>"What You See Is What You Get" – an all-purpose module that can contain text and images</td>
      <td>background color, padding</td>
    </tr>
    
    <tr>
      <td>Divider</td>
      <td>A visual divider, or horizontal rule, between modules</td>
      <td>background color, line color, height, padding</td>
    </tr>
</tbody></table>

![]({{root_url}}/images/drag_drop_button_short.gif)

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.

{% anchor h2 %}
HTML Markup for Modules
{% endanchor %}

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.

{% anchor h3 %}
HTML For Drag & Drop
{% endanchor %}

To start, you will first need to add an attribute to your opening &lt;html&gt; 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).

<strong>Generic Drag & Drop Module Example</strong>

{% codeblock lang:html %}
{'fraction_non_alphanumeric': 0.09166054371785452, 'fraction_numerical': 0.0011021307861866275, 'mean_word_length': 3.79480405107882, 'pattern_counts': {'":': 0, '<': 179, '<?xml version=': 0, '>': 179, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6809872', 'n_tokens_mistral': 3031, 'n_tokens_neox': 2887, 'n_words': 1438}