How to Create a Section Scroll Navigation in Elementor for Free

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.

Video: Create a Section Scroll Navigation in Elementor

On your WordPress dashboard go to Plugins > Add New, search for HT Mega Addons, install and activate it (00:50)

mbb5JrOFB5DU47mtvj3mPWLitaZIrvonWT YXWIGOuTGJ3F2svn6lHLZhGoxg2DS8zx7t6gVZh EM3tk zk7gWG

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)

PwYNhk49vy1buW0TEAiOBCCJs5P8TEiVWm2k8JnEjOFa KlSGHxboGQe4Wu fi

To Read: How to Use Elementor Display Conditions to Hide Sections, Columns or Widgets

Create a Section Scroll Navigation in Elementor with a Custom Section

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)

NXuKy794WIye2PRntJHHmOoqpp5uUHN1qtHXM085hzlidtBIC0auDXGiyXABlWC8Vn2DyvIXP9dm9F5VfGqfbA3QO8ZVonztXrfRFzkWB9laIh a9MgdIZAFU 1OqTJ5jYRE7RFU

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

9WrHBBZWdUQMzwNfUSOhZ2tCsv 9I1Om0D33ejwoFb qebS6fNu 2aHM7MF7wrso4s2m5hmP0RpVBIL1QTlzveRaCC8CGNI 3KF38iCUZTVle42kf8QzL516WA v5SCDFO MenRA

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)

p78P7q2 yq2KGR4zACcflxBh2ezPGr5YCeJNt 3nibR25sRzmIj p1 X

To Read: How to Create an Elementor Vertical Scroll Section with Premium Addons

Create Scroll Navigation using Elementor Templates

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)

6qLIqsjHnx8hxWP221VSbvSVhqZk9VsOK7jDEilrJ5SFeVrDtLc mOeFGMOxFsJTE0DBisuEgqBFOAqQ6z95Oc BJJrroMBL o

Click the Add Item button and choose the other two templates to use (05:45)

JjFEaw JYZ8mMS01uIb emy5K6yoPrSmKAtazOM NwjaxwK4v2XIrebt9qbSUbFnvcAXfmpIyKf2e7FtHauyIsCEdnWJZtcTCKKY9KMGJ whWoY6U6TqDCVCZSUc1F0d7OScayb8

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)

Z98FlUNupC7MuvyH7Oz8bD F70m G0s3FrFaAQSgt9A9LB8Fihz3zIUpDDoRZwoJCyo ScJLUOixfhkMWEGoTjAK0s0zJjl6GYxubnttqGQu7bGMzMc3Q FOowPhIXBMwEHRV1Z

When you’re done adding your templates and editing your content to your preference, update and preview your page (08:12)

section scroll navigation in elementor

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users