How to add ID to dnd Heading module to allow custom styling?

[drewspotshubs]

I have a hero style header on https://news.radiantcu.org. 

A similar page on our site has a gradient overlay on the hero/background image to improve readability of the page H1. 

Example: https://www.radiantcu.org/accounts/checking.shtml 

The heading module by default only allows me to choose between a background gradient OR a background image. 

My thought is to add an ID to *this* particular module's html so I can go into the theme-overrides CSS and add the styling I need. 

I tried doing that with the classes, but that doesn't really work for various reasons. 

Any help is much appreciated, thanks.

[Anton · Accepted solution]

Hi @drewspotshubs, 

the easiest (and friendliest) way to duplicate a module is to head over to the design-tools, right-click on it and select "clone" 😀

Or you create a new one - a custom headline module is a very easy one.

Open your theme in the design-tools, right-click on the module folder(recommended) and select "new file in modules". Select Module from the drop down, hit "next" and put in a few informations like

• where you'd like to use it(you can select multiple options)
  • pages: Websites and Landing Pages
  • Blog listing: Blog listing
  • Blog post: Blog posts
  • Emails: Emails - EMail modules doesn't support dedicated CSS or JS files
  •  Quotes: Quotes
• Select if it's a local or global module
  • local module: can be used multiple times on every page and can have individual content (like headlines)
  • global modules: can be used multiple times on each page but the content will be the same (good if you want to display the same content over and over again and change it globally)
• name (Custom Headline would be a good fit, but it's completly up to you)
• Hit next and you've created your (first) module 🎉

 

Now you're seeing the module creation screen

The dark area is seperated into 3 subareas(unless you select Email for the module - then it will be one area)

• module.html(HTML+Hubl)
• module.css
• module.js

Almost everything can be written in the first (HTML+Hubl) area. There are some best-practises when to write something in HTML+Hubl or in module.css/module.js but they're irrelevant for now

At the right you'll find the "settings" sidebar where you configure your module. 

The "fields" section is one of the most important sections here since you'll add the functions here which you'll see while editing the module at page-builder level. 

For a custom headline you'll need

• Choice field (Headline-tag)
• Choice field (Headline-style;optional)
• Text element (don't recommend rich-text)
• Text element for your ID

   

The choice field(s) should look like this. 

Tipp: You can create one and clone it. Also you can reorder by drag&drop them. The order will be the same on page-builder level.

 

After you've create the fields it should look like this

Now it's time to put those fields to function.

Write your layout in the module.html(HTML+Hubl) area like this

<{{ module.headline_tag }} class="{{ module.headline_style }}" id="{{ module.headline_id }}">{{ module.headline }}</{{ module.headline_tag }}>

(there are many ways how to write this, but imo this is the most begginer friendly one)

What does each field do?

• headline_tag defines the H-tag of the headline so the headline will be a H1, H2, H3...
• headline_style defines the class of the headline (H-tags shouldn't be used for styling)
• headline_id defines an ID
• headline prints your text into the H-tag

Publish the module and you're good to go. 🎉

Also: If you want to dive deeper into development - here some ressources

• Hubl overview
• if-statements
• Configuring a module

Hope this guide helps you

best, 

Anton

[drewspotshubs]

This was amazing helpful, thanks! 

My next question though, which I need to find the answer for, is how I style the section div that Hubspot automatically generates when I drag the new headline module onto a page. Any advice there?

Thanks for this guide, very very helpful. 

[Anton]

You're welcome!

When hovering a section you'll see some icons in the top left corner of it. Click on the pen icon and you'll get the styling options. 

Another option would be to create predefined sections in your theme. Those can have custom CSS classes.

The last option you have is to create "custom row modules" that contain all elements of this particular section and look like a whole section. It's an old technique dating back to "pre theme" times.

Since you're creating a module you can do what ever you want. Add styling options and classes. While IDs can be added I don't recommend them for tech. SEO reasons - unless you make them dynamic. 

Please note: those "row modules" are good if you want to limit the user to a specific use-case of the column. 

best, 

Anton

[SFurlong]

Hey @drewspotshubs,

Do you happen to have access to the module editor for this module in design tools?

If so and this is a local module, my suggestion would be to add a Boolean that decides if the heading can get the gradient or not. This way you have the option to not only apply the gradient to this specific banner but to others in the future.

If this header is coming from a theme and you are unable to edit the module, my route would normally be to create my own custom module with the functionality that's needed.

Another possible option you could take is targeting the banner with the blog-id class that's added in the body-wrapper (look for the CSS class "hs-blog-id-113922225786" in your source). I don't recommend this as a great approach though, as the ID might be subject to change and you have very little flexibility with this path.

Happy to clarify any of the above if it would help!

[drewspotshubs]

I'm somewhat familiar with front-end web development, but modules in Hubspot I'm still figuring out. Is there a handy guide for duplicating an existing module and customizing it?