How to Use Scroll Button Widget


How to Use Scroll Button Widget

Page scroll effect increases browsing experience and our Scroll Button Widget does the task very smartly.

In this documentation, I’ll show you some instructions and photos and these will help you to get started.

Let’s go.

To Insert widget

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website[option be added]. And in this regard, some handy sections in the tab will assist you a lot.


This section will allow you to set scrolling Duration, Offset, Button Offset, Button Icon and Icon Position, and Spacing.

Most importantly, you can set the text to the button and the Scroll Button Position.

Just go the Content tab > Button.

One important thing to note is that Section ID will allow you to add Id name (as you like) that will let you scroll/ take a move to the specific section.

If you don’t want to stick in the default design.

Simply, go to the Content tab > Section ID > give Id name (my-footer) > then go to the advanced tab > Paste your Id in the CSS ID field.

Style Tab

Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


Here, in both Normal mode and Hover mode, you can add Text and Background Color, Button Animation to the Button. Along with Border Type, Border Radius, Box Shadow, Padding, and Typography. Read more about Typography.

Look at the photos below.



Additionally, there is a new option/switcher for adding Fancy Animation as a hover effect.

Clicking it on will enable the animation effect. You can choose from 3 different effects as well as set effect color.

Video Assist

In conclusion, I want you to remind you that the Scroll Button widget by Element Pack gives you an opportunity to add a scroll effect to every section and for that, you have to work with Section ID. Watch the video and hit the demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.