How to build a custom HubSpot container module that wraps other components

Other Questions HubSpot
1

I’m working on a HubSpot landing page and trying to figure out how to build a custom container module that can hold other existing modules inside it. Right now I can use the default flexible column feature, but I want to make my own version with custom styling.

Currently HubSpot allows this structure:

<FlexibleWrapper>
   <TextModule />
   <ImageModule />
</FlexibleWrapper>

But I want to achieve something like this:

<section class="my-custom-wrapper">
   <TextModule />
   <ImageModule />
</section>

Basically I need to create a custom module that works like the flexible column but with my own HTML structure and CSS classes. Has anyone done this before or knows if it’s even possible in HubSpot’s module system?

Thanks for any help!

2

Hit this same wall building modules for a client’s HubSpot site. HubSpot just doesn’t do dynamic container modules - it’s baked into how their system handles module dependencies.

Here’s what actually worked: I built one big module with choice fields so editors could pick different layout combos. Instead of wrapping separate text and image modules, I made one module that renders conditionally based on what content type they select. You still get your custom HTML and CSS classes, and editors can mix content types inside your container.

Yeah, it’s more dev work upfront since you’re rebuilding those base modules inside your custom one. But you end up with total markup control while staying in HubSpot’s framework.

3

Hit this same wall rebuilding our product pages. HubSpot’s architecture just doesn’t allow real container modules - their flexible columns are the only dynamic wrapper they’ll let you use, and that’s hardcoded.

Spent months testing workarounds and found out their module dependency system breaks completely when you nest custom modules inside containers. HubSpot needs to know exactly what’s on each page for their content delivery to function.

I ended up creating modular CSS classes that you apply directly to the flexible column wrapper. You can target those default wrappers with custom CSS and basically reskin them to look however you want. It’s not pretty, but it works within HubSpot’s system while giving you the visual result you’re after. The styling constraints suck, but at least your content team can still use the interface they’re used to.

4

Ugh, tried this last year and it was a nightmare. HubSpot doesn’t play nice with nested modules at all. I ended up making one custom module with repeater fields for the content blocks, then just handled all the wrapper styling in the module’s CSS. Not the cleanest solution, but it works without needing any external tools.

5

Been down this road with HubSpot modules. HubSpot’s module system is locked down - you can’t create true container modules that wrap arbitrary content.

What you’re describing isn’t possible with HubSpot’s native framework. Their flexible columns are about as dynamic as it gets for content wrapping.

After banging my head against this same wall, here’s what I learned: build this outside HubSpot and pull it in. I used Latenode to create a workflow that generates the exact HTML I needed - custom CSS classes, proper module wrapping, everything.

The workflow pulls content from HubSpot via API, runs it through my templates, then pushes the final HTML back as a single custom module. Full control over markup and styling, but still manageable.

Latenode can also sync content between multiple systems if you need different page builders alongside HubSpot.

Saved me weeks of trying to hack HubSpot’s limitations. Check it out: https://latenode.com

6

This drove me nuts when building complex landing pages for our marketing team.

Yeah, HubSpot blocks container modules - their system just won’t do it. But why fight their rigid setup when you can bypass it entirely?

I built automation that grabs content from HubSpot, runs it through custom templates with whatever HTML I need, then pushes it back as embedded content. Updates automatically when editors change stuff in HubSpot.

Editors keep using HubSpot’s interface, I get full control over markup and CSS. No more column hacks or rebuilding modules constantly.

It handles content syncing, template processing, even switches layouts based on content type. Way cleaner than forcing HubSpot to do things it can’t.

Works for any page builder, not just HubSpot. Built this in Latenode and it’s been solid for months: https://latenode.com

7

HubSpot doesn’t let you create real container modules through their module builder. That flexible column system you mentioned? That’s basically their workaround for this exact limitation. I’ve been banging my head against this wall for years - same result every time. Their module setup just wasn’t built to nest custom modules inside containers. Your best move is working with what HubSpot gives you and heavily customizing the flexible column CSS to match your design. Override their default classes and add your own styling through theme CSS or page-specific styles. It’s messier than a proper container module, but it works without ditching their content management system entirely.

8

Using the css :has selector, you can create a module that you can drop into any dnd-section on a page and give that section custom css within the module. here’s an example:
fields.json:

[
  {
    "id" : "class_name",
    "name" : "class_name",
    "label" : "Class name",
    "help_text" : "Give your class a custom name here",
    "allow_new_line" : false,
    "show_emoji_picker" : false,
    "type" : "text",
    "default" : ""
  },
  {
    "id" : "class_styles",
    "name" : "class_styles",
    "label" : "Class Styles",
    "help_text" : "Input your css code for your custom section class here. This will only affect items inside the section",
    "allow_new_line" : true,
    "show_emoji_picker" : false,
    "type" : "text",
    "default" : ""
  }
]

module.html

{% require_css %}
<style>
  .dnd-section:has(.{{module.class_name}}){
    {{module.class_styles}}
  }
  .{{module.class_name}}{
    display:none;
  }
  html.hs-inline-edit .{{module.class_name}}{
    display: block!important;
    background: #f2f5f8;
    border: 2px dashed #7c98b6;
    padding: 10px 20px;
    width: 100%;
    text-align: center;
  }
  html.hs-inline-edit .{{module.class_name}}:before{
    content: 'Custom Class "{{ module.class_name }}" Controller';
    color: #7c98b6;
    font-size: 12px;
  }
</style>
{% end_require_css %}
<div class="{{module.class_name}}"></div>

I added a bit of styling to give you something to see/grab in the page editor, but won’t show up on the page.
You can also directly target the dnd-section in your template’s css file with:

.dnd-section:has(.my-class-name){
/*----Add styles here----*/
}

And it’ll work with media/container queries, whatever. It’s the best way I found to adding a custom selector to a Hubspot section without using Javascript.