Key Features of a Two Column Steps Module :

1️⃣ Step Numbering

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

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

2️⃣ 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.

3️⃣ 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.

4️⃣ 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.

5️⃣ 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 Two Column Steps 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 "Two Column Steps" 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 subheading, with a left-side column that includes a title, step number, and description. On the right side, you can add a column with a subtext, title, description, and an image for a well-structured and visually balanced design.
• Layout 2 : The layout includes a heading and subheading with tab options, allowing you to add a step number, title, and description. Each step can feature a unique image, creating an interactive and visually engaging experience.
  
• Layout 3 : The layout includes a heading with tab options, allowing you to add a step number, title, and description. Each step can feature a unique image, and within the image column, you can add a number value, title, and description for a structured and engaging presentation.

Sub Heading & Heading : 

Users can add or remove jQuery JavaScript as needed, providing flexibility to enhance functionality or optimize performance based on their requirements.

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.

Sub Heading & Heading Setting :

Users can customize the module’s spacing and adjust the typography for the heading, sub heading. This includes modifying the color, font size, weight, and line height for both mobile and desktop views, ensuring a personalized and visually cohesive design across all devices. This feature is available in Layouts 1 and 2 and heading setting available in all layouts.

Column Setting :

Easily customize the content column by adjusting spacing, and background color to match your design preferences and create a seamless visual experience. It's available in layout 1.

Left Column Content Setting :

Easily customize the column content by selecting a background, adjusting typography, spacing, corners, and adding a box shadow to match your design preferences. Additionally, modify the typography of the step number, title, and description with ease. Available in Layouts 1 and 3.

Right Column Content Setting :

Easily customize the column content by selecting a background, adjusting typography, spacing, corners, and adding a box shadow to match your design preferences. In Layout 3, you can also customize the bottom column on the image by setting typography, spacing, corners, font size, line height, and background for a refined visual experience.

Left Column Setting :

Easily customize the content column by adjusting spacing, corners, and background color to match your design preferences. Available in Layout 2.

Column Content Setting :

Easily customize the column content by selecting a background, adjusting typography, spacing, corners, and adding a box shadow to match your design preferences. Available in Layout 2.

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