Main pages

Updated
  • Updated on Jan 13, 2025
  • Published on Jan 3, 2025
  • 9 minute(s) read
  • Janeera D A
  • Charulatha Ravichandran
  • Manoharan Soundarraj

Plans supporting customization of Knowledge base site

Professional
Business
Enterprise






The Home page (previously "Home page builder") is the first page an end-user will see when they visit your Knowledge base. The Home page lets you customize your home page by adding links, changing colors, including categories from your knowledge base, and more.

Home page

1_Screenshot-Document360_landing_page

NOTE

The header, primary and secondary navigation, and footer appear on the home page but are configured in Settings () > Customize site > Header and Footer.

Accessing the Home page design settings

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

    The Customize site page will appear, holding all the basic site design configurations.

  2. Click the Customize site button.

  3. Select Home in the dropdown on the left.

    A default Home page design is available for you to customize. The different sections of the Home page are listed on the left, and a Live preview is available on the right.

  4. If needed, click Add section and choose from the available Body block options each featured for specific content needs:

    • Rich text: Add and format textual content using Markdown for enhanced readability and structure.

    • Multicolumn card section: Display content in organized columns, perfect for showcasing multiple topics or features side by side.

    • Image with text: Combine visuals with textual descriptions to create a more dynamic and visually appealing layout.

    • Custom code section: Embed Custom HTML and CSS code for advanced content customization.

    • Knowledge base categories: Highlight key categories from your Knowledge base to improve navigation.

    • Widgets: Add interactive elements, such as surveys or contact forms, to enhance user engagement.

    Body blocks enable Knowledge base admins to create visually appealing and intuitive Home pages that effectively guide users. Each block provides a unique way to display content, offering flexibility in designing an engaging and user-friendly Home page.

    For example, a software company can use the Knowledge base categories block to display product guides. In contrast, the Image with text block can highlight key features or announcements, enhancing the user experience and engagement.

  5. You can reorder the section on the left pane using drag-and-drop () and click the eye () icon to hide the desired element.

    NOTE

    The main Hero section at the top cannot be dragged and moved.

  6. Click Preview at the top right to see how the page will look.

  7. Click Save to save the changes.

  8. Click Publish to activate the changes made in the portal on the Knowledge base site.

    NOTE

    The Publish button becomes active only after you save your changes.

Customizing the home page of the Knowledge base site.

Home page themes

NOTE

You can only configure Home page themes if you are on a professional, business or enterprise plan.

Customize your Home page with the Document360 themes. You can configure a unique theme for each workspace or language.

  1. Click the Themes () icon on the Home page design page

  2. Select one of the themes: Engage, Innovate, Learn, or Default.

  3. Click the eye () icon to view a static preview.  

  4. Click Activate to implement the selected theme.

Customizing the home page of the Knowledge base site.

NOTE

The recommended resolution for the homepage image is 1920x415 pixels (width x height). You can customize the resolution as needed.

Home page SEO

You can use a meta title, meta description, and a featured image for your Home page.

In the Home page customizing page,

  1. Click the Settings () icon in the Home page design page.

    The Settings panel will appear.

  2. You can enter the desired Title and Meta description for your Home page.

  3. Turn on the Visibility settings toggle.

    When the toggle is turned off, the home page will no longer be visible in the Knowledge base. Instead, users will be directed to the documentation page of your Knowledge base.

  4. Add a featured image from the Drive by clicking Choose image.

  5. Click Save.

Customizing the home page of the Knowledge base site.

Documentation

The Documentation page lets you customize the category navigation by adjusting the position of the search bar and applying background colors.

Accessing the Documentation page design settings

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

    The Customize site page will appear, holding all the basic site design configurations.

  2. Click the Customize site button.

  3. Select Documentation from the dropdown on the left.

    A default Documentation page design is available for you to customize. Customization options for the Documentation page are listed on the left, and a Live preview is available on the right.

  4. Choose the search bar position:

    • Left panel: Place the search bar at the top of the left navigation panel.

    • Secondary Header: Position the search bar in the secondary header on the top right.

  5. Check the Add background color box to apply a background color to the left navigation panel.

  6. Click Preview at the top right to see how the page will look.

  7. Once done, click Save to save your changes. If you haven’t saved your changes, an UNSAVED CHANGES badge will appear at the top, next to the save button.

  8. Click Publish to make the changes live.

    Document360 interface showing Documentation page customize window.

Login page

If your Knowledge base is private or mixed access, reader are required to login with their credentials to view the content. You can customize this login page using the Customize site option available in Document360.

Accessing the Login page design settings

  1. From the Knowledge base portal, navigate to Settings () > Knowledge base site > Customize site.

    The page holds all the basic site design configurations.

  2. Click the Customize site button.

  3. In the dropdown menu on the left, select Login under Main Pages.

    You’ll see a default Login page design ready for customization.

  4. Choose one of the following options:

    • Basic Style: Customize the default image only.

    • Custom Style: Add Custom HTML and CSS. You can turn on/off the Preview toggle on the right to switch between rendered view and code view.

  5. Click Preview at the top right to see how the page will look.

  6. Click the Save button to save your recent changes.

  7. Click Publish to activate the changes in the portal on the Knowledge base site.

FAQs

How do I add images to the Home page?

To add images to the Home page, paste the following code in the Custom HTML:

<img src="paris.jpg" alt="Paris" class="center">

For customizing the alignment, add the following CSS code in the Custom CSS & JavaScript section:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

How do I change the position of the search bar to reflect on the knowledge base site?

To adjust the position of the search bar on your Knowledge base site, follow these steps:

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

  2. Click Customize site. Select the dropdown, and click Documentation.

  3. On the left panel, you have two options to switch the search bar position.

    Left panel: Place the search bar in the category tree on the left side.

    Secondary Header: Place the search bar on the right side in the secondary header.

  4. If needed, check the Add background color box to apply the background color to the search bar.

  5. Once done, click Save and Publish.

How do I change the browser tab title for my Knowledge base home page?

The SEO title of the home page appears as the browser tab name. To change the SEO title of the home page:

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

    The Customize site page will appear, holding all basic site design configurations.

  2. Click the Customize site button.

  3. In the dropdown on the left, select Home.

  4. Click the Settings () icon in the Home page.

    The Settings panel will appear.

  5. Enter the desired Title for your Home page.

  6. Once done, click Save and Publish.

How to integrate a video loader into your home page?

Adding a visually appealing video loader to your homepage can create a sense of curiosity and interactivity for your visitors. Follow these simple steps to seamlessly integrate a video loader:

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

    The Customize site page will appear, holding all basic site design configurations.

  2. Click the Customize site button.

  3. In the dropdown on the left, select Home.

  4. Create a new custom code section and insert the following HTML code, replacing the src link with the video link from your drive:

    htmlCopy code<div class="video__loader">
    <video muted autoplay loop>
        <source src="https://cdn.document360.io/560b3c6e-18a1-4ad6-babc-d0257662eab2/Images/Documentation/Revolving_Video.mp4" />
    </video>
</div>

    This code will seamlessly integrate the video loader into your homepage, enhancing its visual appeal and captivating your audience from the moment they arrive.

  5. In the dropdown on the left, select Custom CSS/JavaScript and navigate to the CSS tab.

  6. Replace "Innovate" in the following code snippet with the name of your configured theme (e.g., Engage, Learn, Innovate, or Default):

    cssCopy codebody.innovate {
    position: relative;
    overflow: hidden !important;
}

body.innovate.custom--loaded {
    overflow: auto !important;
}

/* Loader */
.video__loader {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--color-dark);
    opacity: 1;
    visibility: visible;
    z-index: 9999999999;
    transition: all 1s ease;
}

.video__loader.remove--loader {
    opacity: 0;
    visibility: hidden;
}

.video__loader video {
    width: 100%;
}

    This ensures that the CSS styling aligns with your chosen theme, optimizing the visual presentation for enhanced user experience.

  7. Navigate to the JavaScript tab.

  8. Replace "innovate" in the following code snippet with your theme name:

    javascriptCopy code/* Loader */
var elBody = document.querySelector("body.innovate");
var customLoaderVideo = document.querySelector(".video__loader");

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        elBody?.classList.add("custom--loaded");
        customLoaderVideo?.classList.add("remove--loader");
    }, 5000);
});

    This customization ensures that the JavaScript functionality integrates seamlessly with your theme, enhancing the overall performance of your site.

NOTE

The video loader function will operate exclusively on the homepage and will not apply to the documentation pages.

How to disable the Home page on the Knowledge base site?

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

  2. Click the Settings () icon in the Home page design page.

  3. Turn off the Visibility settings toggle and click Save.

How to add a contact/register button to your Login page?

Adding a support button to your login page can simplify the process of reaching out for assistance. Follow these easy steps to seamlessly integrate a support button into your login page:

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

  2. Select the Customize site button.

  3. Select Login from the left drop-down under the Main Pages group.

  4. Then choose the Custom style radio button to enable modifications specifically for your login page.

  5. In the HTML customization tab, add the following code to create your support button:

    htmlCopy code<div class="login-form--support">
    <button class="support-button">
        <a href="Support portal button or registration button link">Contact Support</a>
    </button>
    <p>Click here to Contact Support</p>
</div>

  6. Next to the HTML tab, find the CSS customization tab. Paste the following code to ensure the support button is centered on the page:

    cssCopy code.login-form--support {
    text-align: center; /* Centers the content inside the element */
}

By following these steps, you will successfully add a support button to your login page. This enhancement allows users facing challenges to easily access support resources without leaving the login interface, significantly improving their experience. Providing quick assistance right where it’s needed can lead to higher user satisfaction.

Related articles