Today, you will learn how to create an amazing smooth scrolling effect with Scroll Navigation module. To apply this feature, you will need Elementor page builder and JetElements add-on which includes this widget. The JetElements plugin is the richest Elementor add-on. You can use it for applying many other features. I describe the process step-by-step below. So let’s get started!
- Open the necessary page to which you’re going to apply Scroll Navigation module in Elementor.
- In the center, press Add New.
- In the opened menu, click Edit and go to advanced settings on the left.
- Input the name of the section you’ll be working with into the CSS ID field.
- Pay attention to uppercase and lowercase characters, and underscores. Also, bear in mind that the name of each section should be unique (Section_1, Section_2, and so on).
- Remember that you can create as many sections as you want, but not fewer than two.
- After all the sections are added, find the Scroll Navigation widget in the Elements search field on the left in the menu. Drag-and-drop it above all the sections.
- On the left, you will see the content settings for this widget. Under the Item tab, you will need to add a number of items equal to the number of sections you’ve created. You will see three items already listed. And if you need more, just click Add New.
- Open all the items in turn and check the correctness of the Section ID you’ve added in the CSS ID field several steps ago. If the IDs don’t match, the Scroll Navigation won’t work as it should.
- Also, you can set the hint icon and the label title for each navigation item. Depending on your needs, you can turn the Invert under this section on or off.
- Under the Settings tab, you can alter the position of the Scroll Navigation items, set your custom scrolling speed, use the offset, or allow switching from section to section by default.
- Now go to the Style settings of the Scroll Navigation module. You can see settings such as background type, background image, and border. Here, you can also play around with the appearance of the hints and labels typography.
There we go – now you can see the Scroll Navigation work on your page. With this function, your customers will easily be able to search and find any information. Write down in the comments below what other widget instructions you would like to read about.
Read Also
How to Create a Responsive Parallax Scrolling Effect with Elementor
How to Create a Sticky Menu on WordPress
JET Plugins for WordPress Elementor Builder [Review]
How to Manage Countdown Timer Module in Elementor WordPress Themes