How can we help you today?

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:


Sample TOC Content and TOC Navigation


TABLE OF CONTENTS


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:


Edit


Then, click the gray plus icon:


gray plus icon


Click ShortPoint from the list of web parts:


ShortPoint


Select Choose Layout:


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:


choose your preferred layout


You will now see your selected layout on your page:


sample selected layout


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:


Switch to Grid Mode icon


Step 3: Insert the TOC Content Design Element


Click the black plus icon:


black plus icon


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


TOC Content


Step 4: Customize the content


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


paste content in the design tab


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:


assign paragraph format


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


customize text


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


Preview


Then, click Insert:


Insert


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

Step 5: Insert TOC Navigation


Click the black plus icon:


black plus icon


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


TOC Navigation


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:


Fixed


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:


Selectors


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:


Color and Text Color


Then, click Insert:


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:


eye icon


Then, click Save to keep your progress:


Save


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:


Design tab


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:


Visibility tab


C. Custom CSS Tab


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


Custom CSS tab


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:


Design tab


FixedFixed 
allows your TOC to stay visible as you scroll the page.
Show and hideShow and hide
allows you to hide certain TOC elements.
Show topShow topallows you to add a “TOP” link to all the headings on your page.
Stick to BottomStick to Bottom
allows you to show your navigation at the bottom.
SelectorsSelectors allows you to configure the headings that will appear on your TOC Navigation.
Scroll toScroll toallows you to modify the amount of space between the top of the page and the selected table of contents item.
Top SpacingTop Spacing
allows you the amount of space between the top of the page and the table of contents.
ColorColor
allows you to customize the color of the active item in the table of contents.
Text ColorText 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:


Visibility tab


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:


Custom CSS tab


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:

















Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 32 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more