---
title: "Customizing hero section"
slug: "hero-section"
description: "Customize the Hero section of your Document360 Knowledge base to enhance user engagement with tailored text, buttons, and a professional first impression."
updated: 2026-06-01T09:46:45Z
published: 2026-06-01T09:46:45Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing 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, an organization 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** (**) in the left navigation bar****in the Knowledge base portal.
2. In the left navigation pane, navigate to **Knowledge base site** > **Site customization**.
3. In the **Site design** section, click the **Customize site** button to access the design configurations.

![Site customization options for branding, including theme selection and logo upload.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Customize-site.png)
4. From the left dropdown, select **Home**.

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

> [!NOTE]
> ** NOTE
> 
> The **Hero section******at the top cannot be deleted or reordered.
5. Click the **Hero section** to perform customization.

#### **Adding background to the****Hero section**
6. In the **Background type******dropdown, choose one of the following options:

| **Background type** | Description |
| --- | --- |
| None | No background will appear. By default, the background color is white. |
| 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. |
| Color | Choose a color from the available options or use the **Custom color palette** for a custom color. |
| Gradient | Select a gradient from the available options. |
| Pattern | Choose a pattern from the given options. |
7. In the **Alignment**field, choose **Left**, **Center**,****or **Right**to align the text in your **Hero section**.

![Customize the hero section with background patterns and alignment options for your site.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Hero-section-background.png)

#### **Configuring the****Hero section****elements**
8. Expand the **Hero section** in the left navigation bar 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 the text color using the **Text color******palette. 2. Choose the button color using the **Button color**palette. 3. Enter text in the **First button text** field. 4. Provide the URL in the **First button url** field. 5. Click **Add button** to add up to three buttons. 6. Use **Delete** (**) or **Hide** (**) icons to remove or hide buttons. |
| **Search** | 1. Choose the desired search bar style: **Input box** or **button**. 2. Select the **Custom background color** checkbox to apply a customized color to the search bar. > [!NOTE] > ** **NOTE** > > Selecting a custom background color automatically prefills the primary color for both **Dark** and **Light** themes. 3. The **Show keyboard shortcut** checkbox is selected by default. - If enabled, **Ctrl + K** will appear in the search bar. Readers can press **Ctrl + K** to access the search bar quickly. - This applies to both the search bar above the **left panel** (above the category tree) and the **main home page search bar** in the Knowledge base site. 4. Click **Delete** (**) to remove the **Search** element if needed. |
9. Hover over any of the four elements (**Welcome text**, **Promo text**, **Buttons**, or **Search**) in the left navigation panel and click the **Hide** (**) icon to hide them from the Home page.
10. Click **Preview** to see how your changes will appear on the knowledge base site.
11. Click **Save******to save your changes without applying them immediately.
12. Click **Publish******to make your recent changes visible to readers.
13. Click the **More** (**) icon and select **Reset to published version** to discard all saved and unsaved customizations and revert to the last published version.

> [!NOTE]
> ** NOTE
> 
> The **Reset to published version** feature is available only for new Knowledge base site 2.0 projects created after March 29, 2025.

![Website customization interface showing options for hero section and support resources.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771935172449.png)

### Knowledge base site view

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

![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot-Knowledge_base_site_view.png)

---

### FAQ

#### How do I change the **Documentation** button text on the Home page?

1. Hover on **Settings** (**) in the left navigation bar****in the Knowledge base portal.
2. In the sub-menu, navigate to **Knowledge base site** > **Site customization**.
3. Click **Customize site** to access the design configurations.
4. From the left dropdown, select **Home** page.

The **Body** section lists all **Body blocks**, with the **Hero section** at the top.
5. Expand the **Hero section** and select **Buttons**.
6. Update the **Documentation** button text.
7. Click **Save** and then **Preview** to view the changes on the Knowledge base site.
8. Once done, click **Publish** to apply the changes.