facebook_pixel

Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Click and scroll to a section on the page using Beaver Builder

Have you ever wondered how you can allow your users to click and scroll to a section on the page? Maybe you’re creating a one page website and you want to have the menu up the top and each menu item links to a section on that one page.

This is commonly referred to as “scrolling to” and the Beaver Builder plugin has this functionality built-in to the core plugin which means you can do this WITHOUT needing to install an additional plugin.

Master Beaver Builder in 30 days!

Enter your email below to join over 900 people just like you and get 1 mind-blowing Beaver Builder tip each day for the next 30 days.

Let us show you how.

Step 1: Create the button that will initiate the scroll to

Firstly, create a link on the page that you want people to click. This can be any module that has a URL field, examples being the Button module or the Callout module. All we need here is a module with a field that we can add a URL into.

For this example we’re going to add a button with the text Meet the Team which, once clicked, will scroll to the row containing the information describing the team members.

click-and-scroll-button

Step 2: Create the row that you want to scroll to when the link is clicked

Next, insert a row and add the content you want into it. For this example, we’ve created a row as per below with the team members photos and some other information.

click-and-scroll-row-team

Step 3: Add an ID to the row to be scrolled to

Next, add an ID to the row you want to scroll to when the link is clicked.

For our example, we’ll edit the team member row by clicking the wrench icon like you normally would to edit a Beaver Builder row.

click-and-scroll-row-wrench

Then, click on the Advanced tab.

click-and-scroll-row-advanced-tab

Add an ID to the row. You MUST add an ID and NOT a CSS class and classes will not work here.

In the below example we have added the ID team to the row that contains the team member information.

click-and-scroll-row-advanced-tab-add-id

Step 4: Connect the link on the page to this row we will scroll to

Edit the module that will link to the row you want to scroll to. For our example, we will link the Meet the Team Button module to the Team Member row, so we will go ahead and edit this button module.

click-and-scroll-row-button-edit

Next, in the URL field of the module, add a # sign, followed by the ID you gave the row you will be scrolling to.

So, in our example, we gave the row with the Team Member information the ID of team, so in the URL field of this Button module we add #team to the URL field, as per below.

click-and-scroll-row-team-id

And that’s it.

Save the page and click on your link and it should smoothly scroll to the row you want it to.

Here’s the result of our example.

Click and scroll to a section on the page using Beaver Builder

Beaver Builder makes it easy to scroll to a specific section on the page when you click a link, as demonstrated in this animation.

Making a contextual link scroll to a specific section on the page

Sometimes you might be editing some paragraph text on the page using the Text Editor module and wish to link a word in the paragraph down to the row and scroll it smoothly.

To do this, edit the link using the HTML editor and add the CSS class fl-scroll-link and also give the link URL the same #team as we discussed above.

For example, below we want to link the words team members in the paragraph so that, once clicked, the page scrolls down to our team members row.

Firstly, we link the words to the #team as per below.

click-and-scroll-contextual-link

Then, we switch to the HTML view by clicking on Text in the top right of the module and add the CSS class fl-scroll-link, like below.

click-and-scroll-contextual-html

Then click to save the page and you’re done!

Wrapping it up

This technique is incredibly powerful for one page websites and linking to specific parts of the page on longer pages.

Best of all, it’s included in the core of the Beaver Builder plugin so you can confidently use this in client projects.

Comment below

Leave a comment below if you need any help implementing this technique. Also, comment with examples of where you’ve successfully implemented this powerful technique.

Master Beaver Builder 

Join over 900 people and get 1 mind-blowing Beaver Builder tip each day

x