A "Back to Top" button is a user interface element that allows users to quickly return to the top of a webpage without manually scrolling, enhancing navigation efficiency, especially on lengthy pages.
Key Features of a CTA Back To Top Module :
Visibility Control: The button typically appears after the user has scrolled a certain distance down the page, ensuring it's available when needed without cluttering the interface.
Customizable Positioning: Developers can position the button in various locations on the screen (e.g., bottom-right) to align with the website's design and user experience considerations.
Adjustable Appearance: Options to modify the button's size, shape (round, square), color, and iconography allow it to match the site's aesthetic seamlessly.
Smooth Scrolling: Implementing smooth scroll animations enhances the user experience by providing a gentle transition back to the top.
Device Responsiveness: The button can be configured to appear on specific devices (e.g., only on mobile or desktop).
Auto-Hide Functionality: To maintain a clean interface, the button can be set to disappear after a certain period of inactivity or when the user returns to the top of the page.
In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.
Search for "CTA Back To Top" and drag and drop the module into the desired location on your page.
Layout Options :
For CTA Back To Top, select your preferred layout (e.g., Layout 1, Layout 2 or Layout 3). You can easily rearrange the event cards within the chosen layout to create the ideal content flow and visual arrangement.
Button Arrow :
You can choose from various selection options, including an arrow icon, an arrow image, and the HubSpot icon. These elements help enhance navigation, improve visual appeal, and align with your branding. Whether you're guiding users through a process or emphasizing key actions, these icons provide a polished and professional touch to your content.
Options :
:
In Layout One, you can enable or disable a blinking animation, allowing you to highlight key elements dynamically or maintain a clean, distraction-free interface.
Button Setting :
You can fully customize the button by adjusting its position, background color, height, width, border, box shadow, and corner radius, ensuring it aligns perfectly with your design and branding.
Button Arrow Setting :
You can customize the button arrow by adjusting its size and color, ensuring it complements your design and enhances visibility.
Button Blink Animation Setting :
In Layout One, the Button Blink Animation settings let you customize the height, width, color, and corner radius, ensuring a visually engaging effect that matches your design preferences.
Animation Arrow Setting :
In Layout Two, you can customize the top animation arrow by adjusting its size and color, allowing you to enhance visibility and match your design style.
We hope you enjoy using our CTA Back to Top module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.