How to Design Table of Contents

 

ProProfs Knowledge Base allows you to prepare a help center that is easy to navigate and minimizes visitor’s time and effort. It lets you create a table of content that provides a sneak-peek into every aspect of your knowledge base in the way you want.

 

Designing a table of contents helps you to:

 

  1. Organize your help center folders and pages in a better way

  2. Provide a tidy outline of your knowledge base

  3. Deliver a user-friendly experience

 

In this article, you'll learn:

 

 

 How to Show/Hide Table of Contents

 

Step 1: In your Knowledge Base account,

 

  • Navigate to Settings >> Table Of Contents

  • A new page opens with different elements related to the customization of your table of contents.

 

Opening Table of Contents in Settings

 

Step 2: Follow the instructions below to customize the table of contents of your help center.

 

Elements of a Table of Contents


1. Show Table of Contents: You can choose to show/hide the table of contents using this option. Toggle it to Yes, and it will appear as shown in the left panel.

 

An overview of Table of Contents in the Helpdesk

 

When you prefer to show the table of contents, a list of customizable options shows up to help you design it the way you want.

 

a) Style: Choose from one of the two given styles: Modern or Tree. A preview of both the structures is visible on the right side.

 

When you choose Modern, you will see the following customizable options.

 

Elements associated with the Modern Style

 

When you choose Tree, you will see the below options to modify the table. Select the checkboxes you want to enable.

 

Elements associated with the Tree Style

 

b) Choose Icons: You can try out different icon types to customize the table of contents. With a live preview on the left panel, you can see how each icon will look in your table of contents.

 

Choosing an Icon Type

 

Note: The Choose Icons option works only with the ‘Modern’ style. If you choose ‘Tree,’ you won’t be able to select an icon type.

 

c) Font*: You can choose a font type from the given list.

 

Picking a Font Type

 

d) Font Size*: Pick a font size of your choice.
 

Setting a Font Size

 

e) Line-Height*: You can increase or decrease the distance between two lines.

 

Setting the Line-Height

 

*Available with the Tree style.

 

f) Width: You can adjust the width of the table of contents panel in pixels.

 

Adjusting the Width

 

g) Background Color: You can change the panel’s background color to match your website’s theme. You can use the 'Revert to default' option to reset the changes.

 

Changing the Background Color

 

h) Link Color: You can change the color of page titles appearing in the left panel to enhance viewability. Use 'Revert to default' to restore the original color, i.e., blue.

 

Changing the Link Color

 

Note: The option to modify link color comes with ‘Modern’ Style. When you choose ‘Tree,’ you won’t see this option.

 

 How to Enable Page TOC

 

2. Page Table of Contents: Toggle it to Yes to display the table of contents in an article.

 

Enabling Table of Contents on a Page

 

Text with H2 and smaller tags will show up on the page, as shown below.

 

Table of Contents on a Page

 

 How to Configure TOC Settings

 

3. Keyword Index: You can show or hide the keyword index tab. When enabled to Yes, the Index tab will appear next to the Table of Contents. Learn more.

 

Keyword Index in Table of Contents

 

4. Default View: The default view has two options: Basic and Tabs. 

 

The ‘basic view’ opens one page at a time, with no tabs. 

 

The ‘tabs view’ opens pages in different tabs similar to a web browser.

 

Tab view

 

Table of Contents Contd...

 

Elements of Table of Contents


5. Share: You can easily share help articles on social media platforms through dedicated buttons. It lets you make help articles available for your target customers on social media.

 

Social sharing buttons


6. Search: You can enable one of the two search methods: Basic or Exact. 

 

7. Disable Copying: You can prevent users from copying the content of your help articles by toggling it to Yes.

 

8. Link folder to page: You can get the unique URL address of a folder to make it linkable to a page by toggling it ON.

 

Enabling Folder Linking

 

9. Folder Index: You can use this option to show indexing when a user accesses a particular folder. It is recommended to turn this feature off if you want to show only the relevant text on the folder page and hide the indexing from it. 

 

Folder Index enabled
When Folder Index is enabled

 

Folder Index disabled
When Folder Index is disabled

 

 How to Enable 301 Redirection

 

10. 301 Redirect: You can use this option to redirect users accessing a particular page to any other preferred page or URL. Learn more.

 

11. Find & Replace: It works similarly to the find & replace feature in MS Word. You can find a word and replace it with a new one. Click Submit to finalize your change and Cancel if you changed your mind.

 

Find & Replace Feature


12. Tag Tooltips: You can enable this option to offer a tooltip within an article depending upon the contained information. Learn More.

 

Enabling Tag Tooltip Feature
When you toggle Tag Tooltips to 'Yes.'

 

Disabling Tag Tooltip Feature
When you toggle Tag Tooltips to ‘No.

 

 How to Change the Folder Style Within a Page

 

13. Folder Page Style: You can use this option to divide the folders into two or three columns. Users will find the folders under a section arranged in two or three columns depending upon their number. Else, you can go with the default option, i.e., one column.

 

Below is how subfolders will get arranged when you choose a column of three.

 

Folder Page Style for better navigation


Don’t forget to click 'Save' to save your changes at the end.

 

Was this information helpful?

The page cannot be found

The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Please make sure you spelled the page name correctly or use the search box.

add chat to your website