This article is also available in:

Keeping elements fixed on the screen while scrolling

To keep important actions (e.g., "Order" or "Help") always accessible to users during all stages of website interaction, you can pin an element to a selected screen area, ensuring its visibility while scrolling.

In this article, you'll learn how to pin the following elements:

Button

Icon

1. Adding a Fixed Button

First, hover over the block and click the "plus" where you want to place the element:

You can add a button in two ways. The first is to use the ready-made Pinned Button element:

The second is by turning a regular button into a pinned button. In the new window that opens, select the Button element to add to the block:

Note: the Two Buttons element cannot be pinned.

Click the added element and click on the "gear" icon to access button settings:

To pin the button, enable the corresponding toggle in its settings:

Tip: You can unpin it by clicking on the same toggle.

Note: This feature is unavailable for collection blocks, Flex blocks, and some others.

After enabling this feature, you can adjust the floating button’s position on the screen both horizontally ① and vertically ② after selecting one of the preset button positions ③.

Note: Display may vary on published sites depending on screen size, browser scaling, and system scaling settings.

Enable scroll-triggered display to make the floating button appear after a specific scroll percentage or after the first block of your site:

Don't forget to publish your site to apply changes.

2. Adding a Fixed Icon

First, hover over the block and click the "plus" where you want to place the element:

In the new window, select the Icon element to add to the block:

Tip: Learn more about icon customization in this article.

Note: Social Icons, Small Icon list, Icon List, Icon List + Description, and Follow Us elements cannot be pinned.

Click the added element and click on the "gear" icon to access its settings:

To pin the icon, enable the corresponding toggle in its settings:

Tip: You can unpin it by clicking on the same toggle.

Note: This feature is unavailable for collection blocks, Flex blocks, and some others.

After enabling this feature, you can adjust the pinned icon's position on the screen both horizontally ① and vertically ② after selecting one of the preset button positions ③.

Note: Display may vary on published sites depending on screen size, browser zoom, and system scaling settings.

Enable scroll-triggered display to make the fixed icon appear after a specific scroll percentage or after the first block of your site:

Tip: Set the "Scroll to Block" action for the icon and select your page's first block to use it as a scroll to top button. You can also do this with the help of the ready-made Back to top element.

Remember to publish your site to apply changes.

Updated on: 07/01/2025

Was this article helpful?

Thank you!