> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 9af73811-44ab-42ec-b420-af59394ef732
---

# Specify drag and drop areas in a custom email template

> Learn how to specify drag and drop areas in a custom email template.

export const SupportedProducts = ({marketing, sales, service, cms, data, commerce, marketingLevel, salesLevel, serviceLevel, cmsLevel, dataLevel, commerceLevel}) => {
  const translations = {
    description: "Requires one of the following products or higher.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub",
      data: "Data Hub",
      commerce: "Commerce Hub"
    },
    tiers: {
      free: "Free",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }, {
    name: data ? translations.productNames.data : '',
    level: translateTier(dataLevel),
    icon: "https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/subscription_key_icons/operations_icon.svg",
    alt: "Data Hub"
  }, {
    name: commerce ? translations.productNames.commerce : '',
    level: translateTier(commerceLevel),
    icon: "https://developers.hubspot.com/hubfs/Knowledge_Base/subscription_key_icons/commerce_icon.svg",
    alt: "Commerce Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Supported products" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="professional" />
</Accordion>

[Drag and drop areas](/cms/start-building/building-blocks/modules/hide-modules-and-sections) allow developers to create sections of custom email templates that support layout, stylistic and content changes directly within the email editor. This allows developers to create fewer email templates with global structure, that support content creators making a multitude of pages with various purposes and layouts.

<Warning>
  **Please note:**

  Custom email templates can only contain one drag and drop area.
</Warning>

<Steps>
  <Step title="Create a new HTML template">
    Create a new html template that will include the HubL and HTML code which will make up your drag and drop section:

    * In your HubSpot account, navigate to **Content** > **Design manager.**.
    * In the left sidebar, create a new file by clicking **File** > **New file**.
    * In the dialog box, click the **What would you like to build today?** dropdown menu and select **HTML + HubL**.
    * Click **Next**.
    * Click the **Template type** dropdown menu then select **Email**.
    * Enter a **name** for the template.
    * To update the template's location, click **Change** under *File location*, then select a new folder where the template will be created.
    * Click **Create**.
  </Step>

  <Step title="Add HubL tags to template head">
    Review the following required and optional tags you can include in the `<head>` section of your email template for styling and compatibility purposes:

    ### Required tag

    `{{ dnd_area_stylesheet }}`

    This tag will provide the following:

    * Adds associated media queries
    * Fixes known styling issues in Outlook
    * Resets margins and paddings
    * Enables anti-aliasing
    * Adds some CSS

    ### Optional tags

    To ensure that your template renders consistently across all major email clients, you can also include the following optional HubL tags to your template:

    * `{{ email_header_includes }}`: this tag injects CSS into your template to help render styling consistently, fix common styling issues, and add metadata to the email's HTML. When parsing this HubL tag, the following content will be added within the `<head>` of the email's HTML:

    | Parameter                                                                 | Description                                                                                                                                                                                                                                |
    | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
    | `<meta name="x-apple-disable-message-reformatting">`                      | Prevent iOS 11 from automatically scaling emails                                                                                                                                                                                           |
    | `<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`     | Informs browsers and email clients how you expect them to interpret different characters.                                                                                                                                                  |
    | `<meta http-equiv="X-UA-Compatible" content="IE=edge">`                   | Enables CSS3 and media queries on Windows Phone 7.5, informs Internet Explorer to render content in the highest mode possible, and allows the browser to choose which version of Internet Explorer that the email should be rendered with. |
    | `<meta name="viewport" content="width=device-width, initial-scale=1.0"/>` | Sets the viewable area to the width of the device screen, which helps make your email responsive.                                                                                                                                          |

    * `{{ reset_css_stylesheet }}`: including this tag will fix a number of styling issues in Outlook, and will also reset your email's margins and paddings.

    * `{{ outlook_background_snippet }}`: this tag will set the background image or color in Outlook, provided that you've specified an associated background CSS rule.
  </Step>

  <Step title="Create a drag and drop area">
    After you add the `{{ dnd_area_stylesheet }}` HubL tag and any other optional tags to the `<head>` of your template, you can configure a `dnd_area` in the template body.

    ### Create an empty drag and drop area

    A `dnd_area` is the container that makes a portion of the web page editable in terms of its structure, design, and content. The body of a `dnd_area` tag supplies the default content for the drag-and-drop area.

    The drag-and-drop area can be enclosed within either a `<div>` or a `<table>`. One constraint of the drag-and-drop area is that the minimum width is set to 624 pixels, and this value cannot be overridden.

    This tag on its own will generate a drop zone for content creators to drag modules into within the email editor.

    The following code would specify an empty drag and drop area:

    ```hubl theme={null}
    {% dnd_area "main" %}
    	<!-- generates an empty drag and drop area drop-section -->
    {% end_dnd_area %}
    ```

    ### Create a drag and drop area with empty columns

    You can also customize your drag and drop area to specify default sections and columns by using the `dnd_section` and `dnd_column` fields.

    For example, the following HubL code would specify a drag and drop area with 3 columns:

    ```hubl theme={null}
    {% dnd_area "main" %}
      {% dnd_section padding={'top': 25, 'bottom': '20} %}
        {% dnd_column width=4 %}
        {% end_dnd_column %}
        {% dnd_column width=4 %}
        {% end_dnd_column %}
        {% dnd_column width=4 %}
        {% end_dnd_column %}
      {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    <Warning>
      The `dnd_row` HubL tag is <u>not</u> currently supported in email templates.
    </Warning>
  </Step>

  <Step title="Add a drag and drop area with modules">
    To pre-populate a section with content, you can use the `dnd_module` tag to include a module by referencing its path. The module must be added within a section and column to pre-populate the drag-and-drop area with content.

    In the example below, a default HubSpot module is referenced, but you can also include modules you've built, by specifying their path within your Design Tools file tree.

    To specify a default value for the `dnd_module`, you can use the `module_attribute` tag.

    ```hubl theme={null}
    {% dnd_area "main", full_width=False %}
    	{% dnd_section padding={
    	            'top':'25',
    	            'bottom':'20'
    	            }, full_width=False %}
    	  {% dnd_column width=6 %}
    	    {% dnd_module path='@hubspot/image_email', img={
    	                    'alt':'NavyLogo',
    	                    'height':38,
    	                    'src':'email_dnd_template_images/NavyLogo.png',
    	                    'width':120
    	                    }, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
    	                    'padding-bottom':'10px',
    	                    'padding-left':'20px',
    	                    'padding-right':'20px',
    	                    'padding-top':'10px'
    	                    } %}
    	    {% end_dnd_module %}
    	  {% end_dnd_column %}
    	  {% dnd_column width=6 %}
    	  {% end_dnd_column %}
    	{% end_dnd_section %}
    {% end_dnd_area %}
    ```
  </Step>

  <Step title="Further customize and style your drag and drop template">
    Each drag and drop HubL tag (e.g., `dnd_area`, `dnd_section`, `dnd_column` etc.) includes different parameters that you can use to provide default styling and specify other behavior, such as the label that will appear in the email editor sidebar.

    To learn more about the parameters available for each tag, check out the links below for each tag:

    * [dnd\_area](/cms/reference/hubl/tags/dnd-areas#dnd-area)
    * [dnd\_section](/cms/reference/hubl/tags/dnd-areas#dnd-section)
    * [dnd\_column](/cms/reference/hubl/tags/dnd-areas#dnd-column)
    * [dnd\_module](/cms/reference/hubl/tags/dnd-areas#dnd-module)
  </Step>
</Steps>