HubSpot CMS includes a core Rich Text module that you can use to place an editable text element on the page wherever needed. This includes a standard text editor, and it works fine... but with some limitations. That is where our Customizable Rich Text 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 body fonts.
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.
- Rich Text. This is the main editable text element of the module. You can edit within the left panel, or you can click the button below it "Edit in expanded view" to open that field in the larger area to the right. This is usually more helpful. There is ALSO an option to click "Turn on dark editor". If you happen to color the text in this module to white or another light color, it will be difficult to see it for editing. Click this button to flip it to dark mode and see your text on a dark background instead of white. This only applies to the editing view.
Also note that within this field, you have the same options as the core rich text module would... meaning you can insert images, create a table, embed a video, etc. - Font Family. Select from the theme primary or secondary font to be applied to the text in this module instance.
- Default Font Weight. Set the font weight for text in this module instance. By default, there is no value given here and the text will take on the font weight you have setup in the theme styling. But if in this instance you would like to override that, you can do so.
- Default Line Height (in em). Set the line height for text in this module instance. By default, there is no value given here and the text will take on the line height you have setup in the theme styling. But if in this instance you would like to override that, you can do so. Note that this value is in "em" and will allow for a selection of between 1 and 2 and intervals of .1.
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.
- Max Width (in pixels). This allows you to select a max width to be applied to this text element. The value is in pixels and defaults to 0 so no maximum is applied unless you establish one.
- Text Block Alignment. This allows you to align this block of text wherever it is used on the page. This is NOT to align the text within the module, but to align the module itself.
- Enable Link Icon. This is a unique element. Within the theme styling, there is a selection of a link icon. It is a choice between a variety of right arrow type of icons. It is used in THIS custom rich text module. This gives you the OPTION to enable the selected link icon to be appended to the right of any text link within this module instance. So, say you have a couple lines of text followed by a link like "Learn More". Enable this icon and that "Learn More" would automatically have an icon appended after it... and would be the same icon used throughout the site wherever you choose to utilize this.