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.