Uper - Back to top button for Elementor

WordPress plugins Documentation

The Uper is a lightweight WordPress plugin for Elementor to add a back-to-top button to your website without any coding knowledge. This small tool will help improve the user experience what affects conversion positively. Just a few clicks are required to add a button to your pages to any convenient place.

The plugin 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. The fully customizable button offers to change the name and shape or select an icon from the Font Awesome library. Moreover, the widget provides a circular indicator feature of the page scrolling with the ability to manage display styles. Using the plugin, you can get a unique back-to-top element, styled according to your site design with a minimum of effort and time.

Eight StickyButton Position
Eight StickyButton Position
Supports Icons and SVG Pictures
Supports Icons and SVG Pictures
Crafted for Elementor Builder
Crafted for Elementor Builder
Includes Templates for Elementor
Includes Templates for Elementor
Perfect for Popular Elementor Themes
Perfect for Popular Elementor Themes
Suitable for all kinds of Layouts and Templates
Suitable for all kinds of Layouts and Templates
Completely Cross-Browser Support
Completely Cross-Browser Support

We made sure that it was easy for you to get started with Uper. With the plugin, you get 5 unique stylized and go-to-use templates.  These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.

The tool has simple style and responsive settings for each of the elements. You can manage size, typography, colors, background, border, and other things. It is possible to apply various styles for different button states like normal or hover.

The Uper for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

Features of the Uper plugin for Elementor

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

 
 

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

STEP 2

Go to Plugins > Add New

Add New Plugin to WordPress
Add New Plugin to WordPress
STEP 3

Click Upload Plugin Button

Upload New Plugin to WordPress
Upload New Plugin to WordPress
STEP 5

Choose archive with Plugin and press Install Now Button

STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Activate Installed Plugin

Installation the plugin through FTP or build-in File manager

STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

STEP 2

Upload archive with plugin to /wp-content/plugins

STEP 3

On next step Unzip the archive with the plugin

STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

Activate Installed Plugin

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

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

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

Scrolling setting of the Scroll to top button

Button content

Content setting of the Scroll to top button

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

NORMAL/HOVER

The button style settings for different states.

Scroll indicator

Scroll indicator style settings