topic Re: Use of custom html in sections in CMS Development

Use of custom html in sections

AS21 — Wed, 12 Mar 2025 16:59:44 GMT

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

Re: Use of custom html in sections

MichaelMa — Wed, 12 Mar 2025 19:58:15 GMT

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

Re: Use of custom html in sections

AS21 — Thu, 13 Mar 2025 08:21:31 GMT

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

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

Re: Use of custom html in sections

MichaelMa — Thu, 13 Mar 2025 16:44:49 GMT

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

Re: Use of custom html in sections

Anton — Thu, 13 Mar 2025 21:29:23 GMT

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