I’m trying to integrate a fullpage scrolling plugin into my HubSpot template and running into some issues. The plugin works fine when I put everything in a Custom HTML module, but I want to use it with regular HubSpot modules instead.
I set up a group module with the required container ID and added rich text modules inside it with the proper section classes. However, the scrolling only works for the first section and gets stuck there.
I think the problem is that HubSpot adds extra wrapper elements around modules, so my section elements aren’t direct children of the main container like the plugin expects. Has anyone found a way to make child modules render as direct children in the final HTML output? Or is there another approach to get fullpage scrolling working with HubSpot’s modular system?
totally agree, those extra wrappers r a nightmare! I had to restructure mine too. try data attribs or inline styles to control mod behavior. good luck!
Had the same issue with fullPage.js on a HubSpot project. Don’t fight their wrapper structure - work around it instead. I initialize the plugin after DOM loads and use jQuery to pull all the section content out of HubSpot’s module wrappers, then move it into fresh divs as direct children of the main container. Hide the original wrapped modules with CSS. This way you can still edit content through HubSpot’s interface, but fullPage.js gets the clean DOM structure it wants. Also check if your fullPage initialization is running before HubSpot finishes rendering everything - that could be causing the stuck scrolling.
Been there with HubSpot integration headaches. Those CSS and DOM workarounds work, but they’re a pain to maintain and break when HubSpot updates.
Skip fighting HubSpot’s rigid system. Build this with a proper automation platform instead. Pull your content via their API and render it however you want without the wrapper mess.
Set up a workflow that grabs content from HubSpot, processes it into clean HTML sections for fullPage.js, and serves it through a custom page. You get content management in HubSpot plus total frontend control.
I’ve done similar integrations where we needed specific DOM structures that HubSpot wouldn’t cooperate with. The API approach saved debugging time and works reliably.
Latenode makes HubSpot integration straightforward with their visual workflow builder. Set up content sync and processing without writing custom code.
Had this exact problem last year building a portfolio site on HubSpot. The wrapper issue is super annoying. Here’s what fixed it for me: use display: contents on the intermediate wrapper elements HubSpot adds around each module. This basically removes those wrappers from the layout without touching the actual content. You’ll need to inspect the HTML to find which wrapper classes to target, but once you apply display: contents to them, your sections become direct children of the main container like fullpage expects. Just test it well across browsers - display contents can be weird in older Safari versions.