---
title: Hubspot modules documentation
---

[Skip to content](https://limenzy.com/modules-documentation#main-content)

[![Limenzy Technologies Pvt Ltd](https://limenzy.com/hubfs/Logo-1.svg "Limenzy Technologies Pvt Ltd")](https://limenzy.com/)

- [Services](https://limenzy.com/our-services)
  
  ## The Catalyst for your Business Growth!
  
  [Go to overview](https://limenzy.com/our-services)

  ![design](https://limenzy.com/hubfs/Group%201000003068.svg)
  
   Design

    - [Logo Design](https://limenzy.com/logo-designing-company)
    - [Web Design](https://limenzy.com/web-design-company)
    - [Mobile App Design](https://limenzy.com/mobile-app-design)

  ![development](https://limenzy.com/hubfs/code.svg)
  
   Development

    - [Mobile Application](https://limenzy.com/mobile-application-development)
    - [Flutter Application](https://limenzy.com/flutter-app-development)
    - [Web Development](https://limenzy.com/web-development-company)
    - [Ecommerce website](https://limenzy.com/ecommerce-website-development)
    - [Software Development](https://limenzy.com/software-development)
    - [MERN Stack Development](https://limenzy.com/mern-stack-development)
    - [Vibe Coded Application](https://limenzy.com/fix-vibe-coding)
    - [AI Application](https://limenzy.com/ai-app-development)
    - [Wordpress](https://limenzy.com/wordpress-website-development)
    - [Shopify](https://limenzy.com/shopify-development)

  ![marketing](https://limenzy.com/hubfs/graph.svg)
  
   Marketing

    - [HubSpot](https://limenzy.com/hubspot-development)
    - [SEO](https://limenzy.com/seo-services-company)
- [Works](https://limenzy.com/our-works)
- [About](https://limenzy.com/about-us)
- [Careers](https://limenzy.com/careers)
- [Contact](https://limenzy.com/contact)
- ### Speak with a sales expert!
  
  Our team of experts is available around the clock to assist you in finding the perfect solution for your business.

  ![Phone](https://limenzy.com/hubfs/call-outgoing.svg)
  
  [+91 9496245337](tel:+91%209496245337)

  ##### [![Appointment](https://limenzy.com/hubfs/calendar-time.svg) Schedule an appointment. Based on your convenience you can book an appointment.](https://meetings.hubspot.com/vipinanandvp?uuid=9c89dec0-eda3-4145-a086-6205a615144e)

- [Services](https://limenzy.com/our-services)
  
  Show submenu for Services 
  
    - Design
      
      Show submenu for Design 
      
          - [Logo Design](https://limenzy.com/logo-designing-company)
          - [Web Design](https://limenzy.com/web-design-company)
          - [Mobile App Design](https://limenzy.com/mobile-app-design)
    - Development
      
      Show submenu for Development 
      
          - [Mobile Application](https://limenzy.com/mobile-application-development)
          - [Web Application](https://limenzy.com/web-development-company)
          - [Shopify](https://limenzy.com/shopify-development)
          - [Wordpress](https://limenzy.com/wordpress-website-development)
    - Marketing
      
      Show submenu for Marketing 
      
          - [Hubspot](https://limenzy.com/hubspot-development)
          - [SEO](https://limenzy.com/seo-services-company)
- [Works](https://limenzy.com/our-works)
- [About](https://limenzy.com/about-us)
- [Careers](https://limenzy.com/careers)
- [Contact](https://limenzy.com/contact)

- [Services](https://limenzy.com/our-services)
  
  Show submenu for Services 
  
    - Design
      
      Show submenu for Design 
      
          - [Logo Design](https://limenzy.com/logo-designing-company)
          - [Web Design](https://limenzy.com/web-design-company)
          - [Mobile App Design](https://limenzy.com/mobile-app-design)
    - Development
      
      Show submenu for Development 
      
          - [Mobile Application](https://limenzy.com/mobile-application-development)
          - [Web Application](https://limenzy.com/web-development-company)
          - [Shopify](https://limenzy.com/shopify-development)
          - [Wordpress](https://limenzy.com/wordpress-website-development)
    - Marketing
      
      Show submenu for Marketing 
      
          - [Hubspot](https://limenzy.com/hubspot-development)
          - [SEO](https://limenzy.com/seo-services-company)
- [Works](https://limenzy.com/our-works)
- [About](https://limenzy.com/about-us)
- [Careers](https://limenzy.com/careers)
- [Contact](https://limenzy.com/contact)

Modules Documentation

# Everything You Need to Know About Our HubSpot Modules.

Explore detailed guides, setup instructions, and best practices to maximize your module’s functionality and enhance your HubSpot experience.

[Key Points](https://limenzy.com/modules-documentation#key-points) [Image Gallery With Filter](https://limenzy.com/modules-documentation#image-gallery-with-filter) [Advanced Content Filter](https://limenzy.com/modules-documentation#advanced-content-filter) [Activity listing](https://limenzy.com/modules-documentation#activity-listing) [Review slider](https://limenzy.com/modules-documentation#review-slider) [Full page slider banner](https://limenzy.com/modules-documentation#full-page-slider-banner) [Journey Steps](https://limenzy.com/modules-documentation#journey-steps) [Products listing module](https://limenzy.com/modules-documentation#products-listing-module) [Image comparison slider](https://limenzy.com/modules-documentation#image-comparison-slider) [Image two columns](https://limenzy.com/modules-documentation#image-two-columns)

 Key Points

### Overview

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

### Layout Structure

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.

### Features

- 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

### Customization Options

The module provides advanced styling controls inside the HubSpot editor:

Section Settings

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

![Screenshot 2026-02-26 at 2.19.28 PM](https://limenzy.com/hs-fs/hubfs/Screenshot%202026-02-26%20at%202.19.28%20PM.png?width=300&height=747&name=Screenshot%202026-02-26%20at%202.19.28%20PM.png)

Background Settings

- Solid background color
- Gradient background option

![Screenshot 2026-02-26 at 2.19.53 PM](https://limenzy.com/hs-fs/hubfs/Screenshot%202026-02-26%20at%202.19.53%20PM.png?width=300&height=675&name=Screenshot%202026-02-26%20at%202.19.53%20PM.png)

Card Styling

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

![Screenshot 2026-02-26 at 2.20.29 PM](https://limenzy.com/hs-fs/hubfs/Screenshot%202026-02-26%20at%202.20.29%20PM.png?width=300&height=587&name=Screenshot%202026-02-26%20at%202.20.29%20PM.png)

 

All styling options are editable without writing custom CSS.

### How to Use

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

### Overview

**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

### Layout Structure

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)

### Features

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

### Customization Options

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

![Screenshot 2026-02-25 at 6.02.33 PM](https://limenzy.com/hs-fs/hubfs/Screenshot%202026-02-25%20at%206.02.33%20PM.png?width=300&height=654&name=Screenshot%202026-02-25%20at%206.02.33%20PM.png)

![Screenshot 2026-02-25 at 6.01.48 PM](https://limenzy.com/hs-fs/hubfs/Screenshot%202026-02-25%20at%206.01.48%20PM.png?width=300&height=495&name=Screenshot%202026-02-25%20at%206.01.48%20PM.png)

---

Grid Controls

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

![Screenshot 2026-02-25 at 6.03.57 PM](https://limenzy.com/hs-fs/hubfs/Screenshot%202026-02-25%20at%206.03.57%20PM.png?width=300&height=642&name=Screenshot%202026-02-25%20at%206.03.57%20PM.png)

---

Filter Button Controls

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

![Screenshot 2026-02-26 at 9.24.09 AM](https://limenzy.com/hs-fs/hubfs/Screenshot%202026-02-26%20at%209.24.09%20AM.png?width=300&height=460&name=Screenshot%202026-02-26%20at%209.24.09%20AM.png)

 

### How to Use

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.

 Advanced Content Filter

### Overview

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

### Features

- 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.

### Customization Options

Filter Settings

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

![content](https://limenzy.com/hs-fs/hubfs/Marketplace%20modules%20-%202025-26/content.png?width=1152&height=397&name=content.png)

 

Results Settings

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

![Group 2](https://limenzy.com/hs-fs/hubfs/Marketplace%20modules%20-%202025-26/Group%202.png?width=767&height=337&name=Group%202.png)

 

Styling

- Typography
- Spacing
- Colors
- Border styles
- Button styles

![Group 3](https://limenzy.com/hs-fs/hubfs/Marketplace%20modules%20-%202025-26/Group%203.png?width=1135&height=1079&name=Group%203.png)

 

### How Filtering Works

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.

 Activity listing

### Overview

The Activity Listing Module is a flexible content module designed to showcase multiple activities or offerings in a visually engaging layout. It features a main heading followed by a set of clickable activity cards. Each card highlights an activity with an image, title, and a short description revealed on hover, making it ideal for directing users to detailed pages or related content.

This module is well-suited for landing pages, service pages, and feature sections where visual storytelling and clear navigation are important.

### Features

- Main section heading to introduce the activity listing
- Repeater-based activity cards for easy content management
- Fully clickable activity cards that redirect to internal or external pages
- Smooth hover interaction to reveal additional information
- Responsive layout optimized for desktop, tablet, and mobile views
- Clean and modern design suitable for corporate and professional websites

### Module Structure

1\. Main Heading

A primary heading displayed at the top of the module to describe the overall purpose of the activity listing.

Editable fields:

- Heading text

2\. Activity Listing Items (Repeater)

Each activity item is displayed as a card containing an image and title. The entire card is clickable and redirects users to a specified page.

Editable fields per item:

- Activity image
- Activity title
- Activity link (URL)
- Short description (hover content)

### User Interaction

User Interaction

- Clicking on any activity card redirects the user to the linked page.
- The hover animation provides a preview of the activity content, encouraging engagement before navigation.

Hover Interaction Behavior

- On hover, the activity image smoothly transitions upward.
- A short description appears at the bottom of the card.
- The description is limited to a maximum of four lines to maintain visual consistency.
- The hover effect enhances interactivity without distracting from the overall layout.

Customization Options

- Easily add, remove, or reorder activity items using the repeater field
- Update images, titles, descriptions, and links without code changes
- Works seamlessly with dark or light themed pages

Responsive Behavior

- Cards adapt to different screen sizes
- Hover descriptions gracefully adjust on smaller screens
- Touch-friendly interaction on mobile devices

### How to Use

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 Activity listing Module into your layout.

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

6\. Click Publish to apply changes.

 Review slider

### Overview

The Reviews Slider Module is a flexible and visually engaging testimonial solution designed for the HubSpot Marketplace. It allows content editors to showcase customer reviews in a modern slider layout, with support for both text-based testimonials and video reviews.

This module supports video testimonials via Fancybox popups, where videos can be added from YouTube or uploaded as local video files. If video content is not available, the module can seamlessly switch to a text-only review layout, ensuring a clean and consistent design without empty or broken elements.

Each review card is fully customizable, allowing editors to adjust card colors, background colors, and progress bar colors to match their brand identity. The module is built to be responsive, user-friendly, and easy to manage—making it ideal for businesses that want to highlight customer feedback without requiring custom development.

Whether you’re displaying written testimonials, video reviews, or a mix of both, this module provides a polished and professional way to build trust and credibility on your HubSpot pages.

### Features

- Video & Text Reviews Support
  
  Display customer reviews as text testimonials or video reviews using Fancybox popups. Videos can be added via YouTube links or locally uploaded files.
- Optional Video Toggle
  
  Easily enable or disable video reviews. When videos are turned off, the module automatically displays a clean text-only review layout without breaking the design.
- Fully Customizable Design
  
  Customize card colors, background colors, text colors, and progress bar colors to perfectly match your brand identity.
- Smooth Slider Experience
  
  Reviews are displayed in a modern, smooth slider with progress indicators and navigation controls for an engaging user experience.
- Responsive & Editor-Friendly
  
  Optimized for all screen sizes and built with non-technical content editors in mind, making updates quick and easy inside HubSpot.

### Customization Options

Admins can customize the following settings in the design manager:

![review-sl1](https://limenzy.com/hs-fs/hubfs/Marketplace%20modules%20-%202025-26/review-sl1.png?width=685&height=594&name=review-sl1.png)

 

Video reviews can be optionally added

![review-sl2](https://limenzy.com/hs-fs/hubfs/Marketplace%20modules%20-%202025-26/review-sl2.png?width=223&height=419&name=review-sl2.png)

 

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

![review-sl3](https://limenzy.com/hs-fs/hubfs/Marketplace%20modules%20-%202025-26/review-sl3.png?width=870&height=560&name=review-sl3.png)

 

### How to Use

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 Review slider Module into your layout.

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

6\. Click Publish to apply changes.

 Full Page Slider banner

### Overview

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.

### Features

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.

### Customization Options

Admins can customize the following settings in the design manager:

![content fileds](https://limenzy.com/hs-fs/hubfs/content%20fileds.png?width=732&height=668&name=content%20fileds.png)

 

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

![slider content](https://limenzy.com/hs-fs/hubfs/slider%20content.png?width=693&height=404&name=slider%20content.png)

 

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

![slider controls](https://limenzy.com/hs-fs/hubfs/slider%20controls.png?width=915&height=314&name=slider%20controls.png)

 

### How to Use

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.

 Journey Steps

### Overview

The Listing Journey Steps module visually presents a three-step process to guide users through a typical listing experience. It’s designed to improve user engagement by clearly outlining the steps involved in listing a product, property, or service — making complex journeys easier to understand at a glance.

This module is ideal for websites in real estate, marketplaces, service platforms, and more where clear communication of multi-step processes is critical.

### Features

- Three-Step Visual Layout – Clearly defined, visually distinct steps.
- Color and Font Inheritance – Follows theme colors and fonts for consistent branding.
- Icons and Images – Each step supports icons or images for better visual guidance.
- Editable Titles and Descriptions – Fully customizable step content.
- Responsive Design – Mobile-friendly and optimized for all screen sizes.
- Theme-Compatible – Uses theme.primary\_color, theme.heading\_font, and other theme tokens to pass marketplace validation.

### Customization Options

Admins can customize the following settings in the design manager:

1\. Step Titles & Descriptions – Add custom content for each of the three steps.

![content](https://limenzy.com/hs-fs/hubfs/content.png?width=1175&height=565&name=content.png)

2\. Icons/Images – Upload different visuals for each step.

![icon](https://limenzy.com/hs-fs/hubfs/icon.png?width=1153&height=392&name=icon.png)

Colors – Inherit theme colors or apply custom overrides.

Typography – Inherit theme fonts or choose custom font settings.

Layout Options – Adjust alignment or spacing via module settings.

### How to Use

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 Journey Steps module into your layout.

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

6\. Click Publish to apply changes.

 Products listing module

### Overview

This module is designed for displaying product listings in a 4-column layout. Each product entry includes:

- Image: Showcases the product.
- Title: Displays the product name.
- Description: Provides brief details about the product.
- Price: Displays the product's cost.
- Favorite Icon: Heart-shaped icon to add the product to favorites.
- Buy Now Button: Directs the user to purchase the product.

### Features

- Fully customizable through HubSpot's module editor.
- Flexible styling options for seamless integration with your website's theme.
- Responsive design ensuring optimal display on all devices.

### Customization Options

1\. Image Settings

- Image size control.

2\. Title Settings

- Font size, color, and alignment customization.

3\. Description Settings

- Font size, color, and alignment customization.

4\. Price Settings

- Currency symbol and styling options.

5\. Favorite Icon Settings

- Change heart icon color as matches to your web site.

6\. Button Settings

- Text, background color, and hover effects.

### How to Use

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.

 Image Comparison Slider

### Overview

The Image Comparison Slider Module allows users to compare two images by sliding a divider left and right. This module is ideal for showcasing before-and-after images, product enhancements, or any visual transformations.

### Features

- Fully customizable through HubSpot's module editor.
- Interactive sliding functionality for seamless comparison.
- Responsive design ensuring an optimal display on all devices.
- Flexible styling options to match your website's theme.
- Smooth transition effects for a professional and engaging user experience.

### Customization Options

1\. Image Settings

- Upload two images for comparison (Before & After).
- Adjust image size and alignment (Use same sized image).

![image before](https://limenzy.com/hs-fs/hubfs/image%20before.png?width=195&height=260&name=image%20before.png) ![image after](https://limenzy.com/hs-fs/hubfs/image%20after.png?width=186&height=248&name=image%20after.png)

2\. Slider Settings

- Control slider handle color
- Customize the divider bar color.

![custom divisor](https://limenzy.com/hs-fs/hubfs/custom%20divisor.png?width=211&height=181&name=custom%20divisor.png)

3\. Label Settings

- Enable or disable labels on images (e.g., "Before" and "After").
- Customize label font size and color

![label style](https://limenzy.com/hs-fs/hubfs/label%20style.png?width=215&height=168&name=label%20style.png)

 

### How to Use

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 Comparison Slider module into your layout.

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

6\. Click Publish to apply changes.

 Image two columns

### Overview

The Image Two Columns module is a flexible, responsive custom HubSpot module designed to showcase images in either a single-column or two-column layout.

### Features

- Two Layout Options with Text on Hover: 
    - Single Column: Display one image centered on the page.
    - Two Columns: Display two images side by side, perfect for comparisons.
    - Display custom text when hovering over each image for added context or detail.
- Interactive Hover Effect: 
    - Show text and a button on hover with a customizable overlay background color—ideal for adding CTAs or extra info directly on the image.
- Customizable Image Fields: Upload different images for each column.
- Responsive Design: Optimized for mobile, tablet, and desktop.
- Compatible with HubSpot’s drag-and-drop page builder.

### Customization Options

1\. Grid Choice

- Single Column: Display one image centered on the page.
- Two Columns: Display two images side by side.
- Three Columns: Display three images side by side.

![three col grid](https://limenzy.com/hs-fs/hubfs/three%20col%20grid.png?width=245&height=367&name=three%20col%20grid.png)

2\. Title Settings

![title settings](https://limenzy.com/hs-fs/hubfs/title%20settings.png?width=246&height=322&name=title%20settings.png)

### How to Use

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 two columns module into your layout.

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

6\. Click Publish to apply changes.

[![Limenzy Technologies Pvt Ltd](https://limenzy.com/hubfs/Logo_cl_4%201.svg "Limenzy Technologies Pvt Ltd")](https://limenzy.com/)

 We are experts in Web app & Mobile App development with more than 12 years of professional experience, and 1000+ customers around the globe. 

### Office Address

Govt CyberPark, KSITIL SEZ, UB29, Sahya, Nellikode P.O, Kozhikode, Kerala-673 016, India

 Design

- [Logo Design](https://limenzy.com/logo-designing-company)
- [Web Design](https://limenzy.com/web-design-company)
- [Mobile App Design](https://limenzy.com/mobile-app-design)

 Development

- [Mobile Application](https://limenzy.com/mobile-application-development)
- [Flutter Application](https://limenzy.com/flutter-app-development)
- [Web Development](https://limenzy.com/web-development-company)
- [Ecommerce website](https://limenzy.com/ecommerce-website-development)
- [AI Application](https://limenzy.com/ai-app-development)
- [Wordpress](https://limenzy.com/wordpress-website-development)
- [Shopify](https://limenzy.com/shopify-development)

 Marketing

- [Hubspot](https://limenzy.com/hubspot-development)
- [SEO](https://limenzy.com/seo-services-company)

 Limenzy

- [Privacy Policy](https://limenzy.com/privacy-policy)
- [Terms and conditions](https://limenzy.com/terms-and-conditions)
- [Careers](https://limenzy.com/careers)
- [Pricing](https://limenzy.com/services-pricing)
- [FAQs](https://limenzy.com/faqs)

 Recognized by:

[![Trustpilot](https://6785497.fs1.hubspotusercontent-na1.net/hubfs/6785497/Group%201000003072.svg)](https://www.trustpilot.com/review/limenzy.com) [![Clutch](https://6785497.fs1.hubspotusercontent-na1.net/hubfs/6785497/Group.svg)](https://clutch.co/profile/limenzy-technologies#highlights)

 Proud Member of:

[![Nasscom](https://6785497.fs1.hubspotusercontent-na1.net/hubfs/6785497/Nasscom-logo-svg%201.svg)](https://nasscom.in/) [![Startup India](https://6785497.fs1.hubspotusercontent-na1.net/hubfs/6785497/Layer%202.svg)](https://www.startupindia.gov.in/) [![Kerala startup mission](https://6785497.fs1.hubspotusercontent-na1.net/hubfs/6785497/Group%201000003074.svg)](https://startupmission.kerala.gov.in/) [![Cafit](https://6785497.fs1.hubspotusercontent-na2.net/hubfs/6785497/Cafit.svg)](https://www.cafit.org.in/) [![Cyberpark](https://6785497.fs1.hubspotusercontent-na1.net/hubfs/6785497/cyberpark%201.svg)](https://www.cyberparkkerala.org/)

 US

 PA

 NL

 IN

All right are reserved © 2026 Limenzy Technologies Pvt Ltd

<https://api.whatsapp.com/send?phone=919496245337>

<https://www.facebook.com/limenzy/>

<https://x.com/limenzy1?lang=en>

<https://www.youtube.com/@limenzytechnologiespvtltd138>

<https://www.instagram.com/limenzy/?hl=en>

<https://www.linkedin.com/company/limenzy-technologies>

<https://api.whatsapp.com/send?phone=919496245337>