Back to contents

How to use Scroll Navigation widget and apply it to Elementor sections

This tutorial explains how to enrich the presentation of the content by using the Scroll Navigation widget from JetElements plugin, consisting of about 50 widgets.

The Scroll Navigation widget is included in JetElements plugin for Elementor page builder. Its main function is to allow switching from section to section within a page by adding vertical pagination along the existing sections.

Scroll Navigation widget

Adding Scroll Navigation Functionality to Elementor Sections

Follow the instructions below to allow the Elementor-built sections to be switched on scroll using the vertical pagination provided by Scroll Navigation widget from JetElements.

Step 1 — First, navigate to the Dashboard and open the Elementor-built page to which you want to add Scroll Navigation widget.

Add new page in WP Dashboard

Step 2 — Then click the Edit with Elementor button.

Step 3 — In Elementor editor locate the sections to which you want to attach the Scroll Navigation pagination dots.

Step 4 — Right-click the section and here select Edit Section option. Thus, the sidebar with the section settings will open.

Step 5 — Switch to the Advanced settings tab and input the ID of the section you’d be using into the CSS ID name field.

Advanced settings in Scroll Navigation widget

Step 6 — Note, that you need to add the unique CSS IDs for each of the sections in order to link them to the pagination dots of the Scroll Navigation widget.

Step 7 — Now, switch to the Elementor widgets area and drag the content to the sections. Then, find the Scroll Navigation widget under JetElements block in the list of available widgets for Elementor. Drop it above all the sections to which you need to add the pagination dots.

Scroll Navigation widget

Managing the content

Step 1 — By default, the Scroll Navigation widget’s content settings will be open on the left in the sidebar. Here you can spot the three already existing navigation items, which are now empty. In case there are more sections on your page, click the Add New button to add a new section. You need to create an item for each of the sections you want to link.

Items settings in Scroll Navigation widget

Step 2 — In case the number of items satisfies you, click the first item and input the Section ID you’ve added in the CSS ID field for the first section in the 6th step. Then, set the hint icon and the label title for the navigation item. After that, turn the Invert under this section option on or off according to your needs.

Step 3 — You have to input the section IDs for each of the section into the corresponding items. Please, make sure the section CSS IDs completely match the IDs you’re adding in the Section ID fields of the items.

Step 4 — Switch to the Settings block to change the position of the Scroll Navigation items. After that, apply your custom scrolling speed (defined in ms), use the offset, or allow switching from section to section automatically.

Content settings in Scroll Navigation widget

Step 5 — Open the Style settings of the Scroll Navigation widget in order to set the background type, use a background image, apply a border, change the appearance of the hints and labels typography.

Style settings in Scroll Navigation widget

Step 6 — When you’ve finished working with the Scroll Navigation widget, click the Update button to save the changes. Click View option in the bottom left corner to see if the Scroll Navigation effect works on front-end!

In conclusion, I would like to say that the Scroll Navigation widget can be successfully used while creating landing pages.