Key Features of a Step Process Or Services :

✅ Graph Functionality 

• Visually represent progress or performance with built-in graph elements for added clarity and impact.      

✅ Step Numbering

• Each step is distinctly numbered to ensure clarity and easy tracking.

• The numbering helps users follow the process in a structured way.

✅ Two-Column Layout

• The left column typically contains the step number and title.

• The right column provides images with more details.

• This layout enhances readability and maintains a clean, structured design.

✅ Step with Tab Functionality

• Each step can include a tab-based navigation system.

• Tabs can be used to segment additional information without overwhelming the user.

✅ Responsive & Adaptive Design

• Adjusts seamlessly for different screen sizes, ensuring a smooth experience on desktop and mobile.

• On smaller screens, the two-column layout may stack vertically for better readability.

✅ Customizable Design

• Colors, fonts, and step layouts can be customized to match branding and UI design preferences.

• Step no. or visuals can be added next to steps for improved understanding.

How to Set Up the Step Process Or Services 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 "Step Process Or Services" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For Parallax, 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.

Options : 

• Layout 1 : The layout features a heading and description, with a left-side column that includes a graph column. On the right side, you can add a column with a step number, title and  description for a well-structured and visually balanced design.
• Layout 2 : The layout includes a 6 columns allowing you to add a step number, title, and description. Creating an interactive and visually engaging experience.
  
• Layout 3 : The layout includes a heading, description with CTA, allowing you can add a number value, title, description and CTA for a structured and engaging presentation.

Heading & Description: 

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 heading, description and CTA adjust the typography, color, font size, weight, line height, background, border and corner for both mobile and desktop views, ensuring a personalized and visually cohesive design across all devices. This feature is available in Layouts 1 and 3 layouts.

Column Setting :

Easily customize the content column by adjusting background, spacing, box shadow, border and corner to match your design preferences and create a seamless visual experience. It's available in all layouts.

Column Content Setting :

Easily customize the column content by selecting a background, adjusting typography, spacing, alignment, border and corners to match your design preferences. Additionally, modify the typography of the step number, title, and description with ease. Available in all layouts.

Right Column Tab Content Setting :

Easily customize the tab column content by selecting a background, adjusting typography, spacing, and adding a corners to match your design preferences.

Right Tab Column Setting :

Easily customize the tab column by adjusting spacing, border, corners, box shadow and background color to match your design preferences. Available in Layout 1.

We hope you enjoy using our step process or services 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.