HubSpot CMS includes a core Header module that you can use to place a text heading on the page wherever needed. That is fine, but it has some limitations. That is where our Customizable Heading module comes into play!
Module Settings
You can use the core HubSpot module, but the recommendation is to use this custom version instead... especially if you need to change the font family from the defaults associated in the theme for H1, H2, etc.
The settings for this module are simple:
- Section ID. This is an optional field where you can enter an ID value that you can use for anchor links. This should be a unique value with no spaces.
- Customizable Header. This is the text for the header text.
- Heading Level. Select the size of the header from H1 - H6.
- Font Family. Select from the theme primary or secondary font to be applied to this header. These font families are selected already in the theme settings.
Style Fields
Beyond the main module settings, if you click the "Styles" tab, you will find another set of fields to style your custom header text. Those fields are:
- Spacing (Desktop). Here you can set the margin and padding to apply within the module for displays larger than 768 pixels. It defaults to 0.
- Spacing (Mobile). Here you can set the margin and padding to apply within the module for mobile and tablet displays, 768 pixels and smaller. It defaults to 0.
- Heading Max Width. This is a number value in pixels and allows you to limit the width taken by this heading.
- Background Color. This defaults to nothing, but can be used to put a background color behind the text.
- Heading Color. This color defaults to nothing as the headings will already have a color as established in the theme. However, if you want to override that color in this heading instance, you can here.
- Heading Text Alignment. Select the alignment for your heading text.
- Heading Font Weight. Again, you can override the default font weight for the heading text.
- Heading Font Size. Override the font size of your heading text, if needed. Value is in pixels.
- Heading Line Height. If you override the font size, you will likely need to update the line height. Value is in pixels.
- Heading Font Style. Select if your heading if normal (default), italic, or oblique.
- Heading Text Transform. Select if you want to force the heading text to display as is, or Uppercase (all capitalized), Lowercase (all lowercase), or Capitalize (first letter of each word is capitalized). NOTE: For accessibility reasons, you should NOT enter your heading text in all caps... ever. Just enter normal and use this setting to force the capitalization via CSS.
- Heading Letter Spacing. Select the spacing of the text from 1px (default), 1.5px or 2px. Changing to 1.5 or 2px spaces the letters out more horizontally.