Everything You Need to Know About Our HubSpot Modules.

Key Points is a flexible and modern value showcase module designed to highlight your company’s core strengths, features, or service pillars in a clean, structured grid layout.

The module helps you present information in a scannable, visually balanced format using customizable cards with icons, titles, and supporting descriptions.

It is ideal for showcasing:

• Company values
• Product features
• Service highlights
• Solution pillars
• Key differentiators

The Key Points module includes:

• A section heading (optional)
• A supporting top paragraph (optional)
• A responsive card grid layout
• Up to 3 cards per row (configurable)
• Unlimited card entries via repeater field

Each card contains:

• Icon or image
• Card title
• Description text

The layout automatically adapts for tablet and mobile devices to ensure optimal readability.

• Flexible grid layout (1–3 cards per row)
• Repeater-based card management
• Icon or image support for each card
• Customizable heading and description
• Background color or gradient support
• Optional card border and box shadow
• Fully responsive design
• Brand-aligned styling controls
• Clean, performance-optimized markup

The module provides advanced styling controls inside the HubSpot editor:

Section Settings

• Content wrapper width control
• Heading bottom spacing
• Module spacing (top & bottom padding)

Background Settings

• Solid background color
• Gradient background option

Card Styling

• Card background color
• Border toggle
• Box shadow toggle
• Card spacing
• Direction control (top-to-bottom layout)
• Cards per row (maximum 3)

All styling options are editable without writing custom CSS.

1. Navigate to your HubSpot account.

2. Go to the Design Tools section.

3. Select your template or page where you want to add the module.

4. Drag and drop the Key Points Module into your layout.

5. Customize the module settings to suit your design preferences.

6. Click Publish to apply changes.

Image Gallery With Filter is a modern, responsive gallery module designed to showcase images with dynamic category filtering and interactive hover overlays.

The module supports both square (1:1) and rectangle layouts, making it suitable for team showcases, portfolios, agency work, and corporate galleries.

The module includes:

▪ Dynamic category-based filtering

▪ Smooth hover overlay with customizable background color

 Title, subtitle, and description support (5-line limit)

▪ Optional CTA button and plus icon

▪ Square & rectangle aspect ratio support

▪ Modal image slider (lightbox style)

▪ Fully customizable styling options

This module is ideal for:

▪ Team showcase sections

▪ Portfolio galleries

▪ Agency websites

▪ Case study grids

▪ Photography showcases

▪ Corporate staff directories

The module is structured into three main parts:

Section Wrapper

• Optional boxed or full-width layout
• Background options:
  • Solid color
  • Gradient
  • Background image with overlay

Filter Navigation (Optional)

• "All" button
• Dynamically generated unique categories
• Active state styling
• Case-insensitive matching
• Clean deduplication logic

Image Grid

• Adjustable desktop columns (e.g., 2, 3, 4)
• Configurable gap between cards
• Optional shadow & border radius
• Adjustable aspect ratio:
  • Square (1:1)
  • Rectangle (custom ratio)

Advanced Category Filtering

• Automatically removes duplicate categories
• Supports case-insensitive filtering
• Custom default active filter option

Interactive Hover Overlay

On hover, each card can display:

• Title
• Subtitle
• Description (max 5 lines)
• CTA button
• Optional plus icon

Overlay supports:

• Custom background color
• Custom opacity
• Custom text alignment
• Smooth fade animation

Built-in Modal Gallery

If multiple images are attached to a card:

• Click plus icon
• Opens lightbox-style modal
• Arrow navigation
• Keyboard support
• Image counter

All styling options are controlled directly in the module settings.

Section Controls

• Section padding
• Section max width (Full / Boxed)
• Background image / gradient
• Background overlay opacity

Grid Controls

• Desktop column count
• Gap between cards
• Card border radius
• Card shadow toggle
• Aspect ratio selection

Filter Button Controls

• Filter text color
• Filter background color
• Active state color
• Border radius
• Gap between buttons

1. Navigate to your HubSpot account.

2. Go to the Design Tools section.

3. Select your template or page where you want to add the module.

4. Drag and drop the Image Gallery With Filter Module into your layout.

5. Customize the module settings to suit your design preferences.

6. Click Publish to apply changes.

The Advanced IT Portfolio Filter Module is a dynamic content filtering solution designed for technology-focused websites. It allows users to filter and display portfolio items, case studies, or service listings using two customizable dropdown filter groups.

The module includes:

• Two multi-select filter dropdowns
• Live filtering without page reload
• Load More functionality
• Search inside filter dropdowns
• No Results state handling
• Fully responsive layout

This module is ideal for:

• IT service providers
• SaaS companies
• Software agencies
• Technology consultants
• Digital product portfolios

• Dual Filter Dropdowns

  Two independent filter groups allow users to refine results by category (e.g., Industry + Service Type). The module is fully flexible — you can also disable one filter and use it as a single-filter layout based on your requirements.

• Multi-Select Filtering

  Users can select multiple options within each filter group.

• Live Filtering

  Results update instantly without refreshing the page.

• Load More Pagination

  Displays a limited number of results initially and loads additional items dynamically.

• No Results State

  Displays a customizable message when no matching results are found.

• Search Inside Filters

  Each dropdown includes a search field for quick option filtering.

• Fully Responsive

  Optimized for desktop, tablet, and mobile devices.

• Customizable Styling

  Easily adjust typography, spacing, colors, and layout from module settings.

Filter Settings

• First Filter Label
• First Filter Options (Repeater)
• Second Filter Label
• Second Filter Options (Repeater)
• Enable / Disable Second Filter

Results Settings

• Number of Items per Page
• Number of Items per Load More Click
• Enable / Disable Load More
• Show / Hide Category Label

Styling

• Typography
• Spacing
• Colors
• Border styles
• Button styles

Each content item is assigned filter identifiers.

When a user selects filter options:

1. The module checks matching identifiers.
2. Matching items are marked as active.
3. Only matched items are displayed.
4. Load More applies only to matched items.
5. If no items match, the No Results message appears.

The Gallery Image Marquee is a visually engaging, auto-scrolling image slider designed to showcase galleries, portfolios, brand visuals, or inspiration content in a modern and dynamic way.

This module features two continuous marquee rows that scroll infinitely in opposite directions, creating a smooth and eye-catching motion effect that enhances page aesthetics without user interaction.

Ideal for landing pages, homepages, and promotional sections, the module delivers a premium look while remaining lightweight and fully responsive.

• Dual Marquee Rows

  Displays two image sliders stacked vertically for a rich visual layout.

• Opposite Direction Scrolling
  • Top marquee scrolls left to right
  • Bottom marquee scrolls right to left

  This creates a dynamic and engaging parallax-like effect.

• Infinite Loop Animation

  Images scroll seamlessly without visible start or end points.

• Fully Responsive Design

  Optimized for desktop, tablet, and mobile devices with smooth performance across screen sizes.

• Customizable Image Gallery

  Easily add, remove, or reorder images directly from the HubSpot content editor.

• Pause on Hover (Optional)

  Allows users to focus on specific images by pausing the animation on hover.

Admins can customize the following settings in the design manager:

Customise the number of images shown per page and title style.

1. Navigate to your HubSpot account.

2. Go to the Design Tools section.

3. Select your template or page where you want to add the module.

4. Drag and drop the Image marquee module into your layout.

5. Customize the module settings to suit your design preferences.

6. Click Publish to apply changes.

The Full Page Slider Banner module is a versatile and fully customizable solution for creating impactful hero sections or landing page banners within HubSpot. Designed to grab user attention instantly, this module allows marketers and designers to showcase key messages, products, or promotions in a visually stunning and interactive format.

One of the core features of this module is the ability to choose between a background image or background video for each slide, giving you complete flexibility in how you want to engage your audience. Whether you want a static image with bold typography or a dynamic video background that creates an immersive experience, the choice is yours.

Each slide can be customized extensively. Users can add headings, subheadings, descriptive text, and call-to-action (CTA) buttons, ensuring every element aligns perfectly with their campaign goals and brand identity. Font styles, colors, alignment, and spacing can all be tailored directly within the HubSpot editor, so there’s no need for additional coding knowledge.

The module also offers two different slider styles to choose from, enabling you to adapt the look and feel of the banner to match your website’s design. Control styles such as navigation arrows and dots can be customized to fit your branding seamlessly. Additionally, the slider is fully responsive, ensuring an optimal experience across desktops, tablets, and mobile devices.

Built with performance in mind, this module ensures smooth transitions and minimal load times, even when using background videos. It supports multiple slides, making it ideal for campaigns that need to highlight several features, services, or announcements in one hero area.

Perfect for marketers who prioritize flexibility and ease of use, the Full Page Slider Banner module eliminates the need for complex custom development. All configurations—from media selection to styling—are handled directly within HubSpot’s intuitive drag-and-drop editor.

Whether you’re launching a product, promoting an event, or simply elevating your homepage, this module empowers you to deliver a professional, high-impact presentation that captivates visitors and drives engagement from the moment they land on your site.

Background Image or Video Support

• Easily choose between static images or dynamic videos as the slide background. This flexibility allows you to create visually rich hero banners that suit different campaign goals, from promotional announcements to immersive storytelling.

Fully Customizable Slide Elements

• Customize every part of the slide — headings, subheadings, descriptions, and CTAs — directly within HubSpot’s editor. Adjust fonts, colors, and alignment to perfectly match your brand without needing additional coding.

Responsive and Style Variations

• Select from two slider styles and customize navigation controls like arrows and dots. The module is fully responsive, ensuring seamless display and smooth transitions on desktops, tablets, and mobile devices.

Admins can customize the following settings in the design manager:

Banner background Images or background videos can Upload different visuals for each banner slide.

Every part of the slider controls can be customized for user convenience

1. Navigate to your HubSpot account.

2. Go to the Design Tools section.

3. Select your template or page where you want to add the module.

4. Drag and drop the Product Listing Module into your layout.

5. Customize the module settings to suit your design preferences.

6. Click Publish to apply changes.