topic Re: Updating Blog Listing Template from Drag and Drop to HubL HTML in CMS Development

Updating Blog Listing Template from Drag and Drop to HubL HTML

PYoganathan — Wed, 23 Jul 2025 20:12:21 GMT

I'm trying to update our existing blog listing template: from a drag-and-drop layout to an HTML + HubL template.

I've created the new template, previewed it, and it looks correct. However, when I attempt to update the existing template during the preview step, it appears that the old template is being stacked on top of the new one.

Does anyone know why this is happening, and what the best approach would be to resolve it?

Re: Updating Blog Listing Template from Drag and Drop to HubL HTML

FaramarKolivand — Wed, 23 Jul 2025 20:41:05 GMT

Would it be possible that your blog is using custom modules or sections that were saved with the DND template?

Re: Updating Blog Listing Template from Drag and Drop to HubL HTML

PYoganathan — Wed, 23 Jul 2025 20:56:34 GMT

I’m using the blog tags filter and search bar by referencing the file paths of the custom modules from the drag-and-drop template. I'm also including the global header and footer modules used across the page using this syntax:

{% dnd_area "menu", label="Global Menu" %} {% dnd_section background_color="#fff", full_width=True %} {% dnd_column %} {% dnd_row %} {% dnd_module path="/file/path/Menu.module" %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

When adding custom modules from the saved drag-and-drop template, I wrap them in a <div> container for styling purposes using the following syntax:

{% module "post_filter" path="/file/path/to/modulename.module" %}

Re: Updating Blog Listing Template from Drag and Drop to HubL HTML

FaramarKolivand — Wed, 23 Jul 2025 21:07:21 GMT

I think you need to avoid using dnd_* tags in HTML + HubL templates.

Re: Updating Blog Listing Template from Drag and Drop to HubL HTML

Anton — Thu, 24 Jul 2025 08:48:17 GMT

Hey @PYoganathan,

the stacking is a "feature" of HubSpot which dates back to the pre-dnd-days. Back when the only real dnd option was the so-called flexible column. Back in those days it was a whole different building process.

What HubSpot does is, it will look for the decendants of the flexible columns -> dnd_area, dnd_section, dnd_row anddnd_columns. If HubSpot finds at least one in the template, it will try rebuilding the old layout into the new - because otherwise the risk of losing content is quite high and HubSpot wants to not let this happen.

If you don't want to keep anything from the old template, my recommendation is to

create global partials for header and footer (if not done yet; always recommended)
create a dedicated base.html clone for the blog or drop the {% extend 'path/to/base' %} from the blog template(s) and put a custom setup into the template
Write plain HTML and use something like the author, tags, content and other blog tags in places you want them to display. As well as not using any dnd tags in the template.
The most important tag for the post template is {{ content.post_body }}
The most important tags for the listing are the is_listing_view statement and the {% for content in contents %} loop
Don't forget to set the correct template type of each template

best,

Anton

Re: Updating Blog Listing Template from Drag and Drop to HubL HTML

BarryGrennan — Thu, 24 Jul 2025 10:05:05 GMT

Hi @PYoganathan,

@Anton is the GOAT around here, I'd take his word as gospel on this.

Just chiming in with something that might help.

I haven't tested it out and I'm totally spitballing here, but if you change the names of your dnd areas, I don't think hubspot would recognise it as the old areas and add in the old content.

So in your example I'd try changing it to

{% dnd_area "menu_new_name", label="Global Menu" %} {% dnd_section background_color="#fff", full_width=True %} {% dnd_column %} {% dnd_row %} {% dnd_module path="/file/path/Menu.module" %} {% end_dnd_module %} {% end_dnd_row %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %}

{% module "post_filter_new_name" path="/file/path/to/modulename.module" %}

I'm almost certain I've used this in the past to rid myself of some odd "ghosts".

Again, totally speaking off the top of my head and open to correction.

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn