Home page header

The header section appears at the top of your home page and is the only section within the Home Page Builder that cannot be deleted or moved. It includes a title for your Knowledge base, a tagline, customizable links, and a powerful search.

For example, you can add a welcome text message and provide links to the best blogs and feature descriptions/documentation.

Accessing the Home page header

From the knowledge base portal, go to Documentation → Home page builder, and the Home page builder page appears.

Styling the home page header

Document360 includes options to style the home page header's background color and text color and add links and a search bar.

To change the title font or size, you can use custom CSS.

Click on the ••• icon at the top right of the header section. The below options appear:

• Hide search bar (or) Show search bar
• Header background
• Text color
• Body align

Hide search bar (or) Show search bar

You can enable/disable the search bar in the search bar. The search bar allows your end-user to search your documentation quickly to find answers about your product.

• Click on the ••• icon at the top right of the header section
• Select the Hide search bar option and click on Save at the top. The search bar is hidden successfully.
• When the search bar is hidden, Show search bar appears in the Header options.
• To enable the search bar: Click on the ••• icon at the top right of the header section. Then, click the Show search bar → Save icon at the top right

Header background

The header background can be changed with the available options in Document360 at any time.

• Click on the ••• icon at the top right of the header section
• Select the Header background option
• You can access the header background tabs such as Colors, Gradient, Patterns, or Insert image

Colors

You can choose any color from the available options. By default, a few standard colors are shown. Pick a color from the color picker, or enter a hex, RGB, or HSL color code.
a. You can enter a hex, RGB, or HSL color code
b. Color picker
c. Selected color code
d. No background color - Click this button to disable the background-color
e. Click on this to switch between the hex, RGB, and HSL color codes

After selecting your desired color, click anywhere on the screen to exit and click the Save icon at the top.

Gradient

You can choose any of the available gradients. After selecting your desired gradient, click anywhere on the screen to exit and click the Save icon at the top-right.

Pattern

You can choose any of the available patterns. After selecting your desired pattern, click anywhere on the screen to exit and Save

Insert image

You can insert an image from the URL, local storage, or knowledge base drive
a. URL - Insert the URL of the image and click the Insert button
b. Upload an image - Upload an image from your local storage or knowledge base drive

Text color

The text color of the header section can be changed with the available options in Document360 at any time.

1. Click on the ••• icon at the top right of the header section
2. Select the Text color option
3. Select any color from the default colors.
   • If you want additional colors, click on the color code
   • Choose a color from the color picker, or enter a hex, RGB, or HSL color code
4. Once you're done, click anywhere on the screen to exit
5. Click the Save icon on the top right

Body align

The header section content can be aligned Left, Center, or Right using the alignment buttons at the top right of the section.

Adding links to the header

1. Click the + (Add header link) icon in the header section

2. The following options appear:
   Add documentation link: To add a link to your documentation.
   Add custom URL: To add a link to another part of your site or other resources. Enter a link name and a valid website link.
   Select button color: Choose the button color of the links in the header. This option helps to avoid a similar header background and button color so that the header links have better visibility.
   You can choose any color from the available options.
   By default, a few standard colors are shown. Pick a color from the color picker, or enter a hex, RGB, or HSL color code.

3. Click on the Drag icon on the top left of the link to drag and rearrange them in your header section

4. To remove a link, click the x (Remove link) icon on the top right