Home page header
  • 02 Feb 2022
  • 4 Minuten te lezen
  • Bijdragers
  • Donker
    Licht
  • Pdf

Home page header

  • Donker
    Licht
  • Pdf

There is no Dutch content available for this article, You are viewing the fallback version (English).

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 tag line, customizable links, and a powerful search.

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


Accessing home page header

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

1_Screengif-Home_page_builder_workflow


Styling the home page header

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

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

2_Screenshot-Header_settings

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

  • 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 ••• icon at the top right of the header section
  • Select the Hide search bar option and click on Save at the top right. 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 ••• icon at the top right of the header section. Then, click the Show search barSave icon at the top right

Header background

3_Screenshot-Header_background

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

  • Click on ••• 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

5_Screenshot-Header_background_colors

You can choose any color from the available options. By default, 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 right.


Gradient

6_Screenshot-Header_background_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

7_Screenshot-Header_background_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

8_Screenshot-Header_background_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 Insert button
b. Upload an image - Upload an image from your local storage or knowledge base drive

Header background image

Recommended header background image is of size 1920 × 500 pixels. However, depending upon the device screen size of your readers, you may change this background image size. Document360 supports png, SVG, and jpg 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.

9_Screenshot-Header_text_color

  1. Click on ••• 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

4_Screenshot-Header_links_options

  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: To 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, 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

Limit for links in header section

You can add a maximum of three links in this section.


Was dit artikel behulpzaam

What's Next