Creating templates with custom modules

[keyword]

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

<!--
 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:

<!--
 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

[Anton]

Hi @keyword,

there’re some things to keep in mind.

The

{% block body %}
...
{% endblock body %}

has no drag & drop functionality by itself.

The

{% 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:

{% 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.

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

{% 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

[keyword]

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

<!--
 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:

which will result in a broken layout:

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:

The page will look like this with huge horizontal scroll: