How To Create a Scroll-To Link in Flatsome Theme

In the Flatsome theme, the ‘Scroll-To’ link is an element that let your user scroll down to a particular part or area when a specific button is clicked. This way, you can allow your user to easily access your website’s contents without wasting any time or energy. We will see how to create a scroll-to link.

Implementing the ‘Scroll-To’ element also lets you highlight the most important contents. Users love it when they don’t have to find content here and there. Instead, they can jump or scroll down to their desired content in a moment. If you need you can also create an infinite scroll for WordPress for your page.

In this tutorial, we will show you how you can implement a ‘Scroll-To’ link in a few easy steps. After the end of this tutorial, you will be able to place this functionality anywhere on your website effectively.

 

Create a Scroll-To Link in Flatsome Theme Step-By-Step

 

Step 1:

In this tutorial, we will create a ‘Scroll-To’ link in a Flatsome responsive theme for WordPress. When the ‘View More’ button is clicked, the page will automatically scroll down to the ‘Shirt Section’ of the page.

create scroll to link flatsome

Step 2.

Hover on the ‘Edit Page’ in the top admin bar and click on ‘Edit with UX Builder.’ and the page will be opened in UX Builder.

wp woocommerce free flatsome

Step 3:

Click on the ‘Add to Section’ button inside the section you want to scroll down to when the button is clicked.

create scroll to link flatsome

Step 4:

Scroll down on the element section and select the element ‘Scroll-To.’

free wocommerce theme wp

Step 5:

Now give this element a title and then click on ‘Apply.’

create scroll to link flatsome

Step 6:

Drag and drop the ‘Scroll-To’ element at the top inside the section.

free wordpress woocommerce ecommerce store

Step 7:

Now double click on the button you want to be clicked to open the button settings. On the button settings, scroll down a bit, and you will find a field named ‘Link.’ Write the title of the ‘Scroll-To’ element with a ‘#’ tag before it in the ‘Link’ field. Then click ‘Apply’.

create scroll to link flatsome

Step 8:

As we are done creating our ‘Scroll-To’ link for our desired section, simply click on ‘Update’ to save your customization. Click on the ‘X’ button at the top-left corner of the page to exit the UX Builder.

free wp theme woocommerce

Step 9:

Now revisit the page and click on the ‘View More button’. We will see that after clicking the button, the page is automatically scrolled down to our desired section. We have just created a ‘Scroll-To’ link in our modern and creative WordPress theme.

create scroll to link flatsome

 

 

Conclusion

We have intended to show you step-by-step how you can easily create a ‘Scroll-To’ link using the Flatsome theme and make accessing the content flexible for your audience. Using the guideline, you can create ‘Scroll-To’ links as many as you like effectively.

We hope this tutorial has been helpful for you. Follow WPCred for more awesome and easy tutorials like this! Feel free to check out our essential plugins for the WordPress list to get a better insight into top-ranked WooCommerce plugins.


Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

How to Reset Your Apple ID Password: 5 Simple Ways

Forgetting your Apple ID means getting locked out of your Apple devices and services like Apple Music, iCloud, App Store, and more. But don't panic if you…

The Ultimate Guide to Cleaning Your Smartphone

We use our smartphones every day, so it's no surprise that dirt and debris can quickly build up on our screens, cameras, or connection ports. If your…

7 Ways You Can Help Your Fitbit Last Longer

Unlike many pieces of technology, fitness trackers such as the ones from Fitbit are often built to be durable. However, you still have to make a conscious…

The Best AIO Coolers to Keep Your PC Cool in 2024

All-in-one (AIO) coolers let you add new features to your home or work PCs while still preventing them from overheating or fan damage. AIOs are highly efficient…

How to Use FaceTime on Android

Although FaceTime is exclusive to Apple devices, you can still participate in FaceTime calls as an Android user if an Apple user invites you. Below, we'll teach…

The Best Wi-Fi Cards for Your PC in 2024

A Wi-Fi card is a cost-effective way to add or upgrade wireless connectivity on your desktop PC. These PCIe adapters offer varying performance and features based on…