1. Home
  2. Docs
  3. Dynamic Contents
  4. Scroll Button

Scroll Button EA Element

The Scroll Button widget allows you to create a page with internal smooth scrolling navigation. It allows website visitors to scroll right to the top of a page with just one quick click.  Here in this tutorial, you’re going to learn how to use the Scroll Button element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Scroll Button Element

 

»Content

 

Button

⇒Duration: Set the duration of your scroll button and define exactly how much time it’ll take to bring you to the top!

⇒Offset: Customize the offset.

⇒Button Text: Enter the button text for the scroll button.

⇒Section ID: By clicking this scroll button, to which section on your page you want to go? Just write that’s section ID here such ‘my-header’. N.B: No need to add ‘#’.

⇒Scroll Button Position: Set the scroll button position at your ease.

⇒Button Alignment: Set the button alignment either left, right, center or justified.

⇒Button Icon: Add an icon to the button. Add the icon from the font awesome icon library or upload a custom SVG file.

⇒Icon Position: Set the icon position either after or before the button text.

⇒Icon Spacing: Customize the space between icon and button text manually.

 


»Style

 

Button

⇒Button Text Color: Customize the button text color for Normal & Hover view.

⇒Button Background Color: Customize the button text background color for Normal & Hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Padding: Set the padding value for the top, right, bottom and left around the button for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the button text.

⇒Button Animation: Add an animation type to the button in the hover mode.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Scroll Button Element.


Was this article helpful to you? Yes No

How can we help?