> ## 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: 34028818-8b5d-4a29-96bf-6a094e13b64e
---

# Creating a drag and drop area

> Using drag and drop areas to support content creators easily making layout, style and content changes

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/drag-and-drop/overview) are sections of a template that act as empty containers that can be modified directly from the page editor. By building drag and drop areas into a template, it enables content creators to add and manage modules in the page editor as needed, rather than relying on static modules built into the template.

<Frame>
  <img src="https://newinboundblog.hubspot.com/hubfs/a%20new%20approach.gif" alt="Animation of modules being dragged onto a page, with columns and rows being adjusted" />
</Frame>

In addition to using drag and drop areas as empty drop zones for content creators, you can also pre-populate drag and drop areas with various modules, layouts, and content to act as a starting point.

This tutorial will take you through setting up a simple drag and drop area. For more developer resources on drag and drop areas, see the [boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html) for best practices on implementation as well as the [drag and drop area HubL tag reference documentation](/cms/reference/hubl/tags/dnd-areas).

<Warning>
  **Please note:**

  A content creator can swap a page's template for another template of the same type, depending on whether it has [dnd\_area](/cms/reference/hubl/tags/dnd-areas) tags.

  * Drag and drop templates built with the visual layout editor can be swapped for other drag and drop templates or coded templates with or without *dnd\_area* tags.
  * Coded templates with *dnd\_area* tags can only be swapped for other coded templates with *dnd\_area* tags.
  * Coded templates without *dnd\_area* tags can only be swapped for other coded templates without *dnd\_area* tags.

  When the page's template is swapped, any existing content added to drag and drop areas of the first template will be retained.
</Warning>

<Steps>
  <Step title="Create a new HTML template">
    Create a new HTML template to contain the HubL and HTML which will make up your drag and drop section.

    <Info>
      Drag and drop areas are based on a 12 column responsive grid. Drag and drop tags render markup with class names designating columns and rows. You are responsible for adding a stylesheet to target those class names. An example of layout styles you could implement can be found in the [HubSpot CMS boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Your stylesheet can be added to the template using [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css).
    </Info>
  </Step>

  <Step title="Create a 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.

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

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

  <Step title="Create a section with a module">
    A `dnd_section` is a top-level row, and can only be a direct child of a `dnd_area`. Sections support a variety of parameters that control default values for stylistic controls content creators have for sections within the content creators.

    As an example, the code below creates a section with a background image (`background_image`). This section is centered by a `vertical-alignment` parameter, and has a max width of `1000px` field for child content. For a full list of supported parameters on the drag and drop HubL tags, see the [drag and drop area HubL tag reference](/cms/reference/hubl/tags/dnd-areas) documentation.

    To pre-populate the section with content, the code also includes a `dnd_module` tag to include a module by referencing its path. For this example, the `dnd_module` is pulling in HubSpot's default rich text module, as set by the `path` parameter. A default value for the rich text module is specified using the `module_attribute` tag.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
        {% dnd_section
            background_image = {
                'backgroundPosition': 'MIDDLE_CENTER',
                'backgroundSize': 'cover',
                'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
              },
              max_width=1000,
              vertical_alignment='MIDDLE'
        %}
            {% dnd_module path='@hubspot/rich_text' %}
                {% module_attribute "html"%}
                    This is your main headline.
                    Use this space to tell everyone about what you have to offer.
                {% end_module_attribute %}
            {% end_dnd_module %}
        {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    This results in the drag and drop area containing a module that content creators can edit within the content editor. Note how setting the `max_width` on the `dnd_section` is affecting the content.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_text.png" alt="screenshot of the page editor with the module toolbar displaying" />
    </Frame>
  </Step>

  <Step title="Include multiple modules">
    To include more than one module, use multiple `dnd_module` tags. By setting the `offset` and `width` parameters, which are based off of a 12 column grid, you can place an image module next to the rich text module, as shown below.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
        {% dnd_section
            background_image={
                'backgroundPosition': 'MIDDLE_CENTER',
                'backgroundSize': 'cover',
                'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
            },
            max_width=1000,
            vertical_alignment='MIDDLE'
        %}
            {% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %}
                {% module_attribute "html"%}
                	<h1>This is your main headline.</h1>

    Use this space to tell everyone about what you have to offer.
                {% end_module_attribute %}
            {% end_dnd_module %}
            {% dnd_module path='@hubspot/linked_image',
              width=4,
              offset=8,
              img={
                "src": "https://www.dragndrop.com/placeholder-image.jpg",
                "alt": "Stock placeholder image"
              }
            %}
            {% end_dnd_module %}
        {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    Now the page has an editable image module as well as a drag handle, allowing content creators to change the width and offset of the modules. Note how setting a `vertical_alignment` on the `dnd_section` is vertically centering our content.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_image.png" alt="screenshot of page editor showing an image module added to a section" />
    </Frame>
  </Step>

  <Step title="Incorporate columns and rows">
    To make the drag and drop area more complex, you can incorporate rows and columns using the `dnd_row` and `dnd_column` tags. Rows and columns act similarly to sections in the content editor, where content creators can drag them around, as well as clone, delete, and style them.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
      {% dnd_section
        background_image={
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
        },
        max_width=1000,
        vertical_alignment='MIDDLE'
      %}
        {% dnd_module path='@hubspot/linked_image',
          width=6,
          img={
            "src": "https://www.dragndrop.com/placeholder-image.jpg",
            "alt": "Stock placeholder image"
          }
        %}
        {% end_dnd_module %}
        {% dnd_column width=6, offset=6 %}
          {% dnd_row
            padding={
                'bottom': 15
            }
          %}
            {% dnd_module path='@hubspot/rich_text' %}
              {% module_attribute "html"%}
                  <h1>This is your main headline.</h1>

    Use this space to tell everyone about what you have to offer.
              {% end_module_attribute %}
            {% end_dnd_module %}
          {% end_dnd_row %}
          {% dnd_row %}
            {% dnd_module path='@hubspot/form' %}
            {% end_dnd_module %}
          {% end_dnd_row %}
        {% end_dnd_column %}
      {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    Now, content creators will have further stylistic and layout control over specific rows and columns, in addition to modules and sections.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_area_full.png" alt="screenshot of page editor showing a row with two columns, an image module left, rich text module and form module on right." />
    </Frame>
  </Step>

  <Step title="Set generic drag and drop component styles">
    The various components of drag and drop areas, sections, columns, rows and modules all have classes which can be styled using CSS. The editable styles and options for these components can be set using CSS rather than HubL. For example, default padding can be set on `dnd_sections` with the CSS:

    ```css theme={null}
    .dnd-section {
      padding: 80px 20px;
    }
    ```

    The generic CSS selectors for the drag and drop area components are `.dnd-section`, `.dnd-column`, `.dnd-row` and `.dnd-module`. Aside from these `dnd` prefixed classes, the actual grid class names in the markup are based on bootstrap 2 names. This does not mean you need to use bootstrap 2 with drag and drop areas. When you add a `dnd_area` to your page, you are responsible for providing the styles that make the grid work. An example of layout styles you could implement can be found in the [HubSpot CMS boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/css/objects). Your stylesheet can be added to the template using [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css).
  </Step>
</Steps>

## Related tutorials

* [Getting started with themes](/cms/start-building/building-blocks/themes/getting-started)
* [Getting started with custom modules](/cms/start-building/building-blocks/modules/quickstart)
* [How to add theme capabilities to an existing site](/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)