Use of custom html in sections

AS21 · ‎Mar 12, 2025

Hey, I need to put some kind of specific html markup (with absolute positioning, etc.) containing modules (buttons, forms, ...) into a reusable section template (inside a dnd_section tag), but Hubspot seems to be ignoring it completely! When dropped onto the page editor it just adds an extra 'Drop modules here' placeholder instead of the actual section template contents.

I know that there's a way to use custom html within a dnd_section using rich_text module, but in this case it is impossible to arrange buttons/forms modules inside.

Is it even possible to use section template like the following?

{% dnd_section %}
<section>
  <p>some static content</p>
  <div class='cta'>
    {% dnd_module path='../modules/button' %}{% end_dnd_module %}
  </div>
  <div class='form'>
    {% dnd_module path='../modules/form' %}{% end_dnd_module %}
  </div>
</section>
{% end_dnd_section %}

Anton · ‎Mar 13, 2025

Hey @AS21,

technical background:

{% dnd_section %}

will drop any kind of static html as it support only other dnd_elements.

There are 3 options you can still achieve your desired outcome:

Create a reusable DND section template and add a class to it. DND sections outside the dnd section template don't support classes
Create custom "row modules". That have the desired layout. If you add a repeater and some choice fields, you can even add some sort of flexibility to mimic dnd. Big benefit of those is that they will have only those options that you provide to the user. (Big) drawback, it may become very dev heavy
Create something like a settings module which will have some JS to modify the section it is put in... (not recommended)

best,

Anton

View solution in original post

Anton · ‎Mar 13, 2025

Hey @AS21,

technical background:

{% dnd_section %}

will drop any kind of static html as it support only other dnd_elements.

There are 3 options you can still achieve your desired outcome:

Create a reusable DND section template and add a class to it. DND sections outside the dnd section template don't support classes
Create custom "row modules". That have the desired layout. If you add a repeater and some choice fields, you can even add some sort of flexibility to mimic dnd. Big benefit of those is that they will have only those options that you provide to the user. (Big) drawback, it may become very dev heavy
Create something like a settings module which will have some JS to modify the section it is put in... (not recommended)

best,

Anton

MichaelMa · ‎Mar 12, 2025

Just a quick question: Is this code wrapped in a dnd_area?

A {% dnd_section %} is a top-level row, and must be nested within a {% dnd_area %} tag. Sections can also be defined as a template, and then included into a dnd_area, making them ideal for quickly scaffolding out a template.

https://developers.hubspot.com/docs/reference/cms/hubl/tags/dnd-areas

AS21 · ‎Mar 13, 2025

I think so, the page template I'm trying to drop section on, has the {% dnd_area %}. It goes like:

<!--
    templateType: page
    label: Blank page
    isAvailableForNewContent: true
-->
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
    <head>
        ...
        {{ standard_header_includes }}
    </head>
    <body class="{{ builtin_body_classes }}">
        {% dnd_area "dnd_area" label="Main" %}

        {% end_dnd_area %}
        {{ standard_footer_includes }}
    </body>
</html>

MichaelMa · ‎Mar 13, 2025

I was testing this and I couldn't get it to work either.

It seems HTML inside a dnd_area gets wiped out except for the dnd_X functions.

So if you need formatting, it seems the only option is to apply styling to the dnd_section/dnd_row/dnd_column which might be enough.

{% dnd_area "content" label="some Content" %}
	{% dnd_section %}
		{% dnd_column %} 
			{% dnd_row 
				padding={
					"default" : {
					"bottom" : "0px",
					"left" : "0px",
					"right" : "0px",
					"top" : "0px"
				},
				"mobile" : {
					"bottom" : "0px",
					"left" : "0px",
					"right" : "0px",
					"top" : "0px"
				}
				},
			%} 

				{% dnd_module path="@hubspot/rich_text" %}
					{% module_attribute "html" %}
					<p>Some Content here</p>
					{% end_module_attribute %}
				{% end_dnd_module %}

			{% end_dnd_row %} 
			{% dnd_row
				background_color={
					r: 123,
					g: 123,
					b: 123,
					a: 1.0
				},
				margin={
					"top": 20,
					"bottom": 200
				},
				padding={
					"top": 20,
					"bottom": 20,
					"left": 20,
					"right": 20
				}
			%} 
				{% dnd_module path="@hubspot/button", link="https://google.com" button_text="Google.com" %}{% end_dnd_module %}
			{% end_dnd_row %} 

		{% end_dnd_column %} 

	{% end_dnd_section %}  
{% end_dnd_area %}

CMS Development