COS-General

Can I add CSS classes and IDs to specific elements or modules on my pages?

Last updated: September 14, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

Yes, it is possible to add custom CSS classes and IDs in HubSpot's COS templates; however, at this time, you can only add IDs to module groups.

  • In your Marketing Basic, Free, or Professional account, navigate to Content > Design Manager.
Content-Design Manager
Find the template you want to modify

To create a custom CSS class:

  • Locate the module where you'll apply the custom class or ID. Click the gear dropdown menu to toggle the options. Select the Edit CSS option.
Edit CSS
In pop-up that opens upon clicking "Edit CSS", enter the name of your CSS class you'd like to assign to that module in the Custom CSS Class (advanced) box > click Done.
Custom CSS Class
Custom CSS Class
  • If you would like to add more than one custom class to any module, simply add the multiple classes in the Custom CSS Class (advanced) box, separated by a space.

To create a custom ID:

  • Locate the module group where you'll apply the custom ID. Click the gear dropdown menu to toggle the options > Select the Edit CSS Declarations option.
Edit CSS Group
In pop-up that opens upon clicking "Edit CSS Declarations", enter the name of your CSS ID you'd like to assign to that module group in the Custom CSS ID (advanced) box > click Done.
Custom CSS ID
You can also add one or more classes to a module group by adding them in the Custom CSS Class section.

Once you've configured the custom class/ID names on your template, click the Publish Changes option on the template to push the changes live.

Was this article helpful?