1. Introduction (Overview)

Sticky Scroll Steps is an interactive HubSpot module that presents content in a step-by-step format. As users scroll, the progress line fills while step numbers, images, and content update smoothly. It creates a guided experience and is fully responsive, adapting into a clean card layout on mobile devices.

2. Key Features

• Sticky scroll-based interaction
• Animated progress line on scroll
• Step numbers update dynamically on scroll
• Images and content change smoothly
• Clean and structured desktop layout
• Mobile-friendly card layout
• Add unlimited steps easily
• Fully responsive across all devices

3. Installation – Downloading the Module from HubSpot Marketplace

• Log in to your HubSpot account.
• Go to the Marketplace from the main navigation menu.
• Search for your module by name.
• Find the module in the results and click Install.
• If it’s a paid module, you can also click Buy Now to purchase and install directly.

4. How to Use – Adding the Module to Your Page

• Open your HubSpot page editor.
• Click on Add Module.
• Search for your module by name.
• Drag and drop the module into the desired section of your page.

• Sticky Scroll Steps is an interactive module that displays content step by step. As users scroll, the progress line fills while step numbers, images, and content update smoothly. It is fully responsive and works seamlessly across all devices.

   

   

5. Module Settings Guide

1. Content Tab 

• Left Side Content Customization:

  Customize tag, title for the left section.

• Right Side Steps Management:

  Add, edit, and manage multiple steps easily.

• Content Customization:

  Customize title, description, image, button.

• Mobile Settings:

  Edit step number for better mobile responsiveness.

2. Style Tab

• Background:

  Set the background color of the module.

• Module Height:

  Adjust sticky height and overall module height.

• Module Settings:

  Control module width and spacing (gap) for desktop, tablet, and mobile.

• Left Side Content:

  Customize tag and title with text transform, font size, color, and font family.

  Adjust step number font, size for desktop, tablet, and mobile, line height, and opacity.

• Progress Line:

  Customize stroke color and fill color of the progress line.

• Image Settings:

  Adjust border radius and object fit (cover or contain) for desktop view.

• Right Side Content:

  Customize title and description with font size, color, font family, and line height.

  Set mobile font size and alignment.

• Button Customization:

  Adjust font size, text color, border, border radius, and hover background and border color.

 

6. Examples / Demo Preview

View the module in action: https://www.modfrybus.shop/scroll-step-showcase

7. Support & Contact

For questions or support, contact us at productqueriemodfrybus@outlook.com We’re happy to help!