Knowledge Base

Customize your knowledge base appearance [BETA]

Last updated: October 2, 2019

In Beta

Applies to:

Sales Hub  Professional, Enterprise

Customize the appearance of your knowledge base by selecting a template, then setting the content and styling.

  • In your HubSpot account, navigate to Service > Knowledge Base.
  • In the upper right, click Customize template.
  • Select a template to use as the layout for your knowledge base. You can preview what the template looks like by hovering over a template and clicking Preview.
  • After selecting a template, you'll be taken to the template editor where you can edit the template content and styles. A preview of your changes will display in the right panel.
  • To publish the changes to your knowledge base, click Update template in the top right.

Content

In the Content tab of the left sidebar, set your knowledge base template content.
  • To edit the contents of the top navigation in your knowledge base, click Navigation bar.
    • Navigation bar text links: to set the color of the text links in your navigation bar, click the color picker. Then, use the color gradient to select a color or manually enter a hexadecimal value.
    • Company logo: to change your existing logo, hover over the logo and click X. To upload a new image, click Upload. To use an image from your file manager, click Browse images.
    • Name your knowledge base: enter the text that displays in the upper left corner of your knowledge base.
    • Text link to your company website: enter the text of the hyperlink that displays in the upper right corner of your knowledge base.
    • Company website URL: enter the URL of the hyperlink that displays in the upper right corner of your knowledge base.
    • Support form: click to toggle the Support form switch on to add an existing support form link to your top bar. If you have not set up a support form yet, you can create a new support form from your conversations settings.
  • To edit the edits of your knowledge base footer, click Footer.
    • Company logo: to add a company logo to the footer, upload a new image by clicking Upload. To use an image from your file manager, click Browse images.
    • Message: enter the text that will display in the footer of every knowledge base article. For example, your company name.
    • Social network: click + Add to add buttons that link to your social network pages.
    • Icon style: select an icon style that will apply to all the social networks buttons you add.
  • To edit the contents and style of your knowledge base header, click Header.
    • Welcome message: enter the text that displays on your knowledge base homepage above the search bar.
    • Welcome message text color: to set the color of your welcome message, click the color picker. Then, use the color gradient to select a color or manually enter a hexadecimal value.
    • Header background: to set the color or image behind the search bar, hover over the background module and click Change background.
      • To set an image as the header background, click Upload to upload a new image, or Browse images to select an image from your file manager.
      • To set a background color, click the color picker. Then, use the color gradient to select a color or manually enter a hexadecimal value. You can also select a pattern for a textured header.
  • To edit the article categories displayed on your knowledge base homepage, click Categories
    • Click Create category to add a new article category to your knowledge base. 
    • Order categories: click organize categories to change the displayed order of your article categories.
    • Add categories to home page: to enable or disable the categories displayed on your knowledge base homepage, click to toggle the category switches on/off. Categories without articles will be switched off by default. Click on a category to edit the details of that category.

Styles

  • To edit the styling of your knowledge base, click the Styles tab at the top of the left sidebar.
  • Colors: set the colors used for the following elements by clicking the corresponding color picker. Then, use the color gradient to select a color or manually enter a hexadecimal value.
    • Site text link: the color of the footer and article hyperlinks.
    • Navigation bar text links: the color of the top navigation bar text links.
    • Mobile navigation menu background: the background color of the mobile navigation menu.
    • Mobile navigation menu text links: the color of the mobile navigation icon and the mobile menu text color.
  • Site font: to select the font used for article headings, descriptions, and text links, click the dropdown menu, then select a font.
  • Article body font: to select the font used for article text, click the dropdown menu, then select a font.
  • Template: the currently selected template will display, along with its name. To select a different template, click Change template.