Wix Editor: Adding and Customizing a Back to Top Button on Your Mobile Site

3 min read
Add a Back to top button to allow mobile visitors to quickly navigate to the top of your site. You can change the icon to your liking, and further customize it to make it stand out to visitors.
In this article, learn how to:

Adding a Back to top button

Get started by adding a button from the Mobile Tools panel in the mobile Editor.

To add a Back to top button:

  1. Open your site in the mobile Editor.
  2. Click the Mobile Tools icon in the left menu.
  3. Click the Add to site icon  beside Back to top button.
The mobile tools panel in the mobile editor. The cursor is clicking the Back to top button.
Note:
The Back to top button only appears on pages with the Standard layout and on pages that are at least 1380 pixels long (not on short pages).

Customizing the button

Select an icon for your button. You can choose from one of our presets or upload your own, and further customize the design to suit your site's look.

To change the icon:

  1. Click the button in your editor.
  2. Click Change Icon.
  3. Select a preset icon or click the Add icon to choose from 1000’s of vector art images or upload your own.
  4. (Optional) Click Customize Design to make it look how you want:
    • Fill colors: Choose the color / colors and make them more or less opaque.
    • Shadow: Enable and adjust a shadow on the button to give it a 3D effect.
A cropped view of the Change icon panel. The cursor has clicked an arrow icon.

Changing the button's layout

Change the button's position and margins to suit your mobile site's alignment.

To adjust the layout:

  1. Click the button in your editor.
  2. Click the Layout icon .
  3. Adjust the layout with the options:
    • Button alignment: Align the button to the left or right of the site.
    • Margins: Use the sliders to adjust the margins around the button.
The button layout panel. The cursor is dragging the slider to adjust the vertical margins around the button.

Did this help?

|