Content Controls
Button
This section allows users to customize the appearance and behavior of the ‘Back to Top’ button. You can select the button type, add an icon, and modify advanced scrolling settings.
- Type – Choose the format of the button.
- Icon – Select an icon to display on the button.
- Text – Add or edit the button’s text. (Note: This control is only available when the button type is set to “Icon + Text”.)
- Advanced – Delve into more detailed settings:
- Scroll Offset – Adjust how far the button scrolls when clicked.
- Scroll To Selector – Specify an element to scroll to when the button is pressed.
Design Controls
Container
Adjust the container’s positioning and behavior on the page. Make it sticky, align it vertically and horizontally, and define when it should appear or hide.
- Sticky – Toggle to make the container stick to a position as users scroll.
- Vertical Align – Set the container’s vertical position. (Note: This control is only available when the container is set to “sticky”.)
- Horizontal Align – Adjust the container’s horizontal alignment. (Note: This control is only available when the container is set to “sticky”.)
- Hide At The Top – Enable this to hide the container when at the top of the page. (Note: This control is only available when the container is set to “sticky”.)
- Show – Decide when the container should be visible based on scrolling position. (Note: This control is only available when the container is set to “sticky”.)
- Animation – Choose an entrance animation for the container. (Note: This control is only available when the container is set to show “halfway” or “near” the top.)
- Duration – Determine how long the animation should last. (Note: This control is available when the container is set to show near the bottom or halfway.)
Button
Customize the look of your button with various design settings. Adjust colors, sizes, and spacing to make it fit perfectly within your website’s design.
- Background – Pick a color for the button’s background.
- Size – Set the size of the button. (Note: This control is not available for text-only buttons.)
- Icon – Tweak the icon’s design:
- Color – Set the color of the icon.
- Size – Determine the size of the icon.
- Space After – Adjust space after the icon. (Note: This control is only available when the button type includes text.)
- Progress – Add a progress bar to the button:
- Tracker – Set the color of the progress bar.
- Background – Choose a background color for the progress section.
- Width – Define the width of the progress bar.
- Padding – Adjust the internal spacing of the progress section. (Note: This control isn’t available for text-only buttons.)
- Borders – Customize the button’s border & shadows:
- Radius – Set how rounded the button corners should be.
- Styling – Choose border style, width, and color.
- Shadow – Add a shadow effect to the button for depth and emphasis.
Spacing
Define the space around the Back To Top button to ensure it fits harmoniously within the layout of your website.
