Inpage Navigation
The inpage navigation element allows you to display a table of contents anywhere on any page of your website. It also allows you to set-up multiple links to the page and is a good alternative to anchor links. In this tutorial we will explain how to create the inpage navigation and what design options are available to you.
Sample views Step by step guide Screen adaption
Sample view
Step by step guide
Create an element
- After clicking +Content, select Inpage Navigation located in the Navigation Elements tab.
Select chapter elements
- In the Content tab you can name the element using the field Label, for example you could name the element 'table of content'.
- In the Anchor Elements section you can select the chapter elements you want to be linked from the Available Objects. Please note that the chapter elements will appear with the names you have chosen but if you fail to name them the first words of the elements will appear instead.
- Once selected, the elements will appear in the Selected Objects field and can be moved up or down using the arrow keys if needed.
Inserting a CTA button
- In the CTA text field, enter the text that should appear in the Frontend instead of the link button.
- By clicking on the chain symbol in the CTA link area, you can create a link to the CTA button.
Adjusting the settings
- With the Scroll Type you can choose between either a fixed or a scrolling navigation.
- With the Element Width you can choose the orientation of the inpage navigation to either the content width or to the page width.
- In Alignment you can choose between either a left-aligned or a centered inpage navigation.
- With Element Design you can determine the background color that corresponds to your chosen colors primary, secondary and inverted options. Default in this scenario refers to a transparent background.
Enter the names of the elements
- In order for the Inpage Navigation to display the appropriate terms, it is important that you have named the respective elements accordingly.
- To give an element a name, click first the Settings tab in the respective element and then enter the desired name in the field called Name of the element, for example Cinema Teaser 66%.
- Save the changes.
Screen adaption
If no element name is created in the field Name of the element in the settings, a standard text with 'no title' is automatically displayed in the inpage navigation instead. Also, please be aware that the sequence of the links displayed is automatically determined by the order in which you have created the elements in the Backend.
Worth noting: Content hidden in the Backend ('deactivated') will be displayed in the Anchor Elements among the available objects and can still be selected. As soon as the respective element is enabled, it will appear in the inpage navigation in the Frontend.
Responsive: Please note that in the mobile view to fit the size of the screen better, the inpage navigation is displayed as a dropdown menu. This does mean that all the links of the table of contents are not displayed at the same time. Click on the arrow to open the dropdown menu.