Table Of Contents

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 Scroll Button Widget

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above, drag the Elementor Scroll Button Widget inside your page.

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.

scroll button 1 1 - BdThemes

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.

scroll button 2 2 - BdThemes

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

scroll button 3 - BdThemes

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


scroll button style 1 - BdThemes


scroll button style 2 - BdThemes

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

Screenshot 1 - BdThemes

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

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.