Edit content in rich text modules

In rich text modules, add multiple types of content, including text, images, and links. Developers can add rich text modules to custom-coded templates, then customize their editing options.

Before you get started

Before you edit content in rich text modules, review the requirements and considerations.

Understand limitations & considerations

• Some rich text editing features aren't available in the knowledge base article editor.

Format text in rich text modules

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
   • Knowledge Base: In your HubSpot account, navigate to Service > Knowledge Base.
2. Click the name of your content.
3. In the content editor, click a rich text module to activate the rich text toolbar at the top of the editor. You can also click a rich text module, then in the sidebar editor click Edit in expanded view.

Please note: depending on your device's screen size, some formatting options may be located in the More dropdown menu.

4. In the rich text module, highlight text.
5. To set the text's comparative size and importance in the content, click the Style dropdown menu and select an option (e.g., Paragraph or Heading 1).
6. To set the text's font, click the Font dropdown menu and select a font. Learn more about working with fonts in HubSpot.

7. To set the text size, click the font size dropdown menu and select a font size in pixels. 

8. To make the text bold, italic, or underline, click a style icon (e.g., boldIcon bold, italicIcon italic, or underlineIcon underline).
9. To change the text's color, click the textColorIcon text color icon, then select a color. To use a hex or RGB color code, or to select a custom color, click the Advanced tab.

10. To set a background color for the text, click the highlight background color icon, then select a color. To use a hex or RGB color code, or to select a custom color, click the Advanced tab.
11. To change the text's alignment, click the alignLeft Align dropdown menu and select an alignCenter alignment icon.

12. To add the text to a bulleted list, click the More dropdown menu. Then click the bulletList bulleted list icon. To change the format of the list, click the bulleted list dropdown menu and select a bulletDiamond format.

13. To add the text to a numbered list, click the More dropdown menu. Then click the numberList numbered list icon. To change the format of the list, click the numbered list dropdown menu and select a bulletLowerAlpha format.
14. To set the text's line height, click the lineHeight line height dropdown menu and select a height.
15. To increase or decrease the text's indent, click the indent increase indent or outdentIcon decrease indent icons.
16. To remove styling applied to the text, click the removeTextStyle clear styles icon.
17. To add additional formatting, click the More dropdown menu and select the strike strikethrough, superscript superscript, or subscript subscript icon.
18. To format the text as code, click the More dropdown menu and select the code code format icon.
19. When finished, click Update or Publish to take your changes live.

Add elements to rich text modules

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
   • Knowledge Base: In your HubSpot account, navigate to Service > Knowledge Base.
2. Click the name of your content.
3. In the content editor, click a rich text module to activate the rich text toolbar at the top of the editor. You can also click a rich text module, then in the sidebar editor click Edit in expanded view.
4. To insert a link, highlight text, then click the link insert link icon. Learn more about working with links in HubSpot.
5. To insert an image, click the insertImage insert image icon. Learn more about working with images in HubSpot.
6. To insert an emoji, click the emoji insert emoji icon.
7. To insert a call-to-action, click the Insert dropdown menu, then select ctaCall-to-action. Learn more about working with calls-to-action in HubSpot.
8. To insert an embed code, click the Insert dropdown menu, then select Embed. Learn more about embedding content in HubSpot.
9. To insert a video, click the Insert dropdown menu, then hover over Video, and select HubSpot video or external video. Learn more about working with videos in HubSpot.
10. To insert a table, click the Insert dropdown menu, then hover over Table and select the dimensions of your table. Learn more about working with tables in HubSpot.
11. To insert a special character, click the Insert dropdown menu, then select Special character. In the pop-up box, click a special character.
12. To insert an icon, click the Insert dropdown menu, then select Icon. In the pop-up box, click an icon. Learn more about working with icons in HubSpot.
13. To insert an anchor link, click the Insert dropdown menu, then select Anchor. Learn more about working with anchor links in HubSpot.
14. To insert a horizontal line, click the Insert dropdown menu and select Horizontal line.
15. To insert a non-breaking space, click the Insert dropdown menu and select Non-breaking space.

16. To insert a personalization token, click Personalize.
    • In the pop-up box, click the Type dropdown menu and select a token type.
    • Click the token dropdown menu and select a token. Learn more about working with personalization tokens in HubSpot.
17. When finished, click Update or Publish to take your changes live.

Use advanced editing features in rich text modules

1. Navigate to your content:

   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
   • Blog: In your HubSpot account, navigate to Content > Blog.
   • Knowledge Base: In your HubSpot account, navigate to Service > Knowledge Base.
2. Click the name of your content.
3. In the content editor, click a rich text module to activate the rich text toolbar at the top of the editor. You can also click a rich text module, then in the sidebar editor click Edit in expanded view.

4. To access the module's source code, click the Advanced dropdown menu and select Source code. In the dialog box, edit the source code, then click Save changes.

   Please note: HubL code added to rich text module source code will not render in the editor, but rather when the page itself is rendered. For assets like web pages, you can view the HubL output by previewing the page. 

5. To view your content separated into blocks of content, click the Advanced dropdown menu and select Show blocks. To view the content without blocks again, click the Advanced dropdown menu and select Hide blocks. Neither option will affect how your content appears to visitors.
6. When finished, click Update or Publish to take your changes live.