# Creating templates with custom modules

**URL:** <https://community.hubspot.com/t/creating-templates-with-custom-modules/92758>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [October 27, 2023, 3:12pm UTC](https://community.hubspot.com/t/creating-templates-with-custom-modules/92758 "2023-10-27T15:12:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![keyword](https://avatars.discourse-cdn.com/v4/letter/k/ebca7d/32.png) [@keyword](https://community.hubspot.com/u/keyword)\
**Post date:** [October 27, 2023, 3:12pm UTC](https://community.hubspot.com/t/creating-templates-with-custom-modules/92758/1 "2023-10-27T15:12:15Z")

</div>

Hi!  
I have a question regarding templates in Hubspot. I have a basic template with drag and drop field.

```lia-code-sample
<!--
 templateType: page
 isAvailableForNewContent: true
 label: Main template
 screenshotPath: ../images/template-previews/about.png
-->
{% extends "./layouts/base.html" %}

<div id="bodyWrap" class="wrap-main" style="margin-bottom: 0;">
 {% block body %}
 {% widget_container "flexible_column" label="Flexible Column" %}
 {% end_widget_container %}
 {% endblock body %}
</div>

```

It’s very flexible, I can move around modules in it and delete them.  
What if I want to add my existing custom modules to it? I know that I can import them this way:

```lia-code-sample
<!--
 templateType: page
 isAvailableForNewContent: true
 label: About template
 screenshotPath: ../images/template-previews/about.png
-->
{% extends "./layouts/base.html" %}

<div id="bodyWrap" class="wrap-main" style="margin-bottom: 0">
 {% block body %} 

 {% module "Banners" path="../modules/banners", 
 style ={
 alignment: "left",
 }, label="banner" %} 

 {% module "Text and media" path="../modules/text-media", 
 style ={
 alignment: "right",
 }, label="Text and media" %} 

{% endblock body %}
</div>

```

The problem with this approach is that I can’t move my modules around, can’t delete them, I’m literally stuck with this layout on the page.  
My question is if it’s possible to create a template with custom modules that are initially hard-coded but can be rearranged, have the possibility to add more modules, and be deleted within an editor.  
thanks

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [October 27, 2023, 4:20pm UTC](https://community.hubspot.com/t/creating-templates-with-custom-modules/92758/2 "2023-10-27T16:20:32Z")

</div>

Hi @keyword,

there’re some things to keep in mind.

The

```lia-code-sample
{% block body %}
...
{% endblock body %}

```

has no drag & drop functionality by itself.

The

```lia-code-sample
{% widget_container "flexible_column" label="Flexible Column" %}
...
{% end_widget_container %}

```

shouldn’t be used for new templates. It’s a solution if you want to migrate an “old” template to the new drag&drop function. The old function was called “flexible column” which was kinda like the new drag&drop function.

If you want to have a fully drag&drop experience I recommend you to write the code like this:

```lia-code-sample
{% block body %}
{% dnd_area 'Main area' %}
...
{% end_dnd_area %}
{% endblock body %}

```

You can find a more detailed documentation about [dnd\_elements in the developer docs](https://developers.hubspot.com/docs/cms/building-blocks/templates/drag-and-drop-areas#drag-and-drop-area-elements).

Also: You can’t place a

`{% module 'NAME-OF-MODULE' path="PATH-TO-MODuLE", label="SOME-NAME" %}`

tag in any dnd\_element.

To place an existing module in a dnd\_element(e.g dnd\_area) you have to rewrite it slightly so it becomes

```lia-code-sample
{% dnd_module 'NAME-OF-MODULE' path="PATH-TO-MODULE", label="SOME-NAME" %}
{% end_dnd_module %}

```

instead of just

`{% module 'NAME-OF-MODULE' path="PATH-TO-MODuLE", label="SOME-NAME" %}`

best,

Anton

---

<div class="post-metadata">

**Author:** ![keyword](https://avatars.discourse-cdn.com/v4/letter/k/ebca7d/32.png) [@keyword](https://community.hubspot.com/u/keyword)\
**Post date:** [October 30, 2023, 1:13pm UTC](https://community.hubspot.com/t/creating-templates-with-custom-modules/92758/3 "2023-10-30T13:13:39Z")

</div>

Thanks for your reply @Anton!  
It seems like I’ve made it work with this markup:

```lia-code-sample
<!--
 templateType: page
 isAvailableForNewContent: true
 label: Contact us template
 screenshotPath: ../images/template-previews/about.png
-->
{% extends "./layouts/base.html" %}

<div id="bodyWrap" class="wrap-main" style="margin-bottom: 0">

{% block body %}
 {% dnd_area 'Contact us area' %}
 {% dnd_section %} 
 {% dnd_column %}
 {% dnd_row %}
 {% dnd_module 'Form' path="../modules/Form", label="form" %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% dnd_row %}
 {% dnd_module 'Text and media' path="../modules/text-media", style ={
 alignment: "right",
 }, label="Text and media" %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column%}
 {% end_dnd_section%}
 {% end_dnd_area %}
{% endblock body %}
</div>

```

I can’t put dnd\_module as a direct child of dnd\_area, so it has to be within dnd\_column and dnd\_row in order to show on the page.  
The problem that I have is that it’s kinda tricky to rearrange them due to dnd column/row built in behaviour. Currently, I can put modules side by side like so:

 ![hs.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/5/b56274c616ee36a24c1be78333041cd584469cde.png)

which will result in a broken layout:

 ![hs-2.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/5/859a7e5822782a2c4dc07ad40593e09b2c2f3ad0.png)

Can I disable it somehow within hubspot?  
There is also a bug when I’ll drag the module to the right side of the window, it will break the whole page:

 ![hs-3.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/0/2011e77cc172c8cc9d7af3bbb5e5dfee069b82b9.png)

The page will look like this with huge horizontal scroll:

 ![hs-4.PNG.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/2/32522fa18110893e60b2731d9b040ff31ac5e410.jpeg)