HubSpot Ideas

LPM

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
lindahouben
Contributor | Elite Partner

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

CephasO
Member

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

AWillems
Participant

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

jonchim
Guide | Diamond Partner

agreed! definitely need this please 🙂

jstringfellow
Participant | Diamond Partner

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

TPenfold
Member

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

TPham0
Member

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

sparkalow
Member

Yep,   +1

afdallah_arafat
Participant | Diamond Partner

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

ixt-user
Member | Platinum Partner

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

tomhughes85uk
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(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");
    }
  }
});
SHayes8
Member

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!! 🙂

ellimccale
Participant

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

 

https://developers.hubspot.com/docs/cms/building-blocks/templates/drag-and-drop-areas/sections#secti...

 

Is this feature now available?

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

PanicShow
Member

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

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

PatrickTobias
Member

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

StanGommans
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

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

Tim_Osborne
Participant

This please please please...

Tim_Osborne_0-1706106819505.png