How to Customize the TOC Content and TOC Navigation Design Elements in Grid Mode

In this article, we will show you how you can use TOC Content and TOC Navigation design elements in your SharePoint page to create a convenient navigation panel for your page:

TABLE OF CONTENTS

• Before we begin
• Step-by-step tutorial
  • Step 1: Choose Layout
  • Step 2: Switch to Grid Mode
  • Step 3: Insert the TOC Content Design Element
  • Step 4: Customize the content
  • Step 5: Insert TOC Navigation
  • Step 6: Customize TOC Navigation
  • Step 7: Preview and Save
• TOC Content  and TOC Navigation Features
  • TOC Content tabs
    • A. Design Tab
    • B. Visibility Tab
    • C. Custom CSS Tab
  • TOC Navigation tabs
    • A. Design Tab
    • B. Visibility Tab
    • C. Custom CSS Tab

Before we begin

• You must have the latest version of ShortPoint installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license. 

Step-by-step tutorial

Follow the steps below to learn how to customize TOC Content and TOC Navigation Design Elements:

Step 1: Choose Layout

Go to the SharePoint page where you want to add TOC Content and TOC Navigation and click Edit:

Then, click the gray plus icon:

Click ShortPoint from the list of web parts:

Select Choose Layout:

Choose the layout you prefer. For this guide, we will select the highlighted layout below to make room for the TOC Navigation Design Element:

You will now see your selected layout on your page:

Step 2: Switch to Grid Mode

NOTE: TOC Content and TOC Navigation are currently only available in Grid Mode.

Click the Switch to Grid Mode icon:

Step 3: Insert the TOC Content Design Element

Click the black plus icon:

Then, use the search field to look for TOC Content and click it:

Step 4: Customize the content

In the Design tab, click the blank space and paste your content:

Then, assign a Paragraph Format for each header. To do this, highlight the header, click the Paragraph Format icon, and select the format you prefer:

(Optional) You can also use the text editor to change the color, font, size, and many more of your text:

Once you are done, click Preview to see how it looks on your page:

Then, click Insert:

NOTE: Check out TOC Content Features to see more features.

Step 5: Insert TOC Navigation

Click the black plus icon:

Use the search field to look for TOC Navigation and click it:

Step 6: Customize TOC Navigation

NOTE: You can customize the TOC Navigation according to your preference. Customizations with (Optional) tags do not need to be followed strictly.

(Optional) Toggle on Fixed to keep the TOC Navigation visible while scrolling:

Add all the Paragraph Formats you have configured in Step 4 under the Selectors field. For example, since we have Heading 1 and Heading 2 as Paragraph formats, we wrote h1, h2 in the Selectors field:

NOTE: Make sure to separate each heading you add with a comma. 

(Optional) Set the [1] Color and [2] Text Color of the TOC Navigation:

Then, click Insert:

NOTE: Check out TOC Navigation Features to see more features

Step 7: Preview and Save

Click the eye icon to see how your page will look in real-time:

Then, click Save to keep your progress:

TOC Content  and TOC Navigation Features

There are many ways to customize the features of the TOC Content and TOC Navigation Design Elements. Find more about them below:

TOC Content tabs

Below are the tabs found for the TOC Content Design Element:

A. Design Tab

The Design tab allows you to add and customize the content on your page using the text editor. It also contains ShortPoint Inline Design Elements that allow you to add other details such as buttons, links, and pop-overs to your content:

NOTE: For more information about ShortPoint Inline Design Elements, checkout Introducing Inline Design Elements. 

B. Visibility Tab

The Visibility tab allows you to configure the visibility of the TOC Content Design Element. You can choose to hide it from certain groups of people or hide it according to the device used to view the page:

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the TOC Content Design Element:

TOC Navigation tabs

Below are the tabs found for the TOC Navigation Design Element:

A. Design Tab

You can modify the default design of the element in the Design Tab. Below are the settings you can configure:

	Fixed	allows your TOC to stay visible as you scroll the page.
	Show and hide	allows you to hide certain TOC elements.
	Show top	allows you to add a “TOP” link to all the headings on your page.
	Stick to Bottom	allows you to show your navigation at the bottom.
	Selectors	allows you to configure the headings that will appear on your TOC Navigation.
	Scroll to	allows you to modify the amount of space between the top of the page and the selected table of contents item.
	Top Spacing	allows you the amount of space between the top of the page and the table of contents.
	Color	allows you to customize the color of the active item in the table of contents.
	Text color	allows you to customize the color of the items in the table of contents.

B. Visibility Tab

The Visibility tab allows you to configure the visibility of the TOC Navigation Design Element. You can choose to hide it from certain groups of people or hide it according to the device used to view the page:

NOTE: For more information about the Visibility feature, check out Managing Visibility of ShortPoint Design Elements.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the TOC Navigation Design Element:

NOTE: For more information about the Custom CSS tab, check out Custom CSS tab for Design Elements.

That's it! You now know how to customize TOC Content and TOC Navigation. Enjoy using this Design Element on your own pages.

Related articles:

• How to Customize the Image List Design Element
• How to Customize the Date List Design Element
• How to Customize the Simple List Design Element