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.
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.
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.
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.
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.
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.
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.
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.