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 Header 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.
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. Here you can set the margin and padding to apply within the module. It defaults to 0.
- 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 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.