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:
Full-width banner carousel
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.
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
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");
}
}
});
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 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.
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.
