In this article, we will show you how you can use TOC Content and TOC Navigation design elements to organize convenient navigation for your page, like in this example:

Please visit our Demos website to see a live example of using these elements: https://demos.shortpoint.com/misc/toc-content#FirstChapter

STEP 1: PREPARE THE LAYOUT

Add a Section and choose a row layout. We have chosen the 2/3 - 1/3 layout to present the content and the navigation panel on the right. 

STEP 2: INSERT THE TOC CONTENT ELEMENT

Place the cursor into the first part of the row and press Insert on the top. This will open ShortPoint Page Builder. Choose TOC Content. Press Insert. This element is used for presenting the content of your page.

STEP 3: INSERT CONTENT INTO TOC CONTENT ELEMENT AND ADJUST THE SETTINGS

Open the settings of the TOC Content element by clicking the cogwheel icon, as shown below. Insert your content. Organize the information with different levels of headings. You can preview the changes by clicking Preview on the bottom. Press Insert when it's ready.

STEP 4: INSERT THE TOC NAVIGATION ELEMENT

Place the cursor into the second part of the row and press Insert on the top. Choose TOC Navigation. Press Insert.

This element is used for creating a navigation panel for your content. It will present the outline for your information.

Step 5: ADJUST THE SETTINGS OF THE TOC NAVIGATION ELEMENT

Open the settings of the TOC Navigation element by pressing the cogwheel icon. Adjust the settings. Pay specific attention to the selectors: indicate the ones you used in the TOC element, so that they will be correctly displayed in the navigation panel. Use the following format: if you want to indicate Heading 1, type h1. 

You can customize the location of the panel as well as the color settings. When everything is ready, press Update. Save the page.

This is how our result looks like:

Thank you for your attention!