- Print
- DarkLight
- PDF
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
Recommended header background image size is 1920 × 415 pixels. However, depending upon the device screen size of your readers, the addition or removal of header section elements, and design decisions, the background image size can vary. Document360 supports PNG, SVG, and JPEG image formats for the header background image.
Text color
The text color of the header section 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 Text color option
- 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
- Once you're done, click anywhere on the screen to exit
- 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
Click the + (Add header link) icon in the header section
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.Click on the Drag icon on the top left of the link to drag and rearrange them in your header section
To remove a link, click the x (Remove link) icon on the top right
You can add a maximum of three links in this section.