››

››How to Design Table of Contents

How to Design Table of Contents

ProProfs Knowledge Base allows you to prepare a help center that is easy to navigate and minimizes visitors’ 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:

Organize your help center folders and pages in a better way
Provide a tidy outline of your knowledge base
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 in 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.

Related Articles: