The Step Process Or Services is designed to present step-by-step information in an organized, user-friendly format. This module is useful for tutorials, onboarding processes, instructional guides, or any content that requires sequential navigation.
Key Features of a Step Process Or Services :
Each step is distinctly numbered to ensure clarity and easy tracking.
The numbering helps users follow the process in a structured way.
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.
Each step can include a tab-based navigation system.
Tabs can be used to segment additional information without overwhelming the user.
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.
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.
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 "Step Process Or Services" and drag and drop the module into the desired location on your page.
Layout ID :
You can add an ID to the target section and use the same ID in an anchor link to enable a smooth scrolling effect when a user clicks on a Call-to-Action (CTA) button, enhancing navigation and user experience.
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 :
Heading & Description:
You have the flexibility to customize the heading and description to match your design preferences. Additionally, you can choose to show or hide specific elements as needed for a tailored and dynamic layout. It's available in layout 1 and 3.
Content Column :
Easily customize the number value, title, paragraph, and all content to match your preferences. You can also choose to show or hide specific elements as needed for a flexible and dynamic layout.
Steps:
Easily customize the number value, title, and paragraph to match your preferences. You can also repeat unlimited tabs and choose to show or hide specific elements for a flexible and dynamic layout. It's available in all layouts.
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.