So you're building a website – possibly a landing page. You're using WordPress and designing the site with Breakdance Builder. You want to add a nice little link in your menu that will smoothly scroll down your page to a specific section. Well, good news... we got you.
Breakdance has an easy way of smoothly scrolling to sections on a page, making it super simple to add an anchor link to your menu that will seamlessly scroll down to any section, text, or element on your page. Best of all, you can do it in seconds.
What is an Anchor Link?
We'll be using something called an anchor link. An anchor link is simply a link that "anchors" you to a specific spot on a page. It's often used when you want to create a table of contents on a page, or navigation that takes the user to different sections of content. We'll go through how to set one up step by step.
Step 1: Create a WordPress Menu
Ok, to start off you're going to need to create a new WordPress menu. In your WordPress admin panel, go to Appearance > Menus.
From there, you can create a new menu and name it whatever you'd like. Instead of adding a page or post, you're going to want to add a custom link.
In the URL field, you'll want to add the ID of the section you want to scroll to. You can call this whatever you want (we used #one, #two, and #three). The link text can be anything as well.
Add as many links as you want and then save your menu!
Step 2: Create Sections on Your Page
Head into your admin panel and create a new page. Once you're in the Builder, add as many sections as you want using either the pre-built sections or by adding and designing your own stuff.
This is probably the most time-consuming part, but I'm sure you already have something in mind. For the sake of this tutorial, we've created a few dummy sections and placed them on top of each other.
Once you've customized your page to your heart's content, you can now add the IDs you created in your menu to the sections.
Step 3: Add The Anchor Link to Your Element
This is what will connect your menu link to the section you want it to scroll to. In the settings for each section, clicked advanced and scroll down to the ID. You'll add each ID corresponding to the links you created in your menu. Make sure to add the link name without the hashtag.
Once this is done, save your page and view it on the front-end to see the magic happen! Breakdance has smooth scrolling enabled by default, so when you click on one of the links in your menu, it will scroll down slowly and smoothly to the section you want.
Remember that not all links in your menu need to scroll to a section. You can have regular links that go to other pages or posts on your website as well. You could combine other informational pages on your website but keep your team placed on your main page and linked to in your menu, for example.
As old as anchor links have been, they're still a great way to navigate around a website and can be the easiest way of scrolling to sections. Use them creatively on your site to impress your visitors and display all your important information in an easily accessible way!
We hope this tutorial has been helpful! If you have any questions or need help with anything, please feel free to reach out by leaving a comment. We're always happy to help 🙂 Happy scrolling!