Landing Pages

Customize module styles in the content editor

Last updated: October 13, 2020

Applies to:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

Within the page editor, you can edit spacing, padding, and alignment of your module content in the Style tab to customize the module's position on your page. If you're using a custom coded template from a developer or a theme template, there may be additional module style options in the Options tab.

If you're using a starter template, a theme template, or a coded template with a drag and drop area, you can also apply background styles to rows, columns, or sections of your page.

Please note: editing a module's styling from the page editor will add CSS rules with !important tags, which may override rules in your stylesheet. For best results, it's recommended to work with a designer to make CSS edits directly to the stylesheets attached to your site. To quickly customize a page styles without using any code, use a starter template or a theme template.

Before you get started

The styling options available depend on the type of module you're editing, and the page template you're using. The website developer who created your template controls which style options appear in the page editor.

  • Most common modules have style options for margin and padding so you can adjust the spacing and positioning of your modules. Form modules have more style options, including text color and border styles.
  • Modules that repeat multiple times on your pages, such as buttons or headings, typically have preset styles for colors and fonts that are based on your template's coded stylesheet or your template's theme settings
  • Custom modules do not have any style options available in content editors and should be edited in the design manager instead. If you need help with a custom module, you can connect with a HubSpot Partner to help you with design edits.

Customize styles for a module

You can customize alignment, spacing, and certain fonts and colors in the Styles tab. The options available for your module are based on the design of your page template.

  • In your HubSpot account, navigate to Marketing WebsiteLanding Pages or Website Pages.
  • On the left panel, click the Content tab, then select the module you want to edit.
  • Click the Styles tab.
  • Most modules have Alignment and spacing options:
    • Adjust alignment for your module content. For example, to center content in your module, click the blockAlignmentCenter Align center icon.
    • To apply padding or margins around your module or its content, click the arrow keys to adjustment this spacing.
  • Customize any other borders, fonts, or colors available for your module. 
  • To undo any changes you've made to your module's styling, click the refresh revert icon to reset all styles.

edit-module-styles

Customize more style options in a starter template or a theme template

If you're using a starter template, some style options, such as default fonts or colors, are repeated on multiple parts of your page. Depending on how the template was coded by your website developer, you may be able to override these default styles in the Options tab on the left panel.

  • In the page editor, click the module to select it.
  • In the left panel, click the Options tab.
  • Below your default module content options, click to switch the Override default style switch on.
  • Here you can select additional styles, based on whatever options were included in your page's template. Most starter templates have override options available here.

override-default-styles

  • After making your changes, click Apply changes in the bottom left. To return to all content options in the left panel, click Back in the upper left.