Learn how to craft an engaging table of contents for exciting digital experiences.
Step 1
Click the "Studio" button in the top right corner.
![](https://cdn.relayto.com/images_originals/GB2RSiETSHi6doLTW2lw_Slide%2016_9%20-%20251%20(34).png)
Step 2
Click the "Add Interactivity" icon on the toolbar at the top middle of the screen or in the Interactive Studio side menu.
![](https://cdn.relayto.com/images_originals/Vldi5rMQSOOP2bfsoUT7_Slide%2016_9%20-%20251%20(35).png)
Step 3
Choose the Rectangle from the Shapes options.
![](https://cdn.relayto.com/images_originals/AW0LH9FTLqaJKIT4n2xO_Slide 16_9 - 251 (5).png)
Step 4
With the shape selected, make it transparent by lowering the opacity to 0.
![](https://cdn.relayto.com/images_originals/vPlLONckQNunZ4m8WIDH_Slide 16_9 - 251 (6).png)
Step 5
Set the Border width to 0 or click Color and change it to be the same as the background.
![](https://cdn.relayto.com/images_originals/EfseZZ1xTKebuU1lvoNF_Slide 16_9 - 251 (7).png)
Step 6
Click "Add action on click" section, and then click "Go to page." Choose the specific page that will open when the shape is clicked on.
![](https://cdn.relayto.com/images_originals/3cqjEFpRQDqAX0g5qaWM_Slide 16_9 - 251 (8).png)
Step 7
Place the shape/icon above the text on the table of contents. This way, people can click on it and be redirected to the selected page.
![](https://cdn.relayto.com/images_originals/nXm5FD8wQ5Cz8pBWaqwh_Slide 16_9 - 251 (9).png)
Bonus
We recommend adding an icon to the navigation with the action "Go to page," linking it to your interactive table of contents. This way, users can easily access the table of contents whenever needed.
To understand more on How to add a call-to-action to navigation, click here.
![](https://cdn.relayto.com/images_originals/zaOiSfftREiFJ4OQHhSQ_Slide 16_9 - 251 (10).png)
Related Articles:
Thank you for joining us in this tutorial! If you have any questions or need help, feel free to email us at [email protected] or book a call here.