Customize Module Styles in the Hubspot Content Editor

The Hubspot content editor lets you quickly style individual modules on a page without touching code, while still supporting more advanced customization through default theme styles and custom CSS. Understanding how these options work together helps you keep page design consistent and easy to update.

This guide explains the ways you can adjust styles for modules, when to use each method, and how to avoid conflicts between the editor and your theme.

How styling works in the Hubspot editor

Every module on a page can inherit styles from several places. When you edit in the Hubspot page editor, you are usually working on the most specific level of styling.

In order of increasing priority, module styles can come from:

• Global or theme-level CSS (for example, in a theme stylesheet)
• Default styles set in the design manager for a module or theme
• Custom CSS applied directly to a module in the page editor
• Style changes made in the page editor sidebar for that module

Styles made directly in the editor override the others. That is useful for one-off changes, but it can make design less consistent if overused.

Ways to style modules in Hubspot pages

Within a page or blog post, there are three main ways to adjust how a module looks:

1. Use the Styles tab for that module in the editor
2. Assign a CSS class to the module and style it in a stylesheet
3. Set or edit the default styles for that module in the design manager

Each of these options has different advantages and trade-offs, depending on how many pages will use the same patterns.

Use the Hubspot module Styles tab

The Styles tab is the simplest way to adjust a single instance of a module on a Hubspot page. This affects only that one module on that one page.

Open module styles in Hubspot

1. Open your page, blog post, or template in the content editor.
2. Click the module you want to customize.
3. In the left sidebar, click the Styles tab.

In this panel, you can usually adjust visual properties such as:

• Spacing (margins and padding)
• Background color or image
• Borders and corner radius
• Text alignment and some typography options, depending on the module

These options vary based on how the module was built by your developer or theme creator.

When to use the Styles tab in Hubspot

This approach works best when:

• You are making a one-off tweak that does not need to be reused.
• You need a quick visual adjustment without involving a developer.
• You are fine with those styles applying only to this one module instance.

Because these settings override other rules, use them sparingly if you want long-term consistency across your Hubspot site.

Apply CSS classes to modules in Hubspot

Adding a CSS class lets you connect a module to shared styles defined in your theme or custom stylesheet.

Assign a custom class to a module

1. Open the content editor for your page or template.
2. Click the module you want to style.
3. In the left sidebar, select the Advanced or Styles & classes area (location depends on the module type).
4. Find the field labeled CSS class or similar.
5. Enter a class name, such as "feature-box" or "hero-highlight".
6. Publish or update the page.

After assigning a class, you or a developer can write CSS that targets that class in a theme stylesheet or custom CSS file.

Example CSS for Hubspot modules

Once the class is assigned, your stylesheet might include rules like:

• .feature-box { padding: 2rem; border-radius: 8px; }
• .hero-highlight { background-color: #f5f8ff; }

These styles then apply wherever the same class is used, making it easy to keep similar modules consistent across many Hubspot pages.

When to use CSS classes for Hubspot modules

Use CSS classes when:

• You want a repeatable style pattern across multiple pages.
• Your team is comfortable editing CSS or working with a developer.
• You want to keep most visual control in theme files instead of local overrides.

This approach is more scalable and keeps your Hubspot layouts easier to maintain over time.

Set default module styles in the Hubspot design manager

Module default styles live at the theme or module level and act as the base look before any editor overrides. These settings affect all instances of a module that use the same default configuration.

Access module default styles

1. Go to your Hubspot account and open the design manager.
2. Locate the theme or module file you want to edit.
3. Open the module, then look for any default style fields exposed by the developer (for example, default colors, font sizes, or spacing).
4. Adjust these defaults and publish your changes.

All content using that module will then reflect the updated defaults, unless a specific instance has been customized in the page editor.

When to use default styles in Hubspot

Default styles are ideal when:

• You want to control the brand look from one central place.
• You want new pages to use consistent design out of the box.
• You rarely need per-page overrides for that module.

This method keeps your Hubspot design system predictable while still allowing local changes when necessary.

Understand style priority in Hubspot

Because multiple sources can define how a module appears, it is important to know which styles win when they conflict.

Typical style hierarchy

From lowest to highest priority:

1. Theme or global CSS
2. Module default styles in the design manager
3. Custom CSS classes assigned in the editor (depending on specificity)
4. Inline or local styles set in the module Styles tab

If something does not look the way you expect, check whether a local module style is overriding your theme or class-based rules in Hubspot.

Best practices for styling modules in Hubspot

To keep your pages manageable and aligned with your brand, use a consistent approach to styling.

Recommended workflow

1. Start with defaults: Configure module defaults in the design manager so most content looks correct without extra work.
2. Use CSS classes: For recurring patterns that differ from the base design, create classes and add them to modules in the Hubspot editor.
3. Reserve local styles: Only use the module Styles tab for special cases that are unlikely to repeat elsewhere.

Tips for clean, scalable design

• Document common classes and patterns your team should use.
• Avoid adding many unique styles to every module instance.
• Periodically review pages to remove unnecessary overrides in Hubspot.
• Keep global and theme CSS organized by component or section type.

More resources for Hubspot styling

For the official reference on module styling options and behavior, review the original Hubspot knowledge base article on customizing module styles in the content editor: view Hubspot documentation.

If you need strategic help building a scalable design system, performance-focused templates, or advanced technical SEO on top of your Hubspot implementation, you can learn more at Consultevo.

By combining thoughtful defaults, reusable CSS classes, and careful use of per-module overrides, you can keep your Hubspot pages flexible for marketers while maintaining a clean, consistent, and maintainable front-end codebase.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`