Back to Top Element

Back to Top - New Functionality

The Back to Top is an essential element of every page, that enables your site visitors to navigate easier and quicker. Here you can find a breakdown of its settings and customization options, both previously existing and new ones.

We recommend placing this element in the right or left bottom corner of the screen so it’s comfortable to use and doesn’t obstruct anything. Please know that this functionality is available only for Pronto & Flexthemes Users.

The element can be found by pressing (+) Add Elements and going into Other.

The element comes with several customization options so you can modify it to align with your website design.

To achieve more precise Sizing and Positioning change the values directly in the element’s settings, as opposed to using the drag & drop function.

Sizes and Positions

You have three Layout Types to choose from here, and each one comes with its separate options:

Layout Options

Text Layout - the button will include only text, without an icon. You have the option to change the text and its alignment in the button.
Icon Layout - the button will include only the icon, without any text. You have the option to choose between Icon existing types, modifying the size of the icon, as well as its alignment, inside the button. You can also add a custom icon, by toggling Custom Icon on and uploading it as an image.
Icon & Text Layout - this includes all of the previously mention customization options and an additional one. In Layout Options you can choose to have the text under the icon, to the left of the icon, or under the icon, but in a circular fashion.

You have two types of sticky options at your disposal:

Sticky Options

By choosing Always Sticky, your Back to Top button will stay in the same spot it was placed inside the builder when scrolling the page.
By choosing Float, your Back to Top button will become sticky only after your scroll past the block that contains it.

Keep in Mind

If you have a sidebar or a fade effect turned on, the Sticky Element Option will not work, thus, you won’t be able to use the functionality.

Set up the font that will be used in your button in case you opted to use text. You can choose between the fonts available through your theme or use a custom one.

Typography

In here you can modify the colors for the Back to Top element’s background, text, and icon.

Colors

You have several customizations available through Borders settings:

Borders

Corners Radius - you can add rounded corners to your button by changing the value.

Outline Border - you can enable this setting in order to create a border around your button. Choose the color and the line width to your liking. Hover State

This setting allows you to change the color scheme when a site visitor hovers their cursor over the button. You can choose the hover colors for the button background, icon, and text.

Round Back to Top Button

You have the possibility to create a perfectly round button by following the next steps. First, go to Colors and make sure that your button has a background color set.

Then go to Sizes & Positions and change the button’s shape into a square.

And finally, go to Borders and give your button a 360-degree corner radius.

Disclaimer

In order to achieve the above-mentioned functionality, please ensure that your Flex blocks are up-to-date with ver. 4.6.4.