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.

29 Replies
Stefan_PSV
Participant | Diamond Partner

There are many other advantages of classes in dnd_sections:

  • Cleaner separation of code and layout
  • more guidance for editors
  • more flexible templates since different dnd_sections do not have to be covered by dnd_areas and their classes (dnd_areas aren't deletable, so you need

Just to name the - for me - the most important ones

amwilie
Key Advisor | Elite Partner

Would certainly love to see classes and responsive options. Been working with dnd emails lately and really wish I could change alignments when going to mobile. So a right aligned button on desktop would become center aligned on mobile.

 

Some other things I'd love to see :

  • HubL options to pull in dnd settings into custom modules.
  • Be able to create draggable columns in custom modules
  • Set default padding for sections so I don't have to change the left/right padding for every single section I add.
  • Allow us to add custom <style> without it throwing out a warning
paulalex
Participant

Yes, I totally agree,

I'm amazed that there's no custom class option for dnd sections, rows and columns already.

tylerkelley
Participant | Diamond Partner

Putting my support behind this. It blows my mind that we have to edit the template for this type of functionality. You should be able to apply mobile styling with a click of a button. Clickfunnels had this figured out two years ago.

MarcusZeal
Contributor | Diamond Partner

Adding class support to dnd_sections, dnd_rows, and dnd_columns is a must-have feature for these. Not being able to target by user-defined classes and IDs is a real deal-breaker for some layouts. 

 

Please add class and ID support ASAP. 😄 

MariusR
Member | Diamond Partner

Would love to see this! It's really a shame that it's not already a thing.

ThorstenB
Member

We would love this feature, too 🙂

seidtgeist
Member

I’d also love to see this! A point I haven’t seen mentioned here that I’d like to make:

 

If assigning specific classes would be an option, there could also be a parameter to disable custom styling for a dnd_area, its sections and columns altogether.

M0zz0
Participant | Diamond Partner

+1, this is a must

Ntbrown
Contributor

It's remarkable this still hasn't been implemented nor that it wasn't originally. Adding a class and other options is futile. The DnD system needs an overhaul entirely. It's just simply not good - nor will it be until developers have actual flexibility and the ability to integrate fully with it. This means 1) opening up styling definitions per module updates and 2) expanding style fields and other fields to be free form. As always, swing and a miss. 

 

The amount of bloat - particularly with styles - is ungodly. Utility classes anyone....? And OP actually missed the most obvious use cases for classes at the section level.... Thematic encapsulations of surfaces and elevations. Speaking of responsiveness.... It's impressive that "feature" was realized roughly 1 year ago with "more options coming soon" for responsiveness and it's still in it's incomplete state. Not that it really matters - it's a poor mans way of doing things. 

lumonald
Member

Yes please to this feature 🙏

cbwiedel
Member

I would love to see this feature too, not sure why it hasn't been added yet

Temposaur
Member

Yeah, this feature seems more like a must-have. Moving contents to a new sections is time-consuming, when I could just enter css-class name to existing section/row.

 

 

CP-BWG
Contributor

For real?  Boggles the mind that one cannot assign a class to anything other than a dnd_area, and, there is only one dnd_area allowed per page.  What gives?

ghostcat
Member

I also would love the ability to add classes to sections/rows/columns in the page editor. I'm not sure why it's not enabled, but it would give a ton more flexibility to dnd areas.

KOVIKO
Participant

Also, users of TailwindCSS would greatly, GREATLY benefit from being able to use classes on drag and drop sections/columns/rows. Being able to use responsive styles, for example, would be huge!

MFall13
Contributor | Platinum Partner

Absolute must... would add much more flexibilty... ability to reorder dnd modules on mobile for example on a tier-by-tier basis.

SMcCaffrey
Participant

We are about to be in the year 2022 ... and HubSpot drag-and-drop still does not have the option to add a custom class. It's all that I am asking for from Santa this year.

DFranz
Member

I have just started developing a site in Hubspot and you should have seen the look on my face when I saw I cannot add a class to a section. Cmon!

ellimccale
Member

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.