{"id":868,"date":"2019-01-31T09:12:55","date_gmt":"2019-01-31T09:12:55","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=868"},"modified":"2023-01-16T09:38:03","modified_gmt":"2023-01-16T09:38:03","slug":"how-to-use-scroll-navigation-widget-and-apply-scroll-navigation-to-elementor-sections","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-use-scroll-navigation-widget-and-apply-scroll-navigation-to-elementor-sections\/","title":{"rendered":"How to Use Scroll Navigation Widget"},"content":{"rendered":"\n

The Scroll Navigation widget is included in the JetElements plugin for the 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.<\/p>\n\n\n\n

1<\/span> Step<\/b> \u2014 Add Scroll Navigation functionality<\/strong><\/p>\n\n\n\n

Navigate to the WP Dashboard and open the page to which you want to add the Scroll Navigation<\/strong> functionality in the Elementor page builder. <\/p>\n\n\n\n

In the Elementor editor, locate the sections to which you want to attach the Scroll Navigation <\/strong>pagination dots. Click the “Edit Section<\/strong>” button. <\/p>\n\n\n\n

\"Edit<\/div>\n\n\n\n

Switch to the Advanced<\/strong> settings tab of the section and input the ID into the CSS ID <\/strong>field.<\/p>\n\n\n\n

\"Section<\/div>\n\n\n\n
\"knowledgeNOTE.<\/strong>\nYou need to add unique CSS IDs for each of the sections in order to link them to the pagination dots of the Scroll Navigation widget.<\/div>\n\n\n\n

Now, open the Elementor widgets menu, drag the content to the sections, and create the design. Then, find the Scroll Navigation<\/strong> widget in the list of available widgets for Elementor. Drop it above all the sections to which you need to add the pagination dots.<\/p>\n\n\n\n

\"Scroll<\/div>\n\n\n\n

2<\/span> Step<\/b> \u2014 Manage the content<\/strong><\/p>\n\n\n\n

By default, in the Content <\/strong>menu tab of the Scroll Navigation widget, there are three items that are now empty. In case there are more sections on your page, click the “Add Item<\/strong>” button to add a new section. You need to create an item for each of the sections you want to link.<\/p>\n\n\n\n

\"Scroll<\/div>\n\n\n\n

When the number of items satisfies you, it’s time to define the settings.<\/p>\n\n\n\n