HubSpot Ideas


Add Class option to Drag and Drop Sections

So I've been testing the feasibility of me making a template purely from using a DnD area in a template and I've noticed 1 crucial thing:


No responsiveness options

Even without responsive options, adding an option to insert custom classes into sections would solve most issues.


So take this as an example:

I have 2 sections on the site:

  1. Full-width banner carousel
  2. Centered block with 3 columns

Now with the new DnD sections, there's an option to make the sections Centered with a set max-width. However, each section's styling is applied within a generated stylesheet and only applies to that specific section. This is fine on desktop, but when you go to mobile views, you won't have any control as the only common class is dnd-section 


This means I can only either:

  • Add padding to all dnd-section classes in mobile which will cause the full-width section to have unwanted padding.
  • Have no padding at all have the sections touch the edge of the page once you go below the set max-width

This could all be solved by adding an option in Sections to allow custom classes.


Without this, it's actually easier to make the template in the standard drag and drop editor and use flexible columns as I will need to manually code each section block regardless.

44 Replies
Contributor | Elite Partner

Definitely a must! Especially since they changed the Design Tools where you could add different classes.


Well articulated. DND_Sections should be able to take custom classes. If not for anything, for the aforementioned reason by the Op.


I agree, adding classes and a custom CSS style sheet would be wonderful.

Guide | Diamond Partner

agreed! definitely need this please 🙂

Participant | Diamond Partner

Please!! This would make customizaton a whole lot easier!


Please add this custom class option! It's a must have and im shocked hubspot don't have this capability...  😐


Thank you so much for suggesting this idea! I am currently working on the new Hubspot DnD theme and encounter the same problem (even though that the old template system has similar function). Please add this to the new DnD system


Yep,   +1

Participant | Diamond Partner

It's been a while since this thread started. any update on this?

Member | Platinum Partner

Very important feature, time-saver while developing and usability improvement for editors; +1

Member | Platinum Partner

Hi guys, this may be in a simular vein to what is being discussed, recently I need to round some corners on selected images on a drag and drop template, it should be as easy as clicking the image and then adding a custom class to said image 😞


My solution was to add a code word to the alt tag on the image i.e. [round] and then to write some JS code to remove the special word (for good SEO practice) and then inject a custom class. Works perfectly, but it's a dirty solution 😞


Please hubspot allow custom classed on standard DND sections. 


Here is what I wrote if anyone needs it,


document.addEventListener("DOMContentLoaded", function (event) {
  const imgElements = document.querySelectorAll("img");

  for (let i = 0; i < imgElements.length; i++) {
    let currentImg = imgElements[i];
    let altText = imgElements[i].alt;
    let titleText = imgElements[i].title;

    if (altText.indexOf("[round]") >= 0) {
      console.log("found image to round");

      // step one - remove [round] from alt
      currentImg.alt = altText.replace(" [round]", "");
      currentImg.alt = altText.replace("[round]", "");

      // step two - remove [round] from title
      currentImg.title = titleText.replace(" [round]", "");
      currentImg.title = titleText.replace("[round]", "");

      //add custom class to image for rounded corners

Is this something that's going to be added? There are a lot of advantages of having the ability to add custom css classes and ID's to sections, rows, and columns (responsive design, anchors for custom URL's, etc.). Please please Hubspot, can we get this added!! 🙂


I noticed in the docs that the page on DND Sections was updated Dec 28, 2022 and now includes this content:


Is this feature now available?

Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

@ellimccale the doc is regarding adding classes inside the template itself, not adding it from the editor. This would be fine if you have a DnD section coded into the template, and you don't expect anyone to do anything to it from there. 


However, imagine you have an empty DnD area, and you want to work from there. It's not possible to add any custom classes or IDs from the frontend editor.


Nothing after almost 3 years? This is a MUST. Please HubSpot add this.

Contributor | Elite Partner

Commented on this issue a year ago, but still no progress. It's a must. 

I am using custom modules now for the most simple parts which can be solved with just a class. 


I would also like to see this implemented, it would make it easier to implement changes for my clients.

Participant | Gold Partner

How is this still not implemented? I have found two workarounds:

  • Create a static module and include it in the base template of your page.
    • In this module, create a repeater in which you can insert rownumbers
    • The rownumbers can be used in CSS to reverse the columns of that row on mobile
    • Downside: whenever any module is added to the page, the rownumbers change
  • Create a sub module and include this in the to be affected row
    • Include an empty div tag in the module containing a specific class
    • Include a JS file
    • In the JS file, target the abovementioned class and look for the parent dnd-area class in order to row-reverse its child row-fluid

I am going to test this more, but if anyone is interested in the code and final implementation, shoot me a DM

Member | Diamond Partner

This would make a lot of things so much easier. It would be nice to not have to spend so much time building custom stuff just to make some simple CSS changes. Default modules/columns/sections could be used so much more.


This please please please...