Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

How to Create a Section Scroll Navigation in Elementor for Free

Scroll-navigation-tutorial

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)

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

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)

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

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)

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)

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

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

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

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG