In this documentation, we will show you how to customize the Scroll button widget presented by Element Pack Pro.

Inserting The Scroll Button Widget

Inserting the widget by following this,

1. Search by the Scroll Button widget name.
2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Button Section

Go to Content > Button

This section provides control for the button.

1. Duration: Set the duration time for the scroll navigation.
2. Offset: Set the offset for the section.
3. Button Text: Set the text for the button.

4. Section ID: Set the ID for the navigating section.
5. Scroll Button Position: Set the position for the button (e.g.: Default, Top Left, Center, Bottom, etc.).
6. Button Alignment: Set the alignment for the button (e.g.: Left, Center, Right, Justify).

7. Button Icon: Set the icon for the button.
8. Icon Position: Set the position for the button.
9. Icon Spacing: Set spacing for the icon.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Button Section

Go to Style > Button

Normal State For Button

Make the button section visually stylish by following the controls,

1. Color: Set the color for the button text.
2. Background Color: Set the background color for the button.
3. Border Type: Set the type for the border.
4. Border Width: Set the width for the border.

5. Border Color: Set the color for the border.
6. Border Radius: Make the border-radius.
7. Padding: Set the padding for the button.

8. Typography: Set the typography for the text.
9. Box Shadow: Set the shadow for the button.

Hover State For Button

All the changes appear on hovering over the mouse.

10. Color: Set the color for the scroll button.
11. Background Color: Set the background color of it.
12. Border Color: Set the border for it.

13. Show Fancy Animation: Enable the switcher to enable the fancy animation.
14. Fancy Animation: Set the animation for the button(e.g.: Shadow Pulse, Multiple Shadow, Line Bounce).
15. Animated Shadow Color: Set the animated shadow for the color.

Video Assist

You can watch the video above to learn about the Scroll Button widget.
Please visit the demo page for examples.

Thanks for staying with us.