HubSpot Modules & Themes for Marketing Teams

Boost user experience and support with the Smart FAQ Accordion Module for HubSpot. Featuring smooth accordion toggles, tabbed categories, SEO-friendly structure, and fully responsive design. Easily customizable with no coding required—perfect for creating clean, modern, and user-friendly FAQ sections on any website.

Key Features of a Smart FAQ Accordion Module :

✅ Custom Tab Titles – Easily add and label multiple tabs.

✅ Accordion Functionality – Expands or collapses answers on click, keeping the layout clean and user-friendly. Only one     section opens at a time to reduce clutter.

✅ Smooth Accordion Animation – Modern toggle animation for a clean and interactive user experience.

✅ Fully Responsive Design – Optimized for all devices (desktop, tablet, mobile).

✅ Extensive Style Customization – Tab background (solid or gradient), Border styles, Padding/margins, Active/inactive states

✅ Easy to Use with Drag & Drop – Built for HubSpot’s drag-and-drop page editor. No coding required to configure or style tabs

✅ Reusable and Scalable – Add multiple tab sections to a page or reuse across templates.

How to Set Up the Smart FAQ Accordion 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 "Smart FAQ Accordion" and drag and drop the module intothe desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Easily organize your content with the "Smart FAQ Accordion" module — ideal for showcasing services, FAQs, or product details. This user-friendly layout allows visitors to switch between tabs without page reloads, improving engagement and readability. Clean design ensures information is structured and accessible. Perfect for enhancing UX on any HubSpot landing or website page.

Options : 

• Layout 1 : Horizontal Tabs with Accordion and Support Options - Supports various formats like general queries, product-specific, or policy-based FAQs—tailored to meet different customer intents.
• Layout 2 : Heading and  Accordion - A clean and simple FAQ layout with a customizable section heading and structured accordion list. Ideal for standard FAQ pages, landing pages, and service sections where clarity and readability are the priority. Perfect for presenting general questions in a distraction-free format.
• Layout 3 : Categorize base Accordion - Organize FAQs by categories for better navigation and user experience. This layout groups related questions under defined sections, making it easier for visitors to find relevant answers quickly. Best suited for large knowledge bases, product documentation, or multi-service websites.

• All Layout are ideal for building a clean and organized knowledge base. Both layouts allow you to customize sub heading, headings and descriptions, helping you clearly label articles, topics, or help sections.
• You can also enable a show/hide feature, giving users the option to expand or collapse content as needed—keeping the interface neat and user-friendly.
  
  
  
  
  

Tabbing & Accordion Customizable : 

Customize your Tabs and Accordions with full control over visibility and labels. Easily manage show/hide settings, update text, and add more sections as needed.

• Edit Tab & Accordion Text – Change titles and question labels instantly to match your messaging.
• Add More Tabs & Accordions – Easily expand your FAQ by adding new tabs and questions based on your content needs.

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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.

Tabbing & Accordion Column Setting :

You have full control over customizing the tabbing & content box to align with your design preferences. Adjust the background, spacing, border, corners and to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color & gradient for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Tabbing, Accordion & All Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, tabbing, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Tabbing 
  Customize the Tabbing background, corner, border, active effect, hover and typography.
• Image & Icon
  Customize the image size and corner to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA background color, text color, spacing, border, corner, alignment and typography.
  

We hope you enjoy using our Smart FAQ Accordion 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.

The Premium Full Screen Banner Module helps you create bold, immersive hero sections that instantly capture attention and elevate your brand experience. Designed for visual impact, it features full-screen layouts, smooth slider transitions, and engaging hover effects—giving you complete control over how your key messages are presented.

Easily manage banner headlines, supporting content, background media, and CTA buttons directly within HubSpot—no coding required. With mobile-first responsiveness, flexible content positioning, adjustable spacing, and advanced style controls, this module ensures your full-screen banners look stunning and perform flawlessly across all devices.

Whether you’re launching a campaign, highlighting a core service, or creating a powerful first impression, the Premium Full Screen Banner delivers a polished, high-impact experience that boosts engagement and drives meaningful user action.

Key Features of a Premium Full Screen Banner Module :

• Multiple Layouts – Choose from 3 distinct hero banner styles.

• Responsive Design – Optimized for all screen sizes, ensuring a flawless experience on desktop, tablet, and mobile.

• Flexible Content Options – Easily update headings, descriptions, and CTAs directly within HubSpot.

• Customizable Visuals – Add images, graphics, or mockups to match your brand identity and campaign goals.

• Engaging Call-to-Actions – Drive conversions with customizable CTA buttons tailored to your business objectives.

• Design Flexibility – Adjust spacing, alignment, and background colors for a unique, on-brand look.

• User-Friendly Editing – No coding required—built for marketers to launch modern hero sections quickly.

• Optimized Performance – Lightweight and SEO-friendly to ensure speed and visibility.

• Versatile Use Cases – Perfect for homepages, landing pages, service showcases, or campaign launches.

How to Set Up the Use Premium Full Screen Banner 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 "Premium Full Screen Banner" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options:

• Layout 1 – A design featuring strong subtext, headlines, CTA and images .

• Layout 2 – A layout that subtext, highlights customer stories, slider card and logo slider.

• Layout 3 – A layout that subtext, highlights, image and modern CTA's.

• Subtext Enable
  Toggle the main subtext on or off. Perfect when you want a clean hero layout without a large title.

• Subtext Heading
  Add and customize the main subtext  text. Use this space to deliver a strong, eye-catching message.

• Heading Enable
  Toggle the main heading on or off. Perfect when you want a clean hero layout without a large title.

• Enter Heading
  Add and customize the main heading text. Use this space to deliver a strong, eye-catching message.

• Description Enable
  Show or hide the supporting description under your heading. Ideal if you prefer a minimalist design.

• Enter Description
  Add descriptive text below the heading. Great for explaining your value or offering in 1–2 concise lines.

• CTA Show/Hide
  Easily enable or disable the call-to-action button. Useful if you want a hero section that’s informational only.

• CTA
  Customize the CTA text, link, and style. A powerful way to drive visitors toward conversions.

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 margin, padding, container width and background colors 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.

Subtext, Heading, Description and CTA Setting :

The Subtext, Heading & Description Settings in Premium Full Screen Banner allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices.

• Desktop Typography
  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Box Shadow Enable
  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.
  
  

Image Setting (Layout 1-3) : 

Image Styling Settings allow you to easily control image corner and background to match your layout needs. And visual appearance to ensure images blend seamlessly with your brand design.

Company Details and Slider Content Setting (Layout 2) :

• Desktop Typography
  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Box Shadow Enable
  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.

Slider Arrows Setting :

Bottom Content Setting (Layout 2) :

• Desktop Typography
  Customize font style, size, weight, and color on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.

We hope you enjoy using our premium full screen banner 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.

Effortlessly showcase your Latest Insights Blog with a clean, modern layout designed to increase engagement and content visibility. The Latest Insights Blog module automatically displays your most recent articles, giving you full control over layout, spacing, and display settings—no coding required. Easily customize blog titles, featured images, author details, publish dates, and call-to-action elements to align with your brand identity. Perfect for highlighting fresh insights, driving traffic to your blog, and keeping any HubSpot page consistently updated with valuable content.

Key Features of a Latest Insights Blog Module :

✅ Automatic Latest Post Fetching – Dynamically displays the most recent blog posts without manual updates.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Hover & Animation Effects – Engage users with smooth hover states, transitions, and subtle animations.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

How to Set Up the Latest Insights Blog 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 "Latest Insights Blog" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Choose your ideal layout (Layout 1, 2, or 3) and effortlessly arrange your cards to create the perfect visual flow. With Latest Insights Blog, you can reorder content with ease, ensuring a smooth, well-structured, and engaging user experience every time.

• Fully Customizable heading, description & CTA
• Show/Hide Toggle Option
  

Post Column Content Image, Tag, Title, Description and  CTA : 

You can change the Image, Tag, Title, Description and CTA with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Image, Tag, Title, Description and CTA
• Easily manage and organize how content is shown based on user interaction

The Latest Insights Blog module provides two versatile display modes to suit different content strategies. With the Custom Card layout, you can hand-pick and design blog cards, customizing images, headings, summaries, and links—perfect for promoting featured or evergreen posts. The Latest Blog Post layout automatically pulls in your newest articles, ensuring your content stays current with zero manual effort. Both display options are fully responsive, highly customizable, and simple to configure within the HubSpot editor, making this module an excellent choice for highlighting blog content on websites, landing pages, and blog templates.

In Form filed select your subscribe form 

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 margin, padding, container width and background colors 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 and CTA Style Settings :

Easily control the look and feel of your section’s text and call-to-action elements. Adjust font size, weight, and color for headings, fine-tune paragraph styles for descriptions, and customize CTA buttons with your preferred text, link, style, and hover effects. These options ensure your content and CTAs align with your brand while remaining clear, engaging, and professional across all devices.

Blog Post Card Setting :

You have full control over customizing the Post column box to align with your design preferences. Adjust the background, spacing, border and corners to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your blog post.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Post Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• Author Name & Publish Date Display
  Customize author names and blog publish dates with flexible styling options to enhance credibility and content transparency.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

Form Setting (Layout 2)

Slider Arrows and Dot's (Layout 1, 3)

Customize slider arrow and dot size, color, background, border and corner effects to match your brand design and improve navigation usability.

We hope you enjoy using our latest insights blog 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.

Showcase client feedback with impact using the Two Column Testimonial module. This layout beautifully balances testimonial content and visuals side by side for clear, engaging storytelling. Designed to highlight customer experiences, it helps build trust and strengthen brand credibility. With smooth transitions and a clean, modern structure, testimonials feel more authentic and readable. Fully responsive and customizable, it fits seamlessly into any page design across all devices.

Key Features of a Two Column Testimonial Module :

✅ Two-Column Layout Design - Displays testimonial content and images side by side for a clean, professional presentation.

✅ 3 Unique Layout Options – Choose from three beautifully crafted slider layouts to match any design style.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Infinite Auto Slide – Testimonials slide automatically in a smooth, endless loop.

✅ Slide Dots Option – Optional navigation dots enhance usability.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Easy to Integrate – Simple setup and integration into any page or theme.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Smooth Animation Effects - Built-in fade or slide animations enhance visual engagement without affecting performance.

How to Set Up the Two Column Testimonial 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 Testimonial" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Two Column Testimonial module, choose from multiple professionally designed layouts to present customer feedback in a visually engaging way. Each layout offers flexibility in content placement and visual hierarchy, helping you create trust-driven testimonial sections that fit your brand perfectly.

Options : 

• Layout 1 : Features a section heading controls and a two-column structure where the client image appears on one side and testimonial content on the other, ideal for a clean and focused testimonial highlight.
• Layout 2 : Includes a heading and subheading with a modern two-column card design, combining client visuals and testimonial text with subtle background styling for enhanced emphasis.
• Layout 3 : Displays a centered heading and description followed by a wide two-column testimonial card, perfect for showcasing detailed customer feedback in a bold, attention-grabbing format.

You can change the sub heading, heading and description text with show/hide also in All Layouts with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the sub heading, heading and description
• Easily manage and organize how content is shown based on user interaction

Slider Content : 

• Image
  Easily personalize client images to match your brand and layout style. Upload custom photos, avatars, or logos directly from the HubSpot editor with full control over sizing and alignment.

• Enter Client Comment
  Add the client’s feedback or review text. Use this space to highlight authentic experiences and build trust.

• Enter Client Name
  Add the client’s full name to personalize the testimonial and improve credibility.

• Enter Client Position
  Add the client’s designation, role, or company name to provide context and strengthen authenticity.
  

Left Content In Layout Two :

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 and background colors 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 Setting :

In this module, you have full flexibility to customize the heading and description to perfectly align with your design vision. You can easily adjust the spacing around the text, apply text transformations such as uppercase or lowercase, and set the alignment (left, center, or right) to create the ideal layout. These options ensure your content remains visually balanced and responsive across all devices.

• Text Styling Options
  Set font size, color, spacing, and apply text transforms like uppercase or capitalize.
• Responsive Alignment
  Align your content (left, center, or right) for both desktop and mobile devices.
• Spacing Adjustments
  Add padding or margins around your content to create visual balance.

Slider Card Setting :

You have full control over customizing the column box to align with your design preferences. Adjust the background, spacing, border and corners to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color, gradient, or even an image background for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Styling
  Set borders with customizable width, color, and style to frame your content attractively.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Slider Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Clients Info
  Customize the profile image, name and position.

Slider Arrows & Dots Settings :

Gain full control over slider navigation elements by customizing arrows and dots to match your brand’s visual style. Adjust size, color and spacing to ensure smooth interaction and a polished user experience. Whether you’re refining navigation visibility or styling active states, every detail can be tailored for consistency and clarity.

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

The Dynamic CTA Banner Module helps you capture attention and drive action with smart, responsive, and highly customizable call-to-action banners. Built for flexibility, it includes multiple layout options and dynamic display controls, giving you the freedom to promote offers, announcements, and key messages exactly when and where they matter most.

Easily update banner text, supporting copy, CTA buttons, and links directly inside HubSpot—no coding required. With mobile-optimized design, flexible positioning, adjustable spacing, and full style controls, this module ensures your CTA banner looks consistent and performs flawlessly across all screen sizes.

Whether you’re promoting a limited-time offer, launching a campaign, or guiding users toward conversions, the Dynamic CTA Banner delivers a clean, high-impact experience that increases engagement and drives measurable results.

Key Features of a Dynamic CTA Banner Module :

• Multiple Layouts – Choose from 3 distinct hero banner styles.

• Responsive Design – Optimized for all screen sizes, ensuring a flawless experience on desktop, tablet, and mobile.

• Flexible Content Options – Easily update headings, descriptions, and CTAs directly within HubSpot.

• Customizable Visuals – Add images, graphics, or mockups to match your brand identity and campaign goals.

• Engaging Call-to-Actions – Drive conversions with customizable CTA buttons tailored to your business objectives.

• Design Flexibility – Adjust spacing, alignment, and background colors for a unique, on-brand look.

• User-Friendly Editing – No coding required—built for marketers to launch modern hero sections quickly.

• Optimized Performance – Lightweight and SEO-friendly to ensure speed and visibility.

• Versatile Use Cases – Perfect for homepages, landing pages, service showcases, or campaign launches.

How to Set Up the Use Dynamic CTA Banner 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 "Dynamic CTA Banner" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options:

• Layout 1 – A design featuring strong headlines, supporting visuals, conversion-ready CTAs and logo slider.

• Layout 2 – A layout that highlights customer stories, social icon, and subscribe form.

• Layout 3 – A layout customer success story, services, or modern CTA's.

• Heading Enable
  Toggle the main heading on or off. Perfect when you want a clean hero layout without a large title.

• Enter Heading
  Add and customize the main heading text. Use this space to deliver a strong, eye-catching message.

• Description Enable
  Show or hide the supporting description under your heading. Ideal if you prefer a minimalist design.

• Enter Description
  Add descriptive text below the heading. Great for explaining your value or offering in 1–2 concise lines.

• CTA Show/Hide
  Easily enable or disable the call-to-action button. Useful if you want a hero section that’s informational only.

• CTA
  Customize the CTA text, link, and style. A powerful way to drive visitors toward conversions.

In Form filed select your subscribe form

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 margin, padding, container width and background colors 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 and CTA Setting :

The Heading & Description Settings in Dynamic CTA Banner allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices.

• Desktop Typography
  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Box Shadow Enable
  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.
  
  

Logo Setting (Layout 1):

• Logo Height
  Adjust the height of the image to fit your design. Helps maintain balance between visuals and text.
• Border
  Add or customize borders around the image. Useful for creating separation or emphasis.
• Spacing
  Control the margin and padding around the image. Ensures proper alignment and breathing space in the layout.
• Border Radius
  Round the corners of the image as needed. Perfect for creating smooth, modern, or card-style visuals.

Image Setting : 

Image Styling Settings allow you to easily control image corner and background to match your layout needs. And visual appearance to ensure images blend seamlessly with your brand design.

Bottom Content Setting :

• Desktop Typography
  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Box Shadow Enable
  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.

We hope you enjoy using our dynamic CTA banner 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.

Effortlessly showcase your Latest Blog Highlights with a clean, modern layout designed to boost engagement and visibility. The Latest Blog Highlights module automatically pulls your most recent articles and gives you full control over layout, spacing, and display settings—no coding required. Customize titles, images, meta details, and call-to-action elements to match your brand style. Ideal for highlighting fresh content, driving traffic, and keeping any HubSpot page up to date.

Key Features of a Latest Blog Highlights Module :

✅ Automatic Latest Post Fetching – Dynamically displays the most recent blog posts without manual updates.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Hover & Animation Effects – Engage users with smooth hover states, transitions, and subtle animations.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

How to Set Up the Latest Blog Highlights 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 "Latest Blog Highlights" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Choose your ideal layout (Layout 1, 2, or 3) and effortlessly arrange your cards to create the perfect visual flow. With Latest Blog Highlights, you can reorder content with ease, ensuring a smooth, well-structured, and engaging user experience every time.

• Fully Customizable heading, description & CTA
• Show/Hide Toggle Option
  

Post Column Content Image, Tag, Title, Description and  CTA : 

You can change the Image, Tag, Title, Description and CTA with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Image, Tag, Title, Description and CTA
• Easily manage and organize how content is shown based on user interaction

The Latest Blog Highlights offers two flexible display options to match your content needs. Use the Custom Card option to manually create curated blog cards with full control over images, titles, descriptions, and links—ideal for featured or evergreen content. Choose the Latest Blog Post option to automatically display your most recent blog articles, keeping your pages fresh without manual updates. Both options are fully customizable, responsive, and easy to manage within the HubSpot editor, making this module perfect for showcasing blog content across website pages, landing pages, and blog templates.

In Form filed select your subscribe form 

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 margin, padding, container width and background colors 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 and CTA Style Settings :

Easily control the look and feel of your section’s text and call-to-action elements. Adjust font size, weight, and color for headings, fine-tune paragraph styles for descriptions, and customize CTA buttons with your preferred text, link, style, and hover effects. These options ensure your content and CTAs align with your brand while remaining clear, engaging, and professional across all devices.

Blog Post Setting :

You have full control over customizing the Post column box to align with your design preferences. Adjust the background, spacing, border and corners to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your blog post.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Left Content Setting :

Take full control over your left column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, Arrow color to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

Post Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

We hope you enjoy using our latest blog highlights 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.

Effortlessly build eye-catching overlap-style content sections to highlight services, features, or team members with visual depth. The Dynamic Overlap Cards module offers full control over layout, spacing, and animations—no coding needed. Customize text, images, and hover effects to perfectly match your brand. Ideal for creating modern, interactive showcases on any HubSpot page.

Key Features of a Dynamic Overlap Cards Module :

✅ Modern Overlap Card Design – Create visually stunning layouts with layered card effects that instantly grab attention.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Hover & Animation Effects – Engage users with smooth hover states, transitions, and subtle animations.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

How to Set Up the Dynamic Overlap Cards 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 "Dynamic Overlap Cards" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Choose your ideal layout (Layout 1, 2, or 3) and effortlessly arrange your cards to create the perfect visual flow. With Dynamic Overlap Cards, you can reorder content with ease, ensuring a smooth, well-structured, and engaging user experience every time.

• Fully Customizable heading & description
• Show/Hide Toggle Option
  

Card Column Content Image, Title, Description, Social icons & CTA : 

You can change the Image, Title, Description, Social icons & CTA with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Image, Title, Description, Social icons and CTA
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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 Style Settings :

Easily control the look and feel of your section’s text. Adjust font size, weight, and color for headings, and fine-tune paragraph styles for descriptions. These options ensure your content aligns with your brand while staying clear and professional across all devices.

Card & Text Column Setting :

You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border, corners and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Card Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

We hope you enjoy using our dynamic overlap cards 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.

Quickly create a compelling ‘Case Study’ section to showcase client success stories and real results with impact. This flexible module lets you customize layouts, images, and content to match your brand style. No coding required—just simple, intuitive controls. Perfect for presenting case studies in a clear, engaging, and professional way on any HubSpot page.

Key Features of a Case Study Module :

✅ Smooth Slider Functionality – Built-in carousel with autoplay, navigation arrows, and swipe support for a modern browsing experience.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Hover & Animation Effects – Engage users with smooth hover states, transitions, and subtle animations.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

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

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Case Study, select your preferred layout (e.g., Layout 1, Layout 2 or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a subheading, heading, description, CTA and card format.
• Layout 2 : The layout features a heading, description with hover animation card.
• Layout 3 : The layout includes a heading, description and content card format.

• Fully Customizable Sub heading, Heading & Description
• Show/Hide Toggle Option
  

Card Column Content Logo,  Tag, Title, Description & CTA : 

You can change the Logo, Tag, Title, Description & CTA with show/hide And Call-to-Action (CTA) with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Logo, Tag, Title, Description and CTA
• Easily manage and organize how content is shown based on user interaction

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 margin, padding, container width and background colors 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 Style Settings :

Easily control the look and feel of your section’s text. Adjust font size, weight, and color for headings, and fine-tune paragraph styles for descriptions. These options ensure your content aligns with your brand while staying clear and professional across all devices.

Card Column Setting :

You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border, corners and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Card Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Logo
  Customize the logo size to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

Arrows Setting :
Personalize navigation arrows to match your brand style. Easily adjust background color, and corner radius for a clean or rounded look. Make your slider navigation both functional and visually appealing with full control.

We hope you enjoy using our case study 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.

The Modern Video Showcase Module allows you to highlight your story, product, or service through stunning video integration combined with engaging content. Designed with flexibility and brand consistency in mind, it offers multiple layout options, customizable typography, and CTA buttons to drive user action. The module ensures smooth video playback with content, responsive design, and advanced controls for performance optimization. Perfect for landing pages, product launches, or storytelling sections, it blends video with impactful messaging to capture audience attention across all devices.

Key Features of a Modern Video Showcase Module :

• Multiple Layouts: Side-by-side (text + video), full-width video, or stacked layout.

• Background Settings: Gradient, solid color, or image background.

• Content Alignment: Left, right, center positioning for text.

• Spacing Controls: Padding & margin options for responsive adjustments.

• Card Style: Option to wrap video in a styled card with rounded corners, shadows, or borders.

• Video Sources: Support YouTube, Vimeo, or HubSpot video.

• Play Button Style: Customizable icon, color, and size.

• Primary & Secondary CTA: Add up to two buttons (e.g., Download Free, More Info).
• Customizable Headings & Descriptions: Font size, weight, and color controls.

How to Set Up the Use Modern Video Showcase 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 "Modern Video Showcase" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Easily enhance navigation by adding an ID to the target section and using the same ID in an anchor link. This enables a smooth scrolling effect when users click a Call-to-Action (CTA) button, improving the overall user experience.

Layout Options :  

Effortlessly showcase your story and connect with your audience through the Modern Video Showcase Module — perfect for product launches, campaign highlights, or brand storytelling. Built with flexible layouts and customizable styling, this module combines powerful video integration with engaging content and conversion-focused CTAs. With responsive design and smooth performance, it ensures your message is delivered beautifully across all devices.

• Layout 1 – Feature Highlight Video

  A design that places your video side-by-side with strong headlines, descriptive text, and conversion-ready CTAs — ideal for introducing services, features, or campaigns.

• Layout 2 – Storytelling & Experience Video

  A layout that emphasizes immersive visuals, customer journeys, or behind-the-scenes content, paired with supportive messaging that builds authentic brand connections.

• Layout 3 – Full-Width Showcase Video

  A bold layout designed to spotlight product mockups, campaign highlights, or cinematic storytelling with full-width video and sleek modern presentation.

Video Column : 

• Video Type
  Choose between HubSpot Video or iFrame embed. Perfect for flexibility when using hosted content or external platforms like YouTube and Vimeo.

• Play Button Color
  Customize the play button color with a hex code. Perfect for keeping your video controls aligned with your brand style.

Content Column :

• Heading Enable

  Toggle the main heading on or off. Great for when you want a video-focused section without extra text.

• Enter Heading

  Add and customize the main heading text. Ideal for delivering a strong, eye-catching message.

• Description Enable

  Show or hide the supporting description under your heading. Keeps the layout flexible for minimal or detailed storytelling.

• Enter Description

  Add descriptive text below the heading. Perfect for explaining your offering in 1–2 concise lines.

• CTA Show/Hide

  Enable or disable the call-to-action button. Useful if the section should be informational only.

• CTA Choice

  Select from different CTA types (e.g., Simple CTA, HubSpot CTA). Tailor the call-to-action style to your campaign.

• CTA Text

  Customize the button label. Use action-driven words like “Download Free Guidebook” or “Learn More.”

• Link Options

  Choose where your CTA directs: internal pages, external links, or files. Optionally open in a new tab and set nofollow for SEO control.

• CTA Icon

  Add or replace an icon inside your button. Great for emphasizing direction or action (e.g., arrow, play, download).

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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 Setting :

The Heading & Description Settings in Modern Video Showcase allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices.

CTA Setting : 

• Desktop Typography

  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.

• Mobile Typography

  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.

• Spacing

  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.

• Background

  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.

• Border

  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.

• Border Radius

  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.

• Text Transform

  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.

• Box Shadow Enable

  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.

• Alignment

  Position the CTA left, center, or right within the section. Provides flexibility depending on layout style.

Video Column Setting :

• Video Height
  Adjust the video height to fit your layout. Great for balancing video size with surrounding content.

• Corner Radius
  Round the video corners for a softer, modern look — or keep them sharp for a bold, professional style.

• Border Settings
  Add or customize a border around the video. Perfect for highlighting the video area or matching brand design.

• Spacing Controls
  Set padding and margins around the video. Helps maintain clean, responsive layouts across devices.

• Top Element Position Layout 1
  Choose where the top decorative element appears: top left or top right. Ideal for adding accents that frame the video.
• Bottom Element Position Layout 1
  Select bottom left or bottom right placement for secondary design elements. Helps balance visuals in the layout.

We hope you enjoy using our modern video showcase 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.

Quickly build a customizable Content Grid Pro to organize and showcase your information with clarity and style. This flexible module lets you adjust layouts, colors, and hover effects to perfectly match your brand. No coding required—just simple, drag-and-drop controls. Ideal for displaying services, portfolios, resources, or team members in a clean, engaging, and professional way on any HubSpot page.

Key Features of a Content Grid Pro Module :

✅ 3 Unique Layout Options – Choose from three beautifully crafted slider layouts to match any design style.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Hover & Animation Effects – Engage users with smooth hover states, transitions, and subtle animations.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

How to Set Up the Content Grid Pro 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 "Content Grid Pro" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Content Grid Pro, select your preferred layout (e.g., Layout 1, Layout 2 or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a heading, title, description, CTA 4 cards format.
• Layout 2 : The layout features a heading, title, description, CTA and image 3 cards.
• Layout 3 : The layout includes a heading, icon, image, title, paragraph and CTA cards format.

• Fully Customizable Headings
• Show/Hide Toggle Option
  

Card Column Content Sub Text, Heading, Paragraph, CTA and Image  : 

You can change the sub text, heading, paragraph, CTA and image with show/hide also , And Call-to-Action (CTA) with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Sub Text, Heading, Paragraph, CTA and Image
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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 Style Settings :

Easily control the look and feel of your section’s text. Adjust font size, weight, and color for heading. These options ensure your content aligns with your brand while staying clear and professional across all devices.

Card Column Setting :

You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border, corners and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
  

Card Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  
• Image
  Customize the Image size and corner to match your brand’s color palette and enhance the overall design.

We hope you enjoy using our content grid pro 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.

The Modern Hero Banner Module helps you make a powerful first impression with bold, responsive, and customizable hero sections. Designed for flexibility, it includes three unique layouts—growth-focused, people-driven, and digital showcase—giving you the freedom to present your brand exactly the way you want.

Easily update headings, descriptions, images, and call-to-action buttons directly inside HubSpot, without touching code. With mobile-friendly design, adjustable spacing, and complete style control, this module ensures your hero banner always looks sharp and performs seamlessly across all devices.

Whether you’re launching a campaign, showcasing services, or highlighting customer success, the Modern Hero Banner delivers a sleek, high-converting hero section that captures attention and drives results.

Key Features of a Modern Hero Banner Module :

• Multiple Layouts – Choose from 3 distinct hero banner styles.

• Responsive Design – Optimized for all screen sizes, ensuring a flawless experience on desktop, tablet, and mobile.

• Flexible Content Options – Easily update headings, descriptions, and CTAs directly within HubSpot.

• Customizable Visuals – Add images, graphics, or mockups to match your brand identity and campaign goals.

• Engaging Call-to-Actions – Drive conversions with customizable CTA buttons tailored to your business objectives.

• Design Flexibility – Adjust spacing, alignment, and background colors for a unique, on-brand look.

• User-Friendly Editing – No coding required—built for marketers to launch modern hero sections quickly.

• Optimized Performance – Lightweight and SEO-friendly to ensure speed and visibility.

• Versatile Use Cases – Perfect for homepages, landing pages, service showcases, or campaign launches.

How to Set Up the Use Modern Hero Banner 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 "Modern Hero Banner" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options:

• Layout 1 – A design featuring strong headlines, supporting visuals, and conversion-ready CTAs.

• Layout 2 – A layout that highlights customer stories, success metrics, and authentic brand connections.

• Layout 3 – A layout ideal for product mockups, services, or campaign highlights with modern presentation.

• Heading Enable
  Toggle the main heading on or off. Perfect when you want a clean hero layout without a large title.

• Enter Heading
  Add and customize the main heading text. Use this space to deliver a strong, eye-catching message.

• Description Enable
  Show or hide the supporting description under your heading. Ideal if you prefer a minimalist design.

• Enter Description
  Add descriptive text below the heading. Great for explaining your value or offering in 1–2 concise lines.

• CTA Show/Hide
  Easily enable or disable the call-to-action button. Useful if you want a hero section that’s informational only.

• CTA
  Customize the CTA text, link, and style. A powerful way to drive visitors toward conversions.

• Left Side Element Enable Layout 1
  Toggle supporting visuals on the left side of the banner. Helpful for adding icons, profile cards, or badges.

• Left Side Element Layout 1
  Upload and manage images or graphics on the left side. Great for showcasing testimonials or team highlights.

• Right Side Elements Enable Layout 1
  Show or hide additional visuals on the right side. Keeps the layout flexible for different campaign needs.

• Right Side Elements Layout 1
  Add images, charts, or mockups to the right side of the banner. Perfect for highlighting growth stats, services, or product previews.

• Right Column Content Layout 2

  • Contents Enable
    Toggle the right column content on or off. Useful when you want a clean hero without extra details.

     

  • Value Text
    Add a bold value number (e.g., “28K”). Great for showcasing achievements, stats, or milestones.

     

  • Sub Text
    Include supporting text under the value. Perfect for explaining what the number represents (e.g., “Happy Customers”).

     

  • Profile Enable
    Turn profile images on or off in the right column. Helpful for adding authenticity and human connection.

     

  • Profile Items
    Upload and manage multiple profile images. Ideal for highlighting teams, customers, or community members.

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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 Setting :

The Heading & Description Settings in Modern Hero Banner allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices.

CTA Setting : 

• Desktop Typography
  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Box Shadow Enable
  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.

Image Column Setting (Layout 2 & 3):

• Image Width
  Adjust the width of the image to fit your design. Helps maintain balance between visuals and text.
• Border
  Add or customize borders around the image. Useful for creating separation or emphasis.
• Spacing
  Control the margin and padding around the image. Ensures proper alignment and breathing space in the layout.
• Border Radius
  Round the corners of the image as needed. Perfect for creating smooth, modern, or card-style visuals.

Elements Image Setting (Layout 1) :

Choose to place the image element at the top left or top right of the banner. Offers flexibility to align visuals with your content flow and overall design style.

Right Col Content/Profiles Setting (Layout 2) :

You can customize the right column content and profile background (border, corners, spacing) and adjust font size, color, line height, and spacing for values and subtext.

We hope you enjoy using our modern hero banner 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.

Quickly create a personalized ‘Feature Cards’ section to showcase your product or service highlights with impact. This flexible module lets you customize layouts, colors, and styles to align with your brand. No coding required—just easy, intuitive controls. Ideal for presenting features in a clear, engaging, and professional way on any HubSpot page.

Key Features of a Feature Cards Module :

✅ 3 Unique Layout Options – Choose from three beautifully crafted slider layouts to match any design style.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Hover & Animation Effects – Engage users with smooth hover states, transitions, and subtle animations.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

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

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Feature Cards, select your preferred layout (e.g., Layout 1, Layout 2 or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a subheading, heading, icon, title and description 3 card format.
• Layout 2 : The layout features a heading, title, description and icon with hover animation card.
• Layout 3 : The layout includes a heading, description, tag, icon, title, paragraph and CTA card format.

• Fully Customizable Sub heading & Headings
• Show/Hide Toggle Option
  

Card Column Content Tag,  Icon, Title, Description & CTA : 

You can change the Tag, Icon, Title, Description & CTA with show/hide also in Layout One, And Call-to-Action (CTA) with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Tag, Icon, Title, Description and CTA
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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 Style Settings :

Easily control the look and feel of your section’s text. Adjust font size, weight, and color for headings, and fine-tune paragraph styles for descriptions. These options ensure your content aligns with your brand while staying clear and professional across all devices.

Card Column Setting :

You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border, corners and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
• Box Shadow
   Apply shadows to create a sense of elevation.

Card Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

We hope you enjoy using our feature cards 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.

Showcase different use cases in a clean, engaging way with the “Use Case Tabs” module for HubSpot. Highlight benefits across multiple tabs — each with customizable titles, icons, heading and description . Built for responsiveness and brand flexibility, this module lets you manage tab layouts (horizontal or vertical), colors, and spacing without any code. Ideal for presenting solutions by industry, department, or product use case — all in one interactive section.

Key Features of a Use Case Tabs Module :

✅ Custom Tab Titles – Easily add and label multiple tabs.

✅ Flexible Content Types – Supports images, CTAs, and even embedded forms or videos inside each tab for maximum versatility.

✅ Icon/Image Support – Add icons or images to visually represent each tab and improve at-a-glance understanding.

✅ Fully Responsive Design – Optimized for all devices (desktop, tablet, mobile).

✅ Extensive Style Customization – Tab background (solid or gradient), Border styles, Padding/margins, Active/inactive states

✅ Easy to Use with Drag & Drop – Built for HubSpot’s drag-and-drop page editor. No coding required to configure or style tabs

✅ Reusable and Scalable – Add multiple tab sections to a page or reuse across templates.

How to Set Up the Use Case Tabs 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 "Use Case Tabs" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options : 

• Layout 1 : The layout features a  included Heading, description, Tabs with Image format.
• Layout 2 & 3 : The layout features a  included Heading, description, Tabs with two column content.

• All Layouts are ideal for building a clean and organized knowledge base. Both layouts allow you to customize headings and descriptions for each tab, helping you clearly label articles, topics, or help sections.
• You can also enable a show/hide feature, giving users the option to expand or collapse content as needed—keeping the interface neat and user-friendly.
  
  

All Tabbing & Content Customizable : 

Create an organized, interactive experience with customizable tabs that allow users to add and manage rich content with ease. Each tab includes:

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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.

Tabbing & Content Column Setting :

You have full control over customizing the tabbing & content box to align with your design preferences. Adjust the background, spacing, border, corners and to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Tabbing & Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, tabbing, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Tabbing 
  Customize the Tabbing background, corner, border, active effect, hover and typography.
• Image
  Customize the image size and corner to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA background color, text color, spacing, border, corner and typography.
  

We hope you enjoy using our use case tabs 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.

Make your content interactive and engaging with Feature Accordion Pro, a flexible and modern accordion module designed for feature showcases, FAQs, and service highlights. This module helps you organize information into expandable sections, combining text, images, and videos for a clean, user-friendly experience.

With 3 ready-to-use layouts (Layout 1, Layout 2, and Layout 3), you can present content in classic split view, synchronized media with accordion, or feature grid style — all without coding. Built for responsiveness, customization, and performance, Accordion Pro ensures your content is easy to update, visually appealing, and optimized for every device.

Key Features of a Feature Accordion Pro Module :

• Multiple Layout Options – Choose from Layout 1, Layout 2, or Layout 3 with a simple setting.
• Customizable Headline & Description– Add engaging titles, and supporting text.
• Easy Content Updates – Update text, images, and media fields without coding.
• Advanced Customization – Control fonts, colors, spacing, and layouts directly in the editor.
• Responsive Design – Optimized for desktop, tablet, and mobile.
• Background Styles – Gradient, image or solid color options.
• Typography & Color Controls – Easily adjust fonts, sizes, and colors.
• Lightweight & Fast – Clean code ensures quick load times.
• User-Friendly – Built for marketers and businesses with no coding required.

How to Set Up the Use Feature Accordion Pro 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 "Feature Accordion Pro" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options : 

• Layout 1 – A classic accordion design with text-based expandable sections for simple content presentation.

• Layout 2 – A split layout combining an accordion on one side with synchronized images or videos on the other.

• Layout 3 – An advanced layout with accordion content on the left and dynamic feature lists or supporting visuals on the right.

 

• Heading Enable
  Toggle the main heading on or off. Ideal if you want a clean accordion without a title.
• Enter Heading
  Add and customize the main heading text. Use this to capture attention with a strong, engaging message.
• Description Enable
  Toggle the supporting description on or off. Useful when you want only the heading without extra text. 
• Enter Description
  Add descriptive text under the heading. Perfect for explaining benefits or context in 1–2 lines. It's only available in layout 1 and 3.

Accordion Content :

• Accordion Items
  Add multiple collapsible items with a title and description. Perfect for presenting features, FAQs, or step-by-step information in an organized way.
• Title
  Enter the main title for each accordion item. Ideal for highlighting the feature name, question, or key point.
• Description
  Add supporting text under each title. Useful for explaining details, benefits, or answers in 1–3 short sentences.
• Arrow Icon
  Choose or upload an icon that appears next to each title. Helps make items visually distinct and more engaging
• Video/Image Option
  Choose whether to display an image or a video in the accordion’s media column. Ideal for making your content more engaging and interactive. It's only available in layout 2.

Image Column :

Upload and manage the main image that appears in the image column. Ideal for product photos, illustrations, or brand visuals.

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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 Setting :

The Heading & Description Settings in Feature Accordion Pro allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices. Description does not available in layout 2.

Image Column Setting :

The Image Column Setting gives you complete control over how your visuals appear in the accordion module. You can adjust the image height to maintain consistent proportions, apply border radius for modern rounded edges, fine-tune spacing to create balanced layouts, and customize the border style, width, and color to frame your visuals. These options ensure your image or video blends seamlessly with the overall design while staying aligned with your brand style.

Inner Section Setting : 

The Inner Section Setting gives you complete control over the styling of the accordion’s content area. You can customize the background with solid colors, gradients, or images to match your brand, while the border radius option allows you to add modern rounded corners for a polished look. Fine-tune spacing (padding and margins) to create balanced layouts, and adjust the border style, width, and color for added definition. Additionally, the Below Section Corner Background setting provides an extra design layer to create seamless transitions and visually distinct sections. It's only option available in layout 1.

Accordion Section Setting : 

You can customize the accordion module: set header & body background colors, choose the active state color, adjust spacing for both mobile and desktop, and add border and border-radius.

Accordion Content Setting :

• Accordion Title
  Customize the style of the accordion titles, including font, size, color, and spacing. Ensures headings are clear and match your brand.
• Accordion Description Setting
  Control the appearance of the accordion content area with typography, color, and spacing options. Perfect for making text easy to read and engaging.
• Arrow Setting
  Adjust the style, size, and color of the accordion toggle arrow to match your design and improve user interaction.

We hope you enjoy using our feature accordion pro 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.

Easily build a personalized ‘Info Cards’ section to highlight key details with style. This flexible module allows you to customize layouts, colors, and design elements to suit your brand. No coding required—just simple, intuitive controls. Perfect for showcasing information in a clear, professional way on any page.

Key Features of a Info Cards Module :

✅ 3 Unique Layout Options – Choose from three beautifully crafted slider layouts to match any design style.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Hover & Animation Effects – Engage users with smooth hover states, transitions, and subtle animations.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

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

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Info Cards, select your preferred layout (e.g., Layout 1, Layout 2 or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a icon, title and description 3 card format.
• Layout 2 : The layout features a image, title, description CTA with hover animation card.
• Layout 3 : The layout includes a image column, title, description card format.

Card Column Content Icon, image, Title, Description & CTA : 

You can change the Icon, Image, Title, Description & CTA with show/hide also in Layout One, And Call-to-Action (CTA) with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Icon, Image, Title, Description and CTA
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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.

Card Column Setting :

You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border, corners and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
• Box Shadow
   Apply shadows to create a sense of elevation.

Card Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

We hope you enjoy using our info cards 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.

Make a stunning first impression with Hero Banner Pro, a flexible and modern hero section designed for high-converting landing pages and websites. This module lets you highlight your product, service, or brand message with engaging headlines, call-to-actions, visuals, and performance-driven counters.

With 3 ready-to-use layouts (Layout 1, Layout 2, and Layout 3), you can instantly switch designs to match your website’s style — no coding required. Built for responsiveness, customization, and ease of use, Hero Banner Pro ensures your hero section looks great on every device.

Key Features of a Hero Banner ProModule :

• 🎨 Multiple Layout Options – Choose from Layout 1, Layout 2, or Layout 3 with a simple setting.
• ✍️ Customizable Headline & Description– Add engaging titles, and supporting text.
• 🔘 Flexible CTA Button – Add call-to-action buttons with custom styles and links.
• 🔢 Counter/Stats Section – Showcase metrics like users, satisfaction rate, or integrations.
• 📱 Responsive Design – Optimized for desktop, tablet, and mobile.
• 🎨 Background Styles – Gradient, image or solid color options.
• 🔧 Typography & Color Controls – Easily adjust fonts, sizes, and colors.
• ⚡ Lightweight & Fast – Clean code ensures quick load times.
• 🙌 User-Friendly – Built for marketers and businesses with no coding required.

How to Set Up the Use Hero Banner Pro 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 "Hero Banner Pro" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options : 

• Layout 1 – A clean two-column design featuring a heading, description, and call-to-action on the left, paired with an image on the right.

• Layout 2 – A content layout with a heading, description, CTA, and an integrated counter section for showcasing key stats.

• Layout 3 – A two-column design with a heading, description, CTA, and counter section on the left, balanced by an image on the right.

• Heading & Description
  Add and customize your main heading and supporting description text. Ideal for introducing your product, service, or key message.

• CTA Show/Hide
  Toggle the Call-to-Action button(s) on or off. Useful when you want a clean banner without buttons.

• CTA
  Configure your call-to-action button(s) with custom text, link, and style settings. Perfect for driving clicks and conversions.

• Image Column Show/Hide
  Show or hide the image/media column in the layout. Ideal if you want a text-only banner. It's show only in layout 1.

• Image Column
  Upload and manage the main banner image or illustration that appears in your layout.

• Left Side Below Image Enable (Layout 1 only)
  Enable or disable the secondary image option below the main content on the left side.

• Left Side Below Image (Layout 1 only)
  Upload and manage the secondary image that displays under the main content column when enabled.

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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 Setting :

The Heading & Description Settings in Hero Banner Pro allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices.

CTA Setting :

The CTA Setting offers full control over your call-to-action design, allowing you to customize typography for both desktop and mobile, adjust spacing, set background styles, configure borders with radius options, apply text transformations, enable box shadows, and fine-tune alignment—ensuring your CTA buttons are visually appealing, responsive, and conversion-focused.

• Desktop Typography – Customize font style, size, weight, and color for desktop view.

• Mobile Typography – Optimize CTA text appearance for mobile devices.

• Spacing – Adjust margins and padding for perfect button positioning.

• Background – Choose colors or gradients for the CTA background.

• Border – Define border style, width, and color.

• Border Radius – Round the edges for softer or pill-style buttons.

• Text Transform – Apply uppercase, lowercase, or capitalize styles.

• Box Shadow Enable – Add depth and emphasis with shadows.

• Alignment – Control the CTA button’s alignment (left, center, right).

List Section Setting :

The List Section Setting allows you to design visually appealing layouts by customizing background styles, borders, and corner shapes, while also giving control over spacing, alignment, and maximum width—ensuring the section remains structured, responsive, and aligned with the overall page design. It's only show in layout 2 & 3.      

• Background – Customize section background with solid colors or gradients.

• Border – Define style, thickness, and color for section borders.

• Corner – Adjust border radius for rounded or sharp section edges.

• Spacing – Control padding and margins for balanced layout.

• Alignment – Position content left, center, or right for best visual impact.

• Max Width – Set the maximum width to maintain consistency across devices.

List Content Setting :

The List Content Setting gives you control over both the main numeric values and their supporting subtext, allowing you to style statistics like user counts, percentages, and achievements in a way that makes them stand out while ensuring the descriptive text remains clear and consistent. It's only show in layout 2 & 3.  

• Desktop Typography – Adjust font size, weight, color, and style for larger screens.

• Mobile Typography – Customize text appearance specifically for mobile devices.

• Text Transform – Control capitalization (uppercase, lowercase, capitalize).

Image Column Setting :

The Image Column Setting allows you to control the visual appearance of the image used in the right column. You can adjust the Height to define how tall the image should appear, configure the Corner options to set border-radius for sharp or rounded edges, and manage Spacing to control the padding or margin around the image, ensuring it aligns perfectly within the layout. It's only show in layout 1 and 3.

Left Side Image :

The Left Side Image setting lets you control the appearance and placement of the image displayed on the left side of the layout. You can adjust the Height/Width to resize the image proportionally and use the Position option to align it precisely within the section, ensuring it complements the heading and description for a balanced design.

We hope you enjoy using our hero banner pro 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.

Turn your pricing section into a high-converting sales tool—without writing a single line of code.
Pricing Plans Premium lets you showcase, customize, and update your plans in minutes. Flexible layouts, currency toggles, and category-based pricing make it easy for customers to find the perfect fit. Drag-and-drop controls, interactive animations, and instant updates create a smooth buying experience that scales with your business growth.

Key Features :

✅ Monthly & Yearly Toggle – Seamless switch between billing cycles.

✅ 3 Flexible Layouts – List, or accordion views adapt to any design style.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Easy to Integrate – Simple setup and integration into any page or theme.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Category-Based Pricing – Organize plans by service category.

How to Set Up the Pricing Plans Premium 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 "Pricing Plans Premium" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Easily select your preferred layout (e.g., Plan Tab View, Tabbed View with toggle, or Dark View) to showcase your pricing in a format that matches your brand and content flow. Effortlessly reorder plans, switch between monthly and yearly billing, and adjust categories to create the ideal browsing experience. Whether you’re offering a few packages or managing a full suite of services, this module ensures a seamless, customizable, and engaging pricing journey for your customers.

Options : 

• Layout 1 : The layout features a  included list Content with plan tab format.
• Layout 2 : The layout features a Tabs, toggle Monthly, Yearly & currency toggle with plan cards.
• Layout 3 : The layout includes a Tabs, Toggle with cards format.

• Fully Customizable Sub heading & Headings
• Show/Hide Toggle Option
  
  
  

Tab & Toggle : 

Quickly guide visitors to the right plan using the built-in Tabs and Toggle controls. Users can switch between categories like CRM, Development, or Marketing & Sales, and instantly toggle between Monthly and Yearly pricing — all in real time without page reloads. These intuitive navigation options make comparing plans effortless, delivering a faster, clearer, and more personalized decision-making experience. And show hide also.

You can show/hide tab items. And when all tab items are hidden, only the plan cards of the first tabs will be shown.

Plan Cards : 

Each plan card is fully customizable, allowing you to showcase key role details in a clean and engaging format. Include a compelling title, price, label, description and CTA. All content is managed directly in HTML for simple updates without touching the code logic. And you can add max 5 deferent plan cards according to tab items.

Plan Table

Easily customize your pricing tables to match your brand and business needs. Adjust column labels, reorder features, and highlight popular plans to guide customer choices. Add or remove rows with ease, control text alignment, and style borders, backgrounds, and typography — all without touching code. Whether you’re showing three simple tiers or a detailed enterprise comparison, the Plan Table customization tools ensure your pricing is always clear, attractive, and conversion-focused. You can add max 5 plans and also set table default show. 

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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

Easily style your pricing headings and descriptions to create the perfect first impression. Adjust font size, weight, and color, fine-tune spacing, and align text for maximum impact. Add compelling subheadings or supporting descriptions to highlight value and guide visitors toward the right choice. With flexible customization, your headings and descriptions stay on-brand, clear, and visually engaging — ensuring your pricing section speaks directly to your audience.

Tabs and Toggle – Styling Options

Customize the look and feel of your Tabs and Toggles to match your brand identity. Adjust colors, typography, and spacing, add hover and active state effects, and choose between rounded or square styles for a polished finish. Control the size and alignment for both desktop and mobile, ensuring smooth navigation across all devices. With flexible styling options, your Tabs and Toggles stay intuitive, attractive, and perfectly on-brand.

Card Column Setting :

You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border and corners to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Card Content Setting :

Take full control over your card content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

Plan Table :

Style your Plan Table to perfectly align with your brand. Customize colors for headers, rows, and borders, adjust font sizes and weights, and fine-tune spacing for a clean, readable layout. Add highlight styles to feature your most popular plans, or apply alternating row colors for better visual flow. With full control over design elements, your pricing table remains clear, professional, and visually engaging on any device.

We hope you enjoy using our pricing plans premium 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.

Turn your careers page into a polished recruiting engine—without touching code.
Job Search and Category Premium lets you publish, filter, and promote open roles in minutes. Drag-and-drop controls, smart search, and one-click applications create a seamless candidate journey that scales with your hiring needs.

Key Features :

✅ Advanced Search & Filters – Title, department, location, and keyword filters help visitors zero-in on the perfect role.

✅ 3 Flexible Layouts – List, grid, or accordion views adapt to any design style.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Easy to Integrate – Simple setup and integration into any page or theme.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Category Tabs & Badges – Highlight “Remote,” “Hot,” or “New” openings with eye-catching labels.

How to Set Up the Job Search and Category Premium 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 "Job Search and Category Premium" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Easily select your preferred layout (e.g., Grid View, Tabbed View, or Stacked View) to display job roles in a format that suits your brand and content structure. Effortlessly reorder job posts and adjust categories to create the ideal browsing experience. Whether you're listing a few roles or managing a growing team, this module ensures a seamless, customizable, and engaging job search experience for your users.

Options : 

• Layout 1 : The layout features a top banner with job post's format.
• Layout 2 : The layout features a left sticky box with grid post's.
• Layout 3 : The layout includes a top tab's, location, search bar and bottom post's column format.

• Fully Customizable Sub heading & Headings
• Show/Hide Toggle Option
  
  
  

Search Bar, Location and Category : 

Quickly connect job seekers with the right opportunities using the built-in Search Bar, Location dropdown, and Category tabs. Users can type their desired role, select a specific location, or filter by job categories like Product Design, Marketing, and Development — all in real-time without page reloads. These intuitive filters help streamline the job discovery process and deliver a faster, more personalized experience.

Job Post : 

Each job post is fully customizable, allowing you to showcase key role details in a clean and engaging format. Include a compelling job title, category badge, location, employment type, and a detailed description under "About the Job & Role." With support for bullet points, highlights, and structured formatting, every post is easy to read and optimized for candidate engagement. All content is managed directly in HTML for simple updates without touching the code logic.

Popup Content and Form

Enhance user interaction with optional popup content and integrated forms for each job post. When enabled, candidates can click on a job to View Job details directly within a styled popup—keeping them on the page without disrupting the browsing flow. The form can be customized to collect applicant information like name, email, resume upload, and more. Fully compatible with HubSpot forms, this feature makes applying seamless, trackable, and conversion-friendly.

Please select your form

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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.

Search Bar, Location, and Category – Styling Options

Easily tailor the look and feel of the search interface to match your brand. Customize typography (font family, size, weight), input spacing, border radius, and colors for both the Search Bar and Location dropdown. The Category tabs are fully styleable — modify tab alignment. Whether you're aiming for a sleek modern look or a bold branded style, you have full control to ensure visual consistency across your site.

Post Column Setting :

You have full control over customizing the post column box to align with your design preferences. Adjust the background, spacing, border and corners to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Post Content Setting :

Take full control over your post content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

Popup Content :

Fully customize the appearance of your job detail popups to align with your brand. Control typography, padding, and background color, for a clean and professional presentation. Adjust style the close button and form elements for consistent design. Responsive by default, the popup adapts seamlessly to mobile and tablet views—ensuring an elegant user experience across all devices.

We hope you enjoy using our job search and category premium 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.

The Infinity Logos Slider is a smooth, continuously scrolling carousel crafted to showcase brand logos, client partnerships, or sponsor affiliations in a clean and engaging format. With its infinite loop animation and dual-direction sliding rows, this responsive module adds dynamic visual movement to your page. Perfect for building trust and brand authority, the slider elegantly highlights your collaborations, making your website look polished and professional.

Key Features Infinity Logos Slider Module :

✅ Endless Looping Animation: Logos slide infinitely without interruption, creating a seamless and professional visual flow.

✅ Dual-Direction Rows: Supports multiple rows with independent directions—top row left-to-right, bottom row right-to-left—for dynamic motion.

✅ Pause on Hover: Slider automatically pauses when hovered, allowing users to view logos without distraction.

✅ Fully Responsive: Works seamlessly on all devices (desktop, tablet, mobile).

✅ Infinity Auto-Scrolling: Smooth auto-slide.

✅ Fully Customizable Design: Easily adjust spacing, background color, and padding directly within the module settings.

✅ Lightweight & Fast: Optimized for speed and performance.

How to Set Up the Infinity Logos Slider Module in HubSpot :

1. In the main dashboard, navigate to the Content tab and select either Website Pages or Landing Pages, depending on where you want to add the service section.

2. Choose the page where you want to apply the module.

3. Search for "Infinity Logos Slider" and drag and drop the module into the desired location on your page

Module Defaults Options:

Layout ID :

Heading/Description & CTA : 

Logos Section :

Users can customize the repeat column logo as per their choice. They can also logo show/hide if not required.

Module Style Options: 

Module Setting :

Adjust the margins, padding, background colors, and container width to customize the module's appearance. This flexibility lets you refine the layout and aesthetics, creating a visually appealing, functional, and user-friendly design.

Heading & Description Setting :

Users can customize the spacing of the heading and adjust its typography, including color, font size, weight, alignment and line height. These settings apply to both mobile and desktop views, ensuring a personalized and visually cohesive design across all devices.

CTA Setting :

Users can customize the CTA background color, line height, and spacing for both desktop and mobile views. They can also adjust text transform, alignment, and box shadow, as well as add hover colors for a more dynamic design.

Showcase your most important metrics with engaging animated counters that activate on scroll. Whether it's sales numbers, user growth, or performance stats, this module makes data visually appealing. Fully customizable with labels, colors, and layout options — no coding required. Perfect for dashboards, landing pages, or reports that need a bold, modern touch.

Key Features :

✅ Fully Responsive Across All Devices:
The counter adapts seamlessly to mobile, tablet, and desktop screens, ensuring a consistent user experience no matter how visitors view your site.

✅ Animated Count-Up Effect:
Numbers smoothly animate from zero to their target value as users scroll, drawing attention to your key stats and achievements.

✅ Customizable Number & Labels:
Easily add number and descriptive labels to each stat block to enhance clarity and visual appeal.

✅ Flexible Layout Options:
Choose between horizontal or vertical layouts and adjust spacing to best fit your design.

✅ Prefix & Suffix Support:
Add currency symbols, percentage signs, or custom text before or after numbers to match your content needs.

✅ Style Control in HubSpot Editor:
Customize fonts, colors, backgrounds, and borders directly within the HubSpot design editor — no coding needed.

✅ Scroll Trigger Animation:
Counters only animate when they enter the viewport, improving performance and user engagement.

✅ Lightweight & Fast Loading:
Built with performance in mind, ensuring smooth animations without slowing down your page.

Setting Up the Stats Number Counter Module in HubSpot : 

1. In the main dashboard, navigate to the Content tab and select either Website Pages or Landing Pages, depending on where you want to add the service section.

   

2. Choose the page where you want to apply the module.

   

3. Search for "Stats Number Counter" and drag and drop the module into the desired location on your page

   

Module Defaults Options: 

Layout ID :

Layout Options :  

For stats number counter module, select your preferred layout (e.g., Layout 1, Layout 2, or Layout 3). You can effortlessly rearrange the cards within the chosen layout to create the ideal content flow.

Options : 

• Layout 1: The layout features a heading and description with four counter columns, number, title and content.
• Layout 2: The layout features a heading and description with four counter columns, number, title and content.
• Layout 3: The layout features a sub heading, heading and description with four counter columns, number, title and content with right column image.

Sub Heading, Heading & Description : 

Counter Columns :  

You can easily customize the counter cards in HubSpot by adjusting the following settings.

Options : 

• Column Options: Choose and arrange card layouts with options for one, two, three, or four columns.
• Counter Repeater: Easily add multiple animated counters using the repeater function. Customize each with unique numbers, title and content to highlight multiple stats in one seamless, responsive, and visually engaging section. 

Module Style Options: 

Module Setting :

Adjust margins, padding, background colors, and container width to achieve your preferred design and layout.

Sub Heading, Heading & Description Setting :

Users can easily customize alignment, spacing, and max-width for precise layout control. Typography options like font size, weight, and line height are fully adjustable. All settings are optimized for both desktop and mobile views for a seamless experience.

Users can customize the background color, spacing, border and corner as well as apply box shadows and borders to align with their branding. Additionally, they can set a background hover color for interactive effects.

Users can customize the typography of the title and counter value and paragraph to align with their content, adjusting font size, weight, and line height for both mobile and desktop views. They can also modify spacing.

We hope you find our Stats Number Counter module valuable in enhancing both user experience and marketing effectiveness. At Code Accelerator, we're dedicated to making your HubSpot experience outstanding. For custom HubSpot modules or personalized HubSpot CMS and CRM setups, please feel free to reach out to Contact Us.

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.

Motion Cards is a dynamic module designed to showcase your content with smooth entrance animations and hover effects. Easily highlight services, features, or team members using stylish, responsive cards. Customize layout, icons, text, and animations for an engaging visual experience.

Key Features of a Motion Cards Module :

✅ Interactive Hover Effects – Enhance user engagement with smooth and dynamic hover animations.

✅ Customizable Layouts – Choose and adjust card layouts to suit your content and design needs.

✅ Responsive Design – Looks great and functions perfectly across all screen sizes.

✅ Content Customization – Easily edit titles, descriptions, icons, and images as per your needs.

✅ Styling Options – Personalize colors, fonts, spacing, and card shapes with ease.

✅ Call-to-Action (CTA) Integration – Add CTAs to drive user interaction and conversions.

✅ Performance Optimization – Lightweight design ensures fast loading and smooth performance.

✅ Motion Animation – Apply entrance and hover-based animations for a modern visual impact.

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

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Motion Cards, select your preferred layout (e.g., Layout 1, Layout 2, Layout 3 or Layout 4). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a subheading, heading, CTA and service card format.
• Layout 2 : The layout features a heading, description CTA with hover animation card.
• Layout 3 : The layout includes a subheading, heading with animation card and CTA format.
• Layout 4 : The layout includes a heading, description with hover animation card and CTA format.

• Fully Customizable Sub heading, Headings & Description
• Show/Hide Toggle Option
  
  
  
  

Card Column Content Icon, Title, Description & CTA : 

You can change the Icon, Title, Description & CTA with show/hide also in Layout One, And Call-to-Action (CTA) with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Icon, Title, Description and CTA
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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.

Card Column Setting :

You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border, corners and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Box Shadow
   Apply shadows to create a sense of elevation.

Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon & Image
  Customize the icon & image size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

We hope you enjoy using our motion cards 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.

Boost customer support and engagement with the "FAQ Premium Module" for HubSpot. Featuring tabbed categories, rich content answers, live search, and responsive accordion design. Easily customizable with zero coding—perfect for modern, user-friendly websites.

Key Features of a FAQ Premium Module :

✅ Custom Tab Titles – Easily add and label multiple tabs.

✅ Accordion Functionality – Expands or collapses answers on click, keeping the layout clean and user-friendly. Only one     section opens at a time to reduce clutter.

✅ Horizontal & Vertical Tab Layouts – Choose between horizontal or vertical tab orientation.

✅ Fully Responsive Design – Optimized for all devices (desktop, tablet, mobile).

✅ Extensive Style Customization – Tab background (solid or gradient), Border styles, Padding/margins, Active/inactive states

✅ Easy to Use with Drag & Drop – Built for HubSpot’s drag-and-drop page editor. No coding required to configure or style tabs

✅ Reusable and Scalable – Add multiple tab sections to a page or reuse across templates.

How to Set Up the FAQ Premium 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 "FAQ Premium" and drag and drop the module intothe desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Easily organize your content with the "FAQ Premium" module — ideal for showcasing services, FAQs, or product details. This user-friendly layout allows visitors to switch between tabs without page reloads, improving engagement and readability. Clean design ensures information is structured and accessible. Perfect for enhancing UX on any HubSpot landing or website page.

Options : 

• Layout 1 : Question Types and Support Options - Supports various formats like general queries, product-specific, or policy-based FAQs—tailored to meet different customer intents.
• Layout 2 : Horizontal Tabs with Accordion - Easily navigate categorized FAQs using horizontal tabs with collapsible answers below each tab.
• Layout 3 : Accordion with More Questions + Email CTA - Display FAQs in an accordion layout with a prompt and CTA button to email for more questions.
• Layout 4 : Vertical Tabs and Accordions - Organize FAQs by category using vertical tabs with collapsible answers for each section.

• All Layout are ideal for building a clean and organized knowledge base. Both layouts allow you to customize headings and descriptions, helping you clearly label articles, topics, or help sections.
• You can also enable a show/hide feature, giving users the option to expand or collapse content as needed—keeping the interface neat and user-friendly.
  
  

Tabbing & Accordion Customizable : 

Customize your Tabs and Accordions with full control over visibility and labels. Easily manage show/hide settings, update text, and add more sections as needed.

• Show/Hide Tabs & Questions – Toggle visibility for any tab or question without removing content.
• Edit Tab & Accordion Text – Change titles and question labels instantly to match your messaging.
• Add More Tabs & Accordions – Easily expand your FAQ by adding new tabs and questions based on your content needs.

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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.

Tabbing & Accordion Column Setting :

You have full control over customizing the tabbing & content box to align with your design preferences. Adjust the background, spacing, border, corners and to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color & gradient for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
• Text Alignment
  Adjust text alignment (left, center, or right) to match your layout and reading flow.

Tabbing, Accordion & All Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, tabbing, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Tabbing 
  Customize the Tabbing background, corner, border, active effect, hover and typography.
• Image & Icon
  Customize the image size and corner to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA background color, text color, spacing, border, corner, alignment and typography.
  

We hope you enjoy using our FAQ Premium 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.

Organize your website content with the "Tab with Content" module for HubSpot. Easily add customizable tabs, rich text, and responsive layouts. Choose from horizontal or vertical alignment and style them to match your brand—no coding needed. Perfect for clean, user-friendly content display.

Key Features of a Tab with Content Module :

✅ Custom Tab Titles – Easily add and label multiple tabs.

✅ Rich Text Content Area – Each tab supports a rich text editor.

✅ Horizontal & Vertical Tab Layouts – Choose between horizontal or vertical tab orientation.

✅ Fully Responsive Design – Optimized for all devices (desktop, tablet, mobile).

✅ Extensive Style Customization – Tab background (solid or gradient), Border styles, Padding/margins, Active/inactive states

✅ Easy to Use with Drag & Drop – Built for HubSpot’s drag-and-drop page editor. No coding required to configure or style tabs

✅ Reusable and Scalable – Add multiple tab sections to a page or reuse across templates.

How to Set Up the Tab with Content 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 "Tabbing with Content" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Easily organize your content with the "Tab with Content" module — ideal for showcasing services, FAQs, or product details. This user-friendly layout allows visitors to switch between tabs without page reloads, improving engagement and readability. Clean design ensures information is structured and accessible. Perfect for enhancing UX on any HubSpot landing or website page.

Options : 

• Layout 1 : Vertical Tabs - Tabs appear in a vertical list on the left, with content on the right. Great for longer tab titles or detailed information. Provides a sidebar-like navigation that's perfect for documentation or comparison pages.
• Layout 2 & 3 : Horizontal Tabs - Tabs are displayed side-by-side at the top, making it easy for users to switch between sections. Ideal for showcasing features, services, or content categories in a clean, linear format. Works best on wider screens.

• Layout 1 and Layout 2 are ideal for building a clean and organized knowledge base. Both layouts allow you to customize headings and descriptions for each tab, helping you clearly label articles, topics, or help sections.
• You can also enable a show/hide feature, giving users the option to expand or collapse content as needed—keeping the interface neat and user-friendly. Whether you prefer the structured sidebar of Layout 1 or the horizontal flow of Layout 2, these layouts provide a flexible way to manage and present helpful content.
  
  

All Tabbing & Content Customizable : 

Create an organized, interactive experience with customizable tabs that allow users to add and manage rich content with ease. Each tab includes:

• Tab Title - Short and clear titles help users navigate between sections. Perfect for labeling topics, categories, or content areas.
• Rich Content Area (inside each tab) - 
  Headings - Use headings H1 to H6
  Descriptions - Provide detailed explanations or instructions for users.
  Bullet or Numbered Lists - Perfect for steps, tips, or grouped information.
  Images - Add product screenshots, infographics, or visual instructions to enhance clarity.

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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.

Tabbing & Content Column Setting :

You have full control over customizing the tabbing & content box to align with your design preferences. Adjust the background, spacing, border, corners and to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.

Tabbing & Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, tabbing, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Tabbing 
  Customize the Tabbing background, corner, border, active effect, hover and typography.
• Image
  Customize the image size and corner to match your brand’s color palette and enhance the overall design.
• List Content
  Customize the list content color, text color, spacing, list style and typography.
  

We hope you enjoy using our tab with content 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.

Create a personalized "Service Animation Cards" section with ease. This flexible module lets you customize styles, layouts, and design elements to match your brand. No coding needed—just simple, intuitive controls. Perfect for adding a professional touch to your site.

Key Features of a Service Animation Cards Module :

✅ 3 Unique Layout Options – Choose from three beautifully crafted slider layouts to match any design style.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Easy to Integrate – Simple setup and integration into any page or theme.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

How to Set Up the Service Animation Cards 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 "Service Animation Cards" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout Options :  

For the Service Animation Cards, select your preferred layout (e.g., Layout 1, Layout 2 or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a subheading, heading, CTA and service card format.
• Layout 2 : The layout features a heading, description CTA with hover animation card.
• Layout 3 : The layout includes a subheading, heading with animation card and CTA format.

• Fully Customizable Sub heading & Headings
• Show/Hide Toggle Option
  
  
  

Card Column Content Icon, Title, Description & CTA : 

You can change the Icon, Title, Description & CTA with show/hide also in Layout One, And Call-to-Action (CTA) with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the Icon, Title, Description and CTA
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors 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.

Card Column Setting :

You have full control over customizing the card column box to align with your design preferences. Adjust the background, spacing, border, corners and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Style
   Choose from various styles like solid, dashed, or dotted.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
• Box Shadow
   Apply shadows to create a sense of elevation.

Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  

We hope you enjoy using our service animation cards 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.

Create a personalized "About Me" section with ease. This flexible module lets you customize styles, layouts, and design elements to match your brand. No coding needed—just simple, intuitive controls. Perfect for adding a professional touch to your site.

Key Features of a About Me Module :

✅ 3 Unique Layout Options – Choose from three beautifully crafted slider layouts to match any design style.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Personal Introduction  – A brief overview highlighting who you are, your background, and personality.

✅ Professional Summary – A snapshot of your career, skills, and areas of expertise.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Easy to Integrate – Simple setup and integration into any page or theme.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

✅ Call to Action (CTA) – A friendly nudge like “Contact me” or “Book a Consultation” with a button.

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

Module Defaults Options: 

Layout ID :

Layout Options :  

For the About Me, select your preferred layout (e.g., Layout 1, Layout 2 or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a Image with experience info, subheading, heading, description and CTA format.
• Layout 2 : The layout features a Image, subheading, heading and description with listing items and CTA.
• Layout 3 : The layout includes a subheading, heading and description, with CTA and Image column format.

You can change the subheading, heading and description text with show/hide also in Layout One, And Call-to-Action (CTA) with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the subheading, heading, description and CTA
• Customize the image column content ( images, text, etc.)
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margins, padding, container width and background colors 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.

Text Column Setting :

You have full control over customizing the column box to align with your design preferences. Adjust the background, spacing and corners to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
  
  

Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for subheading, headings, descriptions, listing content and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and color to match your brand’s color palette and enhance the overall design.
• CTA
  Customize the CTA Button line background color, text color, spacing, box shadow, corner and typography.
  
• Vector
  You can show and hide vector image according to your preferences.
• Image
  Customize the Image size and corner according to your preferences.
  
• About Information Section
  Customize the information column and inner content like name and description adjust typography, spacing and alignment.
  

We hope you enjoy using our about me 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.

Showcase client feedback in style with the Infinity Testimonial Slider module. Smooth, continuous transitions highlight testimonials in an engaging, modern format that builds trust and enhances credibility.

Key Features of a Infinity Testimonial Slider Module :

✅ 3 Unique Layout Options – Choose from three beautifully crafted slider layouts to match any design style.

✅ Fully Mobile Responsive – Seamlessly adapts to all screen sizes for the best viewing experience.

✅ Infinite Auto Slide – Testimonials slide automatically in a smooth, endless loop.

✅ Mobile Slide Dots Option – Optional navigation dots enhance mobile usability.

✅ Modern & Clean Design – Sleek, contemporary styling fits perfectly into any modern website.

✅ Easy to Edit – Quickly customize content, styles, and settings without hassle.

✅ Easy to Integrate – Simple setup and integration into any page or theme.

✅ Optimized for Performance – Lightweight and fast for smooth transitions and loading.

How to Set Up the Infinity Testimonial Slider 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 "Infinity Testimonial Slider" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Infinity Testimonial Slider, select your preferred layout (e.g., Layout 1, Layout 2 or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a subheading, heading and CTA, infinity slider cards format.
• Layout 2 : The layout features a heading and description, with client review infinity slider cards.
• Layout 3 : The layout includes a heading and description, with feedbacks slider cards in a two-row format.

You can change the heading and description text with show/hide also in Layout One, And Call-to-Action (CTA) with the option to show or hide it, allowing for a flexible and customizable user experience.

• Update the heading, description and CTA
• Customize the slider column content (text, images, etc.)
• Easily manage and organize how content is shown based on user interaction

Module Style Options: 

Module Setting :

Adjust the margins, padding and background colors 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 Setting :

In this module, you have full flexibility to customize the heading and description to perfectly align with your design vision. You can easily adjust the spacing around the text, apply text transformations such as uppercase or lowercase, define the maximum width for better content flow, and set the alignment (left, center, or right) to create the ideal layout. These options ensure your content remains visually balanced and responsive across all devices.

• Text Styling Options
  Set font size, color, spacing, and apply text transforms like uppercase or capitalize.
• Responsive Alignment
  Align your content (left, center, or right) for both desktop and mobile devices.
• Max Width Control
  Limit the width of the heading and description to maintain clean, readable layouts.
• Spacing Adjustments
  Add padding or margins around your content to create visual balance.

Slider Card Setting :

You have full control over customizing the column box to align with your design preferences. Adjust the background, spacing, border, corners, and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color, gradient, or even an image background for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Styling
  Set borders with customizable width, color, and style to frame your content attractively.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
• Box Shadow
  Add depth with a box shadow to make your content appear elevated or to create a subtle floating effect.

Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, icon size to make them stand out. Whether you’re updating typography, or configuring borders every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon
  Customize the icon size and alignment to match your brand’s color palette and enhance the overall design.
• Clients Info
  Customize the profile image, name and website.

We hope you enjoy using our infinity testimonial slider 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.

A feature-rich, responsive event listing system designed to give users a seamless way to explore upcoming happenings. Perfect for organizations, communities, and brands that run multiple events across locations and timeframes.

Key Features of a Events List Premium Module :

🧩4 Layout Options

• Choose from four professionally designed layouts.

• Tailored for different use cases — from compact card views to full-detail layouts.

🎯 Advanced Filtering

Each layout includes built-in filters for:

• Location – Narrow events by city, region, or venue.

• Month – View events based on upcoming or specific months.

• Category – Filter by event types (e.g., Webinar, Workshop, Conference).

• Tab Option – Choose tabbed filtering for clean, fast navigation between categories.

📱 Fully Responsive

• Mobile-first design adapts beautifully across devices.

• Ensures touch-friendly interaction and smooth filtering on smaller screens.

How to Set Up the Events List Premium 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 "Events List Premium" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Event list, select your preferred layout (e.g., Layout 1, Layout 2, Layout 3 or Layout 4). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a heading and description, along with both filter and tab options, displayed in a three-column format.
• Layout 2 : The layout features a subheading, heading, and description, with both filter and tab options, displayed in a three-column format enhanced by hover content effects.
• Layout 3 : The layout includes a heading and description, with both filter and tab options presented in a two-column format for clear and organized content display.
• Layout 4 : The layout features a heading and description, along with both filter and tab options, arranged in a clean single-column format for streamlined content presentation.

You can easily update the heading and description, customize the column content to match your needs, and choose between tab or filter options for a more dynamic and user-friendly content display.

• Update the heading and description
• Customize the column content (text, images, CTAs, etc.)
• Choose between tab or filter options to display content
• Easily manage and organize how content is shown based on user interaction

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 Setting :

In this module, you have full flexibility to customize the heading and description to perfectly align with your design vision. You can easily adjust the spacing around the text, apply text transformations such as uppercase or lowercase, define the maximum width for better content flow, and set the alignment (left, center, or right) to create the ideal layout. These options ensure your content remains visually balanced and responsive across all devices.

• Text Styling Options
  Set font size, color, spacing, and apply text transforms like uppercase or capitalize.
• Responsive Alignment
  Align your content (left, center, or right) for both desktop and mobile devices.
• Max Width Control
  Limit the width of the heading and description to maintain clean, readable layouts.
• Spacing Adjustments
  Add padding or margins around your content to create visual balance.

Search Filter Or Tab Setting :

You can fully customize the typography for your tabs or search elements to create a seamless design that matches your brand. This feature gives you the flexibility to control various typographic styles and ensure your content is both visually appealing and easy to read across all devices.

• Typography Control
  Adjust font styles, sizes, weights, and colors to ensure consistency with your overall design.
• Spacing Options
  Modify line height, and padding around text to improve readability and enhance the layout.
• Hover & Active States
  Customize hover effects and active tab states with different styles, colors, or underlines for a dynamic user experience.
• Font Transformations
  Apply text transforms (uppercase, lowercase, capitalize) for added emphasis and style consistency.

Column Setting :

You have full control over customizing the column box to align with your design preferences. Adjust the background, spacing, border, corners, and box shadow to create the perfect look for your layout. Tailor these elements to ensure your content stands out and blends seamlessly with the rest of your design.

• Background Customization
  Choose a solid color, gradient, or even an image background for your column box.
• Spacing Control
  Adjust the padding and margin to create the ideal distance between elements and prevent overcrowding.
• Border Styling
  Set borders with customizable width, color, and style to frame your content attractively.
• Corner Radius
  Round the corners to create smooth, modern edges for a softer design.
• Box Shadow
  Add depth with a box shadow to make your content appear elevated or to create a subtle floating effect.

Content Setting :

Take full control over your column content by customizing the typography, spacing, and alignment to match your brand's design style. You can adjust text transform options, fine-tune icon colors, and style the Call-to-Action (CTA) elements to make them stand out. Whether you’re updating typography, adding backgrounds, or configuring borders and hover effects, every detail can be tailored for a cohesive and visually appealing look.

• Typography Customization
  Adjust font size, style, and color for headings, descriptions, and other text elements to create a consistent visual identity.
• Spacing & Alignment
  Control padding, margin, and text alignment to ensure optimal content positioning and balance.
• Text Transform
  Modify text case and style (uppercase, lowercase, capitalize) for better readability and emphasis.
• Icon Color
  Customize the icon color to match your brand’s color palette and enhance the overall design.
• CTA Styling
  Tailor the appearance of your Call-to-Action buttons, including typography, background color, border, corner radius, and hover effects to make them more engaging and interactive.

We hope you enjoy using our events list premium 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.

In today’s digital world, giving away free eBooks is a fantastic way to connect with your audience and generate leads! Creating a friendly "Download eBook Now" module makes it super easy for people to access valuable content while helping you capture those important leads.We're excited to help you create your very own custom HubSpot module for downloading eBooks. It’s super simple, and we’ll walk you through each step. Let’s dive in! 

⚙️ Key Features at a Glance

✅ 4 layout variations with individual styling controls

✅ Fully responsive design across mobile, tablet, and desktop

✅ Upload your eBook image or icon for visual appeal

✅ Clean code and developer-friendly structure

🧩 4 Ready-to-Use Layouts – Customize Your Way!

Our module offers four fun layout options, each designed to suit different needs, looks, and sections of your page:

1. Two Column  
   Enjoy a combination of left side content with a CTA and a neat list style.

2. Two Column with Image  
   Eye-catching left side image paired with engaging right side content that includes a heading and CTA, topped off with a lovely       image below.

3. 4 Column Cards
   Create a vibrant layout with four cards featuring a stylish design, complete with an eye-catching image on top and a download     icon below.

4. Two Column Cards
   Two beautifully designed cards with an attractive background! Each card has a left side image and a right side with text and a        compelling CTA to grab attention.

Every layout comes with its own style settings, making it super easy for you to personalize:

- Background and text colors
- Padding and spacing
- Button styles
- Typography 
- Image alignment and size

No design skills? No worries! Everything is easy to edit right in the HubSpot editor. Have fun customizing!

How to Set Up the Download eBook Now 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 "Download eBook Now" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Banner Pro, select your preferred layout (e.g., Layout 1, Layout 2, Layout 3, Layout 4 ). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a heading and description with repeatable list content and CTA , along with an image displayed on the right side for a balanced and engaging design.
  
• Layout 2 : Eye-catching left side image paired with engaging right side content that includes a heading and CTA, topped off with a lovely image below.
  
  
• Layout 3 :  Create a vibrant layout with four cards featuring a stylish design, complete with an eye-catching image on top and a download icon below.
  
  
• Layout 4 : Two beautifully designed cards with an attractive background! Each card has a left side image and a right side with text and a compelling CTA to grab attention.
  
  

Heading/Description & CTA Content : 

You can select and customize the column image according to your preferences, ensuring it aligns perfectly with your design.

Column Content :

In Layout 3, you can add column content with multiple repeatable Card, offering greater flexibility and dynamic layout options to suit your content needs.

Column Content :

In Layout 4, you can add column content with multiple repeatable content card, offering greater flexibility and dynamic layout options to suit your content needs.

Module Style Options: 

Module Setting :

Adjust the margins, padding, background , 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 spacing and adjust typography for the heading, description, and CTA. This includes modifying color, font size, weight, and line height for both mobile and desktop views—ensuring a personalized, visually cohesive design across all devices.

Left List Content Setting :

In Layouts 1, you can customize the left column list by setting the color, desktop and mobile typography  and spacing, allowing it to align seamlessly with your design preferences.

Image Column Setting :

Easily customize the image height for desktop and mobile view, and rounded corners to achieve the perfect look for your design. It's available in layout 1 and 2.

Content Column Setting :

Easily customize the image height for desktop and mobile view, and rounded corners to achieve the perfect look for your design. It's available in layout 3 and 4.

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

A Tabbed Info Display is a flexible and visually balanced structure where content is split into two vertical sections — typically for combining text, images, and interactive elements. It enhances clarity, storytelling, and user engagement.

Key Features of a Tabbed Info Display Module :

🧩 Multiple Layouts

• Various column orientations: text left/image right, image left/text right, centered content, staggered steps, etc.

• Adaptable for landing pages, product intros, service descriptions, and more.

📄 Content with List + Right Column Image

• Left column: bullet points, icons, or descriptive content.

• Right column: static or animated image (e.g., feature breakdown, benefits list).

🔢 Background Content with Number Value + Right Image

• Content appears over a background color or image.

• Includes numerical highlights (e.g., stats, KPIs) and supporting visuals in the right column.

🖼️ Content on Background Image with Multiple CTAs + Left Side Image

• Left column: product or hero image.

• Right column: background image, layered content, and multiple buttons for different user actions (e.g., "Learn More", "Get Started").

🔁 Repeating Content with Step-by-Step + Animated Images

• A vertically stacked, two-column layout with steps (1-2-3...) and accompanying animated images or icons.

• Great for onboarding flows, process explanations, or feature walkthroughs.

How to Set Up the Tabbed Info Display 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 "Tabbed Info Display" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Tabbed Info Display, select your preferred layout (e.g., Layout 1, Layout 2, Layout 3, Layout 4 or Layout 5). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a heading and description with repeatable list content, along with an image displayed on the right side for a balanced and engaging design.
• Layout 2 : The layout features a heading and description with repeatable list content with icon, along with an image displayed on the right side for a balanced and engaging design.
• Layout 3 : The layout features a heading, description, and multiple CTAs, with the option to include an image in the left column for added visual impact.
• Layout 4 : The layout features a heading, description, and CTA, with a two-column option. You can add a number value with a description on the left, and an image on the right for a visually appealing layout.
• Layout 5 : The layout features a step number, heading, description, and CTA, accompanied by an image on the right. Content can be repeated multiple times with smooth animations for an engaging user experience.

Heading/Description & CTA Content : 

You can add multiple list items with descriptions and icons, and choose to show or hide them based on your specific requirements. It's Available in layout 1 and 2.

In Layout 4, you can add a counter value and content in the left column, with the flexibility to show or hide them as needed.

You can select and customize the column image according to your preferences, ensuring it aligns perfectly with your design.

Column Content :

In Layout 5, you can add column content with multiple repeatable items, offering greater flexibility and dynamic layout options to suit your content needs.

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 spacing and adjust typography for the heading, description, and CTA. This includes modifying color, font size, weight, and line height for both mobile and desktop views—ensuring a personalized, visually cohesive design across all devices.

Left Column List Setting :

In Layouts 1, you can customize the left column list by setting the background color, border radius, border, and spacing, allowing it to align seamlessly with your design preferences.

Left List Content Setting :

In Layouts 1 and 2, you can customize the list title and description by adjusting typography, color, line height, spacing, and text transform to perfectly suit your design needs

Counter Content Setting :

In Layout 4, you can customize the typography of the left column's bottom content, including the value number and text. Adjust font size, line height, spacing, text transform, and apply a vertical border style to align with your design preferences.

Left Column Setting :

In Layout 4, you can set the background color, spacing, border, and border radius in the left column to match your desired styling and layout preferences.

Image Column Setting :

Easily customize the image height for desktop and mobile view, and rounded corners to achieve the perfect look for your design. It's available in layout 1, 2, 3 and 4.

Right Column Setting :

You can customize the right column by adjusting spacing, border radius, and border settings. Additionally, choose a background option—either an image or a solid color—to match your design preferences. It's available in layout 3.

Content Setting :

In Layout 5, you can customize the left column content typography for both desktop and mobile, including options for color, font size, spacing, text transform, and alignment to ensure a consistent and responsive design.

We hope you enjoy using our Tabbed Info Display 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.

A banner component is a versatile UI element used to highlight key messages, promotions, or branding on a website. It provides a visually appealing way to capture user attention and drive engagement.

Key Features of a Banner Pro Module :

1. Multiple Layouts

• Offers flexibility with various design structures banners.

• Can accommodate different content types like text, images, and pop video.

2. CTA Popup with Video

• A call-to-action button that triggers a video popup.

• Enhances user engagement by presenting multimedia content without leaving the page.

3. Background Video Banner

• A dynamic banner featuring an autoplay video as the background.

• Helps create a more immersive experience, perfect for storytelling or branding.

4. Two-Column Content with Video

• A hybrid layout that pairs descriptive content with an embedded video.
• Useful for product showcases, tutorials, or company introductions.

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

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Banner Pro, select your preferred layout (e.g., Layout 1, Layout 2, or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a heading, description, and multiple CTAs with link and popup options, along with an image for a dynamic and engaging design.
• Layout 2 : The layout includes a heading, description, and CTA. In the right column, you can add a HubSpot or YouTube video for an interactive user experience.
• Layout 3 : The layout features a heading, description, and CTA, with the option to add a background video for a dynamic and engaging visual experience.

Banner Content : 

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.

Heading & Description Setting :

Users can customize the module’s spacing and adjust the typography for the heading and description. 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.

CTA Setting :

Easily adjust typography and spacing for both desktop and mobile views. Enhance your design with custom colors, borders, rounded corners, and hover effects for a polished and interactive user experience.

Image Column :

Easily customize the image height, alignment, spacing, and rounded corners to achieve the perfect look for your design. It's available in layout 1.

Popup Setting :

Effortlessly adjust typography and spacing for both desktop and mobile views. Enhance your design with custom colors, borders, rounded corners, and hover effects for a visually appealing and interactive experience. It's available in layout 1.

Video Column Setting :

Easily customize the video height, corners, background, and spacing to match your design preferences. Available in Layout 2.

We hope you enjoy using our banner pro 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.

A Sliding Animation Cards module is a UI component that features cards moving in a sliding motion, often used for showcasing content like images, text, or product listings dynamically.

Key Features of a Sliding Animation Cards Module :

• Smooth Sliding Animation – Cards slide horizontally.

• Responsive Design – Adjusts based on screen size for mobile and desktop.

• Hover & Click Effects – Optional animations on interaction.

Use Cases

• Image Galleries

• Testimonial Sliders

• Product Showcases

• News & Blog Highlights

• Interactive Dashboards

How to Set Up the Sliding Animation Cards 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 "Sliding Animation Cards" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For Sliding Animation Cards, 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 includes three columns only, each featuring a heading, a description with a Call-to-Action (CTA), and a hover effect where the CTA appears with a smooth horizontal slide animation.
• Layout 2 : The layout includes two columns, each with a heading, a description, and a Call-to-Action (CTA) that appears with a smooth horizontal slide animation on hover, enhancing interactivity and engagement.
• Layout 3 : The layout features three columns, each containing a heading, a description, and a Call-to-Action (CTA) that smoothly slides in on hover, creating an engaging and interactive user experience.

Content Column :

You can add a minimum of 3 and a maximum of 3 columns, each containing a title, description, and Call-to-Action (CTA) within a repeater content structure for easy customization and consistency.

Module Style Options: 

Module Setting :

Easily adjust the margins, padding, background colors, and container width to achieve your desired look and feel. This flexibility allows you to fine-tune the layout and aesthetics, ensuring a visually appealing and user-friendly design.

Column Setting :

You can customize the Content Column by adjusting the background color, box shadow, spacing, and corner radius, allowing for a polished and visually appealing design.

Heading & Description Setting :

You can customize the typography for both the heading and description by selecting fonts, sizes, and styles that match your design preferences. Additionally, you can adjust spacing for both desktop and mobile views and set the text alignment for optimal readability and aesthetics.

CTA Setting :

You can customize the Call-to-Action (CTA) by adjusting the typography, font size, weight, color, background color, spacing, border, box shadow, and corner radius, ensuring it aligns perfectly with your design and branding.

We hope you enjoy using our sliding animation cards 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.

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.

An Image Gallery with Animation module is a visually appealing and interactive way to display images on a website or application. It enhances user engagement through smooth transitions, effects, and interactive animations.

Key Features of a Image Gallery with Animation Module :

• Image Display: Supports various image formats (JPEG, PNG, SVG, GIF, WebP

• Mobile-Friendly: Fully responsive design for different screen sizes. 
• SEO-Friendly: Supports image alt attributes and structured data.
• Customizable Styles : Modify colors, borders, and effects easily.
• Image Captions & Descriptions: Adds titles or descriptions for layouts.
• Click to Expand: Enlarges an image when clicked.

Use Cases :

• Portfolio Websites
• E-commerce Product Galleries
• Travel & Photography Blogs
• Corporate Showcases
• Social Media & Community Platforms

How to Set Up the Image Gallery with Animation 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 "Image Gallery With Animation" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Image Gallery with Animation, select your preferred layout (e.g., Layout 1, Layout 2, or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a heading, description, and CTA, along with a tabbed section displaying slider images for an interactive and visually engaging experience.
• Layout 2 : The layout includes a heading and description, along with an image slider featuring a zoom effect on the active image for an engaging visual experience.
• Layout 3 : The layout features a heading and description, complemented by an image click animation with smooth horizontal transitions for an engaging user experience.

Content Column Layout 1 & 3: 

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.

Column Setting :

Customize the content column by adjusting spacing, borders, corners, and background to match your design preferences. Available in Layout 1.

Column Content Setting :

Customize the heading, subheading, CTA, and image gallery by adjusting typography, spacing, alignment, and text transformation. Additionally, set the image corner radius, border, and height to match your design preferences.

Heading/Description & CTA Setting :

Users can customize the module’s spacing and adjust the typography for the heading and description. 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 2.

We hope you enjoy using our image gallery with animation 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.

A Parallax Module is a web design feature that creates an illusion of depth by making background elements move at a different speed than foreground elements while scrolling. This effect enhances user engagement and visual appeal. 

Key Features of a Parallax Module :

• Supports horizontal scrolling.

• Animate elements based on scroll position.

• Automatically adapts to different screen sizes.

• Allows disabling parallax effects on smaller devices to improve performance.

• Change overlay colors and opacity for better text readability.

• Use ready-made parallax layouts for faster design.

How to Set Up the Parallax 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 "Parallax" 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 includes a heading and description, multiple CTAs, and a parallax background image for an engaging visual experience.
• Layout 2 : The layout features a heading along with a horizontal column scroll displaying images, content, and CTAs for an interactive experience.
• Layout 3 : The layout includes a heading, description, CTA, and engaging image animations for a dynamic user experience.

Heading/Description & CTA :