In this tutorial, I’m going to show you how to create a section scroll navigation in Elementor. I’ll will show you a simple way to enable scroll navigation in Elementor for free and you could be able to create a complete website using this awesome widget.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
On your WordPress dashboard go to Plugins > Add New, search for HT Mega Addons, install and activate it (00:50)
After activation, click on HT Mega Addons on the dashboard menu, in the list of widgets and addons look for Scroll Navigation and enable it then save changes (01:03)
To Read: How to Use Elementor Display Conditions to Hide Sections, Columns or Widgets
After activating your widget, go to Pages and open up any page with Elementor.
In your Elementor editor, use the (+) icon to add a new section, then go to the Widgets area and search for Scroll Navigation, drag it to your section (01:55)
In the Edit Scroll Navigation area on the left, under Content > Scroll Navigation, you can go to Custom and add content like images, text or whatever else you want (02:31)
When you’re done making changes to your first scroll navigation item, duplicate it or use the Add Item button to add a new scroll navigation item/section, then add a different image for the duplicate item (02:51).
Repeat the steps and create your third section/scroll navigation item.
When you’re done, go to the Slider Options, under Style > Pagination, go to the Active tab and change the background colour, and do the same on the Normal tab.
When you update and preview your page, you’ll see that your new section appears, you’ll also notice that the page isn’t scrolling but you’re just navigating within the custom section (04:18)
To Read: How to Create an Elementor Vertical Scroll Section with Premium Addons
If you don’t want to use the custom section, you can create your templates with Elementor.
Back in your Elementor editor, add a new section then drag the Scroll Navigation widget to it from your Widgets area.
Under Content > Content Source, select Elementor Template, then select a template to use (04:47)
Click the Add Item button and choose the other two templates to use (05:45)
Go to Slider Options;
Under Content, you can change the Slider Direction to Horizontal. Set the Height to Full Screen, or you can just make a Custom height for your sections if you prefer. You can also choose to show the Mouse Wheel, Slider Navigation or Slider Pagination if you prefer (06:54)
When you’re done adding your templates and editing your content to your preference, update and preview your page (08:12)
Also Read: How to Link WordPress Menu Items to Elementor Sections
In conclusion
That’s how you can create a free section scroll navigation for your Elementor website.
For any questions or comments about this or any other tutorial, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.
