1. Introduction (Overview)

Masonry Gallery Pro is a flexible and responsive HubSpot gallery module designed to help you showcase images in a clean and modern masonry layout.

The module provides three gallery options: Simple Gallery, Popup Gallery, and Filter Gallery. You can add multiple images with optional titles and descriptions, display images in a popup, or allow visitors to filter gallery items by category.

You can also add a custom link to individual gallery items and use the Load More feature to display additional images without making the page feel crowded.

Masonry Gallery Pro is fully responsive and includes separate image height controls for desktop, tablet, and mobile, giving you better control over the gallery appearance on different screen sizes.

2. Key Features

• Simple Gallery – Display images with optional titles and descriptions.
• Popup Gallery – Open individual images in a clean popup view.
• Filter Gallery – Allow visitors to filter images by category.
• Optional Popup Content – Show or hide titles and descriptions in the popup.
• Multiple Gallery Items – Add multiple images and content within one module.
• Custom Links – Add a separate link to each gallery item.
• Load More – Display additional gallery items without making the page feel crowded.
• Masonry Layout – Create a modern gallery using different image heights.
• Responsive Image Height – Set different image heights for desktop, tablet, and mobile.
• Fully Responsive – Optimized for desktop, tablet, and mobile devices.

3. Installation – Downloading the Module from HubSpot Marketplace

• Log in to your HubSpot account.
• Go to the Marketplace from the main navigation menu.
• Search for your module by name.
• Find the module in the results and click Install.
• If it’s a paid module, you can also click Buy Now to purchase and install directly.

4. How to Use – Adding the Module to Your Page

• Open the HubSpot page editor and navigate to the page where you want to add the module.
• In the left sidebar, search for Masonry Gallery Pro.
• Drag and drop the module onto your desired section or column.
• Configure the module settings from the editor sidebar.
• Add your gallery images, titles, descriptions, and custom links as needed.
• Choose your preferred Simple, Popup, or Filter gallery option.
• Configure the Load More feature and gallery filters when needed.
• Adjust the image height for desktop, tablet, and mobile devices.
• Preview the page to make sure the gallery looks good across different screen sizes.
• Publish the page when everything looks good.

5. Module Settings Guide

Content Tab: 

Gallery

Add multiple gallery items with images, content, and optional custom links.

Hide Popup Content

Enable this option to hide the content displayed inside the image popup.

Disable Popup

Enable this option to disable the image popup when visitors click an image.

Load More Per Page

Set the number of gallery items to load each time the Load More button is clicked.

Gallery Item

Enable Content

Enable this option to display content with the gallery image.

Slogan

Add a short slogan or label to display with the gallery item.

Title

Add a title for the gallery item.

Description

Add a description to provide additional information about the gallery item.

Image

Select or upload an image to display in the gallery.

Enable Link

Enable this option to add a custom link to the gallery item.

 

2. Style Tab

Gallery Content

Customize the fonts, colors, text styles, and appearance of gallery content.

Load More

Customize the Load More button font, colors, text style, background, and hover effects.

Popup Modal

Customize the popup background, image display, content typography, and text styling.

Gallery Content Typography

Slogan Font
Customize the font, size, style, and color of the gallery slogan.

Heading Font
Customize the font, size, style, and color of the gallery heading.

Description Font
Customize the font, size, style, and color of the gallery description.

Image Height

Set maximum and minimum image heights for desktop, tablet, and mobile devices.

Load More Button

Text Font
Customize the font, size, style, and color of the Load More button text.

Background Color
Set the background color of the Load More button.

Box Shadow
Customize the box shadow of the Load More button.

Background Color – Hover
Set the background color displayed when visitors hover over the button.

Text Color – Hover
Set the text color displayed when visitors hover over the button.

Popup Modal

Background Color
Set the background color of the popup modal.

Image Object Fit Type
Choose how the image fits within the popup container.

Slogan Font
Customize the font, size, style, and color of the popup slogan.

Slogan Text Transform
Choose how the popup slogan text is displayed.

Title
Customize the popup title with font, size, style, and color settings.

Description
Customize the popup description with font, size, style, and color settings.

Close Icon Color
Set the color of the popup close icon.

Arrow Color
Set the color of the popup navigation arrows.

Popup Box Shadow

Customize the box shadow applied to the popup modal.

Zoom Icon

Zoom Icon Color
Set the color of the zoom icon displayed over gallery images.

Zoom Background Color
Set the background color behind the zoom icon.

Module Spacing

Margin Above
Set the space above the module.

Margin Below
Set the space below the module.

Padding
Adjust the internal spacing of the module.

Module Width Type
Choose how the module width is displayed within the page layout.

6. Examples / Demo Preview

View the module in action: https://www.modfrybus.shop/masonry-gallery-pro

7. Support & Contact

For questions or support, contact us at productqueriemodfrybus@outlook.com We’re happy to help!