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:
Navigate to Settings() > Knowledge base site > Customize site in the Knowledge base portal.
Click Customize site to access the design configurations.
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.
Click the Hero section to open the Hero section panel.
Adding background to the Hero section
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
Expand the Hero section and configure the following elements:
Element
Actions
Welcome text
Enter the desired title in the Heading text field.
Choose a text color using the Text color palette.
Click Delete () to remove this element.
Promo text
Enter the content in the Paragraph text field.
Choose a text color using the Text color palette.
Click Delete () to remove this element.
Buttons
Choose text and button colors using the Text color palette.
Enter text in the First button text field.
Provide the URL in the First button url field.
Click Add button to add up to three buttons.
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.
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.
Click Save and then Preview to view the changes on the Knowledge base site.
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?
Navigate to Settings() > Knowledge base site > Customize site in the Knowledge base portal.
Click Customize site to access the design configurations.
From the left dropdown, select Home page.
The Body section lists all Body blocks, with the Hero section at the top.
Expand the Hero section and select Buttons.
Update the Documentation button text.
Click Save and then Preview to view the changes on the Knowledge base site.
Once done, click Publish to apply the changes.