# Add dnd\_area to module

**URL:** <https://community.hubspot.com/t/add-dnd-area-to-module/29978>\
**Category:** CMS Development\
**Created:** [January 11, 2021, 12:59pm UTC](https://community.hubspot.com/t/add-dnd-area-to-module/29978 "2021-01-11T12:59:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RRimestad9](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rrimestad9/32/52876_2.png) [@RRimestad9](https://community.hubspot.com/u/RRimestad9)\
**Post date:** [January 11, 2021, 12:59pm UTC](https://community.hubspot.com/t/add-dnd-area-to-module/29978/1 "2021-01-11T12:59:24Z")

</div>

Is it possible to add a dnd\_area to a module? We are trying to implement a module which is more like a section with a different background color:

 ![36218i383C69D17B964751.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/7/c77206cc403d4b94a8fef13d576047afc046947e.png)

So we would like to have one module which is the orange box, and then the possibility to add an instance of rich text and accordion inside of it. Is that possible?

When I try the obvious, add dnd\_area to module.html, I get “‘dnd\_area’ is disabled in this context”

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [January 11, 2021, 8:03pm UTC](https://community.hubspot.com/t/add-dnd-area-to-module/29978/2 "2021-01-11T20:03:26Z")

</div>

@RRimestad9 dnd tags are only available in templates, not modules. Modules are the inner-most elements of a dnd template so it woudn’t make sense for it to be able to have a whole nother dnd\_area in it.

```lia-code-sample
{% dnd_area %}
 {% dnd_section %}
 {% dnd_column %}
 {% dnd_row %}
 {% dnd_module %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_dnd_section %}
{% end_dnd_area %} 

```

Any reason you can’t create the module without the background and then in a drag and drop _template_ the background can be set on the section that the module is added to? And if you’re wanting the rich text and accordion to be optional you can always use if statements in the module to do that. Like if your rich text field’s name is rich\_text just add the following around the content for the rich text to only show if the field is filled out.

```lia-code-sample
{% if module.rich_text %}
<div>{{ module.rich_text }}</div>
{% endif %}

```

Could even use boolean fields and if statements to change the order of the contents.

---

<div class="post-metadata">

**Author:** ![RRimestad9](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rrimestad9/32/52876_2.png) [@RRimestad9](https://community.hubspot.com/u/RRimestad9)\
**Post date:** [January 12, 2021, 7:48am UTC](https://community.hubspot.com/t/add-dnd-area-to-module/29978/3 "2021-01-12T07:48:29Z")

</div>

Hi, and thanks for replying!

That’s a disappointment. Adding that section to the page template is definitely one way of solving it, but it gives us way less flexibility if we for example want to have more than one section of this kind on a page. There should not really be any reason why one module cannot be the container of other modules. That is something I actually assumed would be present in a professional tool like HubSpot CMS.

But that is not your fault! Thanks a lot for replying. We will look into your solutions.

---

<div class="post-metadata">

**Author:** ![RRimestad9](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rrimestad9/32/52876_2.png) [@RRimestad9](https://community.hubspot.com/u/RRimestad9)\
**Post date:** [January 12, 2021, 8:28am UTC](https://community.hubspot.com/t/add-dnd-area-to-module/29978/4 "2021-01-12T08:28:41Z")

</div>

OK. So I am trying to make a new module with booleans for various other modules that this module can contain. Do you, by chance, know of any way I can import fields.json from the other modules into the fields.json file of my section module so I do not have to duplicate them?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [January 12, 2021, 3:21pm UTC](https://community.hubspot.com/t/add-dnd-area-to-module/29978/5 "2021-01-12T15:21:14Z")

</div>

@RRimestad9 If you’re using CMS CLI for local development you can use [hs fetch](https://developers.hubspot.com/docs/cms/guides/getting-started-with-local-development#fetch-a-project-from-your-account) to get your module files and then just copy paste one module’s fields.json data into another module’s.

I don’t see why this would decrease flexibility? You can use a module more than once in a template, with different settings set, and also have multiple sections. And if you already have modules for the pieces you want you can just pull those into section columns.

```lia-code-sample
{% dnd_area %}
 {% dnd_section background_color="#FFFFFF" %}
 {% dnd_column width=6 %}
 {% dnd_row %}
 {% dnd_module path="path-to-your-module" %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}

 {% dnd_column offset=6, width=6 %}
 {% dnd_row %}
 {% dnd_module path="path-to-your-other-module" %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_dnd_section %}

 {% dnd_section background_color="#EEEEEE" %}
 {% dnd_column width=6 %}
 {% dnd_row %}
 {% dnd_module path="path-to-your-module", your_field_name="some other setting/text" %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}

 {% dnd_column offset=6, width=6 %}
 {% dnd_row %}
 {% dnd_module path="path-to-your-other-module", your_field_name="some other setting/text" %}{% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% dnd_dnd_section %}
{% end_dnd_area %} 

```

---

<div class="post-metadata">

**Author:** ![RRimestad9](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rrimestad9/32/52876_2.png) [@RRimestad9](https://community.hubspot.com/u/RRimestad9)\
**Post date:** [January 13, 2021, 7:12am UTC](https://community.hubspot.com/t/add-dnd-area-to-module/29978/6 "2021-01-13T07:12:25Z")

</div>

Yeah, but I would like to keep my code DRY 🙂 We wrote a custom compiler which makes it possible to use {% include %} inside fields.json, so that problem has been solved.

A colleague just discovered that you can style sections! So as long as that is possible, your approach works perfectly. Thanks a lot for your time 👍👍👍