Hero section

The Hero section in Document360 is a prominent feature displayed at the top of the Knowledge base site’s home page. It provides an opportunity to create a visually appealing introduction to your Knowledge base by customizing text, buttons, and the search bar. By tailoring the Hero section, you can ensure it reflects your brand and engages your audience effectively.

For instance, a software company can use the Hero section to prominently display a welcome message, highlight product updates, and provide quick navigation buttons to key resources. This makes it easier for users to find relevant information and creates a professional first impression.


Accessing Hero section

To access the Hero section:

  1. Navigate to Settings() > Knowledge base site > Customize site in the Knowledge base portal.

  2. Click Customize site to access the design configurations.

  3. From the left dropdown, select Home page.

    The Body section lists all Body blocks, with the Hero section at the top.

    NOTE

    The Hero section at the top cannot be deleted or reordered.

  4. Click the Hero section to open the Hero section panel.

    Adding background to the Hero section

  5. In the Background type dropdown, choose one of the following options:

    Background type

    Description

    Alignment options

    None

    No background will appear. By default, the background color is white.

    Left, Center, Right

    Insert image

    In the Background image section, click Choose image to upload an image from your drive.

    Alternatively, enter the image URL in the Image URL field.

    Left, Center, Right

    Color

    Choose a color from the available options or use the Custom color palette for a custom color.

    Left, Center, Right

    Gradient

    Select a gradient from the available options.

    Left, Center, Right

    Pattern

    Choose a pattern from the given options.

    Left, Center, Right

    Configuring the Hero section elements

  6. Expand the Hero section and configure the following elements:

    Element

    Actions

    Welcome text

    1. Enter the desired title in the Heading text field.

    2. Choose a text color using the Text color palette.

    3. Click Delete () to remove this element.

    Promo text

    1. Enter the content in the Paragraph text field.

    2. Choose a text color using the Text color palette.

    3. Click Delete () to remove this element.

    Buttons

    1. Choose text and button colors using the Text color palette.

    2. Enter text in the First button text field.

    3. Provide the URL in the First button url field.

    4. Click Add button to add up to three buttons.

    5. Use Delete () or Hide () icons to remove or hide buttons.

    Search

    The Search bar has no configurable options.

    Click Delete () to remove the Search element if needed.

  7. Hover over any of the four elements (Welcome text, Promo text, Buttons, or Search) and click the Hide () icon to hide them from the Home page.

  8. Click Save and then Preview to view the changes on the Knowledge base site.

  9. Once done, click Publish to apply the changes.

Knowledge base site view

Here's how the Hero section appears on the Knowledge base site, showcasing customized text, buttons, and search functionality, designed to provide a welcoming and navigable interface for users.


FAQ

How do I change the Documentation button text in the Home page?

  1. Navigate to Settings() > Knowledge base site > Customize site in the Knowledge base portal.

  2. Click Customize site to access the design configurations.

  3. From the left dropdown, select Home page.

    The Body section lists all Body blocks, with the Hero section at the top.

  4. Expand the Hero section and select Buttons.

  5. Update the Documentation button text.

  6. Click Save and then Preview to view the changes on the Knowledge base site.

  7. Once done, click Publish to apply the changes.