Business Benefits
Grab your website visitors’ attention with floating objects.
Select Navigation in the right-hand toolbar on your page, set the navigation menu as a Child of the Body, change the position to Sticky, and set the Body Index count to 9999 to create a floating navigation menu.
Setting the Body Index to 9999 allows the navigation bar to float toward the end of the webpage.
Create a call to action button with a link to a common page or contact page, drag it onto the webpage, right-click the button to view the settings, click Interaction Settings, click New Timed Animation under When scrolled out of view, and configure the transitions based on where you want your object to appear.
For example, you could add the following translations to make the button move towards the corner of the screen and float there, making it visible and accessible to users at all times:
- Set the initial button state/position.
- Set the original button size.
- Configure the position the button should move to (such as, the right corner of the page).
- Configure the button to a percentage of its original size if you want to make it smaller.
Add the button under Actions, set the Start X and Y values to 0, re-add the button to Actions, and set the Scale value to 100.
Setting the X and Y values to 0 keeps the button in the center of the page, and setting the Scale value to 100 maintains its original size.
Add the button under Actions and set the End X and Y values based on where you want the button to move once the page is scrolled, re-add the button to Actions, and set the Scale value.
For example, setting the X and Y values to 41 and 88 moves the button to the right side of the screen page. Setting the Scale value to 85% makes the button slightly smaller and ensures site visitors can still see the rest of the content on the screen clearly.
Publish and preview the page to test your floating objects.
For example, if you set your floating button to move to the right corner of the page, it should float there for the entire duration of the page scroll.
Last edited by @hesh_fekry 2023-11-14T11:01:00Z