Overview
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.
Features
- 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.
Customization Options
Admins can customize the following settings in the design manager:
Customise the number of images shown per page and title style.
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 marquee module into your layout.
5. Customize the module settings to suit your design preferences.
6. Click Publish to apply changes.
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:
Video reviews can be optionally added
Every part of the slider controls can be customized for user convenience
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.
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:
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
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.
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.
2. Icons/Images – Upload different visuals for each step.
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.
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).
2. Slider Settings
- Control slider handle color
- Customize the divider bar color.
3. Label Settings
- Enable or disable labels on images (e.g., "Before" and "After").
- Customize label font size and color
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.
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.
2. Title 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 Image two columns module into your layout.
5. Customize the module settings to suit your design preferences.
6. Click Publish to apply changes.