Use of custom html in sections

Developer Support CMS Development
1

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 %}
2

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.

3

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

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 %}
5

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:

  1. Create a reusable DND section template and add a class to it. DND sections outside the dnd section template don’t support classes
  2. 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
  3. Create something like a settings module which will have some JS to modify the section it is put in… (not recommended)

best,

Anton