Getting Started with Back to Top

In this article

  1. Appearance of the button
  2. Position adjustments
  3. Display settings and Scroll

1. Appearance of the button

The process of creating your Back to Top widget starts with changing button’s appearance fields:

  • Icon
    • You can adjust the way your arrow will look by choosing any of the provided options. If you don’t want to show an arrow at all, you can always choose No icon option.

  • Text 
    • Here you see the line where you can add your own text that will be displayed next to the icon. In case you don’t need it, just delete the default text, leave it empty and go to the next field. 

  • Button Color
    • This field will let you change the button color to the one you need.

  • Icon & Text Color
    • These two elements have the same color and here you’re able to choose any color and shades for it. 

  • Border
    • Click on this button and choose whether you need borders by moving the toggle. If you like the idea of a border, you’ll be able to adjust its width and color. 

  • Size
    • Choose the more preferable size of your widget. It can be S, M and L. 

  • Shape
    • This field will let you choose any of 3 provided shapes: Circle, Rounded and Square. 

  • Layout
    • You can see 2 options for your widget’s layout: Horizontal and Vertical. Choose one that will suit you more!

  • Text Font Weight
    • The text on your button can be  normal and bold. So here you can select what font weight you wish to see. 

    2. Position Adjustments

    When you customized the appearance of your button, you can move forward. With the help of Position tab, you can adjust layout of your widget. And here’s what you can do:

    • Choose the type of your widget (Floating or Embed).

    • Select your floating widget’s position on the page.

    • Customize the offset of the button.

    3. Display settings and Scroll

    On the last tab of your Back to Top widget, you can adjust its scrolling and displaying behavior.

    In Scroll position to display field, you can set the percentage of page scrolling at which the widget should appear.

    You can also set Scrolling Speed that lets you go to the top of the page faster/slower.

    The next section is Pages where you can select pages to display your widget on. 

    1. All Pages – with the help of this option the widget will be displayed on every page of your website.
    2. Excluded Pages – if you choose this option, the widget will be displayed everywhere except for these pages.
    3. Specific Pages – you can select this option to display the widget only on particular pages of your website.

    After Pages, you’re able to choose the devices where you'd like the widget to be displayed. 

    And the last thing you can do is to add Custom CSS. This section will let you add the CSS code for your widget customization.

    If you faced any difficulties using the widget or if you still have any questions that you didn't find the answers for, please contact our Support Team, we will be delighted to help you.

    If you think that the widget is missing any features, you're always welcome to leave your feature request in our wishlist tool. We will be happy to consider all the suggestions for their realization in future app updates.

    Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

    Still need help? Contact Us Contact Us