The Uper(called “Scroll to Top” in the Selection pack) Scroll to top button allows you to set both a regular and a sticky button in one of the eight available positions. The Uper button can lead not only to the top of the page but also to a specific page element using an anchor. With the detailed settings, you can specify when the back-to-top item should appear and hide, select hover/appearance animation.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
In the Content section, you can manage the basic settings of the Scroll to top item such as button content, behavior and scrolling settings.
Button
Alignment
Specify the alignment for the Fixed button: Left, Center, Right.
Fixed
A toggle to change the type of button from regular to fixed. The following settings are available when the fixed button is enabled.
- Fixed position – select one of the available positions to display the button on the page: Top Left, Top Center, Top Right, Left Center, Right Center, Bottom Left, Bottom Center, Bottom Right.
- Scroll indicator – choose one of the available scroll indicators: Circle or Background to get a cool effect when scrolling the page.
- Auto hide – an option allows you to set a custom time of hiding button in seconds.
- Start displaying button position – specify when the button should be displayed. The values can be specified as percentages or pixels. You can also select Custom element by specifying its ID or always Always show the button.
Button appearance animation.
Select one of the available animations of the button appearance: Grow, Shrink, Slide up, Slide down, Fade. Choose None to disable the animation.
Button hover animation
Select one of the available hover animations of the button: Grow, Shrink, Slide up, Slide down, Fade. Choose None to disable the animation.
Scrolling
- Scroll speed – specify the speed of the page scrolling when the button is pressed.
- Scroll easing – select one of the available scroll easing types: Slowdown on start, Slowdown in the end, Smoothly on start and end.
- Scroll to – select scroll destination: Top, Anchor.
Button content
- Button text – a text field for the button name.
- Alignment – manage the current block alignment (left, center, right).
- Button icon – select the button icon from the Font Awesome library or upload your own in SVG format.
- Icon position – select one of the available icon positions: Before, After, Above left, Above center, Above right, Under left, Under center, Under right.
- Button appearance animation – select one of the available animations of the button appearance: Grow, Shrink, Slide up, Slide down, Fade. Choose None to disable the animation.
Style tab
On the style tab, you can manage the element styles of the button like colors in different states, size, typography, borders, padding/margin, etc.
Button
- Margin – the setting allows managing the margin of the current element in different units(px, %,em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, %,em) for desktops, tablets, or phones.
- Icon spacing – the setting allows managing the spacing of the button icons in different units(px, %,em).
- Icon size – specify the icon size of the button using the slider.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The button style settings for different states.
- Text Color– specify the font color and opacity for the text of the current block using the color picker.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Scroll indicator
- Indicator color – specify the scroll indicator color and opacity using the color picker.
- Indicator line width – specify the width of the circular indicator in different units(px, %) for desktops, tablets, or phones.
- Radius – specify the radius of the circular indicator for desktops, tablets, or phones.
- Rounded stoke linecap – a toggle to enable/ disable the rounded stroke.
