Add Class option to Drag and Drop Sections

HubSpot Ideas
21

It drives me absolutely insane that I can’t target drag-and-drop tags with classes or IDs! The drag-and-drop system has potential, but the current implementation is very weak. Adding class and ID selectors would resolve a lot of issues, or at least allow developers to make more viable band-aids until the system is improved.

It’s super disappointing that this was requested almost a year-and-a-half ago and HubSpot has still not responded.

22

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

23

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

24

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

25

agreed! definitely need this please :slightly_smiling_face:

26

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

27

Please add this custom class option! It’s a must have and im shocked hubspot don’t have this capability… :neutral_face:

28

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

29

Yep, +1

30

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

31

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

32

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 :disappointed_face:

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 :disappointed_face:

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(altText);
 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
 currentImg.classList.add("roundcorner-img");
 }
 }
});
33

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

34

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?

35

@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.

36

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

37

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.

38

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

39

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

40

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.