The Steps Process Module is a system or software component designed to manage and track multi-step workflows, guiding users through sequential actions in a structured and organized manner. It is commonly used in project management, onboarding, e-commerce checkouts, form submissions, and automation processes.

Key Features Work Steps Process Module :

• Works seamlessly on desktops, tablets, and mobile devices.
• Provides a consistent user experience across platforms.
• Customizable step names, descriptions, and icons
• Customizable Appearance Change colors, sizes, shapes, and positioning to match your brand.
• Lightweight & Fast-Loading Minimal impact on page speed.

How to Set Up the Work Steps Process Module in HubSpot :

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.

Select the page where you want to apply the module.

Search for "Work Steps Process" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For Work Steps Process, select your preferred layout (e.g., Layout 1, Layout 2, Layout 3 or Layout 4). You can easily rearrange the event cards within the chosen layout to create the ideal content flow and visual arrangement.

Options : 

• Layout 1 : The layout features a 3-column design, with the column displaying the heading and description with step no.
• Layout 2 : The layout is a 3-column design with column displaying the heading and description with icons.
  
• Layout 3: The layout includes a tabbed design with titles and step-by-step navigation, along with updated images.
• Layout 4 : The layout features a 3-column design, with each column showcasing a heading, description, and icon, all styled with a unique design.
  

Heading, Description & CTA : 

Easily customize your module's content by modifying the "Heading," "Description," and Call-to-Action (CTA) to fit your needs. You also have the option to hide the section, giving you full control over the presentation and functionality.

The "Heading" is displayed in all layouts, while the "Description" is shown only in Layout 2 and Layout 4. The CTA is available in Layout 2, Layout 3, and Layout 4.

Options : 

• Heading/Description & CTA Show/Hide Toggle
• CTA Change Text/URL with Show/Hide Toggle

Columns Content : 

Module Style Options: 

Module Setting :

Adjust the margins, padding, background colors, and container width to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.

Heading, Description & CTA Setting :

Users can customize the spacing of the module, as well as adjust the typography for the heading and description & CTA. This includes modifying the color, font size, weight, and line height for both mobile and desktop views, allowing for a personalized and visually cohesive design across all devices.

Users can easily customize the column spacing for both desktop and mobile views. Additionally, you can adjust the background color, set the border and border radius, and apply a box shadow for added depth and visual appeal. You can also enhance interactivity by applying hover effects.

Content Setting :

Users can customize the typography of the column, including spacing, line height, font size, color, alignment, and text transform for both desktop and mobile views. This allows for complete control over the visual style and ensures consistency across devices.

Left Column Section Setting :

Users can customize the left tab column by adjusting the background, spacing, border, and border radius, as well as adding a box shadow for a more dynamic appearance.

Column Image Setting :

Users can customize the image height for both desktop and mobile views. Additionally, they can add a corner radius for a polished, modern look and adjust spacing with max-width options for better layout control.

We hope you enjoy using our work steps process 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.